6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

TypeScript

2022年5月17日 りあクト! 第8章 コンポーネントのメンタルモデル (p.126~)

Reactの差分検出処理エンジン Reactではstateの値とpropsの値に差分を検出すると、コンポーネントのレンダリング処理を再実行します。 stateとprops stateは、コンポーネントが持つ状態のことです。 stateでは、エラーがあるか、モーダルウィンドウが開いて…

2022年4月23日 りあクト! 第5章 Reactの組み込みコンポーネント(p.39~)

復習 トランスパイル 一つのプログラミング言語で書かれたプログラムのソースコードを別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。 BabelはES2015以降のJavaScriptやJSXをトランスパ…

2022年4月22日 りあクト! 第5章 JSXとコンポーネントの関係(p.35~)

JSXの基本構文 JSX構文 <MyComponent foo="bar">baz</MyComponent> コンパイルされると 以下のReact.createElementの形式に変換されます。 React.createElement(component, props, ...children) React.createElement(MyComponent, { foo: 'bar' }, 'baz'); React.createElementの実行結果が以下の…

2022年4月21日 りあクト! 第5章 JSXの書き方(p.29~)

JSXの基本文法 tsconfig.jsonのjsxオプション reactに設定している場合 JSXの記述はReact.createElement(...) のように変換されます。 createElement メソッドの上位モジュールのReactをインポートする必要があります。 react-jsxにしている場合 TypeScript4…

2022年4月18日 りあクト! 第5章 なぜReactはテンプレートを使わないのか(p.18~)

なぜReactはテンプレートを使わないのか JSファースト(思想) ReactではJavaScriptで一貫してviewのレンダリングも行います。 JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。 HTML テン…

2022年4月16日 りあクト! 第5章 JSXでUIを表現する(p.11~)

JSXとは 名前の由来は『JavaScript』と『XML』の組み合わせです。 XMLライクな記述を出来るようにしたECMAScript2015を構文拡張したものです。 JSXは、コンパイル後にReact.createElementになります。 React.createElementを実行すると、ReactElementオブジ…

2022年4月15日 りあクト! 第4章 TypeScriptの環境設定(p218~)

TypeScriptのコンパイルオプション tsconfig.json TypeScriptプロジェクトのコンパイラ設定を保存しておくためのファイルです。 コンパイルが実行される際、デフォルトではプロジェクトルート配下から順に探索し、最初に見つかったtsconfig.json ファイルが…

2022年4月14日 りあクト! 第4章 型定義ファイルはどのように探索されるか(p.215~)

npmのパッケージに含まれている型定義ファイルをプロジェクトに関連付ける方法は大きく分けて2つあります。 1. JavaScriptファイルと同じ階層に同じ名前で.d.ts拡張子の型定義ファイルを置く 例を挙げる『ky』というライブラリは、パッケージ内で同じ階層…

2022年4月12日 りあクト! 第4章 JavaScriptモジュールを TypeScript から読み込む(p.212~)

JavaScript モジュールを TypeScript から読み込む npmのリポジトリで提供されている多くのパッケージは、TypeScriptで書かれているものでも、TypeScriptのままで配布されているものはあまりありません。 (理由は以下) JavaScript環境との相互運用が簡単であ…

2022年4月11日 りあクト! 第4章 モジュールと型定義 TypeScript のインポート/エクスポート (p.207~)

TypeScriptのimport/export JavaScriptとほぼ同じで異なる点は2つあります。 TypeScriptのimportは拡張子を書くとエラーになる 同名の型を扱った場合の挙動 importで拡張子を書くとエラーになる理由 モジュールを解決する際に独自のルールで探索するからで…

2022年4月9日 りあクト! 第4章 型アサーションと型ガード asによる型アサーション (p.203~)

復習 in演算子は、指定したオブジェクト上に指定したプロパティがあるかを判定できます。 "プロパティ名" in オブジェクト; // true or false 型アサーション 型を断定するものです。as 断定する型とします。 コンパイラによる型の解釈を変えているだけで、…

2022年4月8日 りあクト! 第4章 型アサーションと型ガード 型ガードでスマートに型安全を保証する (p.203~)

