キャリア··11min read

プログラミング独学ロードマップ【AIで今の仕事を変える5段階】

プログラミング学習ロードマップ独学AI駆動開発非エンジニア
プログラミング独学ロードマップ【AIで今の仕事を変える5段階】

教材の練習問題は解けるのに、月曜の集計はまた手作業。ChatGPTに説明してもらうことと、自分の業務を動く仕組みにすることの間には、まだ学ぶことがあります。僕が開発・運営するVibelyも、ShiftBの社内ツールから始め、教材管理や進捗管理を社内で使ってから外部へ提供したサービスです。

この記事では、今の仕事を続けながらAIで作る側になるための、プログラミング独学ロードマップを整理します。題材選び、基礎、試作、検証、引き継ぎの順番と、各段階を終える条件を示します。学習期間を一律に決める代わりに、手元に何が残れば次へ進めるかを確認してください。

この記事を書いた人:立川修平(ぶべ)

  • ShiftB校長。受講生のプログラミング学習とAI活用をサポート
  • 社内ツールから始めたVibelyを開発・運営
  • プログラミング学習・AI駆動開発の情報を発信

独学ロードマップの全体像:今の仕事から始める5段階

最初の目標は「言語を習得する」だけで終わらせず、「自分が説明できる作業を、架空データで動かす」に置きます。下の表は本記事の学習順序です。日数や合格率を表すものではありません。

段階学ぶこと次へ進む前に残すもの
1:題材業務を入力・処理・出力に分ける完成条件を書いたメモ
2:基礎画面・処理・保存の役割を読む自分の言葉で説明した構成図
3:試作AIに小さく依頼して動かす架空データで動く試作品
4:検証期待した答えと実際の結果を比べる確認結果と修正の記録
5:引き継ぎ使い方・制限・止め方を伝える別の人がたどれる手順書

「AIを学ぶ」の目的を、作りたいものから絞る

「AI 学習 ロードマップ」で探すと、機械学習やモデル開発の教材も出てきます。ここで扱うのは、AIを使って業務アプリを作る学習です。AIモデルそのものを開発する学習とは、必要な知識も成果物も違います。営業の案件整理や事務の転記を変えたいなら、まずその作業を題材にしてください。

例えば「架空の案件一覧から、未対応だけを表示する」。最初は入力を手元に用意し、外部への送信や本番データの更新を含めません。「営業支援システムを全部作る」まで広げると、学ぶ対象も動作確認も増えます。僕が発信している「機能はシンプルに、一点集中で」という考え方は、学習にも使えます。

分からないところに戻りながら、同じ題材を育てる

表は一度通過したら戻れない順番ではありません。試作してから変数を調べることも、検証中に保存先の理解へ戻ることもあります。ただし、AIの説明を読んだだけで「分かった」とせず、値や条件を変えて結果を確かめます。教材を終えた数より、自分で確認できる範囲を増やしてください。

本記事は全体の順序と到達条件を扱います。Webやデータベースの概念を、実際のアプリ作りと結びつけて学ぶ方法はシステム開発の学び方にまとめています。今どの段階にいるかを決めたあと、必要な部分を往復して読める構成です。

題材、基礎、試作、検証、引き継ぎの5段階と、それぞれの到達条件

基礎はどこまで学ぶ?画面・処理・保存を区別する

HTML・CSS・JavaScriptを、目の前の画面で読む

HTMLは見出しや入力欄などの構造、CSSは色や配置、JavaScriptは条件判定や操作への反応を担当します。MDNのコア学習モジュールも、この基礎から学べる構成です。最初から全項目を暗記する必要はありません。自分の試作品で「この入力欄はどこにあり、押したあと何が動くか」を追う教材として使います。

JavaScriptでは、値を持つ変数、条件による分岐、複数の行を扱う繰り返し、処理をまとめる関数を押さえます。案件の状態が「未対応」なら残す、という処理を読み、条件を変えると結果がどう変わるか予想できるのが最初の到達点です。構文を見ずに書けるかだけで判断しません。

TypeScriptはJavaScriptに型の検査を加える言語です。公式の初学者向け解説も、JavaScriptの学習がそのまま土台になると説明しています。型は値の扱いの間違いを見つける助けになりますが、業務の条件が正しいかは別途確認が必要です。基礎を飛ばして型の難しい書き方だけ覚える必要はありません。

