React.js/Next.jsの習作としてシンプルタイマーを作ってみた
React.jsとNext.jsを学ぶために、シンプルなタイマーを作ってみました。
今回は、そのタイマーの制作過程をご紹介していきたいと思います。
以下のリンクから試すことができますので、ぜひ試してみてください。
このタイマーの使い方ですが、直感的に使用できるように、60以上の数値を打ち込んだ場合は自動で時や分に変換するようになっています。
例えば 00h:00m:90s と入力した場合、90秒は1分30秒なので、00h:01m:30s とタイマーが設定されます。同じように 00h:90m:82s とした場合は、90分は1時間半、82秒は1分22秒なので、01h:31m:22s と設定されます。
開発の経緯
僕はフロントの技術を使った開発経験がほとんどありませんでした。
そこで、フロントのフレームワークであるReact.jsとNext.jsに慣れるため、まずはこのようなシンプルなタイマーを作ることにしました。
特徴としては、時間を電卓のようなキーで設定できる点です。昔、似たようなタイマーを持っていたのですが、それと同じようなタイマーアプリをあまり見かけなかったので、自分で作ることにしました。
僕は、プログラミング言語自体の勉強も大事だと思いますが、実際に何かを作る経験がもっと学びになると感じているので、このタイマーの制作は勉強の一環として行いました。
また、将来的にスマートフォンのアプリにも展開したいと考え、React Nativeにも対応できるようにReact.jsでの開発を選びました。
どうやって作っていったの？
今回の開発では、ChatGPTを積極的に活用する方針を取りました。
GitHubのCopilotを使っている際に感じたのですが、慣れていないフレームワークや言語を扱う時、AIとペアプログラミングすることで技術力が向上すると感じました。
そのため、今回もさまざまな技術を深く理解したく、GitHubのCopilotやOpenAIのChatGPTを積極的に使用しました。
AIを活用した開発方法については、別の記事で詳しくまとめる予定ですので、お楽しみに。
苦労したところ
今回、特に苦労したのは、App RouterとPages Routerの違いでした。
Pages Router
App Router
React.jsの現行のチュートリアルでは、Pages Routerを中心に解説がされています。
しかしMeta社は今後、App Routerを推奨していく方針にもかかわらず、それを学ぶためのチュートリアルがなく苦労しました。
また、Pages Routerと微妙に違う部分があり、その違いを理解するのに時間がかかりました。とにかくひたすらPages Router と App Router のドキュメントを何往復もして勉強しました。
やって良かったこと
この経験は非常に勉強になりました。
ドキュメントを読みながらの開発だけでは、ReactのHookに慣れるのにも時間がかかったでしょう。
useStateは基本中の基本ですが、他にもuseEffectやuseMemoなど、多くのフックが存在します。
これらの技術をAIとペアプログラミングすることで、どのように使用するのかが非常に理解しやすくなりました。
今後も、この手法を活用してさまざまなアプリの開発を進めていきたいと思っています。
Discussion
888888を入力してスタートを押すと89h29m28sからスタートしました！
コメントありがとうございます！
実はこのタイマーは60以上の数値を打ち込んだ場合は、自動でその数値を分や秒に変換するようになっています。
例えば90と入力した場合(つまり 00:00:90 とした場合)、90秒は1分30秒なのでそのようにタイマーが設定されるという感じですね。
そのため、88:88:88 と入力した場合は、88h + 1h28m + 1m28s = 89h:29m:28s になる、というわけです。
しかし記事ではこのあたりについて全く言及していませんでした、ご指摘助かります！のちほど本文にも追加しておきます。
なるほど！
そういう仕組みだったんですね！
バグかと思って思わずコメントしちゃいました笑
いえいえ、とんでもないです！
僕も「アプリの使い方を説明する」という初歩的なことを忘れておりました...。
読んでくださっている方の目線が抜けていましたので、ご指摘いただけてとても助かりました！ありがとうございます！