【ITニュース解説】Days 1–3 | 50 Projects in 50 Days

システムエンジニアを目指す皆さんにとって、実際に手を動かしてウェブアプリケーションやツールを作成する経験は非常に重要だ。今回は、「50 Projects in 50 Days」という、50日間で50個の小さなプロジェクトを作成するという挑戦の最初の3日間がどのようなものだったか、その具体的な内容とそこで得られた学びについて詳しく解説していく。

まず、初日「Day 1」に取り組んだのは「Expanding Cards（拡張するカード）」というプロジェクトだ。これは、ウェブページ上に複数の画像カードが並んでおり、そのうちのどれかをクリックすると、選択されたカードだけが大きく広がるというシンプルなものだ。クリックされていない他のカードは小さく縮む。このプロジェクトの目的は、ユーザーがクリックした要素だけを強調表示し、動的な視覚効果を加えることにある。実装のポイントは、HTMLというウェブページの構造を記述する言語で画像カードの要素を配置し、次にCSSというウェブページの見た目を整える言語を使って、カードの初期の状態や拡大・縮小時の見た目を定義することだった。特に、CSSのflexというレイアウト機能を使ってカードを並べ、transitionという機能を使ってカードがスムーズに拡大・縮小するアニメーション効果を実現した。そして、JavaScriptというウェブページに動きを付ける言語の役割は、ユーザーがカードをクリックしたときに、そのカードに「active」という特別なクラス名を追加したり、他のカードから「active」クラス名を削除したりすることだった。この「active」クラスが付与されているかどうかに応じて、CSSがあらかじめ定義しておいた拡大・縮小のスタイルを自動的に適用するという仕組みである。このプロジェクトを通じて、シンプルなHTMLの要素にクラス名を付けたり外したりするだけで、CSSと連携して強力な視覚効果を生み出せるという基本でありながら強力なテクニックを実感したという。

次に、「Day 2」は「Progress Steps（進捗ステップ）」に取り組んだ。これは、ウェブページの上部に複数の丸いステップ表示が横一列に並んでおり、それぞれのステップが線でつながっているデザインだ。ユーザーが「次へ」や「前へ」のボタンをクリックするたびに、現在どのステップにいるかを示す丸と、そこまでのつながりの線が色を変えて強調表示される。例えば、会員登録のプロセスなどで「入力→確認→完了」のように段階的に進む様子を示す際によく用いられるUI（ユーザーインターフェース）だ。最初の実装では、丸いステップの要素の間に一本一本のバー（線）の要素を直接配置する方法を試した。つまり、「丸 → バー → 丸 → バー」といった形でHTMLを構成し、JavaScriptで各バーの表示・非表示を切り替えるようなアプローチだった。しかし、この方法ではすぐに問題点が見つかった。もし将来的にステップの数を増やす必要が生じた場合、HTMLの構造も変更し、新しい丸の要素とそれに対応するバーの要素を一つずつ追加しなければならない。これは非常に手間がかかる作業であり、コードも複雑になりやすい。そこで、より良い解決策として採用されたのが、すべての丸いステップ要素の「下に」、一本の長いバー要素を配置するという方法だった。そして、ユーザーが進捗ボタンをクリックするたびに、その一本のバーの「幅」をJavaScriptで計算し、現在のステップ数に応じて適切に調整するという仕組みに変更したのだ。例えば、全5ステップのうち3ステップ目であれば、バーの幅を全体の60%にする、といった具合だ。これにより、ステップの数を増やしたい場合でも、HTMLの構造を大幅に変更する必要がなくなり、JavaScriptでバーの幅を計算するロジックだけを修正すれば済むようになった。Day 2のプロジェクトを通じて得られた大きな学びは、コードを書く際に無駄な繰り返しや重複が見られる場合、必ずより洗練された、効率的な解決策が存在するということだ。また、JavaScriptは、単にHTML要素のクラスを操作するだけでなく、要素のスタイル（この場合は幅）を直接動的に変更する役割も担うことが示された。

そして、「Day 3」は「Rotating Navigation（回転するナビゲーション）」という、非常に目を引くプロジェクトに挑戦した。これは、ウェブページ上のメニューボタンをクリックすると、ページ全体がくるっと回転し、その動きに合わせてページのサイドからナビゲーションメニューが出現するという、インタラクティブなUIだ。まるで本が開くかのように、ページの内容が横にスライドして隠れ、その裏からメニューが現れるようなイメージだ。このプロジェクトの実現における鍵は、まずウェブページのすべてのコンテンツ（本文、画像、ボタンなど）を一つの大きなHTMLのdiv要素、つまり「コンテナ」の中にまとめて配置することだった。このコンテナ要素に対して、CSSのtransformプロパティとその中のrotate()という機能を使うことで、要素を任意の角度に回転させることができる。メニューボタンがクリックされていない初期状態では、このコンテナは通常の状態だが、JavaScriptがメニューボタンのクリックを検知すると、「show-nav」という特別なクラス名をこのコンテナ要素に追加する。すると、CSSが「show-nav」クラスが付与されたコンテナに対して、「〇度回転させる」というスタイルを適用するのだ。さらに、サイドナビゲーション自体は、初期状態では画面の外に配置されており、コンテナが回転してスペースができたときに、適切な位置に表示されるようにCSSのpositionプロパティなどで調整された。このプロジェクトでは、HTMLの構造をいかに適切に設計するかが重要だった。すべてのコンテンツを一つのコンテナで囲むことで、そのコンテナ一つを操作するだけでページ全体に影響を与えることが可能になったからだ。実際にボタンをクリックしてページ全体がダイナミックに回転する様子を見たときには、大きな達成感があったという。

これら3日間のプロジェクトを通じて、筆者はいくつかの重要な学びを得たようだ。一つは、「Day 2」の進捗ステップの例でも示されたように、もしコードの中に無駄な重複や繰り返しが見られる場合、それはより良い、より効率的な解決策が存在する明確なサインであるということだ。システムエンジニアにとって、保守性や拡張性の高いコードを書くための重要な原則の一つと言える。もう一つは、ウェブ開発において視覚的な「魔法」の多くはCSSによって実現され、JavaScriptは主にその魔法を発動させるための「スイッチ」」や「トリガー」の役割を果たすことが多いという洞察だ。CSSは要素の見た目やアニメーション、レイアウトを強力に制御できる一方、JavaScriptはユーザーの操作に応じてクラスの追加・削除やスタイルの動的な変更を行うことで、CSSの表現力を最大限に引き出すのだ。この基本的な役割分担を理解することは、効率的でメンテナンスしやすいウェブアプリケーションを構築するために不可欠だ。これらの実践的な学びは、座学だけでは得られない貴重な経験であり、システムエンジニアとしてのスキルアップに大いに貢献するだろう。筆者はすでに「Day 4」へと意欲的に進んでいる。