Reactは画面を部品として組み立てるためのライブラリ、Next.jsはReactでアプリを作るための枠組みです。Reactの公式入門で部品と状態を確認し、画面が複数に増えたらNext.jsの公式ガイドへ進みます。初回の試作が小さなHTMLファイルで足りるなら、この順序を先取りして道具を増やさなくて構いません。

データの保存先と、誰が操作できるかを説明する

画面に行を追加できても、再読み込みで消えるなら保存の仕組みが別に必要です。ブラウザー内に残すのか、ファイルに書くのか、データベースという保存場所を使うのか。AIに構成図を描かせ、入力した値がどこへ移るかを指で追える状態にします。外部サービスとやり取りする窓口がAPIです。

次に、ログインする本人の確認と、「その人がどのデータを読んだり変更したりできるか」を分けて学びます。例えばSupabaseの行単位のアクセス制御は、データを行ごとに制限する仕組みです。画面から削除ボタンを隠しただけでは、保存先の操作権限まで制限したことにはなりません。

学習の確認として、画面を作るファイル、条件を判定する処理、保存先、利用者の権限を順に説明してみてください。答えが出ない項目があれば、その項目に絞って戻ります。まだデータベースを使わない試作なら、「保存しないので閉じると消える」と説明できれば、現在の制限が分かっています。

ここで難しいのは、知らない用語の数より、今の題材にどこまで必要かを決めることです。学習範囲が広がり続けるなら、作りたい業務と現在の試作品を見せて、次に学ぶ部分を相談する方法があります。AIシフトコースの無料相談会でも、その出発点を整理できます。

AI時代のアプリ開発コース

ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。

AIシフトコースを見る →

AIと試作し、コードを読んで確かめる

AIへの依頼は、完成条件と確認用データをセットにする

Claude Codeは、コードを読み、ファイルを編集し、コマンドを実行する開発支援ツールです。公式の機能説明を確認し、導入はClaude Codeの使い方に沿って進めてください。会社のPCでは、インストールとデータの扱いを先に社内ルールで確認します。

悪い依頼は「使いやすい案件管理アプリを作って」。何が完成かを判断できません。次の依頼例は、学習用の架空データと期待する結果まで指定しています。実際の顧客情報や接続用の秘密情報は使いません。

学習用に、案件一覧から未対応だけを表示する画面を作りたいです。
入力は架空の3件:A01=未対応、A02=対応済み、A03=未対応。
最初の表示結果はA01とA03の2件にしてください。
A01を対応済みに変えたら、A03の1件になることを確認したいです。
空の入力では「対象なし」と表示してください。
保存、ログイン、外部送信は今回は作りません。
まず使うファイルと処理を説明し、変更する前に計画を見せてください。

指示文だけで操作を強制的に止められるわけではありません。Claude Codeには編集や実行を制御する権限設定があり、Planモードではソースファイルを編集せずに調査できます。現在のモードと対象フォルダを確認し、試作用の場所だけで始めます。

動いたあとに、説明・答え合わせ・修正を行う

画面ができたら、最初の2件、状態変更後の1件、空の入力の順に確かめます。これは本記事で設計した練習問題の答えで、受講生の実績ではありません。AIが「確認しました」と言った場合も、何を入力し、何が表示されたかを自分で見ます。動かなければ、エラー表示と操作手順を残します。

次に「未対応を残す条件はどこか」「表示件数はどこで数えるか」「再読み込みするとどうなるか」を、AIにファイル名付きで説明させます。説明と画面の動きを照合してください。今回の練習は保存しない設計なので、状態変更が再読み込み後に残ることは要求していません。保存が必要になったときに、次の学習課題として追加します。

修正依頼は「直して」だけでなく、「A01を対応済みにしたが一覧に残る。期待はA03だけ。条件判定と画面更新のどちらに原因があるか説明して」と書きます。直ったら、最初に通ったケースも再確認します。変更点をまとめて増やすと、どの修正で結果が変わったか追いにくくなります。

動いた状態はGitという変更履歴の道具で記録します。GitHubの入門手順は、変更をコミットとして残す流れを説明しています。「何を直したか」と確認結果を一緒に記録すると、次に再開しやすくなります。共有する前には、秘密情報や会社のデータが含まれていないかも確認してください。

学習期間と目標を、自分の生活に合わせて決める

期間は「確保できる時間」と「終える条件」で計画する

