「仕様通りに作ろう!」実践的なReact学習サイトを公開しました🐾
はじめに
先日、与えられたお題・デザインに沿って作りながら React を学べるサービス
『React Road』を公開しました！
振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。
▼ サービス URL：
なぜ React Road を開発したのか？
React Road には、次のような特徴があります：
上記を踏まえて、プロジェクトの経緯は、主に２つあります。
（技術スタックは、その後に説明します）
1.継続的なコンテンツの追加
筆者が管理している、React 学習コミュニティでは、
毎週ハンズオン勉強会を行っています。
▼ 勉強会の紹介の記事：
なので、作ったアプリの掲載も兼ねて、少しでも何か役に立てばいいなと思いました！
それもあって、コンテンツの追加で困ることは、現状はないかなと思っています。
（継続的に、コツコツ追加していきます 👍）
2.基礎教材を終えた後の「次は何を作ればいいの？」に応えたかった
React の基礎学習には、
などをはじめ、様々なリソースがありますよね。
その後の学習としては、
いつまでも基礎ばかりでは、スキルアップできません。
とはいえ、いきなり大きなオリジナルアプリに挑戦して、挫折するケースも多いと思っています。
初心者特有の無茶な見積もりで、３ヶ月、４ヶ月、それ以上もかけてしまうのは、病みますね、、
（過去の自分がまさにそうでした 😇）
なので、「基礎 → オリジナルアプリ」の間に、
ちょうどハマるような、実践寄りのサービスを探してみました。
すると、意外と手軽におすすめしたり、URL を共有できるサイトがなかったのが、開発のきっかけです 💡
3.「実践的なスキルチェック軸で、気軽に見れる」イメージを求めて
実践寄りのサービスという方向で考えると、
英語圏にはスキルチェック・チャレンジ系のサービスがいくつかあります。
これは、下記のような特徴から、
一定層に人気があります：
とはいえ、やはり学習サービスは、「基礎」が１番人気です。
そもそも高いレベルの人は、学習サービスなど使わずに実践すると思うので！
なので、「基礎 → オリジナルアプリ」の間のユーザー層というのは、多くないだろうと考えました！
それを踏まえて、
React Road を、ふと思い出した時に、多目的に見に行けるサイトにもなればいいなと！
なので、メインの「スキルチェック」以外でも、
なので、現状は認証機能などはつけず、サンプルコードもサイトプレビューも全て見れます 😎
React Road は何で、どのように開発したか？
React Road は、以下の技術スタックで構築されています：
- ⚡ Next.js（App Router）による構築
- 🔄 Cloudflare Pages によるホスティング
- 📝 Zenn の記事との連携
- 🔍 GitHub API を使用したデータ取得
開発の過程でフォーカスしたことを、3 つ紹介します！
1.Next.js を Cloudflare Pages にデプロイ
Cloudflare Pages を選んだ理由は、下記の通りです：
- @opennextjs/cloudflare も検討したものの、慣れていた Pages で早く公開したかった
- ドキュメントを読んだところ、将来的に Pages→OpenNext への乗り換え手順が明確
- 上記を、別のデモプロジェクトで検証した結果、問題なく移行できた
とはいえ、Cloudflare Pages は、Edge Runtime 使用の制約や、ISR の制限があるので、
将来的には、OpenNext へ乗り換えたいと考えています！
📝Cloudflare へ公開前に設定しておくと良いことも調査したので、参考にしてみてください：
2. 将来的な拡張のためにサブドメインを使用
React Road は、5/12 に公開したばかりのベータ版です。
MVP として、早く公開したい思いと、
将来的な拡張を見据えて、サブドメインを採用しました。
具体的には：
- コミュニティサイト（
b13o.com）のサブドメイン（react-road.b13o.com）を使用 - 認証サービス Clerk は、デフォルトでサブドメインをサポート
- 将来的なユーザー認証も比較的簡単に実装可能です
これにより、サービス拡張時もスムーズに認証や、その他の機能追加が可能ですね！
3. AI 駆動開発に挑戦
ある程度、自分が慣れ親しんだ領域だと、割と新しい技術を毛嫌いしてしまいがちで、
AI エージェントツールは、あまり触れていませんでした。
今回は、個人開発ということもあるので、
しっかり目に、AI エージェントツールを使って練習してみるというサブテーマを設定しました！
最終的に、下記が大幅に開発の生産性を向上させました！
これらの AI 活用手法については、ニーズがあれば別記事にまとめる予定です！
おわりに
React Road は、
基礎を学んだ後の、より実践・実務寄りの学習をサポートするサービスです。
お題にチャレンジするだけでなく、
開発アイデアや、実装のインスピレーションを得たりと、
様々な使い方ができます！
👀 今後の展望としては、現状下記のように考えています：
- レビューシステムの導入
- コミュニティの強化（相談・共同開発の場の提供）
- ワークショップやハッカソンイベントの開催
そして、コンテンツをこつこつ追加していきます！
長くなりましたが、最後まで読んでいただだき、ありがとうございます 🥳
よかったら、以下の URL からチェックしてみてください！
そして、もし React Road が役に立つと思ったら、
この記事の ❤️Like ボタンを押してください！
または、このプロジェクトを広めるために、フォロワーや知り合いに共有してください！
Happy Hacking :)
Discussion