こんにちは、Choimirai Schoolのサンミンです。

00  はじめに

Choimirai Schoolでは2024年1月29日（月）からAI Front-Dev開発コースをスタートします。JavaScriptのレッスンからはじめ、Reactの基礎、そしてChatbot UIの実装やコードの修正まで学べる６ヶ月間のプログラムです。

今回のnoteではプログラムの詳細とChatbot UI、Notion AI、そしてCursorを導入した理由についてシェアします。

01   なぜ、Chatbot UIなのか？

2022年12月から急速に注目を集めているのがChatGPTを含め、最新のAIを活用したChatbotです。中でも最もホットなツールがChatbot UI。

2023年3月に公開され、GitHubのリポジトリには2万3千人を超える人が星（お気に入り）をつけてます。

東大が2023年10月から学生・教職員に提供しているChatbotサービスにもChatbot UIが採用されています。

2024年1月にはChabot UI V2がリリースされ、ChatGPT Plusが提供するほとんどの機能をカバーしています。管理者がAPIキーを設定する機能も追加され、法人や学校での導入も期待されています。こうした変化の中で、Chatbot UIを実装し、開発できる能力は重宝されるはずです。

02 なぜ、Cursorなのか？

開発環境としてCursorを初めて紹介したのは2023年1月20日。

VSCodeにChatGPTを活用した拡張機能が主流だった時期に、AIに特化した独自の開発環境を作ったのが印象的でした。それから1年が経ちますが進化し続けていて、今は自分のプログラミング能力を何倍も拡張できる体験ができます。

あと、AI Front-End開発プログラムのゴールはChatbot UIを自らデプロイし、コードの修正までできるようになることです。ただし、他の人が書いたコードを理解し、修正することはそう簡単ではありません。とこで役に立つのがまた、Cursorです。個々のファイルに加え、コードベースに対して質問ができますので、全体の流れをフローチャートやシーケンス図にしてもらうことも簡単です。

▲Chatbot UIのシーケンス図を描いてもらった一例

03 なぜ、ReplitとReplit AIなのか？

Replitを知ったのは2020年からです。開発環境とホスティングサービスを一箇所で利用できるメリットはとてつもなく大きい。2022年7月にGPT-3を使って作ったChatBotも当初はReplitで開発し、運営したサービスです。

▲Replitで開発し、運営したChatBot

開発環境としてCursorを勧めていますが、初心者の方ですとローカルで開発環境を作るだけでもハードルが高い。ところが、Replitは全てがWeb上で完結しますので環境構築を気にせず、プログラミングに集中できます。

AI Front-Dev開発にはプログラミングの課題も多い。実際、手を動かしてプログラミングを書くことで実力を鍛えることができます。こうした課題をローカル環境で取り込もうとしますとプログラミングの問題ではなく、参加者の環境設定によって生じるエラーも多いです。利用するOSが、WindowsかMacかによって発生する問題も違っていて、トラブルシューティングが困難なケースも。AI Front-Dev開発では、課題をReplitを利用して提供していますので、開発環境の違いによるエラーを無くし、トラブルシューティングがしやすいメリットも大きいです。

また、2023年10月からは月10ドルだったAIサービスが無料で利用できるようになっています。

Replit AIを活用すれば「AI Front-End開発」の講義内容もより効果的に消化し、進めることができます。

04  なぜ、NotionとNotion AIなのか？

ハーバード大学の研究でも検証されているように、人の学びは経験からではなく、その経験を自分に照らし合わせ、何をどう思い、どう感じたかを省みることで起きます。

AI Front-End開発の勉強も一緒で、読んだだけ・聞いただけでは記憶に残るのは少ない。そして意図的に既知の情報と繋げないと翌日には忘れしまう。

日々の学びをNotionでまとめることでより効果的に知識として定着させることができます。

また、2023年2月には最新のAIを活用した、Notion AIも公開されています。

Notion AIを利用することでAI時代に必要な知識管理法が学べるのはもちろん、講義内容に関する質問も24/7いつでも可能です。

あと、レッスンはYouTubeからも受講できますのでSnipoを利用すれば、Notionでメモを取りながら受けられます。

同プログラムに参加されますとNotion PlusとNotion AIが無料（6ヶ月の場合、18000円相当）でご利用できます。

05  なぜ、Meta社の講義なのか？

AI Front-End開発で一番重要なレッスンはReactです。そして、Reactを学ぶベストな方法は、Reactを開発したMeta社から学ぶこと。

どう講義はCourseraでも受講できて、Courseraの有料会員になりますと修了証をもらうことも可能です。

Reactの講義は９個の講義で構成されているMeta Front-Dev Development Professional認定プログラムの一部となっています。全ての講義を修了すれば、プロフェッショナル認定証も取得できます。Courseraには奨学金制度もあって、ご希望の方には奨学金精度の申請もサポートさせていただきます。

06  なぜ、「今」なのか？

ChatGPTが公開されたのが2022年11月で、この分野において誰もが初心者だといっても過言ではありません。その分、AI関連分野へ参加する敷居も比較的に低い。「今」始めれば、AI関連事業を立ち上げるのも、関連ビジネスで活躍できる可能性も圧倒的に高いです。但し、時間が経つとこの状況は大きく変わる。敷居も高くなり、活躍したくても機会を得ることが難しくなると見ています。

6ヶ月後に待っている未来の自分のため「AI Front-End開発」を始めませんか？

07  AIを家庭教師として採用するメリット

ブルームの２シグマ問題は通常の授業を受けた生徒の平均よりも、マンツーマンの個別指導を受けた生徒の98%が優秀になるという研究結果です。

また、対話型AIと一緒に学習をすると一人で学習した時より最大36%の学習効果が得られるとのと研究結果もあります。

