1 課題3 (最終課題) の作品共有

• 課題3の詳細はこちら (第12回講義)
  • 実際の内容評価 (採点) は、早ければ 02月24日 (火) から開始予定です。もう一度、注意事項を確認し、問題があれば早急に修正してください。
    • URLは変更不可です。
  • 課題3の共有リンク
    • 教員側のURLのコピペミスがないか確認してください。

1.1 最終チェック

最低限、必ずチェックしてほしい事項です。詳細はこちらで確認してください。

• ✅ GitHub (ウェブサイト) で閲覧したとき、README.md の体裁が整っている。
  • ⚠️ ## 制作時期 や **使用ライブラリ** のように、マークダウン書式が適切にレンダリングされていない箇所があれば、大幅減点です。
• ✅ README.md の先頭付近に「アプリをホストしている Vercel の URL」が記載されている。
  • 正常にリンクして閲覧可能 (公開アクセス可能) なことを確認してください。
• ✅ README.md に「開発期間: 2026.01.xx ~ 2026.02.xx (約XXX時間)」に相当する内容が記載されている。
• ✅ README.md に最低でも5枚以上のスクリーンショットが掲載されている。
  • アニメーションや動画 (リンク) でも可。むしろ推奨。
• ✅ Supabase が停止モードにならないように GitHub Actions を利用して定期的に Ping を飛ばす処理が設定されている。

2 総括

2.1 成績評価

総合成績（年度末の最終成績）は、シラバス記載のように「課題70%、小テスト30%の割合で総合して評価」します。

• 課題1(10点満点) を 2.5倍、課題2(10点満点) を 1.5倍、課題3(10点満点) を 3倍した 合計70点 (小数以下四捨五入)
• 全4回の小テスト (各10点満点) の合計40点を 30点換算 (小数以下四捨五入)

2.2 JS/TS の状況

State of JS は JavaScript を使ったシステムの開発者に向けての調査を実施・公開している有名なウェブサイトです。近年の JS/TS のトレンドを把握しておいてください。

• Front-end Frameworks Ratios | State of JS
• State of JS

2.3 JS/TS の将来性や現在の位置づけ

• なぜTypeScriptが世界的に流行っているのか@YouTube
• 次は何が来る？2025年最新フロントエンドのトレンド大公開@YouTube
• Webアプリケーション開発においてはTypeScriptが一強です(断言)、について解説します@YouTube

2.4 この授業ではカバーできていないこと

この授業内では、時間や難易度の関係で触れることはできませんでしたが、アプリケーションエンジニア (特にウェブ系) を目指すのであれば、以下についても学んでおくことをお勧めします。

• Github Flow。個人開発の場合、最低でも Git に「mainブランチ」のほか、「developブランチ」を作成して開発することが望ましいです。また、チーム開発の練習として「developブランチ」から「feature/xxxxブランチ」を分岐させて機能実装して、developブランチに対するプルリクを作成してマージするというスタイルにも慣れておいて欲しいです。

• サインアップ機能の実装。授業の範囲内では、Supabaseのダッシュボードから、管理者がアプリ用のユーザを直接的に作成しました。しかし、Supabase ではサインアップのための機能 (API) も提供しています。メールアドレスとパスワードを使ったサインアップの他、Google をソーシャルログインを使ったソーシャルログインにも対応しています。開発したアプリを実際に使用してもらうことを考えた場合の必須機能になるので、ぜひ、抑えておいてほしいです。

  • Social Login | Supabase Docs

• ソフトウェアテスト。実務のアプリ開発には必ず「ソフトウェアテスト (テスト)」という工程が含まれ、重要な位置付けになっています。また テスト駆動開発 (TDD:Test-Driven Development) という開発手法も存在します。そのため、簡単にでもテストツール (Jestなど) を使ったテストの流れや具体的方法に慣れておくことをお勧めします。就活のためのポートフォリオという観点でも、少しでも良いのでテストを含めておくと評価が高いと思います。特にバックエンドのDB関連の処理ではテストを書いておくと良いです。

3 ポートフォリオのブラッシュアップ

情報系でいうところの「ポートフォリオ」は、文脈によって次のように2つの意味を持つので注意してください。

• 「作品集」としてのポートフォリオ
  • 自分のスキルや実績を示すために、過去に開発したアプリやプロジェクトをまとめたものを指します。個人ウェブサイトとして作成・公開されることが一般的です。
• 「単体アプリ」としてのポートフォリオ
  • 就職活動やスキルの証明として 特定の技術や開発能力を示すために作成されたひとつののアプリを指します。GitHubリポジトリとして公開されることが一般的です。また、ウェブアプリの場合は、実際にデプロイ、公開されているURLとして公開することも多いです。

3.1 注意

現在、「課題3」として公開してもらっているアプリは、GitHub Actions を利用して (最低でも1日1回は) サービスにアクセスするようにして、Supabase が停止モードにならないように工夫しています。しかし、GitHub Actions は 最終の Push から90日を経過すると停止する ので注意してください。つまり、README.md でも何でもよいので、90日には1回は、更新して Push するようにしてください。ポートフォリオとして見てもらいたいときに、サービスが停止していることがないように注意してください。

3.2 よりよいポートフォリオ✨にしていくために

次のYouTube動画 (おすすめ順に掲載) を参考にしてください。「技術」と同じぐらい「着眼点」や「見せ方」が重要になってきます。

• 絶対内定・エンジニア転職で面接官に愛されるポートフォリオ教えます
• IT業界に転職する際に知っておくべきポートフォリオの話
• エンジニア転職】ポートフォリオのアンチパターン3選
• 未経験からエンジニア転職に成功したポートフォリオ 10選!!
• ポートフォリオ紹介・Webエンジニア転職に成功された方々のポートフォリオを紹介します!
• エンジニア転職における「ポートフォリオ不要論」について
• 無料で使える・ポートフォリオのレベルを跳ね上げるWeb API 5選
• ポートフォリオは頑張って作るな！プログラマー転職で失敗しない極意を伝えます
• エンジニア転職で採用されるポートフォリオの具体的な作成手順

4 授業評価アンケート

本科目の達成目標は、以下のようになります。

1. Next.jsとTypeScriptを用いて基本的なウェブアプリケーションの開発ができる。
   
2. リレーショナルデータベースの設計とORMによるデータアクセス処理の実装ができる。
   
3. 認証と認可の処理を備えたセキュアなウェブアプリケーションの設計と運用ができる。
   
4. ホスティングサービスを利用してウェブアプリケーションのデプロイメントと公開ができる。

• 授業評価アンケートに回答