概要

1年生の後期にJavaScript基礎という授業があり、その授業の課題として制作したものです。
サイトを見てデジタル時計の実装をjsで行い、その後自分で自由に装飾や機能を追加するといった課題で、今回私は主な機能として時間帯で表示が変わる、色を自由に変更できる、というものを作りました。

制作の流れ

コーディング

デジタル時計の仕組みの部分は、参考サイトをもとに実装しました。
デザインは、デジタル時計ということで歯車などのデザインが思いついたので、Illustratorでデザインを作り、回るアニメーションをつけました。

昼と夜でデザインを切り替える方法は、授業で習ったif文を使いました。色の変更に関しては元々考えていませんでしたが、AIに面白い機能を考えてもらった中の一案で、それを採用して実装しました。下の画像が実際に昼と夜で変わるデザインです。色とアイコンが変わっています。

苦労した部分

実装部分で大変だった部分はあまりありませんでしたが、基本のデジタル時計の機能を作った後は自由に改造するという内容だったため、オリジナルの部分を考えるのが大変でした。そのため、AIに案を出してもらい実装できそうなものを選んで作りました。今回に限った話ではありませんが、AIに何かしら協力してもらうことが多くなってきました。先生も、今後のWeb業界もAIを活用した制作がどんどん増えていくとおっしゃっていたので、AIに慣れておいた方がいいと思いました。

制作を通して

JavaScriptは、エンジニアにとっては必須の技術だと思います。この課題は授業のまとめ的な作品で、jsでこのような面白い作品を作れるということが知れた制作でした。今後ももっとたくさんの知識を増やして色々なものを作っていきたいと思える経験でした。