1 小テスト

• 「小テスト6」を実施します。

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

• 課題3の詳細はこちら (第12回講義)
  • 課題3の共有リンク (学内のみ有効-OneDrive)

1.2 参考: PG1-自由作品2の作品共有

• 2024年度の2年生の「プログラミング1」の自由作品 (Python) の共有です。
  • PG1-課題7の共有リンク (学内のみ有効-OneDrive)

2 総括

2.1 JS/TS の状況

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

• Front-end Frameworks Ratios | State of JS
  • フロントエンドフレームワークの利用動向です。仕事における利用割合としては React (67%)、Vue.js (31%)、Angular (28%)、Svelte (11%) という結果がでています。
• State of JS
  • JS と TS の利用割合の調査結果、開発 (実装) における「AIによるコード生成」の割合に関する調査結果です。

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

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

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

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

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

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

  • Social Login | Supabase Docs

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

• v0 (ブイゼロ)。このあたりの技術の把握しておいてください。

3 Python と TypeScript の使い分けについて

Python と TypeScript 、C言語の使い分けについて。

4 AIの活用について

これからのプログラミングは、AI活用を前提にすべきと考えます。ただし、一定の責任をともなう場面 (つまり仕事) で使うなら、AIが提案するプログラムを理解 & 評価できるだけのプログラミング学習は別途必要です。

つまり「鶏南蛮定食」の英訳をAIに依頼して「South Wild Chicken Decided Food」と提案されたとき、あるいはアラビア語訳を依頼して「تشيكن وايلد ساوث فود فيكسد」と提案されたときに、その違和感や問題に気付いて修正できるような経験や能力が必要 です。そのために、ちゃんと基礎や理論も丁寧に理解し、学ぶことを心がけてください。

参考: 情報3の講義資料から抜粋

生成AIによって高品質なアウトプットが得られるようになっても、その分野の深い知識や理論、実践経験が必要なことは、画像生成AIを例に説明することができます。次の画像は、画像生成AIによって作成したものです。ぱっと見は、十分な品質の画像であり「もはやイラストのスキルなんて不要なのでは？」と短絡的に考えてしまうかもしれません。

しかし、画像を細かく見ていくと、左図のように多数の手直し（修正）が必要であることが分かると思います。先に示したようにAIによって画像の部分修正も可能になっていますが、本質的には「手直し」のために、絵心とPhotoshopなどのソフトウェアスキルが必要であることが分かると思います。 イラスト制作を仕事として引き受けている場合、顧客から修正指示があったときに「この画像は生成AIが出力したものなので、自分には修正できません」では通用しません。一方で、絵心がありPhotoshopも使えるという人であれば、画像生成AIの活用によって飛躍的に生産性や効率を上げることができます。エンジニアの仕事におけるAIの活用も同じようなものと考えてみてください。

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

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

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

5.1 注意

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

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

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

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

6 授業評価アンケート

当初は、バックエンドを「Django (Python)」、フロントエンドを「React (TypeScript/JavaScript)」を使って開発することを予定していました。しかし、9月中旬のアンケートの結果、Next.js によるモダン開発の希望が圧倒的多数 (12対2) だったので、シラバスを変更してバックエンドもフロントエンドも Next.js (React) を採用した開発 について学びました。

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

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

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