TypeScriptのHello Worldを、ちゃんと理解しながら動かしてみた話

おはようございます。YASUです。

昨日、AWS CDKで「よくわからないまま踏みとどまった」という締めくくりだったので、今朝は開き直って基礎からやり直すことにしました。TypeScriptの、本当に最初の一歩です。

結論

やったことは、たった1行「Hello, World!」を画面に表示させただけです。ただし、その1行を動かすまでに必要な「土台」の仕組みが、思っていたより奥深かったので、今日はそこをじっくり理解することにしました。

そもそも何をしたのか、最初はよくわかっていなかった

プロジェクトの初期化、TypeScriptのインストール、設定ファイルの調整と、一通りの準備を終えたところで、正直「結局、今何をしたんだっけ」と自分でも分からなくなりました。整理してもらったところ、こういうことでした。

料理で例えると、台所の準備(プロジェクトの初期化)をして、調理器具(TypeScript)を揃えて、レシピの下ごしらえ(設定ファイル)をして、最後にたった1行の料理(コード)を作った、という話でした。

console.log("Hello, World!");

この1行を動かすためだけに、これだけの土台が必要だったのか、というのが正直な感想です。

console.logって結局なんなのか

`console.log`が何なのかも、最初はピンときていませんでした。分解して教えてもらうと、`console`(画面)に`.log`(書き出す)という、ただそれだけの意味でした。

カッコの中身は決まった言葉ではなく、開発者が「今ここが動いたよ」と自分で確認するために、好きな文章を書いていい部分だと知って、急に肩の力が抜けました。「addTodoが呼ばれました」でも「ここまで来た」でも「あかん動いてない」でも、何でもいいそうです。

パソコンと人間、それぞれの言葉が違う

もう一つ腑に落ちたのが、TypeScriptとJavaScriptの役割分担です。パソコン(実行環境)はJavaScriptしか理解できないけれど、人間はTypeScriptの方が書きやすくミスにも気づきやすい。だから`tsc`(TypeScriptコンパイラ)という通訳者が、TypeScriptで書いたコードを一度JavaScriptに翻訳してから動かしている、という仕組みでした。

`npm run build`で翻訳して、`npm start`で実行する。この2段階を踏んで、ようやくターミナルの画面に「Hello, World!」の文字が表示されました。ブラウザではなく、コマンドを打ったその場に、文字としてそのまま出てくる、という点も新鮮でした。

因みにnpmとは、node package manager　（Node.jsのパッケージを管理するシステム）　の略です。

letとconst、あえてエラーを起こしてみた

続けて、`let`と`const`の違いも実際に手を動かして確認しました。`let`で作った値は何度でも書き換えられる一方、`const`で作った値に書き換えを試みると、こんなエラーが出ました。

error TS2588: Cannot assign to 'message' because it is a constant.

「これは定数だから、代入できません」というエラーが、実行する前の段階(コンパイル時)でちゃんと止めてくれる。うっかり書き換えてしまうミスを未然に防ぐ、安全装置のような役割だと分かりました。実務では「基本は`const`を使い、値を変える必要があるときだけ`let`にする」という方針がよく採られるそうで、これは覚えておこうと思います。

今日の学び

まとめ

「土台を作って、文字を打っただけ」と言ってしまえばそれまでですが、その裏側にある一つ一つの仕組みを、今日はゆっくり立ち止まって理解できました。昨日のCDKで感じた「よくわからない」を、今日は一段階埋められた気がします。次はこの土台の上に、少しずつ機能を足していこうと思います。

それでは、また次の記事で。