カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

プロジェクトの始め方

この節では、一般的なTypeScriptのプロジェクトの始め方を紹介します。TypeScriptを始めるにあたって、NodeJSを導入する必要があります。公式のガイドに従って、導入を行なってください。NodeJSのバージョンを細かく管理したい場合は、nodebrew, nodeenv, nvm, voltaなどを調べお使いください。仕事として、TypeScriptを使う場合には、何のツールを使ってバージョン管理がされるか決まっていることがあるので、チームの郷に従うと良いでしょう。

TypeScriptの導入のはずが、なぜNodeJS? と思った方もいるでしょう。NodeJSは、npm(node package manager)と言う、主にJavaScriptとTypeScriptで作られたライブラリやコマンド等を使うためのパッケージマネージャを備えています。今回、TypeScriptのプロジェクトを立ち上げるためのツールもnpmを利用して、インストールしていくことになります。

この資料では、nodeのバージョンv18.0.0で環境構築を行います。必ずしも、バージョンを合わせる必要はありませんが、プロジェクト構築の結果、若干の差異が生じるかもしれませんので、ご認識ください。

NodeJSの導入が成功している場合、npmコマンドが使えるようになっているはずなので、適当なディレクトリ(フォルダ)を作り、その中で以下のコマンドを入力してください。

Copied!
$ npm init

すると、以下のような文字列がターミナルに出力されるはずです。

Copied!
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit.

対話型のコマンドのため、プロジェクト名を求められます。どのような名前でも構いませんが、今回は「typescript-project」のような命名でタイプしたいと思います。

Copied!
package name: (desktop) typescript-project

さらに続けて、様々な質問が続きますが、基本的にエンターキーを押し続けて構いません。

Copied!
version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC)

プロジェクトの内容は、package.jsonに出力されます。作られるプロジェクトの内容は以下で良いですか?と出力されます。

Copied!
About to write to [任意のディレクトリ]/package.json: { "name": "typescript-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

もし問題なければ、yesとタイプします。

Copied!
Is this OK? (yes) yes

この時点で、NodeJSによるプロジェクトが作成されるので、ここにTypeScriptのコンパイラをインストールします。

Copied!
$ npm install -D typescript added 1 package, and audited 2 packages in 1s found 0 vulnerabilities

以下のコマンドを打つことで、TypeScriptコンパイラのバージョンが確認でき、ちゃんとコンパイラが導入されていることを確認できます。以下のバージョンナンバーは、NodeJSのバージョンや今後TypeScriptのバージョンが進化し続けることで変わるので、一致しなくても心配しなくて構いません。

Copied!
$ npx tsc -v Version 4.6.4

次に、TypeScriptの初期設定を行います。以下のコマンドを実行しましょう。細かいオプションの説明は、ここでは割愛させていただきます。

Copied!
$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

現時点で、ディレクトリ(フォルダ)の中身を見てみると、以下のファイルが並んでいるはずです。

Copied!
$ ls # windowsはdirコマンド node_modules/ package-lock.json package.json tsconfig.json

作られたファイルの簡単な説明は以下のようになります。

  • package.json npmで作られたプロジェクトの情報や、インストールされたツールの情報が書かれたJSONファイル
  • package-lock.json インストールされたツールやライブラリの依存関係を記述したJSONファイル
  • node_modules インストールされたライブラリやツールが格納されるディレクトリ(フォルダ)
  • tsconfig.json TypeScriptのプロジェクトの情報が書かれたJSONファイル

ここまで準備ができれば、TypeScriptのファイルを書いて実行することができます。

以下のようにプロジェクトルートにsrcディレクトリ(フォルダ)を作り、その中に、TypeScriptのファイル(main.ts)を用意してみましょう。

Copied!
src └── main.ts package.json tsconfig.json

中身はどんなものでも良いですが、以下のようなHello Worldプログラムを用意してみました。

src/main.ts
1234
Copied!
const hello: string = "hello"; const world: string = "world"; console.log(`${hello} ${world}`);

1つ目のコマンド(TypeScript コンパイラ)でコンパイル。2つ目のコマンドで実行になります。
TypeScriptがどんなJavaScriptファイルに変換されるか、想像をしながら覗いてみてください。
また、今まで試したTypeScriptのコードを試しても良いでしょう。

Copied!
$ npx tsc -p . $ node lib/main.js

こちらを実行すると、以下のような実行結果が表示されるはずです。

Copied!
hello world

もし、今までにフロントエンドフレームワーク(Angular, React, Vue等)を導入したことがある方は、直接的、もしくは間接的にNodeJSによるプロジェクト構築をしているはずです。TypeScriptと同様に品質や生産性、開発体験を上げるためには現状NodeJSとフロントエンド開発は切っても切れない関係になりますので、思い悩みすぎない程度に徐々に学んでいくと良いでしょう。

以上がプロジェクトの始め方になります。続いて、TypeScriptプロジェクトに導入すると良いエコシステムについて説明をしていきます。

現在のパート (0)
全パート (0)
みんなで助け合おう!
現在のパートのディスカッション 全0件