この記事で分かること
- TypeScriptが勉強できる（2023年7月時点）
- どの記事を参照してインプットしたか
読んでほしい人（私のレベル）
- HTML、CSS、JavaScriptをProgateで勉強した
- TypeScriptを仕事で使用予定
- 実務経験、開発経験ゼロ
実際にやったこと
- もくもく会に参加
モチベーションのきっかけとして都内でオフライン参加しました。
実務で使用されている方々にお話しを聞くこともできたので、助かりました。 - TypeScript Deep Diveのドキュメントを読む
こちらは、あまり初心者向けではなかったので動画を見るのが良いかと思います。
他の言語と比べての利点などが記載されており、他の言語を理解していないと分かりません。
Google翻訳で英語の翻訳をしているような若干不自然な日本語も、私の場合はインプットの妨げとなってしまいました。
また、ソフトウェア業界でよく使用されるやや専門的な語句が使用されています。
「ドキュメントを読んだだけでだいたいのことは分かった」、という方は実際にTypeScriptを使用して、アプリケーション開発なり手を動かしながらアウトプットするのが良いかと思います。
学んだことの要約
TypeScriptの利点
JavaScript × 型システム = TypeScript
利点としては、
型システムがあるおかげで書いている時点でミスに気づくことができる
実行時に気づくのでは遅い、改修するのに時間がかかってしまう
TypeScript環境構築
語句説明
-
webpackについて
モジュールバンドラと呼ばれるもの。モジュールバンドラとは複数のJSファイルを一つにまとめて、依存関係を考慮してくれる。 -
tsconfigについて
コンパイラを使用して、TypeScriptで書いたコードをJavaScriptに変換
これにより、新しい構文だとしても古いブラウザで問題なく使用することができる
環境構築手順
- nodeをインストールする
nodeとはサーバーサイドでJavaScriptを動かすための仕組み
※ターミナルを使用して、インストールする方法は別途動画参照 - パスを通す
今回調べても分かりませんでした、、
一旦、このステップはスキップして環境構築を進めてみます。
（以前、Angularの環境構築をしたときにはPATHの設定なしでできていた気がする） - nodeの環境を構築するディレクトリ（フォルダ）を作成する
- ターミナルで以下を実行し、ディレクトリ直下に「package.json」が生成されていたらOK
※オプションは全てYes（Enter）でOKnpm init - VScodeなどのエディタで作成したディレクトリを開く
- 関連パッケージをインストール
インストールするためのコマンドはこちらのGitHubに記載
「--save-dev」がポイント。開発環境でしか使わないパッケージのためのオプション。
Web上で使用したりすることがあるが、今回は開発環境側（ローカル？）で使用するため。 - 「webpack.config.js」というファイルを作成し、webpackの設定をする
細かいオプションの設定はこちらのGitHub内のコメントを参照 - tsconfigの設定
【重要】この時点でエラー発生
おそらく、PATHが設定できていないことによる問題tsc: The term 'tsc' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
~~~
8. 執筆中
参照した記事
日本一わかりやすいTypeScript入門【基礎編】【とらゼミ】トラハックのエンジニア学習講座
【日本一わかりやすいTypeScript入門】tsconfigとWebpackの設定を理解して環境構築
次に学んだ方が良さそうなこと
JSとTSの概念の違いとかをchatGPTに聞いてみる
AWSの「クラウドナイン」なら最初から環境構築されている