2022/08/29
【朝礼5回目】アプリを作ってみました。（JavaScript）
おはようございます。
職業訓練も残り２ヶ月を切りましたね。
4月19日の頃の自分は，こんなに早く時間が過ぎていくとは思っていませんでした。毎日を大切に過ごしていきます。
さて，今回の朝礼のテーマは前回と同じく『自分が身につけた技術』です。お盆休みに勉強したJavaScriptのことをみなさんに報告させていただきます。
参考書を見ながらアプリを作りました。自分の学習記録ですので，少々見にくいかもしれません。
タイマーアプリ
タイマーを作るためにどのような機能が必要になるかをまとめると，大まかに次のような機能が必要になります。
- ・ タイマーの時間を設定する
- ・ 現在の時刻をチェックする
- ・ 設定した時間に達したら通知・停止する
- ・ タイマーを止める
これらの手順をJavaScriptに当てはめると，次のような実装案になります。
「1. タイマーの時刻を決定する」は次の2つの手順に分解できます。
- ・ 現在時刻”Date.now()関数”に入力した秒を足して，タイマーの終了時刻を決定する
- ・ setInterval を呼び出して処理の繰り返しを開始する
「2. 繰り返しの動作」は次の2つの手順に分解できます。
- ・ 現在時刻と終了時刻の差分から，現在の時間をチェックする。
- ・ 終了時刻がきたら，clearInteval を呼び出して，通知・停止する。
「3. タイマーをストップする」は，clearInteval
を呼び出して繰り返しを停止します。
グローバル関数について
繰り返しの手順には， setTimeout と
setInterval を使います。
setTimeout と setInterval は，指定した時間（ミリ秒＝ms）が経過したらコールバック関数を呼び出す関数です。
setTimeout は一度だけコールバック関数を呼び出し，
setInterval はブラウザのウインドウを閉じるかページを移動するまで繰り返しコールバック関数を呼び出し続けます。
コールバック関数の呼び出しをキャンセルするには，戻り値を
clearTimeout と clearInterval へ渡します。この2つの関数のちがいは，コンソールで動作を確認すると分かりやすかったです。
タイマーアプリを作ってみて
まだまだ参考書に書かれている通りにコードを書いている段階ですが，
- ・ アプリの動作を一通り挙げる
- ・ 一つの動作をさらに細かく分解する
の2つを意識することができるようになりました。
また，動作の内容を人間に分かりやすい言葉からコンピュータに分かりやすい言葉に置き換えることが重要だと分かりました。
それができるかどうかが，プログラミングを身につける上での分かれ道のようにも感じました。
↓↓タイマーアプリのコードです↓↓
See the Pen Untitled by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.
ToDoリストのアプリ
Todoアプリは JavaScript で作る
Webアプリの基本機能がおおよそ網羅されているそうです。
アプリの基本機能とは，「生成(Create)」「読み取り（Read）」「更新(Update)」「削除(Delete)」の４機能で,
英語の頭文字をとってCRUD(クラッド)と呼ばれることもあります。
My ToDo
| Todo | 登録日時 | 優先度 | |||
|---|---|---|---|---|---|
※ページを読み込み直すと設定した ToDo は消えてしまいます。
ToDoリストのアプリを作ってみて
ToDoアプリ作りを通して，
- ・ エラーを修正する経験が積めた
- ・ コールバック関数をもっと練習する必要がある
- ・ CRUD（クラッド）の原則を知ることができた
といった気付きがありました。
Todoも参考書を見ながらコーディングを行いましたが，エラーが起こった時に模範解答を絶対にコピペしないことを決めて作りました。
何回も自分のコードを見返して，意味が分からないところは復習することで，コールバック関数の構造を理解できていないことや自分のタイピングミスのクセに気付くことができました。
また，CRUD(クラッド)の原則をTodoアプリの機能に当てはまえると，
ToDoアプリに必要なもの（どのような機能が必要になるか）
このようになり，アプリの基本的な機能が満たされることが分かります。
↓↓ToDoアプリのコード↓↓
See the Pen Untitled by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.
最後に…
参考にした書籍はこちらです。
『初心者からちゃんとしたプロになる-JavaScript基礎入門-』
この書籍には，後半でJavaScriptのフレームワーク「Vue.js」について学べる構成になっていました。職業訓練終了までの残り２ヶ月弱でこの書籍の後半も学習します。