型ガード if文の条件式などで型を判定して、スコープ内で型を保証することを型ガードと言います。 typeofやinstanceofを用いて型ガードを行う例を紹介します。 typeofによる型ガード const foo: unknown = '1,2,3,4'; if (typeof foo === 'string') { consol…

2022年4月7日 りあクト! 第4章 型アサーションと型ガード asによる型アサーション (p.201~)

型アサーションとは 開発者が型を断定することを、型アサーションと言います。型を断定することによって、コンパイラによる型チェックを強引に通すことができます。しかし、断定した型でコードが実行されるので、メソッドが呼び出せない等、予期せぬエラーが…

2022年4月5日 りあクト! 第4章 TypeScriptで型をご安全に 4-5 組み込みユーティリティ型(p.195~)

続: 組み込みユーティリティ型 NonNullableは型引数に渡した型からnull undefinedを取り除いてくれます。 NonNullable<T> type T1 = NonNullable<string | number | undefined>; type T2 = NonNullable<number[] | null | undefined>; const str:T1 = undefined; //compileerror! const arr:T2 = null; // compile error! R</number[]></string></t>…

2022年4月4日 りあクト! 第4章 TypeScriptで型をご安全に 4-5 条件付き型とテンプレートリテラル型(p.191~)

テンプレートリテラル型 TypeScriptでは、テンプレートリテラルを型定義として扱うことが出来ます。 type DateFormat = `${number}-${number}-${number}`; const date1: DateFormat = '2020-12-05'; const date2: DateFormat = 'Dec.5,2020'; // compile err…

2022年4月2日 りあクト! 第4章 TypeScriptで型をご安全に 4-5 条件付き型とテンプレートリテラル型(p.190~)

extends クラスやインターフェースの拡張に使われるextendsキーワードは型引数の表現にも使うことが出来ます。 const override = <T, U extends T>(obj1: T, obj2: U): T & U => ({ ...obj1, ...obj2, }); override({a: 1}, {a: 2, b: 8}); // { a: 2, b: 8 } override({a: 2</t,>…

2022年4月1日 りあクト! 第4章 TypeScriptで型をご安全に 4-5 さらに高度な型表現(p.186~)

keyof演算子 通常の式では使えず、型コンテキストのみで用いられる演算子です。オブジェクトの各キーを列挙した共用体型になります。 const permissions = { r: 0b0100, w: 0b010, x: 0b001, }; // typeof permissionsで、オブジェクトの型が取得できます。 …

2022年3月31日 りあクト! 第4章 TypeScriptで型をご安全に 4-5 さらに高度な型表現(p.186~)

typeof演算子 console.log(typeof 100); //'number' const arr = [1, 2, 3]; console.log(typeof arr); //'object' type NumArr = typeof arr; const val: NumArr = [4, 5, 6]; const val2:NumArr=['foo','bar','baz']; 変数arrに[1, 2, 3]を代入(ここで型推…

2022年3月29日 りあクト! 第4章 TypeScriptで型をご安全に(p.183~)

型のNull安全性を保証する TypeSctriptはデフォルトの設定では全ての型にnullとundefinedを代入出来てしまいます。 これではnull安全性が保証されず、静的型付け言語を使っているのに実行エラーが頻発しかねません。 厳密にnullやundefindと他の型を厳密に区…

2022年3月28日 りあクト! 第4章 TypeScriptで型をご安全に(p.177~)

型エイリアス VS インターフェース 型エイリアスの場合 type Yuno = 'Yui'; type Yuno = 'Yano'; // エラーになります。 インターフェースの場合 interface Yuno { Yui: string; } interface Yuno { Yano: string; } 型エイリアスとインターフェースの違いを…

2022年3月26日 りあクト! 第4章 TypeScriptで型をご安全に(p.174~)

クラスの2つの顔 TypeScriptには、クラスの型を抽象化して定義する方法が2つあります。 abstract修飾子を用いて抽象クラスを定義する方法 インターフェースを使用する方法 abstract修飾子 abstractは抽象クラスを定義する修飾子です。 抽象クラスとは、そ…

2022年3月25日 りあクト! 第4章 TypeScriptで型をご安全に(p.171~)

アクセス修飾子 アクセス修飾子をプロパティの宣言時につけるとそのプロパティがどこからどこまでアクセスできるのかを指定できます。 アクセス修飾子を何も指定しない場合は、暗黙的にpublicとなります。 アクセス修飾子 内容 public 自クラス、子クラス、…

2022年3月24日 りあクト! 第4章 TypeScriptで型をご安全に(p.169~)

関数の型宣言にジェネリクスを用いる記法 const toArray = <T>(arg: T, arg2: T): T[] => [arg1, arg2]; toArray(8, 3); 第一引数の実引数が型推論されてTがnumber型になります。 このTは型引数(Type Prameter)でありアルファベットは何を使用しても構いません</t>…

2022年3月22日 りあクト! 第4章 TypeScriptで型をご安全に(p.162~168)

タプル型 タプル型とは タプル型とは、配列内の要素の型と、その順番や個数があらかじめ指定できる特殊な配列の型です。要素の型は、それぞれの要素ごとに決めることが出来ます。 レストパラメーターを使うと、いくつでも引数を受け取ることができるようにな…

2022年3月21日 りあクト! 第4章 TypeScriptで型をご安全に(p.149~162)

4-1. TypeScript はイケイケの人気言語? TypeScriptは、AltJS (JS) の代替言語。最終的にコンパイラによってJSのコードに変換されます)の1つです。Alternative JavaScriptの略で別のJavaScriptという意味になります。 GitHut というサイトでは、最新の2020…