TypeScriptを基本からまとめてみた【1】【環境構築】

##TypeScriptとは

• TypeScriptは、JavaScriptを拡張して作られたプログラミング言語で、2014年頃にMicrosoftによって開発・発表された。

• TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されるため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴。

• TypeScriptは、大人数のプログラマーが開発に携わる場合でもエラーを防ぎやすいように設計されて、変数のデータ型をあらかじめ決められることや、1つの関数定義で異なるデータ型の引数を処理できる。

##webpackとは

公式サイト : webpack

• webpackは、JavaScriptなどの複数のモジュールをひとつにまとめるツール。
• webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできる。

#####※ モジュールとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどのこと。

##ビルドとは

ビルドとは、プログラミング言語で書かれたソースコードにバグ(異常)がないかを解析し、バグがなければソースコードを機械語に翻訳・リンクし、実行可能ファイルに変換して組み立てること。1つの作業のことを指すのではなく、解析から実行可能ファイルを組み立てるところまでの一連の流れのことを指す。
単一なソースコードのプログラムであればコンパイルするだけでいいが、複雑な仕組みのソフトウェアは、多くのソースコードを使って構成されていて、それらをリンクして組み合わせるという作業が必要になる。この、コンパイルからリンクまでの一連の作業をまとめてビルドと言う。

##Node 環境の確認とインストール

1.Homebrewのバージョンを確認
brew --version

2.インストールされていなければ実行
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3.nodebrewのインストール
brew install nodebrew

4.nodeの安定バージョンをインストール
nodebrew install stable

5.nodebrewのバージョン一覧を確認
nodebrew ls

6.インストールしたバージョンを指定して切り替える
nodebrew use v14.15.3

7.nodeのパスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile'

8.ターミナルの再起動

9.nodeとnpmのバージョン確認
node -v
npm -v

##TypeScript 環境の構築

1.開発用ディレクトリの作成
mkdir ~/<YOUR_DEV_DIR>/ts-basic

2.npmの初期化
npm init

3.関連パッケージのインストール(※)
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server

4.webpack.config.jsの作成と設定

5.tsconfig.jsonの作成と設定
tsc --init

#####※ 実行時にgyp: No Xcode or CLT version detected!のエラーが出たら
Mac OSに入っているXCodeのバージョンと、コマンドラインツールのバージョンが合っていないという理由で怒られているので、以下手順でコマンドラインツールのバージョンをアップデートする。

sudo付きのコマンドはMac OSのパスワード入力が必要。
4.を実行すると、コマンドラインツールをインストールするか聞かれるので、
同意して進める。

sudo rm -rf $(xcode-select -print-path)
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --reset
xcode-select --install
xcode-select -p

5.の実行結果が/Library/Developer/CommandLineToolsでなければ
sudo xcode-select -switch /Library/Developer/CommandLineToolsを実行する。
インストールが完了したら、「3.関連パッケージのインストール」のコマンドを再実行する。
##参考サイト

[【お知らせ】新講座開講 - これからTypeScriptを始める全ての人たちへ【日本一わかりやすいTypeScript入門】]
(https://www.youtube.com/watch?v=kd8VH10jXwc&t=658s)
[【日本一わかりやすいTypeScript入門】tsconfigとWebpackの設定を理解して環境構築]
(https://www.youtube.com/watch?v=qSHlXcSces8&t=642s)
[TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく]
(https://udemy.benesse.co.jp/development/system/typescript.html)
[webpackとは？使い方と導入するメリットをわかりやすく解説]
(https://goworkship.com/magazine/how-to-webpack/)
[ビルドとは？仕組みや流れを解説]
(https://pecopla.net/web-column/build-system)