こうした研究でもわかるようにマンツーマンの家庭教師を採用するメリットはとてつもなく大きいです。しかし、24/7いつでも問い合わせができる家庭教師を雇うことはコスト面からしても到底無理な話です。ところが、Notion AIやReplit AIになりますと24/7いつでも相手になってくれる家庭教師と勉強ができます。

08  Front-End開発でAIを採用するメリット①：すぐ聞ける

プログラミングを初めて習うときはわからないことが本当に多い。わからないことがあると、調べるのにあまりにも時間がかかりすぎてなかなか前に進めない。が、NotionとReplitのAIを導入しますと講義を見ながら、簡単に答えを見つけ、動作確認ができるのでより楽しく学ぶことができます。

上記の図ではStringとList、そしてDictionaryの用法についてテーブルにまとめてもらった時の様子です。

あと、プログラミングを始めてから少し経つと正規表現（Regular Expression）という強者に出加えます。正規表現は使い方を覚えるのが難しく、ここで諦めた方も多いはず。Replit/Notion AIという家庭教師に聞くと正規表現も詳しく教えてくれますのでよりスムーズに学習を進めることができます。

09  Front-End開発でAIを採用するメリット②：日常の中でプログラミングが書ける

プログラミングを本気で上達させるためには日常の中でコードを書く環境を作るのが肝要。ただし、初心者の方ですと何を書けばいいのかがわからなく、コードを書く習慣を身につけるのが難しい。一方で、Replit/Notion AIと協力すれば初心者の方でも簡単にプログラムが書けます。

下記の図はReactを使った計算機プログラムをReplitで書いた一例です。Notion AIに聞けばすぐ教えてくれるのでどんな流れで書けばいいのか、勉強になります。書いてもらったコードはReplitへコピーしますと動作確認もすぐできます。

他にも、OpenWeatherMapのサービスを使って横浜の天気を確認するためのコードを書いてもらったり、PDFのドキュメントに対する質問ができるサービスを自力で立ち上げることも可能です。

10  Front-End開発でAIを採用するメリット②：迷路の出口を見つけやすい

プログラミングは迷路と似ています。迷路を上から眺めれば出口がすぐ見つけられますが、足元しか見えないと迷路から出ることは相当な努力が必要です。プログラミングでは簡単な迷路から始め、だんだん複雑になっていきますので難易度に合わせ、自分の目線をより高い場所へもっといく努力がとても大事です。

ファイルやフォルダの構成も一つのファイルではなく複数のファイルを連携しながら進めるプロジェクトも多い。こうしたプロジェクトをどれくらいの高さから見れるかで上達のスピードにも大きな差が出ます。

迷った時は、Notion/Replit AI/Cursorを活用し、自分の視線を少し高いところへ持っていくことができます。そうすると迷路の出口も見つけやすくなりますので超おすすめです。

11  プログラムの特徴①：レッスン動画＋家庭教師＋開発環境が一箇所で完了

AI Front-End開発では①レッスンの動画と講義ノート、そして②Replit/Notion AIという家庭教師、さらには③開発環境まで一箇所でアクセスできます。

全ての情報を一箇所で管理することで学習の効率は52％まで向上させることができます。

12  プログラムの特徴②：Notion AIでレッスン動画の字幕を日本語に訳せる

AI Front-Dev開発で採用しているMeta社の講義は、JavaScriptの基礎から始め、React、そしてChatbot UIの開発まで学べる素晴らしいコンテンツです。但し、全てのコンテンツが英語ですので少しハードルが高いのも事実。こうした課題もNotion AIを活用すれば解決できます。Snipoを利用しますとレッスン動画の字幕をNotionにコピーできますので、日本語に訳すのも簡単。

下記図はReact Basicの字幕の一部を日本語に訳した一例です。

13  プログラムの特徴③：スマホからも利用可

AI Front-Devで提供している全てのコンテンツはスマホからもアクセスできます。

Replitもスマホ用のアプリがありますので、Notion AIに教えてもらったコードをコピーすれば簡単に動作確認ができる。すると、隙間時間も有効活用できますのでより効果的にFront-End開発が学べます。

14  プログラムの特徴④：Replit公認コーチ＋Chatbot UIコントリビュータによる個別面談とオンラインコミュニティ

AIが持つ本来の力を引き出すためには、適切な質問をすることがとても大事です。例えば、少し工夫をすればFlaskのアプリなど複雑なプログラムを作ってもらうこともできる。

上述した指示文に対し、Notion AIが書いてくれたプログラムの仕様書がこちらです。

まずは、イントロと要件定義から。

そして、実装する手順。

それから、コードサンプルまで。

AI Front-Dev開発ではReplit公認コーチによる個別面談や専用のオンラインコミュニティを通じてこうした情報もシェアします。

あと、プログラムを担当しているサンミンはChatbot UIの日本語入力エラーを修正するなどChatbot UIのコントリビュータとしても活躍中です。

15  プログラムの特徴④：講義内容はNotionで復習できる

同プログラムではAI Front-End開発講義をNotionで復習できるプロジェクトをシェアします。

NotionのデータベースにはTableビュー以外にもカレンダービューが作れて、進捗を可視化することも簡単にできます。

同プログラムでは、Front-Endの学習内容をNotionでまとめることでNotionの使い方にもすぐ慣れる仕組みとなっています。

16  まとめ

AI Front-End開発は2024年1月にChatbot UI V2が公開されてようやく可能となったReactを利用し、Front-Endの開発が学べるプログラムです。

Notion AIとReplit AI、CursorとSnipoなど複数のツールを組み合わせることで最短でChatbot UIが開発できる仕組みを提供しています。

同時に、最新の人工知能がもたらす可能性も体験できるかと思っていますのでご検討ください。