この動画はメンバー限定動画です

全ての講座が
月額990円で学び放題

講座の情報を見る

TypeScript入門開発環境を準備しよう

記事を共有:

  • X
  • Pocket
  • クリップボードにコピー

TypeScriptで開発をするには、次のようなものが必要になります。

  • テキストエディタ
  • Node.js

その他、Webプログラミングをする場合はWebブラウザ、スマホアプリを開発する場合はシミュレータやスマホ端末なども必要になってきますが、まずはこれら開発環境を準備していきましょう。

テキストエディタ

テキストエディタは、使い慣れたものがあればそれを使っても問題ありませんが、現在非常に人気があるのがMicrosoftが開発している「Visual Studio Code(VSCode)」という無償の開発エディタです。TypeScriptとの相性も非常に良いので、これを使うと良いでしょう。

VSCodeの公式サイトにアクセスしましょう。

アクセスした環境に合わせたダウンロードボタンが表示されるので、これをクリックします。

Windowsの場合は、セットアッププログラムでセットアップでき、macOSの場合はアプリケーションがダウンロードされるので、これをFinderで「アプリケーション」フォルダにコピーして起動しましょう。

VSCodeを日本語化しよう

VSCodeは、起動直後は英語版として起動します。そして、これを日本語化するときの手順が若干煩雑なので、ここで紹介しましょう。

VSCodeを日本語化するには「拡張機能(Extension)」をインストールする必要があります。初めての起動時に、右下に案内も表示されるのですが、これを逃した場合は手作業でインストールします。

まずは、左端のツールバーから「Extension」をクリックしましょう。

左端にパネルが表示されるので、一番上の検索窓に「japanese」などと入力して検索します。すると、「Japanese Language Pack」という拡張機能が見つかります。

この「Install(インストール)」ボタンをクリックしてインストールしましょう。

再起動を促されるので、再起動すると日本語版として起動します。こうして利用すると良いでしょう。

テーマを変更しよう

VSCodeは、標準では画面が黒いダークテーマが設定されています。他にもさまざまなテーマが付属しているため、好みに合わせて変更すると良いでしょう。

画面左下の「管理」ボタンをクリックします。「テーマ→配色テーマ」メニューをクリックしましょう。

さまざまな配色テーマが表示されるので、いくつか試してみて好みのものを探してみましょう。本書ではこの先は「Solarized Light」というテーマを利用して紹介していきます。特に決まりはないため、好みのものを利用していただいて構いません。

Node.js

TypeScript開発にもう1つ欠かせないのが、「Node.js(ノードジェイエス)」というプラットフォームです。この後紹介しますが、TypeScriptはプログラミングを行った後、JavaScriptに変換を行う「トランスコンパイル」という作業を行わなければなりません。

このトランスパイルを行うトランスパイラーというツールが、Node.jsベースで提供されています。これを使うためにインストールします。とはいえ、Node.jsはそれだけではなく、現代のプログラミング開発には欠かせないツール群が、このプラットフォームを使って開発されているため、まだインストールしていない方は是非インストールしておくと良いでしょう。

公式サイトにアクセスします。

ダウンロードボタンがあるので、これをクリックするとアクセスしている環境に合わせたセットアッププログラムがダウンロードされます。

基本的には「続ける」をクリックして、指示に従っていけばインストールできます。

インストールしたら、念のためVSCodeを再起動しておきましょう。

動作を確認しよう

Node.jsが正しくインストールされているか確認しておきましょう。VSCodeを起動します。

右上にウィンドウ分割ボタンがあるので、真ん中の下分割ボタンをクリックしましょう。

ターミナルという機能が起動します(詳細は後述)。ここに、次のように入力しましょう。

node -v

図のように、バージョン番号が表示されていれば正しく動作しています。

もしこの時、「Command Not Found(コマンドが見つかりません)」などのエラーメッセージが表示されてしまう場合は、再度インストールをするかOS時代を再起動などして、再度試してみてください。

これで開発環境の準備が整いました。次章以降は、VSCodeを起動した状態で学習を進めていきましょう。

前のレッスン 次のレッスン