TypeScript AWS

【入門】TypeScript環境について【AWS Amplify/CDK】

こんにちは、yassanです。
今回は、AWSエンジニアに向けたTypeScrip環境について紹介します。

TypeScriptといえば、フロントエンド開発に向けた言語ではありますが、AWSでもAmplifyやCDKなどのサービスでも利用されています。

AWSは利用しているけど、これから初めてTypeScriptを触る方に向けた、環境について解説します。
（難しい話はさておき、とにかく手順だけ知りたいと言う方は、最後の章までスキップしてください。）

TypeScript

TypeScriptとは、JavaScriptの拡張した言語になります。
そのため、JavaScriptと互換性があります。

JavaScriptも優れた言語でしたが、時代が進むにつれて不便な点が出てくるようになりました。
その時、JavaScriptの互換や代替になる言語が数多く誕生したそうです。
その中で、生き残ったのがTypeScriptになります。

最終的にブラウザで実行するときには、JavaScriptで実行されます。
TypeScriptにはビルドの概念があり、ビルドすることでJavaScriptコードに変換され、ブラウザで実行されます。

TypeScriptを学ぶ上で、JavaScriptは切っても切れない関係になります。
以降、TypeScriptはTS、JavaSciprtはJSと略します。

Node.js

Node.jsは、JavaScriptの実行エンジンになります。

通常、nodeコマンドで実行することができます。
単一のJSファイルを実行したい時に使います。

Node.jsのインストールは、OSのパッケージ管理コマンドに従って実行できます。
例えば、MacOSでパッケージ管理をhomebrewを利用している場合は、下記の通りです。

$ brew install node

しかし、この方法だと、Node.jsのバージョンが固定されてしまうので、お勧めしません。
Node.jsをインストールする前に、Node.jsのバージョンを管理する nvm をインストールすることをお勧めします。
nvmをインストールした後に、利用したいバージョンのNode.jsをインストールして利用すると、環境の変化に柔軟に対応できます。

