STEP 1
きほん
Webとコンピュータの土台。AIとの会話が噛み合うようになる基礎概念。
70本6時間36分7領域
この講座で身につける「概念理解」とは何か用語暗記ではなく、構成要素・データの流れ・責任範囲・危険箇所を説明できる状態を定義する。Webサイト・Webアプリ・SaaS・APIの違い静的な情報提供、ユーザー操作、継続利用型サービス、機械同士の接続という役割の違いを整理する。Webアプリを構成する主要部品ブラウザ、フロントエンド、サーバー、API、データベース、認証、ストレージ、外部サービスの全体関係を示す。バイブコーディングで人間が担う仕事目的設定、要件判断、設計選択、差分確認、テスト、公開判断、運用責任をAIと区別する。生成AIがコードを作る仕組みの入口学習済みパターンから次のトークンを生成する性質と、正しさを保証する仕組みではないことを解説する。AIがもっともらしく間違える理由情報不足、曖昧な仕様、古い知識、存在しないAPI、文脈欠落による誤りを分類する。AIに渡す情報の種類目的、制約、現状コード、エラー、期待結果、変更禁止範囲、受入条件を区別する。コード生成より先に決めること利用者、解決課題、入力、出力、保存データ、権限、例外、公開範囲を整理する。AIに任せてよい変更・危険な変更見た目の修正と、認証・課金・DB・権限・本番環境の変更をリスクで分ける。学習全体の地図と受講順基礎→通信→コード→データ→設計→品質→公開→運用という依存関係を示す。
ハードウェア・OS・アプリケーションCPU、メモリ、ストレージ、OS、アプリケーションがそれぞれ何を担当するかを説明する。プロセスとプログラムの違い保存された命令であるプログラムと、メモリ上で実行中のプロセスを区別する。メモリとストレージの違い一時的な実行領域と永続保存領域の違い、再起動や容量との関係を説明する。ファイル・フォルダ・拡張子ファイルシステム、階層構造、拡張子と実体の関係を扱う。絶対パス・相対パス・カレントディレクトリプログラムがファイルの場所を特定する仕組みを説明する。ローカル環境・開発環境・本番環境同じアプリでも設定・データ・公開範囲が異なる複数環境を使い分ける理由を解説する。ターミナルとシェル文字列の命令をOSへ渡す窓口と、コマンドを解釈するシェルの役割を説明する。コマンド・引数・オプション・終了コードCLI命令の構造と、成功・失敗を機械が判定する終了コードを説明する。環境変数と設定ファイルコードと環境固有の値を分離する理由、読み込み範囲、秘密情報との違いを説明する。バージョン・互換性・LTSOS、ランタイム、ライブラリのバージョン差が動作へ影響する理由を解説する。
ネットワークとは何か複数の機器が規則に従ってデータを送受信する仕組みとして定義する。LAN・インターネット・クラウド端末内、組織内、世界規模のネットワークと、クラウド上の計算資源を区別する。IPアドレスネットワーク上で通信先を識別する論理アドレスの役割を説明する。ポート番号1台の機器上で複数のサービスを識別する番号として説明する。localhostとループバック自分の端末自身へ接続する仕組みと、外部公開されていない状態を説明する。ドメイン名人が扱いやすい名前と通信先の対応関係を説明する。DNS名前解決ドメイン名からIPアドレスを取得する問い合わせの流れを段階的に解説する。ルーター・NAT・ファイアウォール通信経路、内部アドレス変換、許可・遮断の役割を分離して説明する。TCPとUDPの違い到達確認と順序保証を重視する通信と、低遅延を重視する通信を比較する。遅延・帯域・パケットロス通信速度を一つの数字で捉えず、応答時間、転送量、欠損で理解する。
クライアントとサーバー要求を出す側と処理・データ提供を行う側の責任を説明する。URLの構造スキーム、ホスト、ポート、パス、クエリ、フラグメントを分解する。HTTPリクエストメソッド、URL、ヘッダー、ボディからなる要求の構造を説明する。HTTPレスポンスステータス、ヘッダー、ボディからなる応答の構造を説明する。HTTPメソッドGET、POST、PUT、PATCH、DELETEの意図と、同じURLでも処理が変わる理由を解説する。HTTPステータスコード2xx、3xx、4xx、5xxを原因の所在と再試行判断の観点で整理する。HTTPヘッダーContent-Type、Authorization、Cookie、Cache-Controlなどの付加情報の役割を説明する。HTTPS・TLS・証明書通信暗号化、相手の確認、改ざん検知の仕組みと守れない範囲を説明する。ブラウザがページを表示するまでDNS、接続、HTTP、HTML解析、CSS適用、JavaScript実行、描画の順序を解説する。同一オリジンとCORSブラウザが異なる出所へのアクセスを制限する理由と、サーバー側許可の仕組みを説明する。
プログラム・入力・処理・出力プログラムを、入力を規則に従って処理し出力へ変換する命令の集合として理解する。値とデータ型文字列、数値、真偽値、未定義値など、データの種類が処理を制約する仕組みを説明する。変数と代入値に名前を付けて参照し、状態を更新する意味を説明する。式と演算子値を計算・比較・結合して新しい値を作る構造を説明する。条件分岐条件式の評価結果によって実行経路を切り替える仕組みを説明する。繰り返し処理同じ規則を複数のデータへ適用する反復処理を説明する。関数入力、処理、戻り値を持つ再利用可能な単位として関数を説明する。配列順序を持つ複数データの集合と、要素の参照・追加・変換を説明する。オブジェクト名前付きの属性をまとめ、現実の対象や設定を表現する構造を説明する。アルゴリズムと計算量の入口処理手順と、データ量が増えたときの時間・メモリ増加を概念的に説明する。
JavaScriptが動く場所ブラウザ内の実行環境とNode.jsなどサーバー側の実行環境を区別する。スコープ変数を参照できる範囲が、関数やブロックによって決まる仕組みを説明する。ミューテーションとイミュータブルな更新既存データを直接変える方法と、新しいデータを作る方法の違いを説明する。同期処理と非同期処理処理完了を待つ流れと、待ち時間中に別処理を進める流れを説明する。Promise将来完了する処理結果を、成功・失敗の状態として扱う仕組みを説明する。async／awaitPromiseを順序立てて記述し、例外処理と組み合わせる考え方を説明する。モジュールとimport／exportコードをファイル単位に分割し、公開する機能と利用する側を分ける仕組みを説明する。npmとパッケージ外部コードを配布・取得・更新する仕組みと、依存関係の意味を説明する。package.jsonとlockfileプロジェクト情報、依存バージョン、実行コマンド、再現可能なインストールを説明する。TypeScriptと静的型検査実行前に型の不整合を検出し、コードの意図を明示する仕組みを説明する。
HTMLと文書構造見出し、段落、一覧、リンクなど、内容の意味と階層をブラウザへ伝える役割を説明する。DOMHTMLがブラウザ内でノードの木構造として表現され、JavaScriptから操作される仕組みを説明する。セマンティックHTML見た目ではなく意味に合った要素を使うことで、検索・支援技術・保守性が向上する理由を説明する。フォーム要素input、select、textarea、button、labelが入力と送信をどう構成するか説明する。CSSセレクタとカスケードどの要素にどのスタイルを適用するか、競合時にどの規則が優先されるかを説明する。ボックスモデルcontent、padding、border、marginが要素サイズと配置へ与える影響を説明する。通常フロー・position・重なり順ブラウザの標準配置と、絶対配置、固定配置、z-indexの関係を説明する。Flexbox一次元方向に要素を並べ、余白・整列・伸縮を制御する仕組みを説明する。Grid行と列の二次元グリッドで画面構造を設計する仕組みを説明する。アクセシビリティの技術要件キーボード操作、フォーカス、代替テキスト、ラベル、コントラスト、ARIAの役割を説明する。