独学に何か月かかるかは、出発点と作る範囲によって変わります。画面だけの練習と、保存・ログイン・社内公開まで含む開発を、同じ期間で扱うことはできません。このロードマップでは、習得までの日数を保証せず、各段階の成果物を小さく区切って予定を立てます。

例えば最初の週に学習枠を3回取れるなら、初回は題材と完成条件、次は基礎を見ながら試作、最後は答え合わせと学習メモに割り当てます。これは予定の例です。初回で終わらなければ、作る範囲を縮めて次の枠へ引き継ぎます。「予定の週数が過ぎたから公開する」という判断にはしません。

学習を終える前に「できたこと」「まだ説明できないこと」「次回最初に開くファイル」を書きます。忙しい週は新機能を足さず、前回の確認を再現するだけでも構いません。動画を見た時間と、手元で結果を確かめた時間も分けて残すと、計画を調整する材料になります。

止まった理由に合わせて、戻る場所を決める

入力と出力を言えないなら段階1へ。AIの説明の用語が分からないなら段階2へ。何を作るかは言えるのに動かせないなら段階3で、起動方法とエラーを確認します。動くが結果が違うなら段階4で、期待値を小さく分けて調べます。教材を最初から全部やり直す前に、止まった箇所を特定してください。

質問するときは、目的、操作手順、期待した結果、実際の結果、試した修正をまとめます。エラーの全文を共有する場合も、個人情報や鍵を取り除きます。「分かりません」という状態を、他の人が一緒に確認できる材料に変えることが、独学を進める練習になります。

作ったものを現職で使える状態へ近づける

成果は、同僚が使い方をたどれる形で残す

段階5では、架空データのまま、使い方と制限を他の人に説明します。手順書には、入力するもの、起動方法、期待する結果、保存の有無、エラー時の止め方を書きます。「作った本人が横にいないと使えない」箇所が見つかったら、操作や説明を直す次の課題になります。

仕事への効果を確かめるときは、従来の作業と試作品を使う作業で、対象範囲をそろえます。入力準備、結果の確認、手直しまで含めて記録し、処理だけが速くなったことを業務全体の短縮と呼ばないようにします。削減できなかった場合も、どこに人の確認が残るかが分かれば、改善の判断材料になります。

実務への移行は、権限と運用を確認してから

試作品の完成と、会社のデータで使ってよい状態は別の到達点です。移行前に、次を責任者や管理部門と確認してください。自分だけで判断できない項目を、AIの返答だけで完了にしないことが大切です。

  • 使うデータを、選んだAIや外部サービスに渡してよいか。
  • 許可した利用者だけが読み書きできることを、実際の操作で確かめたか。
  • 誤更新したときの復元方法と、元の作業へ戻す手順があるか。
  • 費用、利用条件、問い合わせ先、保守を担当する人を決めたか。

公開先にも条件があります。例えばVercelのHobbyプランは個人の非商用利用向けです。「小さいアプリだから社内利用も無料」と決めず、用途に合う契約を確認します。保存・認証を備える段階の具体的な実装はClaude Codeでアプリ開発する実践チュートリアルを参照してください。

試作品が動いたあとには、「自分は使える」から「他の人にも任せられる」へ進むための確認が残ります。AIシフトコースでは、今の業務を題材に学ぶことを目指します。無料相談会には、試作品と分からない項目を持ち込めます。次に補う基礎や、実務へ進む準備を具体的に相談してください。

AI時代のアプリ開発コース

ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。

AIシフトコースを見る →

今日の一歩は、繰り返している作業を1つ選び、入力と期待する出力を書くことです。すでに試作品があるなら、段階表のうち説明できない箇所から再開してください。学ぶ順番を決める基準は、教材の残りページではなく、手元で何を確かめられるようになったかです。

この記事をAIと深掘りする

要約・疑問の解消に。記事のタイトル・URL・参照元を入れた質問文が自動で入力されます。

AUTHOR

立川修平(ぶべ)

ShiftB 校長 / bubekichi inc. 代表

ShiftBを運営する株式会社bubekichiの代表。経理系SaaSの企業でエンジニアを経験後、独立・起業。複数スタートアップでリードエンジニアを務めながら、SNS発信がきっかけで2024年にShiftBを立ち上げる。現在は自社サービスも複数展開中。

RELATED ARTICLES

関連記事

COURSE

AI時代のアプリ開発コース

ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながら学ぶコースです。コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担える状態を目指します。まずは無料相談会でご相談ください。