ki-hi-ro.com

DAILY JOURNAL

TypeScript

10記事の記録。

2022年5月

  1. TypeScript 学習 part10

    こちらの本でTypeScriptの学習を進めています。 前回は、本書のchapter3が完成しましたので、今回は、chapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきました。 コミット履歴はこちら chapter4で作るアプリ chapter4で作るアプリは、ブラウザで動くTO DOアプリです。 ブラウザで動くアプリの留意点 アプリの規模が大きい場合は、ソースコードの見通しが悪くなるため、ファイルを分割する(モジュール)必要があります。 今回行ったこと 最終的に、コンソールに3と表示されるようにするために、サンプルファイルを用意して、webpackによって、typescriptをHTMLから呼び出せるようにしました。 最終的な…

  2. TypeScript 学習 part9

    こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーがゲームを選択できるようにしました。今回は、その続きです。 コミット履歴はこちら 行ったこと ゲーム終了後にゲームを変更できるようにした ゲーム終了後に、最初に選んだゲームを変更することが出来なかったので、ゲーム変更ができるようにしました。 before 【ゲーム開始時】 hit and blowか、jankenのどちらかを選ぶ 【ゲーム中】 選択したゲームで遊ぶ 【ゲーム終了後】 最初に選択したゲームで遊ぶか、ゲームを中止するかの2択 after ゲーム終了後に、次に遊ぶゲームを変更できるようにしました。 change gameという定数を追加して、 const nextActi…

  3. TypeScript 学習 part8

    こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーが想定外の難易度を入力した時の対処を行いました。今回は、その続きです。 コミット履歴はこちら 行ったこと ユーザーがゲームを選択できるようにしました 新たにジャンケンゲームを追加して、ゲーム開始時にユーザーが、「ヒット・アンド・ブロー」か「ジャンケン」のどちらで遊ぶかを選択できるようにしました。 実行の様子 jankenを選んだので、ジャンケンが開始されました。 GameProcedureクラス 新たにGameProcedureというクラスを作成して、今回の機能を実装しました。 class GameProcedure { private currentGameTitle: Game…

2022年4月

  1. TypeScript 学習 part7

    こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーがゲームの難易度を選択できるようにしました。今回は、その続きです。 コミット履歴はこちら 行ったこと ユーザーが想定外の難易度を入力した時の対処 ゲームの設定では、normalとhardモードしか選ぶことが出来ません。仮にユーザーがvery hardと入力してしまった場合は、エラーが発生してしまう状態でした。 完成後の画面 まずnormalかhardを選ぶことが明示され、ユーザーがvery hardを選んでしまったら、再入力を促すようになりました。 promptSelect関数の作成 ユーザーにモードの選択肢を表示するpromptSelect関数を作成しました。赤字の関数(prin…

  2. TypeScript 学習 part6

    こちらの本でTypeScriptの学習を進めています。 前回は、Hit&Blowにバリデーションを追加しました。今回は、その続きです。 コミット履歴はこちら 行ったこと never型 getAnswerLengthというプライベートメソッドに、never型を追加しました。 private getAnswerLength() { switch (this.mode) { case 'normal': return 3 case 'hard': return 4 default: const neverValue: never = this.mode throw new Error(`${neverValue} は無効なモードです。`) } } 型…

  3. TypeScript 学習 part5

    こちらの本でTypeScriptの学習を進めています。 前回は、Hit&Blowが一通り完成しました。今回は、その続きです。 コミット履歴はこちら 行ったこと 前回の不具合修正 前回、ゲーム実行時にendメソッド内の「試行回数」が表示されなかったのですが、もう一度コードを実行したら直っていました。 バリデーションの追加 ユーザーが、イレギュラーな値を入力した場合の処理を追加しました。 バリデーション実行結果 ソースコード validateメソッド(HitAndBlowクラス内に追記) private validate(inputArr: string[]) { const isLengthValid = inputArr.length…

  4. TypeScript 学習 part4

    こちらの本でTypeScriptの学習を進めています。 前回は、「Chapter3 Node.jsで動くアプリケーションを作ってみよう」に入りました。今回は、その続きです。 コミット履歴はこちら 完成したゲーム 今回作成しているゲームはこちらです。 一通りゲームが完成したので、ターミナルで実行して遊んでみました。 npm run buildで、tsをjsにビルド Mac:node-app shibatahiroshitaka$ npm run build > node-app@1.0.0 build /Users/shibatahiroshitaka/Desktop/study-typescript/node-app > tsc npm r…

  5. TypeScript 学習 part3

    こちらの本でTypeScriptの学習を進めています。 前回は、「Chapter2 基本的な文法」を学習しました。今回は、Hit & Blowというゲームを作成するという内容のChapter3に入っていきます。 こちらのブランチにコミットしていきます。 行ったこと 行ったことを書いていきます。 TypeScriptの環境構築 ゲームを作成するフォルダで、TypeScriptをJavaScriptにビルドするための記述と、JavaScriptを実行するための記述を行いました。 TypeScriptをJavaScriptにビルドするための記述 node-app/package.json { "scripts": { "build": "tsc" }…

  6. TypeScriptとJavaScriprの挙動の違いなど

    前回の記事でTypeScriptを学び始めました。今回はその続きをやっていきます。 TypeScriptとJavaScriprの挙動の違い 以下のコードは、数値の配列に対して、文字列に使用するtoUpperCase()を用いています。 const ageList = [30, 40, 50] ageList[0].toUpperCase() TypeScriptの場合、エディタ上で「プロパティ 'toUpperCase' は型 'number' に存在しません。」とエラー内容を教えてくれます。 しかし、JavaScriptの場合は、実行時に初めてエラーが表示されます。また、エラー内容がTypeScriptよりも分かりにくいです。 エラー…

  7. TypeScriptを学んでいきます

    最近、Workshipからの求人メールでTypeScriptの文字をよく見かけるので、学んでみたいと思います。 こちらの書籍を購入しました。 早速、本日学んだことをアウトプットしていきます。 学んだこと 学んだことを書いていきます。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセット(機能を拡張したもの)です。 ECMAscriptとは JavaScriptの仕様を定めているのがECMAscript(エクマスクリプト)です。 tscコマンド tscコマンドはTypeScript Compilerの略で、TypeScriptをJavaScriptに変換するためのコマンドです。例えば、以下のように入力するとhello.t…