計算機プロジェクト: なぜ簡単だったのか、そしてなぜハードルが高かったのか

こんにちは、Blazejです。

計算機プロジェクトに取り組むのはとても面白く、また、違った経験だったと言えるでしょう。より難しそうに思えたエッチ・ア・スケッチとは違います。では、どうしてそれが可能だったのでしょうか?

答えは、演習の難しさではなく、何か他のところにあるのかもしれません。まずは最初から始めましょう。

計算機プロジェクトの開始

私は 2024 年 5 月 2 日に Calculator の作業を始めました。最初のセッションには 3 時間かかりましたが、その間にセットアップして実行できました。正午頃だったので、最終的なコミットを行い、夕食を食べて、トレーニングすることにしました。

その日の午後はもう少しコーディングしたかったのですが、翌日に友人が遊びに来て、3泊する予定だったからです。

他の熱心な Odinist と同様に、私はコーディング、特に Foundations で最も重要なプロジェクトである Calculator から休憩を取りたくありませんでした。

予期せぬインスピレーション

コンピューターの電源を切ろうとしたとき、 ForrestKnight の YouTube ビデオがポップアップ表示されました。少し見て、彼がコーディングの楽しさについて語った直後に一時停止しました。

私はこのことについてよく考えてみましたが、コーディングを終えたばかりで、いまだにこの質問を頻繁に自分自身に問いかけている初心者としての私の視点は次のとおりです。

子供の頃からコンピューターに触れ、たくさんのゲームをし、物事の仕組みについて基本的な知識を持っている私のような人間にとって、答えは簡単ではありません。

しかし、私はこれまで一度もコードを書いたことがありませんでした。

コーディング経験の初期段階

しかし、コードを書いてそれが動作するのを見れば見るほど、そのプロセスが楽しくなることにも気付きました。これは特に電卓の場合に当てはまり、全体的にはスムーズに進み、深刻な行き詰まりに陥ることはほとんど避けられました。これについては後で触れます。

このプロジェクトは、グラデーションカラー変更ロジックの実装に 2 日間苦労した Etch-a-Sketch プロジェクトよりもはるかに簡単だと感じました。コーディングは確かに簡単ではありませんが、このプロジェクトでは 4 日間にわたって毎日約 1.5 ～ 2 時間費やしたため、管理可能でやりがいのある経験となりました。

VSCode を開くたびに、非常に生産的であると感じ、タスクを迅速に解決できました。作業中に最も興味深かったのは、この演習を解決できる他のオプションを想像できたことです。

まるで、レゴ テクニックのクレイジーな車を組み立てて、どんな機能をまた追加しようかと想像している子供のような気分でした。面白い感覚です。

プロセスを楽しむ

それは具体的にどういう意味でしょうか? 9 つの個別の関数を作成する代わりに、すべての数字ボタンのイベントを含む 1 つの関数を作成できることはわかっていました。

しかし、正しい作り方を忘れてしまったので、9 つの異なる方法で先に進むことにしましたが、この問題を解決する方法については、数レッスン前に提供されたドキュメントに戻って読むことを自分に約束しました。思った通り、そうしました。

私はあと 5 時間ほど何かに行き詰まるだろうと予想していましたが、実際にはそんなことはありませんでした。244 行のコードで動作するようになりました。

CSS の課題

さて、CSS を操作して、このプロジェクトのスタイルを少し変更する時が来ました。さて、そこで行き詰まりました。JavaScript を作成するよりも難しいように思えたのです。

信じられませんでした。このプロジェクトでは Flexbox を使う必要があることはわかっていましたが、ボタンは以前作った Etch-a-Sketch とは少し違って見えました。Etch-a-Sketch では、ループを使用してグリッドを作成するように言われました。

Flexbox で行き詰まったときはいつも、 Josh のブログ記事を参考にしています。私の意見では、Flexbox の仕組みについてこれ以上に良い説明はありません。

しかし、すべてのボタンが同じではないため、電卓でそれが機能するかどうかはわかりませんでした。たとえば、0 を大きくしたかったのです。

CSS グリッドについて言及されていたのを思い出し、記事を下にスクロールしました。実際にここで使用する必要があることがわかりました。

さらに、Odin が例として示した計算機も CSS Grid を使用して設計されました。

CSS グリッドの発見

この時点で、私は少し迷っていました。なぜなら、私が覚えている限り、私たちはグリッドにまったく触れていなかったからです。

私はグーグルで調べ始めました。何を見つけたでしょうか? 使い方についてかなり高度な説明が書かれた長い記事でした。私はまだその時期ではないと思い、グリッドについては後で紹介されるだろうと思っていました。

それに加えて、演習では Flexbox しか触れられていなかったので、グリッドも学習できればいいなと思います。そうでない場合は、いつか自分で戻ってきます。

ちょっとした更新 - 翌日、私は Odin Discord でこの投稿を見ました:

最終調整とUIデザイン

私はいくつかのdivを使い、HTMLでボタンを再グループ化することにしました。

もう一度勉強してみると、その電卓は普通の機器と何となく似ているように見えました。

キーボードサポートの追加

私にとって最後のステップはキーボードのサポートを作成することでした。

なんてこった！それは簡単なことではなかった。キーボードのキーがどのように機能するかを理解するために、イベントのレッスンに戻ってドキュメントを何度も読まなければならなかった。

イベント バブリングが混乱していたので、かなり大変でした。ボタンをクリックする 1 つの関数と、それを呼び出す 2 つの関数を作成するのがちょうど良いタイミングでした。1 つはマウスの「クリック」用、もう 1 つはキーボードの「キーダウン」用です。

すべての数字と等号ボタンを並べ替えることはできましたが、演算子のオブジェクトを使用してロジックを変更する必要があるため、演算子を使用しないことにしました。

この設定は、後で確認する必要がある場合に理解しやすいようです。

ただし、私が間違っている可能性もあるので、それを当然のことと思わないでください。

完成したプロジェクトはここで見ることができます:

電卓

反省と教訓

ここでの教訓は何でしたか? アプリの作成と設計のプロセスが楽しく、イベントについてたくさん学びました。このアプリで追加クレジット プロセスを実行することを強くお勧めします。

この記事を気に入っていただき、ヒントが役に立ったと感じた場合は、 Twitterで私をフォローして、最新情報やコーディングのヒントを入手してください。以下のコメント欄で、皆さんのコーディングの課題や成功についてぜひお聞かせください。