サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Appleイベント
typescriptbook.jp
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか?その答えはJavaScriptの歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代JavaScriptの誕生JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ
TypeScript解読アシスタントこれはTypeScriptのコードリーディングを支援するツールです。 既存TypeScript案件に参加した際に、既存コードを読むにあたって、次のような悩みを解決するためのものです。 TypeScriptの構文がよくわからない「??って何?」「#nameの#ってコメント?」「<></>って何?」言語機能の名前がわからず、調べようがない「string | undefinedの|ってなんて名前?」「value as anyってなんて機能?」「[K: string]: stringって何?」使い方左のエディターに解読したいTypeScriptをコピペする解読したいコード部分をクリックする右エリアにコードの意味などが表示されるサンプルコード入力するコードがない場合はサンプルコードでお試しください。 サンプルコード機密情報コードはすべてオフラインで処理され、サーバ
JavaScriptやTypeScriptのコードには?.のような記号やasのようなキーワードが使われます。こういった記号やキーワードはGoogleで検索しづらく、意味を調べるのは難しいものです。 この索引は、JavaScriptとTypeScriptの記号やキーワードから、その名前や意味を調べられるようにするためのものです。コードを読んでいて未知の記号やキーワードに出くわしたら、その意味や使い方を調べる手がかりにしてください。 ここで扱う記号とキーワードには、JavaScript由来のもの、つまり、JavaScriptとTypeScriptに共通して使えるものと、TypeScriptでのみ使えるものを併記しています。JavaScript由来のものにはのマークを、TypeScript固有のものにはマークを表示しています。 記号! 論理否定演算子 (logical not operator
型システムの背景理論プログラミング言語の型システムにはそれぞれ固有の世界観があり、言語ごとに型の機能が異なります。 その一方で複数の言語で共通している機能もあり、それらのさまざまな型の機能は唐突にどこからともなく出現してきたわけではありません。背景として大きくは型理論(type theory)と呼ばれる数学的な研究分野があり、各言語の型システムは型理論に基づいて実装されています。 たとえば、TypeScriptのunknown型やnever型のような一見何のためにあるか分からないような型であっても、型理論においてはその役割や機能を一般的に説明することができます。これらの型はトップ型やボトム型と呼ばれる型の種類に分類され、部分型関係が作る階層構造の両端点に位置する型として振る舞います。 部分型階層の両端点に位置する型型理論的な観点からの知識を持つことで似たような型システムを持つ他の言語にお
実務でアプリケーションを作る場合、複数のJavaScriptファイルを組み合わせて、ひとつのアプリケーションを成すことが多いです。いわゆるモジュール指向の開発です。ここではJavaScriptとTypeScriptでのモジュールと、モジュール同士を組み合わせるためのimport、export、requireについて説明します。 スクリプトとモジュールJavaScriptのファイルは大きく分けて、スクリプトとモジュールに分類されます。スクリプトは普通のJavaScriptファイルです。
本章では、ESLintイーエスリントを使って、TypeScriptをチェックするためのノウハウをチュートリアル形式で学びます。 本章で学べること本章では次のことを学んでいただきます。 コーディング規約の必要性とコーディング規約の問題点ESLintでJavaScriptやTypeScriptをチェックする方法ESLintのルールの設定のしかたAirbnbのコーディング規約をESLintで活用する術エラーを解消する方法チェックを部分的に無効化する方法VS CodeやJetBrains IDEとESLintを統合する方法チュートリアルをやり終えると、ご自身のプロジェクトにESLintを導入できるようになったりと、実務で役立つ基本的なスキルが身につくはずです。 本章の流れと読み進め方本章は次の3部構成です。 背景知識ESLintでJavaScriptをリントしようESLintでTypeScri
自身のプロジェクトでTypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えます。しかし外部のパッケージ(npm)を利用する場合は型定義ファイルが含まれているとは限りません。 型定義ファイルとは型定義ファイルとはアクセス可能な宣言を記述したファイルです。拡張子は.d.tsです。 型定義ファイルは主にパッケージを配布するために作成されます。TypeScriptはJavaScriptにコンパイルされるときに型情報は無くなってしまいます。そのままJavaScriptパッケージを利用すると型定義の恩恵を得ることができません。しかし型定義ファイルを同梱することにより補完やコードチェックとして利用することができます。 残念なことにnpmに公開されているすべてのパッケージに必ずしも定義ファイルが存在するとは限りません。こちらに関しては型定義
コピーこれらのクラスは、walkメソッドを持つ点で似ています。このようなとき、Person型とDog型は「互換性がある」とみなすことができるでしょうか。それとも、まったく異なる型として扱うべきでしょうか。 こうした問題を扱うために、プログラミング言語はさまざまな型システムを採用しています。どのように型を区別すべきか、また、どのように型同士の互換性を判断するべきか、このような観点から型システムの仕様を考える必要があります。TypeScriptでは、「構造的型付け」という型システムが採用されています。構造的型付けがどのように型を区別し、逆にどのように型同士に互換性があると判断するのか、こうした言語仕様を知ることは、よいコードを書くために役立ちます。 型の区別に関する2つのアプローチプログラミング言語における型の区別や互換性の判定には、主に次の2つのアプローチが存在します。 名前的型付け構造的
コピーtsconfig.jsonが作成されます。すでにtsconfig.jsonがある時は上書きされませんのでいったん既存のtsconfig.jsonを別名に変更するなど、一度tsconfig.jsonと名のつくファイルが存在しないようにしてください。 公式にあるtsconfig.jsonの説明はこちらです。 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html すべてのオプションの解説をすると余白が足りないので、ここでは用途を抽出して、次の観点で説明します。 targetの決め方フロントエンドとバックエンド2020年版スクラッチからつくるならtargetTypeScriptは最終的にJavaScriptにコンパイルされます。このオプションはそのときにどのバージョンのJavaScript向けに出力するかといったもの
多くのプログラミング言語で「値がない」を表現する方法は、nullなど1通りです。しかし、JavaScriptでは「値がない」に相当する表現にnullとundefinedの2通りがあります。他の言語からJavaScriptに来た人が驚き、使い分けに悩む部分です。ここでは、nullとundefinedの仕様上の違い、実際のコーディングでどう使い分けるべきかについて説明します。 意味合いの違いundefinedとnullは大きなくくりで「値がない」ことを意味する点は共通しています。意味的な違いがあるとしたら、undefinedは「値が代入されていないため、値がない」、nullは「代入すべき値が存在しないため、値がない」という微妙な違いです。 この意味的な違いを厳密につきつめてコーディングするのは、入門者には難しいものです。使い分けに客観的な基準があるわけではないためです。もしどちらを使うべきか
TypeScriptの列挙型(enum)にはいくつか問題点が指摘されていてます。ここでは、その問題点と代替手段を説明します。 列挙型の問題点列挙型はTypeScript独自すぎるTypeScriptは、JavaScriptを拡張した言語です。拡張といっても、むやみに機能を足すのではなく、追加するのは型の世界に限ってです。こういった思想がTypeScriptにはあるため、型に関する部分を除けば、JavaScriptの文法から離れすぎない言語になっています。 JavaScriptの文法からドラスティックに離れたAltJSもあります。その中で、TypeScriptが多くの開発者に支持されているのは、JavaScriptから離れすぎないところに魅力があるからというのもひとつの要因です。 TypeScriptの列挙型に目を向けると、構文もJavaScriptに無いものであるだけでなく、コンパイル
TypeScriptを学習するとき、TypeScriptそのものを理解することは不可欠です。しかし、それだけでは実務上不十分なことが多いです。実際の現場では、TypeScriptに数多くの技術スタックを組み合わせて、開発を行うからです。そのため、TypeScriptを知ると同時に、TypeScriptをとりまくエコシステムを知ることが重要になってきます。 前項のTypeScript誕生の背景が歴史学だとすると、本項は地理学です。フロントエンドの技術スタックを中心に、TypeScriptとの関わりや、各技術の役割について俯瞰的に学びます。 言語JavaScriptの仕様を定義したのがECMAScriptです。ECMAScriptはJavaScriptのコア部分の仕様を扱います。ブラウザ関連のJavaScript仕様を定めるのがWHATWGです。また、XMLの構文をJavaScriptに書け
本章では、TypeScriptの言語機能をひとつひとつ解説します。解説の範囲はTypeScriptに留まらず、JavaScriptについても必要なものを解説します。これは、TypeScript学習者がJavaScriptも並行して学ぶことが多いためです。 どの機能がTypeScriptのものか、JavaScriptのものかがわかるように配慮しています。JavaScriptの機能については「JavaScriptの〜は」などと、TypeScriptの機能については「TypeScriptの〜は」などのように言語名を文中に記すようにしています。言語名が随所に出てくるため、読んでいてくどいと思われるかもしれませんが、どの機能がどちらの言語のものかを明確に理解しておくことは重要なので、ご辛抱いただければ幸いです。 本章の流れは、コード上の小さいパーツから大きいパーツに行くように構成しています。値や変数
TypeScriptには本書や開発元のMicrosoftが提供しているものを含め、学習や調査に役立つ数多くのリソースが存在しています。 このページでは本書の解説を読んだ後や、読んでいる途中でも利用できるTypeScriptについての情報源を紹介します。さらにこのページの後半では学習や開発において非常に重要となる公式ドキュメントについて構造と読み方などを含めた攻略方法を解説します。
このチュートリアルでは、TypeScriptとReactの両方を用いて、SNSでよく見かける「いいねボタン」のUIを実装します。 本チュートリアルは、TypeScriptとReactによるコーディングの体験をすることを主眼に置いています。そのため、TSとReactの理論的な説明は省きます。「TypeScriptとReactでUIを開発するにはどのような流れになるのか」を感じ取って頂くことを目的としています。 Reactの専門書と比べて、本書の解説は詳しさや正確さは劣ります。それでも、初めてReactに触れる方でも読み進められるよう、Reactについて随時ワンポイント解説をしていくので、安心してお読みください。 このチュートリアルで作成するいいねボタンの最終的な成果物はデモサイトで確認できます。チュートリアルを開始する前に事前に触ってみることで、各ステップでどんな実装をしているかのイメージが
ECMAScriptはJavaScriptの仕様です。TypeScriptもECMAScriptに準拠しています。ECMAScriptとは何なのか、仕様改定のプロセス、ECMAScriptとブラウザの関係がどのようになっているかについて解説します。 JavaScriptとECMAScriptの関係ECMAScriptはJavaScriptの仕様を定義したものです。仕様とは決まりごとのことで、ブラウザなどがJavaScriptを読み込んだときに、どのような文法を解釈しなければならないか、処理がどのように動くべきかといったことを決めたものです。ECMAScriptという異なる名前がついていますが、JavaScriptと別の言語があるわけではありません。 歴史的には、JavaScriptを標準化するべく、ECMAScriptが策定されました。JavaScriptはNetscape社が開発した言
TypeScriptの関数は1値のみ返却可能です。戻り値に複数の値を返したい時に、配列に返したいすべての値を入れて返すことがあります。なお次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
型の安全性とコードの共通化の両立は難しいものです。あらゆる型で同じコードを使おうとすると、型の安全性が犠牲になります。逆に、型の安全性を重視しようとすると、同じようなコードを量産する必要が出てコードの共通化が達成しづらくなります。こうした問題を解決するために導入された言語機能がジェネリクスです。ジェネリクスを用いると、型の安全性とコードの共通化を両立することができます。 ジェネリクスが解決する問題ジェネリクスが具体的にどのような問題を解決するのか見ていきましょう。ここに、chooseRandomlyString()という普通の関数があります。この関数は、2つの文字列を引数に受け取り、五分五分の確率で第1引数か第2引数の値を抽選して返します。
JavaScriptの関数は、関数宣言、関数式、アロー関数の3通りの方法で作れます。 アロー関数は後発JavaScriptの歴史を紐解くと、元々は関数宣言と関数式しかありませんでした。この2つの機能上の違いはほぼありません。この2つはまとめて「従来の関数」と呼びます。アロー関数は、従来の関数の問題点を解決するために、あとで導入されたものです。 構文の簡潔さ従来の関数は構文の長さが問題でした。JavaScriptではよくコールバック関数を書きます。コールバック関数とは、関数の引数として渡される関数を言います。従来の関数は、関数を書くたびにfunctionキーワードを書く必要があります。処理が1行だけでも、複数行要するコーディングスタイルもあります。書くのも読むのもわずらわしいコードになりがちです。一方で、アロー関数は短くシンプルな記述になります。
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
コピーこの章では、インターフェースと型エイリアスの違いについて詳しく説明していきます。 インターフェースと型エイリアスの違い内容インターフェース型エイリアス
Pick<T, Keys>は、型TからKeysに指定したキーだけを含むオブジェクトの型を返すユーティリティ型です。 Pick<T, Keys>の型引数T型引数Tにはオブジェクトの型を代入します。 KeysKeysにはオブジェクトの型Tのプロパティキーを指定します。object型Tに存在しないプロパティーキーを指定するとコンパイルエラーになります。 Pickの使用例
ここではJavaScriptのプロトタイプベースの概要を説明します。JavaやPHPなどでクラスを使ったことがある方や、オブジェクト指向プログラミングに触れたことがある方を念頭に書いています。また、ここでは主に次の疑問に答えていきます。 プロトタイプベースとはどのような考え方なのか?プロトタイプベースのJavaScriptは、クラスベースのPHPやJavaとどんなところが違う?なぜJavaScriptはプロトタイプベースを採用したのか?プロトタイプベースの利点は何か?オブジェクトの生成オブジェクト指向プログラミング(OOP)では、オブジェクトを扱います。オブジェクトを扱う以上は、オブジェクトを生成する必要があります。 しかし、オブジェクトの生成方式は、OOPで統一的な決まりはありません。言語によって異なるのです。言語によりオブジェクト生成の細部は異なりますが、生成方法は大きく分けて「クラ
コピーこのように、プリミティブ型をまるでオブジェクトのように扱えるのはJavaScriptの特徴です。JavaScriptには、プリミティブ型をオブジェクトに自動変換する機能があります。この機能はオートボクシング(autoboxing)、自動ボックス化と呼ばれます。 📄️ ボックス化多くの言語では、プリミティブは一般的にフィールドやメソッドを持ちません。プリミティブをオブジェクトのように扱うには、プリミティブをオブジェクトに変換する必要があります。プリミティブからオブジェクトへの変換をボックス化(boxing)と言います。 プリミティブ型の種類プリミティブ型は次の7つがあります。 boolean型(論理型): trueまたはfalseの真偽値。number型(数値型): 0や0.1のような数値。string型(文字列型): "Hello World"のような文字列。undefined型
メインコンテンツまでスキップ国内最大級のTypeScriptカンファレンス! TSKaigi・2024/5/11(土)📄️ 関数宣言関数宣言はJavaScriptで関数を定義する構文です。 📄️ 関数式関数式はJavaScriptで関数を作る方法のひとつで、function式を用います。 📄️ アロー関数アロー関数(arrow function)はJavaScriptの関数を作る方法のひとつです。 📄️ 関数の型の宣言TypeScriptでは、関数の型を宣言できます。関数の型の宣言とは、関数の実装を示さずに、関数のインターフェースを定義することです。 📄️ 関数宣言と巻き上げJavaScriptの関数宣言と関数式の違いが現れるひとつの例は巻き上げ(hoisting)です。関数宣言には巻き上げがあり、関数式には巻き上げがありません。 📄️ 従来の関数とアロー関数の違いJavaSc
Record<Keys, Type>はプロパティのキーがKeysであり、プロパティの値がTypeであるオブジェクトの型を作るユーティリティ型です。 Record<Keys, Type>の型引数Keysオブジェクトのプロパティーキーを指定します。Keysに代入できる型は、string、number、symbolとそれぞれのリテラル型です。 Typeオブジェクトのプロパティの値の型を指定します。任意の型が代入できます。 Recordの使用例キーがstringで値がnumberのインデックス型を定義する。
Partial<T>は、オブジェクトの型Tのすべてのプロパティをオプションプロパティにするユーティリティ型です。 Partial<T>の型引数T型引数Tにはオブジェクトの型を渡します。 Partialの使用例
フロントエンドでもバックエンドでもTypeScriptこれ一本!Universal JSという考えがあります。確かにフロントエンドを動的にしたいのであればほぼ避けて通れないJavaScriptと、バックエンドでも使えるようになったJavaScriptで同じコードを使いまわせれば保守の観点でも異なる言語を触る必要がなくなり、統一言語としての価値が大いにあります。 しかしながらフロントエンドとバックエンドではJavaScriptのモジュール解決の方法が異なります。この差異のために同じTypeScriptのコードを別々に分けなければいけないかというとそうではありません。ひとつのモジュールをcommonjs, esmoduleの両方に対応した出力をするDual Packageという考えがあります。 Dual Packageことはじめ名前が仰々しいですが、やることはcommonjs用のJavaSc
次のページ
このページを最初にブックマークしてみませんか?
『TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く