公共職業訓練校での制作実績まとめ
目次
概要
公共職業訓練校で制作したページを記載していきます。
都度公開していればよかったのですが、ずっと溜め込んでいたままだったため一気に対応することになりました。
今後、制作した作品は当ページに追記していきます。
React
LINEクローンアプリ
Firebaseを採用し、Googleアカウントでのログイン機能やFirestore Databaseへの読み書きを実装した、LINE風の双方向メッセージアプリです。デプロイ先もFirebase Hostingにしています。
Firestore Databaseのルールをひとまず2025/11/30までのテストモードに設定しているため、期日をすぎると当アプリは動作しなくなります。
X(旧Twitter)クローンアプリ
XがまだTwitterだったころを再現したクローンアプリです。Firebaseに関しては上記と同様になります。
以下の部分が気になっているため、後ほど対応予定です。
- 投稿時のアニメーションにバグ(新規投稿ではなく最古の投稿にアニメーションが適用される)
画像投稿・カメラ撮影対応- 10/14追記：対応済み
ECサイトデモ
ECサイトのデモページです。バックエンドはExpress.jsで実装しました。このままデプロイしても動作しなかったため、動画のみの公開としています。
決済機能はないため、Stripe↗で実装できるか試してみる予定です。10/13追記：決済機能を実装しました。Stripeを触るのは初めてだったので戸惑いましたが、ひとまず動くところまで持っていけたのは自信につながりました。
ブログデモ
AI駆動開発を学ぶため、ブログシステムをバイブコーディングで構築しました。ログインしない場合でも公開記事一覧ページ↗にてすべての投稿内容を確認できるようにしてあります。
なお、右サイドバーは投稿記事と連動しておらず、仮の内容です。
ユーザー認証は訓練校の先生いちおしのClerk↗、DBはSupabase↗、Webhook周りでSvix↗、ローカルでのテストにはngrok↗、バリデーションチェックにZod↗を採用しました。
Prismaは初めて触ったのですがマイグレーションに苦戦し、結局一度npx prisma migrate resetすることになりました。
Supabaseは無料プランのため、DBが一時停止状態になっている場合がありえます。なるべく稼働状態を維持するようにしますが、エラーが起きている際はご理解いただけますと幸いです。
エージェントに開発を任せていると、あっという間にGithub CopilotとCursorの無料枠を使い切ってしまいました。今のところ無料で使う分にはGemini CLIがあまり制限を気にしなくてよいので有力な選択肢に思えます。
今後、時間が取れればSupabase Storageを使った画像投稿、記事のお気に入りやフィルター機能などを追加したいと考えています。10/22追記：両方に対応しました。
メモアプリ1
Reactの基礎やuseStateを学ぶための簡単なメモアプリです。なお、DB等は使用していないので内容は保存されません。
Redux ショッピングカートアプリ
Reduxを用いてECサイトのショッピングカート部分を制作しました。
学習曲線としてはやや急に感じましたが、状態管理ライブラリとしての知名度・人気を考えると、乗り越える壁のように思います。
お天気アプリ
都市名や国名で検索するとAxios↗でOpenWeatherMap↗のAPIを叩き、現地の天気を表示してくれるアプリです。
フロントエンドの実装しかないため、API KEYが見られないようアプリは公開していません。
TypeScript ToDoアプリ
TypeScriptの練習のために制作したシンプルなToDoアプリです。
クイズアプリ
useStateとuseEffectの勉強のために作ったクイズアプリです。
ToDoアプリ
uuid↗を用いてIDを管理するToDoアプリです。
useContextデモ
職業訓練校で採用されている教本のひとつ、『モダンJavaScriptの基本から始めるReact実践の教科書』↗の内容に基づいたデモになります。
グローバルなstate管理のためのuseContextを理解・実践するための、簡単な状態変更が行えるページを制作しました。
メモアプリ2
こちらも『モダンJavaScriptの基本から始めるReact実践の教科書』に基づいています。
API利用デモ
こちらも『モダンJavaScriptの基本から始めるReact実践の教科書』に基づいています。
Express.jsを用いてJSONを返すだけのAPIをバックエンドに作成、フロントエンドでは受け取った内容を表示するシンプルな実装となりました。
その後、JSON Placeholder↗で代用する内容に変更しリリースしました。
Tailwind.css デモ
Tailwind.cssを用いてポートフォリオ風のページを制作しました。内容はほぼすべて仮のものです。
Tailwindは慣れてくるとスピーディーに開発を進められるのがメリットだと感じましたが、レスポンシブ対応を進めていくうちにclassの値がどんどん肥大化していくのが気になりました。可読性や保守性が悪化しそうなので、このあたりの管理をうまくやる必要があるのかな、と思います。
Vite↗を使用しましたが、react-create-appより格段に高速で印象がよかったです。
useContext練習
useContextを理解するためのシンプルなページです。
useState + TypeScript練習
ログイン・ログアウトを切り替えるシンプルな実装でuseStateによる状態管理を学びました。
PHP + SQL
訓練校の方針によりXAMPPで動作させています。今ですとDockerのほうが採用されやすいかと思いますが(実際、以前在籍していた会社では使用していました)、未経験者には少々とっつきにくいところがありますので、そういった事情によるものかもしれません。
今のところローカルでしか動作しないためデプロイはしていません。各ページの挙動に関しては動画でご確認いただけます。
家計簿アプリ
CRUD実践のための簡単な家計簿アプリです。収支の登録・編集・削除が行えます。デザインはBootstrapに任せています。
フォームデモ
シンプルなフォーム送信のデモです。SMTPの設定まではしていないので送信完了ページでWarningが出ます。
2ch風BBS
書き込みが行える2ちゃんねる風のBBSです。
HTML + CSS
Githubへのアップロード、およびNetlify Dropを使ったデプロイは、コマンドやGithub Desktopではなくドラッグ&ドロップで行いました。今後更新する予定のない静的サイトであればこれで十分だと感じました。
Netlify Dropは便利ですが、今でも日本にサーバーがないようなので、ページの読み込みには少し時間がかかる場合があります。
背景動画
動画を背景でループ再生するページですが、ファイル自体がかなり重く(20MB)、再生までに時間がかかることがあります。もう少し圧縮しておくべきだったかもしれません。
3Dスクロール(CSS)
CSSで3D風に表示することもできることを学ぶためのページです。
ECサイト
音楽再生
レスポンシブデザイン1
訓練校で採用している教本『1冊ですべて身につくJavaScript入門講座』↗に基づいたページです。
レスポンシブデザイン2
訓練校で採用している教本1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］↗に基づいたページです。
レスポンシブデザイン3
PC向けLP
