これからTypeScriptの学習始めたい人の中には、どのような学習教材を選択するべきか悩むことはないでしょうか？
- どんな学習教材を選べばいいかわからない
- プログラミング言語の基礎から学びたい
- 基礎のあとに何を学んでおくべきか知りたい
上記のようなTypeScript学習への悩みがあれば、目的別におすすめできる本を紹介していきます。
TypeScriptにおける手段別の学習方法
読者によっては、TypeScriptの学習において最適な手段を選択するべきです。
以下の手段から考えると、TypeScriptにおけるおすすめな学習教材の選択が変わります。
- テキスト型教材
- 動画視聴型教材
どちらにおいてもTypeScriptを学習できる内容ではありますが、より読者のタイプを考えると以下の入り方も合わせて取り入れましょう。
文法レベルから学ぶTypeScript
多くのテキスト型教材は、TypeScriptの文法レベルから学ぶことが大半です。
実際に、基礎を押さえられていない初学者は、意図を理解していないコード記述になりいわゆるコピペプログラマーになります。
そのため、基本的な文法やコード規約・オブジェクト指向といった基礎固めからじっくり始めたい人はテキスト型教材がおすすめです。
開発体験型から学ぶTypeScript
一方で、アプリケーション開発から取り組むのも最適な学習手段の一つです。
なぜなら、基礎学習で挫折してしまうと開発までたどり着けず、プログラミング学習を断念するケースが多いからです。
また、プログラミングは開発こそが楽しいわけで、基礎学習だけではモチベーション維持が困難です。
そのため、始めは教材の手順に沿って写経し、あとからコードの意図を調べる開発体験型学習もおすすめです。
TypeScriptの学習難易度
TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。
つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。
また、学習難易度は比較的高めですが、利用するべきメリットも存在します。
さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。
TypeScriptはなぜ人気なのか？
JavaScriptに対してコンパイルし利用する言語を「AltJS」と呼び、TypeScriptもその一種になります。
多くのAltJSの中でもTypeScriptは、最も人気な言語の一つです。（ランキングトップクラス）
実際に、「Stack Overflow」や「The State of JavaScript」など様々なアンケート調査・サイトで人気度の高さを誇っています。
他にも以下のポイントで人気を博しています。
- ネット上における圧倒的な情報量
- エコシステムの充実度
- TypeScriptによる就職採用率
さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。
TypeScriptの学習教材
現在、TypeScriptに限らずプログラミング言語学習の方法は多岐に渡ります。
- Google検索結果の上位サイトを参考にする
- Progateやドットインストールなどの無料学習サイト
- TypeScriptにおける公式ドキュメントやチュートリアル
- YouTubeやUdemyなどの動画学習教材
上記内容に沿って、TypeScriptの学習を進めている人もいるかと思います。
ただ、学習内容が合っていても学習しやすいとは限らず、視聴時間や取り組みやすさの違いによって挫折することもあります。
そのため、金額的にもリーズナブルで何度も手元で読み返せる本がおすすめとして挙げられます。
ここでは、以下の書籍を紹介します。
- プロを目指す人のためのTypeScript入門
- 図解！TypeScriptのツボとコツがゼッタイにわかる本
- モダンJavaScriptの基本から始めるReact実践の教科書
- ゼロからわかるTypeScript入門
- TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- 現場で使えるTypeScript詳解実践ガイド
- 作って学ぶ Next.js/React Webサイト構築
それぞれの書籍について、概要などを解説します。
プロを目指す人のためのTypeScript入門
TypeScriptのおすすめ本として挙げられるのが、「ブルーベリー本」と検索されることもある「プロを目指す人のためのTypeScript入門」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- イントロダクション（TypeScriptとは）
- 基本的な文法・基本的な型
- オブジェクトの基本とオブジェクトの型
- TypeScriptの関数
- TypeScriptのクラス
- 高度な型
- TypeScriptのモジュールシステム
- 非同期処理
- TypeScriptのコンパイラオプション
上記の9章に大枠として分けられており、TypeScriptの基礎を徹底的に学習することができます。
おそらく、基礎学習において１行ごとに解説している本は珍しく少ないです。
基本的に初学者にとって「動くサンプルコードが欲しい。」などを期待されますが、本書は一線を画します。
本書の前書きにも、「なんとなく書いたコードがなんとなく動いて楽しい」というのがゴールではないと記載されています。
そのため、コードの処理内容に対する意味を追求している初心者のための本として、非常にお勧めになります。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- 初心者が思う「なぜ？」を丁寧に解説
- 基礎学習後の次ステップの道しるべが記載されている
- TypeScriptの実務レベルにおけるメリットが分かる
やはりプログラミング初心者にとって「なぜ？」の疑問点をコードレベルで解決できるのはおすすめできるポイントになります。
また、基礎学習後にどのようなフレームワーク・開発ツール・理解しておくべき概念など、学習の道しるべも記載されています。
さらに、イントロダクションからTypeScriptをなぜ実務で利用すべきかといったメリットも記載されており、フロントエンドエンジニアにとって学ぶべき理由が明確化されています。
図解！TypeScriptのツボとコツがゼッタイにわかる本
次に紹介するのが「図解！TypeScriptのツボとコツがゼッタイにわかる本」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
＜前半部分＞
- 開発環境の準備
- オブジェクト
- クラス
- モジュール
- その他機能
＜後半部分＞
- ブラウザアプリ開発（シューティングゲーム）
本書の中心となるコンセプトは、「解説に沿ってプログラムを編集・実行する体験型の学習書」になります。
プログラミングにおいて重要な要素となるオブジェクト・クラス・モジュールの概念を重点的に解説されています。
そのため、ブラウザアプリ開発まで進むと、前半部分で学習した概念がクリティカルに利用されており、なぜアプリ開発に必要な概念だったか体験ベースで理解することができます。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- 図解が非常に多く視覚的に理解ができる
- 体験型の学習によって基礎がどのように応用されるか分かる
- プログラムの実践的な実装方法が身につく
特におすすめしたいのが「図解による視覚化」が多用されているポイントです。
基礎学習とブラウザアプリ開発のどちらにおいても、適宜ビジュアル化された解説があるため、コード群の意図が分かります。
また、体験型であるため、基礎学習で学んだ各種概念をどのように応用してアプリ化しているか読み返しできるのもよいです。
さらに、基礎文法や型をどのように実装し、アプリまで昇華させているのか理解できるため、実践的な実装方法がすぐに身に付きます。
プログラミング実践編はまだ早いかもしれないと感じる人は、超入門編からTypeScriptが学べます。
非常に丁寧な解説でTypeScriptの基礎から学べるため、超入門から段階的に学習するのもおすすめです。
モダンJavaScriptの基本から始めるReact実践の教科書
次に紹介するのが「モダンJavaScriptの基本から始めるReact実践の教科書」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- モダンJavaScriptの基礎
- モダンJavaScriptの機能に触れる
- JavaScriptでのDOM操作
- Reactの基本
- ReactとCSS
- 再レンダリングの仕組みと最適化
- グローバルなState管理
- ReactとTypeScript
- カスタムフック
- React×TypeScript実践演習
一度TypeScriptを軽く調べたことがある人であれば分かるかと思いますが、TypeScriptは「JavaScript + 静的型付け」になります。
つまり、静的型付け以外の部分はJavaScriptそのものになります。
そのため、TypeScriptを理解するということはJavaScriptを理解する必要があるため、本書を紹介しました。
特に、TypeScriptとJavaScript両方において多用されるフレームワークであるReactを集中学習できるのがおすすめするポイントです。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- TypeScriptで利用するReactが学べる
- フロントエンド開発の基礎学習ができる
- 実践演習によってCRUD機能を理解できる
最もおすすめできるポイントは、Reactを学べる点です。
TypeScriptを利用する上でReactといったフレームワークを理解することが重要であり、Webサイト/Webシステム開発に活用できる知識を獲得できます。
また、フロントエンド開発においてSPA（シングルページアプリケーション）は必須であり、実務で必要な概念を習得できます。
さらに、実践演習にて最も基本的なToDoアプリを開発しますが、最も理解すべきCRUD機能を確認できます。
ゼロからわかるTypeScript入門
次に紹介するのが「ゼロからわかるTypeScript入門」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- TypeScriptの基本文法
- Web APIの利用方法
- 非同期アプリケーションの開発
特に、APIとJSONを利用した非同期アプリケーションは近年のアプリ開発では必須の技術になります。
また、TypeScriptの学習本としては珍しく”ゼロから”と書かれている通り、プログラミング未経験でも取り組みやすい解説になっています。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- 読み手のOSを選ばず丁寧な環境構築から開始できる
- JavaScriptの習熟度を前提としていない
TypeScriptはJavaScriptの習熟度によって理解が変化する可能性がありますが、習熟度を前提として書かれていないためまさにゼロから学べます。
そのため、JavaScriptの入門書としても非常にわかりやすい部類の本になります。
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
次に紹介するのが「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- TypeScriptの基本文法
- ライブラリReactの使い方
- フレームワークNext.jsの使い方
- コンポーネント中心の開発
特に、ライブラリであるreactとフレームワークであるNext.jsに合わせてTypeScriptによるフロントエンド開発を学べます。
TypeScriptに留まらず、より開発現場で利用されるライブラリとフレームワークにおける学習ができる点が魅力的です。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- テスト/デプロイ/セキュリティなどフルスタック開発
- TypeScriptに関わるエコシステムを理解できる
TypeScriptの習熟度は一定求められますが、開発全体に必要な技術を網羅的に学べる点はメリットです。
TypeScriptを利用する上で必要になるエコシステム全般を学習できます。
現場で使えるTypeScript詳解実践ガイド
次に紹介するのが「現場で使えるTypeScript詳解実践ガイド」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- TypeScriptの基礎知識
- 基本の型
- クラスとインターフェイス
- 型の高度な概念
- ジェネリクス
- デコレータ
- モジュールとライブラリ
- TSConfigファイルの設定
- アプリケーションの作成
特に、実務でTypeScriptを使いこなすために不可欠な基本概念や機能を、基礎から応用レベルまで丁寧に解説した本です。
最終章ではハンズオン形式でアプリケーションを開発し、学習した内容を実際に使って知識を定着させるようにしています。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- TypeScriptの主要概念や機能について深く理解できる
- プロジェクト参加を意識した基本的な知識習得
- エラーを考慮した安全かつ快適な開発環境を整備している
- 実践的なTypeScriptの学習と知識を深められる
- TypeScriptに関する便利なリファレンスを確認できる
- 型情報を活用してコードの品質を向上できる
- 型安全なプログラミングをとことん学べる
TypeScriptを深く理解する上で有用なJavaScriptの知識を巻末のAppendixで提供している点も魅力的です。
そのため、JavaScriptの基礎知識がある読者であれば、復習を兼ねてスムーズに学習を進めることができるでしょう。
作って学ぶ Next.js/React Webサイト構築
次に紹介するのが「作って学ぶ Next.js/React Webサイト構築」になります。
本書における学習の流れとして、大きく以下の項目に分けられています。
- ReactとNext.jsを用いた実践的なWebサイト構築
- モダンなフロントエンド開発手法の理解と適用
- 実際のプロジェクトを想定した具体的なサンプルと実例
- ユーザー体験を重視したレスポンシブなデザインの実装方法
特に、実務でTypeScript/JavaScriptを利用する際にWeb知識を含めながら実践的な学習が望めます。
他の教材が基本概念や基本文法から始めるのに対して、本教材では実際に手を動かしながらWebサイトを構築する過程を体験できます。
本書のおすすめポイント
本書には、以下のおすすめポイントが挙げられます。
- 実務で考えられるWebサイト構築プロセスを学べる
- ReactとNext.jsを用いたモダンなフロントエンド開発に着手できる
- フロントエンド開発の実践的なプロジェクト経験を体験できる
TypeScriptあるいはJavaScriptを体系的に理解できた人は、次のステップとしておすすめしたい本になります。
また、ReactやNext.jsといったビジネス市場でトレンドになっているフロントエンド開発の主流を学びたい人もおすすめです。
本でTypeScriptを学習するメリット
近年、本以外による学習としてWebサイトのオンライン学習教材や動画教材がたくさん存在します。
また、QiitaやZennといったエンジニア向け学習サイトも一定の学習教材になり得ると思います。
しかし、本による学習方法にはメリットがいくつかあります。
- 本による基礎学習の技術的メリット
- 本による基礎学習のメンタル的メリット
Webサイトによる各オンライン教材では補えない内容もあります。
なぜなら、分かりやすさ/見やすさ/まとめ方など様々な観点で読者あるいは視聴者を飽きさせないために、要点をまとめすぎてしまう点です。
そのため、TypeScriptを学習する方法として、本による勉強もある程度質の高さが担保されています。
本による基礎学習の技術的メリット
特に、ブルーベリー本と呼ばれる「プロを目指す人のためのTypeScript入門」を取り上げると以下のメリットが挙げられます。
- 土台となるJavaScriptと比較し理解が深まる
- TypeScriptが「静的型付け言語」である良さが分かる
上記の内容を含め、数百ページにもなる基礎学習によってWebサイトのオンライン教材とは理解度の違いが圧倒的に変わります。
また、本にするために専門的用語や関連用語もしっかりまとめられており、疑問があっても何から調べるべきか指針が立てやすいです。
本による基礎学習のメンタル的メリット
技術的メリットだけでなく、本の内容をしっかり写経することでメンタル的メリットも得られます。
- 写経は1文1文の理解をさらに深めるため達成感が得られる
- 言語学習を体系的に1冊で学べるため抜け落ちがなく不安がない
多くのプログラミング初心者は、求める情報を素早く手に入れたいがあまり1つ1つの言語学習内容の質が低下していると感じます。
一部の例だけが記載されるオンライン教材やネット情報だと網羅的な言語学習とは言えないため、特定の課題によって再学習を余儀なくされているイメージです。
そのため、分厚い本であっても網羅的に技術をまとめている点とハンズオン形式でサンプルコードを記載している本による学習はメリットがあると考えます。
TypeScriptを無料で学習できるWebサイト
ここでは、無料でTypeScriptを学習できるWebサイトも紹介しておきます。
以下の各サイトの特徴に合わせて学習することをおすすめします。
- 検索タブで切り替えながら効率的に学習したい人
- 動画教材から視聴しながら実践的な学習に取り組みたい人
上記の方法でこれまでプログラミングに限らず、学習法を確立した人は以下のサイトがおすすめになります。
| サイト・チャンネル名 | テキストベース | 動画ベース |
|---|---|---|
| 【公式】TypeScript ハンドブック（日本語翻訳版） | ||
| TypeScript Deep Dive （日本語版） | ||
| サバイバルTypeScript | ||
| TypeScript Tutorial | ||
| TypeScript Tutorial – W3Schools | ||
| TypeScript超入門 覚えることは9個だけ！ | ||
| 日本一わかりやすいTypeScript入門シリーズ | ||
| 超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！ | ||
| プログラミングチュートリアル | ||
| ムーザルちゃんねる |
各サイトの主な情報を詳しく知りたい人は「【無料】TypeScript入門・練習できるサイトをまとめて紹介！」を一読ください。
【10日間】実務レベルのTypeScriptを学習したい人へ
エンジニア業務を通して疑問を感じるのが「多くのプログラミングスクールにおける学習期間」あるいは「プログラミングそのものにかける学習時間」です。
実際に、プログラミング学習を始めたいと考える人もこんな疑問を持っていませんか？
- 多くのプログラミングスクールが設けた期間は長すぎないか
- 本当にサポート体制は充実しているのか
- そもそもプログラミング学習の時間に無駄はないか
特に、上記の3つが学習に対するモチベーションの低下につながってしまいます。
というのも、学習をスタートした時点から日が経つごとにモチベーションは落ち始めます。
そのため、最短期間かつ掲げてる目標地点に最適なサポートを受ける必要があり、目的に沿った最短学習時間を設ける必要があるわけです。
本サイトもTypeScriptを中心に現役フリーランスエンジニアとして働く筆者が監修した学習プログラムを用意しています。
特に、以下の内容に特化してプログラムを作成しています。
- 10日間でTypeScriptの学習を完了させる
- コミュニティによるサポート体制整備
- 最新のエンジニア情報をメルマガ配信
より実務的にTypeScriptを学べるよう学習サポートを強化しています。
また、メルマガ登録頂いた方に、無料教材として「Webアプリ開発資料」を配布しています。
気になる方は、ぜひ一読ください。
コメント