TypeScript 入門の記録（６）作って学ぶTypeScript

前回は、Create React App をインストールして、TypeScriptテンプレートを実行したり、少し変更して自動的にコンパイルと再表示されることを確認しました。今日は、サバイバルTypeScript の、作って学ぶTypeScriptを順番にやろうと思います。わくわく。

作って学ぶTypeScript

簡単な関数を作ってみよう

まずは、Javascript で関数を記述します。

パラメータnumに+1した結果を返却する関数

実行して、パラメータを整数から文字列に変更したときの実行結果を確認します。

999+1=1000

"999"+1="9991"

numに999を渡すと、num+1は999+1 =1000ですが、num に"999"を渡すと、num+1は、"999"+"1"と解釈されるので、結果は "9991" になります。算術演算なのか文字列の連結なのかを、渡された引数の型によって使い分けてくれちゃうんですよね。これが原因で想定しない結果になったりするので、注意が必要だと思っています。
では、increments.jsをincrements.tsにファイル名を変更して、パラメータnumに型注釈: number を追加します。

string型のパラメーは、をnumber型に割り当てられない

コンパイルすると、console出力で呼び出している関数 increment() のパラメータの型が合っていないと言われます。コードの編集時点で、すでにパラメータ”999”の下に波線のアンダーラインが表示されて「ここに問題がありますよ」って教えてくれています。VS Code に限らないと思いますが、型注釈が追加されたことで、エディタが「increment関数のパラメータに文字列が設定されているのはおかしいですよ」ってヒントをくれます。コンパイル型言語の経験が長い私にとって、この「型強制がある」って、安心感がありますね。これは、良いなぁ。

先ほど、

mv increment.js increment.ts

で、increment.js を increment.ts にファイル名を変えたのですが、コンパイル後、increment.js ができていました。これはincrement.ts のコンパイル結果として出力された Javascript なのですね。

コンパイル結果の increment.js

パラメータには、型注釈がなく、先ほどコンソール出力のパラメータを文字列"999"としていた箇所も999に修正されています。このコンパイル結果のJavascript を実行するんですね。へぇ。

Reactでいいねボタンを作ろう

さて、次のチュートリアル、Reactでいいねボタンを作ろうをやってみます。

Reactの３大特徴、仮想DOM、宣言的UI、コンポーネントベースの簡単な解説があるので、飛ばさずに読みます。前にReactの公式チュートリアル三目並べでは内容の理解は置いといてコードを編集していたので、今回は仕組みを理解しながら進めていきたいです。Reactでは、仮想DOMを操作して、それがDOM、さらに画面出力に反映されるという仕組みなんですね。宣言的UIもコードがすっきりして、見通しが良いです。三目並べでは、ひたすらコンポーネントを組み合わせていたのですが、公開コンポーネントを利用できるところも含み、合理的だと感じた部分です。さて、このチュートリアルではパッケージ管理ツール「Yarn」を使うので、インストールします。

Yarnのインストール

TypeScriptテンプレートを指定してプロジェクトを作ります

生成された like-buttonディレクトリに移動して、yarn start を実行して、React のローカル開発サーバーを起動すると、ブラウザが自動起動して雛形ページが開きます。

Reactロゴくるくる

あれ？Edit src/App.jsって、これ、TypeScriptのテンプレートじゃないでは！！！

タイポしてる！！！

やりなおし！！！先ほど生成されたlike-buttonを削除して、やり直します。

今度こそ！

よし、App.tsxを編集して保存してリロードせよって書いてある！

src/App.tsxを編集

できたできた

いいねボタン予定地を作ります

ここを「いいねボタン予定地」とする

関数がタグとして使えるので、コードが見やすくなりますね。複雑な処理でも、「ここはこういう処理をする部品です。」って書けるのは、わかりやすいし、コンポーネントを組み合わせたときにも把握しやすそうです。
さて、ここからいよいよ「いいねボタン」を作り込んでいきます。いいねボタンには、いいねの数を表示したいので、LikeButton関数に、いいねの数を変数として定義して、これを表示するように記述します。

いいねボタン予定地をcoutを返却するように編集

{}の中に、変数や式が書けるのですね。ここでは、countの値を返却するので、{count}と記述しました。さらに、ボタンのスタイルを、App.cssに追加しました。

likeButtonクラスを追加

固定値999の表示を確認

固定値を表示できたので、今度は、ボタンをクリックしたら、その回数を表示するようにしていきます。React の useState関数を使って、カウントの状態をReactに管理させるようにします。

useState関数でカウントの状態を管理

const  [count, setCount] = useState(999);

は、useStateの戻り値をcountとsetCountの2つの変数に代入していて、countには、999のような値が、setCountにはcountの値を変更する関数が代入されます。ふむふむ。それぞれ役割が違うんですね。次に、ボタン部分をクリックしたときのハンドラを追加します。

ボタンをクリックしたときのハンドラを追加

わぁい！できた！！！

まとめ

React 公式チュートリアルの三目並べでは、stateをどう渡すか？を次々に変更していくのを追っかけるだけで精一杯で、中身の理解ができていませんでしたが、この小さい機能だと、カウントの状態をReactが管理する様子がわかりやすいと感じました。TypeScriptとReact両方を並行して学習していきたいので、段階的に複雑な構造のアプリケーションにしていきながら、理解を深められたらと思います。さて、今日の学習はここまで。