TypeScript 導入＆環境構築について

環境構築予備知識

Homebrew (brew) の注意事項

・brew の前にお使いのシェルと PATH を確認しましょう。echo $SHELL および echo $PATH の結果を教えてください。 ・brew は /usr/local (M1 Mac なら /opt/homebrew かも) にいろんなファイルが入りますので、この中を自分でいじるのはあまりよくありません。PATH に /usr/local/bin が含まれていることを確認しましょう。 ・brew は自分のユーザー権限で扱います。たまに sudo しろという記事があったりしますが、基本的には sudo の必要はないはず。 ・brew install 以外でよく使うコマンドは、brew ls, brew update および brew upgrade でしょうか。 →brew update と brew upgrade の違いはアップデートのみを行うことと、インストールしたパッケージのアップデートをするかの違い ・とりあえず brew で yarn を入れましょう。また、brew で既に入ってるものも最新版に更新して、node と yarn のバージョンヲ確認してください。それぞれ node -v および yarn -v です。 brew update と brew upgrade の違いは、brew update は単に brew でインストール可能なものとそのバージョンのリストを更新するだけで、brew upgrade で実際に更新を行うことになります。brew のパッケージはこまめに更新されるので、brew update や brew upgrade は定期的に行うことをお勧めします。また、git の最新版や、tree や jq などの便利コマンドを入れておくといいかもしれません。

→echo $SHELLは「/bin/zsh」 最近の macOS はデフォルトのシェルが zsh になっている。 しばらく前までは bash が使われていて、Linux でも bash を使ってる人も多い。 zsh も bash も似たような感じで使えますが、シェルの設定ファイルの名前が違います。zsh は ~/.zshrc ですが、bash は ~/.bashrc や ~/.bash_profile です。ネットの記事でシェルの設定を変更する記述がある場合、必要に応じて設定ファイルを読み替えてください。

＞echo $PATH echo $PATH で表示されるのは PATH という名前の環境変数ですが、これはホームディレクトリではなくて、コマンドを実行する時に、そのコマンドを実行する場所を設定するものです。ruby や python を使っていた形跡がありますね。試しに where ruby や where python3 を実行したら複数表示されるかも。

また、ホームディレクトリを設定する環境変数は $HOME で、値は /Users/名前 のはずです。

sudo はそうですね、Mac を一人で使っている分にはあまり使わなくていいはずですが、サーバーで作業する場合には必要になることもあるでしょう。

node と yarn は最新版をお使いですね。node (や ruby や python) のバージョンですが、サーバー系の人は nvm などを使って node のバージョンもきっちり管理したがるようです。 node で直接サーバーを動かす場合、やはりその方が安心なのでしょう。React など、node をフロントエンドで使う人は、node そのもののバージョンにはこだわらず最新版を使ってる気がします。ビルドして bundle.js にしてしまえば、あとは node は関係なくなりますからね。

brew update と brew upgrade の違いは、brew update は単に brew でインストール可能なものとそのバージョンのリストを更新するだけで、brew upgrade で実際に更新を行うことになります。brew のパッケージはこまめに更新されるので、brew update や brew upgrade は定期的に行うことをお勧めします。また、git の最新版や、tree や jq などの便利コマンドを入れておくといいかもしれません。

①create-react-app アプリ名 --template typescriptにて新規プロジェクト作成 ⇨create-react-app は yarn (yarn global add create-react-app) か npm (npm install -g create-react-app) でグローバルに入れます。使い方は、TypeScript のプロジェクトを生成する場合は、 create-react-app アプリ名 --template typescript になります。

②.gitignore に .eslintcache と書く ⇨アプリができたら、中に入って中身を確認しましょう。ls -aF (ls -alF の方がいいかも) すると

./
../
.git/
.gitignore
README.md
node_modules/
package.json
public/
src/
tsconfig.json
yarn.lock

となってます。また、tree src (tree コマンドはおすすめですが、.git や node_modules に対して使うと大変なことになります) すると

src
├── App.css
├── App.test.tsx
├── App.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

こんな感じですね。

create-react-app で作った JavaScript と TypeScript のプロジェクトの違いは、 ・package.json に typescript (TypeScript コンパイラ本体) と @types/〜 という TypeScript 用の型定義パッケージがいくつか追加 (ライブラリによっては自分で TypeScript の型定義を持つものもありますが、もともと JavaScriipt で書かれたものは型定義がなくて、別のパッケージとして提供される場合があります。) ・tsconfig.json という、TypeScript の設定ファイルが生成 ・src の中身は、拡張子が .js から .ts または .tsx に変更 (JavaScript では JSX 記法を含むかどうかを拡張子で区別しませんが、TypeScript の場合 JSX 記法を含むものは拡張子を .tsx にする必要があります。)

あと、デフォルトではパッケージ管理には yarn が使われ、yarn.lock ファイルができます。(npm の場合は package-lock.json です。普通はどっちか片方だと思う…。) なお、この yarn.lock ファイルがあれば node_modules ディレクトリの中身は (https://www.npmjs.com/ が生きてれば) まったく同じものが再現できるはずなので、yarn.lock ファイルは git で管理して、node_modules ディレクトリは管理しないのが一般的だと思います。(あえて管理する場合もありますが。)

この状態で yarn start するとビルドされたものがブラウザで開きますが、最近の create-react-app で作ったものは .eslintcache というファイルができるようです。これを間違って git の管理対象にしてしまうと無駄な変更が発生して面倒くさいので、.gitignore に .eslintcache と書いておくことをお勧めします。また、src/index.tsx や src/App.tsx には余計なコードが色々書いてあるので、これらをすっきりさせた状態で一度 git commit すると良いでしょう。