START HERE / 読みもの
まず読む — 総論とコラム
コースを始める前に。プログラミングの全体像と、言語の地図をつかむ2本の読みもの。
AIと無料でつくる — はじめてのホームページ
ChatGPTにHTMLを作ってもらい、トップ画像まで作らせて、最後は世界に無料で公開(デプロイ)するところまで。フォルダ作りから1ステップずつ、中学生でも分かる超ていねい版。0円で「自分のサイトを世界に出せた！」を体験したい人はここから。
無料でつくる → learn.halvision.dev/first-websiteバイブコーディング時代の基礎知識
コースを始める前に読む総論。プログラミングとは何か、コーディングとの違い、バイブコーディングで何が変わるか、プログラマーとエンジニアの違い、そして未来予測まで。文末に「小学校高学年でも分かる図解版」つき。まずはここから。
総論を読む → learn.halvision.dev/vibeAIに任せる技術 — 指示・レビュー・検証の型
AIにコードを書かせる時代に、成果を分けるのは「頼み方」と「見極め方」。良いプロンプトの型、AIの出力を疑う検証の型、直すためのデバッグの入口、そして守り(安全)まで。総論の実践編。
実践ガイドを読む → learn.halvision.dev/ai-guideエラー文おみくじ — エラーを読めるようになるゲーム
英語のエラーメッセージを引いて、原因を3択で当てるミニゲーム。やさしい和訳と直し方つきで、「エラーで固まる」を「エラーはヒント」に変えます。JavaScript・Python・HTTP・Gitの定番エラーを収録。
ゲームで遊ぶ → learn.halvision.dev/errorsプログラミング言語ずかん
いま現役の主要言語を、系統(関係性)・得意分野・実際に使われているサービスの具体例つきで一望するコラム。なぜ言語がこんなに多いのか、AI時代に何をどう学ぶかまで。どれを学ぶか迷ったときの地図に。
コラムを読む → learn.halvision.dev/languagesHTTPとAPIのしくみ — 「ネットの向こう側」を読む
Webページやアプリが裏側でどうデータをやり取りしているか。リクエストとレスポンス、URL、HTTPメソッド、ステータスコード、JSON、APIを、レストランのたとえで一望。fetchやAPIのコードを読めるようになる読みもの。
読みものを読む → learn.halvision.dev/httpターミナル練習ジム — 「黒い画面」に慣れる
壊れない練習用ターミナルで、cd・ls・mkdir・git init などのコマンドをミッション形式で体験。「黒い画面が怖い」で環境構築前に脱落するのを防ぐインタラクティブ。何を打っても本物のPCには影響しません。
ジムで遊ぶ → learn.halvision.dev/terminal作った物を「仕事」に変える — ポートフォリオと自己PR
学んだ先の「就職・受注」に効く実践ガイド。未経験でも評価される作品の選び方、READMEの型、「読める・直せる・説明できる」の見せ方、自己PRの言語化、GitHub→Vercelでの公開まで。テンプレつき。
読みものを読む → learn.halvision.dev/portfolioNOW AVAILABLE
公開中のコース
基礎 → HTML/CSS → JavaScript → React の順が、Web制作の王道ルートです。
バイブコーディングの土台 — 言語共通のプログラミング基礎
まずはここから。言語に依存しないプログラミングの共通の考え方を、たとえ多めでやさしく。AIにコードを任せる時代に「読める・任せる・直せる・説明できる」人になるための必修コース。この後の各言語編の土台になります。
learn.halvision.dev/basics を開く →初めてのHTML/CSS — Webページの土台
Webページの三層(HTML=骨組み・CSS=見た目・JS=動き)から、レイアウトとレスポンシブまで。自分で全部書けなくても、AIが出したコードを「読めて直せる」状態に。早見表・用語集つきの4日間。
learn.halvision.dev/web を開く →初めてのJavaScript — Webページに命を吹き込む
HTML/CSSに「動き」を足すのがJavaScript。変数・条件・関数から、ブラウザを操作してデータを取得するところまで5日で。実装はAIに任せても、読める・直せる・説明できる力に振り切って学びます。Reactへの土台にも。
learn.halvision.dev/javascript を開く →初めてのReact — UIを組み立てる
7日で、コンポーネント・props・state・useEffectといったReactの考え方から、データを取得して表示する小さなアプリの公開まで。JavaScriptの次に進む、実戦志向の本格コース。読める・直せる・説明できるReactへ。
learn.halvision.dev/react を開く →初めてのGit — 壊しても戻せる安心
バージョン管理の考え方から、記録(commit)・GitHub連携・ブランチと実務フロー(PR/レビュー)まで4日で。AIにコードを試させて壊しても戻せる、全コースの実習を支える土台。ターミナル練習ジムとセットでどうぞ。
learn.halvision.dev/git を開く →初めてのSQL — データと会話する
ほぼ全てのサービスの裏側にある「データベース」を読む力。テーブルの考え方から、SELECT・集計とJOIN・書きかえと設計まで4日で。全部書けなくても、AIが出したSQLを読めて危険な操作に気づける状態へ。
learn.halvision.dev/sql を開く →初めてのTypeScript — AIプロダクトを作る
7日で、TypeScriptの基礎から「AIをフロントから呼ぶ小さなAIプロダクト」の完成まで。型があるとAIが生成したコードの間違いに早く気づけます。Day6でAPIルートからLLMを叩き、最後はVercelで公開します。
learn.halvision.dev/typescript を開く →初めてのPython — AI時代の第一歩
未経験でも7日で、Pythonの基礎を身につけ「AIを自分のコードから動かす」ところまで。実装はAIに任せる前提で、読める・直せる・説明できる力に振り切って学びます。Day6でLLM APIを実際に叩き、小さなAIツールを作ります。
learn.halvision.dev/python を開く →Laravel Bootcamp — 7日間で面接を突破する
「実装力」ではなく「設計思想を自分の言葉で説明できること」に振り切った学習アプリ。7日間カリキュラム・面接想定問答・実務用語集・理解度チェックを収録。登録不要・進捗はブラウザ保存で、今すぐ始められます。
learn.halvision.dev を開く →COMING SOON
近日公開 — 「初めての◯◯」シリーズ
未経験からでも実務のスタートラインに立てる、入門シリーズを準備中です。