$ brew install nvm
$ nvm install --lts
$ nvm ls
->     v20.15.0
default -> lts/* (-> v20.15.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v20.15.0) (default)
stable -> 20.15 (-> v20.15.0) (default)
lts/* -> lts/iron (-> v20.15.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2 (-> N/A)
lts/hydrogen -> v18.20.3 (-> N/A)
lts/iron -> v20.15.0

npm

npmとは、Node.jsで利用するパッケージ管理などに使用するツールです。
（Pythonで言うところのpipにあたる機能ですが、npmの機能はもっと広いです）

npmは、Node.jsをインストールした時に一緒にインストールされます。
npmコマンドを駆使して、TS/JSの開発を行います。

プロジェクトを作成したいディレクトリに移動して、npm init を実行することで開発に必要な最低限のファイル：package.jsonができます。
※package.jsonの詳細は後ほど説明します。

$ npm init -y
Wrote to /Users/xxx/sample_project/package.json:
{
  "name": "sample_project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

パッケージのインストールは、npm install　で実行できます。
よく使う・注意が必要なオプションも紹介しておきます。

$ npm install package-name
$ npm install -g packeage-name
　グローバルインストールになるので慎重に実施してください。僕は極力利用しないようにしています。
$ npm install --save-dev package-name
　開発でのみ利用する場合に使用するオプションです。
　最終的に実行するブラウザにも必要なパッケージであれば、このオプションをつけないのが正です。

npm installでパッケージをインストールするとnode_modulesというディレクトリができます。
node_mouldesには、インストールしたパッケージの実行ファイルが保存されます。

TSのインストール

では、npmコマンドでTSをインストールします。

$ npm install --save-dev typescript

これで、TSに関連するパッケージがインストールできました。
TSのパッケージは、ブラウザ実行には不要ですので、--save-devオプションをつけています。
（先ほどご説明した通り、ブラウザ実行の際にはJSで実行されますので、JSで利用しないパッケージは不要となります）

TSパッケージを入れたことで、tscコマンドでコードをJSへ変換できるようになりました。
tscコマンドを実行することで、プロジェクトのtsファイルがjsファイルへ変換されて出力されます。

$ tsc

コンパイルせず、スクリプト的にそのままtsファイルを実行する場合は、ts-nodeコマンドを使います。

$ ts-node main.ts

npx

先ほど説明した通り、npmでインストールしたパッケージの実体はnode_modulesに保存されます。
そのため、インストールしただけでは、パスが通っておらずそのままではコマンドを実行することはできません。
（グローバルインストールした場合は除く）

では、パスを通すかといっても、プロジェクトを切り替えるごとにパスを変更するのも面倒です。
bash/zshのパスの設定を変更せず、コマンドを実行する方法がちゃんと用意されています。
それが、npxです。

npxコマンドによって、グローバルインストールされていないパッケージのコマンドを実行することができます。

$ npx tsc

package.json

package.jsonは重要なファイルの一つです。
package.jsonの各フィールドには下記の情報が含まれます。

  • name
    • プロジェクトの名前を指定します。
  • version
    • プロジェクトのバージョンを指定します。
  • description
    • プロジェクトの簡単な説明を記載します。
  • main
    • プロジェクトのエントリーポイントとなるファイルを指定します。
  • scripts
    • プロジェクトのビルド、テスト、デプロイなどのコマンドを定義します。
    • "scripts": {
      "start": "node index.js",
      "test": "jest"
      }
  • dependencies
    • プロジェクトが依存しているパッケージを指定します。
    • "dependencies": {
      "express": "^4.17.1",
      "lodash": "^4.17.21"
      }
  • devDependencies
    • 開発中にのみ必要な依存パッケージを指定します。
    • "devDependencies": {
      "eslint": "^7.32.0",
      "jest": "^27.0.6"
      }
  • repository
    • プロジェクトのソースコードがホストされているリポジトリの情報を指定します。
    • "repository": {
      "type": "git",
      "url": "https://github.com/user/repo.git"
      }
  • keywords
    • プロジェクトに関連するキーワードのリストを指定します。
    • "keywords": [
      "node",
      "express",
      "api"
      ]
  • author
    • プロジェクトの作者情報を指定します。
  • license
    • プロジェクトのライセンスを指定します。

プロジェクトの作成

npm init をした後に、一から自分でポチポチとディレクトリ・ファイルを構成するのは、いくら何でも手間です。
そこで、特定のテンプレートやスキャフォルディングツールを使用して新しいプロジェクトを作成するためのコマンドがあります。
それが、npm createです。

ここでは、AWS Amplifyのテンプレートを例とします。

% npm create vite@latest            

> sample_project@1.0.0 npx
> create-vite

✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /Users/xxx/sample_project/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

vite-projectに移動して中身を見ると、下記のファイルが自動的に生成されています。

$ ls
index.html      package.json    public          src             tsconfig.json

package.jsonに、このテンプレートプロジェクトに必要なパッケージが記載されていますので、npm installインストールしましょう。
ここからフロントのコードを色々書いていくとして、次はバックエンドの準備をします。

% npm create amplify@latest
Need to install the following packages:
create-amplify@1.0.1
Ok to proceed? (y) y


> vite-project@0.0.0 npx
> create-amplify

? Where should we create your project? .

Installing devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installing dependencies:
 - aws-amplify

✔ DevDependencies installed
✔ Dependencies installed
✔ Template files created
Successfully created a new project!

Welcome to AWS Amplify!
 - Get started by running npx ampx sandbox.
 - Run npx ampx help for a list of available commands.

Amplify Gen 2 collects anonymous telemetry data about general usage of the CLI. Participation is optional, and you may opt-out by using npx ampx configure telemetry disable. To learn more about telemetry, visit https://docs.amplify.aws/gen2/reference/telemetry

amplifyディレクトリに移動すると、下記nファイルが自動生成されています。

$ ls
auth            backend.ts      data            package.json    tsconfig.json

こちらも、npm installしておきましょう。

実際にAmplifyでの利用をするのであればこの後に、AWSアカウントへの接続やリソースの結び付けなどが必要ですが、今回は割愛します。

最終的に、作成したプロジェクトをビルドするには、npm run buildを、実行するには、npm run dev コマンドを実行します。
（package.jsonのscriptに、buildとdevで実行するコマンドが書かれているはずです）

$ npm run build
$ npm run dev

環境構築の手順

最後に、環境構築のコマンドをまとめておきます。

$ brew install nvm
$ nvm install --lts
$ npm create vite-projet
$ cd vite-project
$ npm install
$ npm create amplify@latest
$ cd amplify
$ npm install
<コードの編集&追加で必要なパッケージのインストール>
$ npm run build
$ npm run dev

-TypeScript, AWS
-, ,