【環境構築ゼロ】AI研究室の初心者が挫折しないための学習Webアプリ「AIbrary」を作りました！(Next.js 16 + Pyodide + Clerk)
1. はじめに（こんな悩みはありませんか？）
どーも、AI系の研究室に所属しているマヌカ-ハニーです。
研究室に配属されたばかりの頃、私自身はプログラミングが全くの初心者で、毎日以下のような悩みを抱えていました。
- 「AIって結局何を勉強すればいいの？」
- 「Pythonって何？NumPyやPandas、聞いたことはあるけど何に使うの？」
- 「研究テーマは決まったけど、何から始めればいいかわからない…」
- 「そもそも、環境構築ってどうやるの…？」
実際、AI分野の勉強を始めようとしても、「Pythonのインストール」「VS Codeの導入」「環境構築」の段階でつまずいてしまう人は少なくありません。
そこで、「環境構築不要・ブラウザだけで今すぐ学習を開始でき、最終的には研究現場（基礎）レベルの実践までステップアップできる無料サイト」 を作成しました！
2. 開発したWebアプリ「AIbrary」
- 🔗 サイトURL: https://a-ibrary.vercel.app/
- 💸 費用: 無料（進捗管理用のサインイン機能あり）
💡 コンセプト：
まずはブラウザで手軽に基礎を固め、最終的には自分のPC上で研究室の実務（GPU環境・PyTorch）にスムーズに移行できる、シームレスな学習ロードマップを提供します。
※Pytorchを使用したAIモデル開発の記事は制作中です。しばしおまちお(__)
3. AIbrary の 4 つの特徴
① 環境構築不要！ブラウザを開いた瞬間からスタート
通常、AI学習を始めるにはPythonのインストールやライブラリの導入など、面倒な初期設定が必要です。本サイトではそれらを一切気にすることなく、アクセスした瞬間に学習を始められます。
② 妥協のない「本格ハンズオン形式」
ただ文章を読む座学ではなく、ブラウザ上に組み込まれた本格的なエディタで実際にコードを書き、その場で実行して結果を確認できる構成にしています。
③ モチベーションが続く「進捗管理機能」
「どこまで読んだっけ？」とならないよう、ログインすることで 「読みました」ボタンからページの既読・進捗状況を管理できる機能 を搭載しています。自分の成長が視覚的にわかるので、継続して学習を進められます。
④ 実務・研究に直結する完全ロードマップ
「Webアプリの中だけで完結するおもちゃ」ではありません。
基礎をブラウザで学んだあとは、実際の研究現場やプロの開発現場で使われているモダンなツール（VS Code / PyTorch / GPU）に自然にステップアップできるカリキュラムになっています。
4. このサイトで学べること（2ステップ構成）
🟢 【ステップ1】基礎編：ブラウザ完結で土台作り（環境構築不要）
プログラミング未経験から、AI研究で頻繁に登場するライブラリの基礎までをステップバイステップで学びます。
| カテゴリ | 学べる内容 |
|---|---|
| Python基礎 | 変数、型、リスト、辞書、条件分岐（if）、繰り返し（for）、関数、モジュール |
| AI・データ分析基礎 | NumPy / Pandas / Matplotlib （データの扱い方と可視化） |
| AI学習の基礎知識 | AI/機械学習とは何か、データセットとは、学習と推論の違いなど |
🔵 【ステップ2】応用編：本格開発体験へ（自分のPCで挑戦！）※制作中
「Pythonの基礎は理解できたから、実際のAIを作ってみたい」という方のための章です。
- 開発環境： VS Code ➔ Google Colab (VS Code拡張機能経由でクラウドGPUを利用)
- フレームワーク： PyTorch
- ゴール： 手書き文字認識AI（MNIST）を作ってみよう！
自分の手でモデルを構築し学習させる体験を通して、 「データの読み込み ➔ 前処理 ➔ モデルの学習 ➔ 推論 ➔ 結果の確認」 という、機械学習プロジェクトの一連の流れを丸ごと体験できます。
5. Webアプリの技術スタック
Qiita読者のみなさん向けに、このアプリの裏側の技術構成も共有します。
Next.js 16 をベースに、フロントエンドでのPython実行と、セキュアなユーザー管理を組み合わせたモダンなアーキテクチャを採用しています。
- フロントエンド: Next.js 16 (React)
- 認証・ユーザー管理: Clerk（「読みました」ボタンと連動した進捗管理に使用）
- Python実行環境 (WebAssembly): Pyodide 0.29.3
- コードエディタ: @monaco-editor/react 4.7.0
- ORM / データベース: Prisma 7.4.1/Postgres 17
- ホスティング: Vercel
技術的な工夫点
ブラウザ上でPythonを安全かつ高速に実行するため、Pyodide を採用してクライアントサイド（WebAssembly）でコードを評価しています。エディタ部分には Monaco Editor を使用しているため、初学者がストレスなくコードを書けるリッチな開発体験を目指しました。
また、ユーザーの学習モチベーションを維持するための「進捗管理（既読機能）」には Clerk と Prisma を組み合わせて実装しています。Clerk のおかげで、セキュアかつスピーディにユーザーに紐づいた進捗データをハンドリングすることができました。
6. おわりに
私自身、研究室に入った当初は何から勉強すればよいかわからず、本当に苦労しました。
同じように「AIに興味はあるけど、何から始めればいいかわからない」という方の助けに、少しでもなれば嬉しいです。
無料で利用できますので、ぜひ気軽に触ってみてください！
また、 「ここが分かりにくかった」「こんなコンテンツを追加してほしい！」 といった改善点や、 「技術的にここはこう改善できるのでは」 というエンジニア目線のフィードバックがあれば、コメント欄で教えていただけると開発の励みになります。
今後もまたAIモデル開発の記事は随時更新していけたらと思います。
よろしくお願いします！