はじめに
今回、社内共有用のtechblogを作成しました。
このサイトは、Qiitaの記事を閲覧できるサイトになっており、最新の投稿情報も即時確認できるようになっております。
使用技術
- フロントエンド: React, Next.js
- 外部 API 連携: Qiita API, microCMS API
- バッチ処理: Node.js, ts-node
- CI/CD / 自動化: GitHub Actions
- 言語: JavaScript / TypeScript
- テスト: Jest, React Testing Library
主な機能
- 最新記事の一覧表示
- Qiita API から最新の投稿を取得し、リアルタイムで社内サイトに反映
- CMS 記事管理
- microCMS を利用して社内オリジナル記事の投稿・編集が可能
- テスト・安定性確保
- Jest と React Testing Library によるユニット・コンポーネントテストを実施
作成したアプリの概要
今回作成したのは、Qiita APIを利用したTechBlogサイトです。
APIを通じて最新の投稿情報を取得するため、投稿内容は即時にサイト上へ反映されます。
さらに、mockを使用したテスト機能も実装しており、APIの成功・失敗の挙動も確認可能です。
これにより、外部APIに依存する箇所でも安定したアプリケーションの動作を保証しています。
アプリ作成にあたって
今回はアプリ制作にあたり、初めて Next.jsを使用して開発を行いました。これまでの開発では Reactでのアプリ作成のみであったため、Next.js のApp Routerの設定では、何度も Reactでのルーティング方法と混同してしまいました。
しかし、開発を進めるうちに、React で学んだ知識がいかに役立つかを実感することができました。
もし最初に Next.js から学んでいたら、ルーティングや SSG / SSR の理解に時間がかかっていたと思います。今回の経験を通して、学習の順序や方法がいかに重要かを改めて実感しました。
おわりに
これまでアプリ作成において、数多くのエラーに直面するたびに調べ、試行錯誤を重ねてきました。そのおかげで、現在ではエラーの検知が早くなり、アプリの構造理解にもすぐに対応できるようになっています。
当初は勉強方法が全く分かりませんでしたが、学習を始めてわずか2か月でここまで成長できたのは、JISOUのサポートのおかげだと実感しています。これからも学習を怠らず、よりモダンなアプリ開発の知識を深めていけるよう努力していきます。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