コンテンツにスキップ

JavaScript / TypeScript

HTML・CSS の基礎を押さえたら,次はページに動きを加える JavaScript と,より安全に開発するための TypeScript を学びましょう。


この章のゴール

  • JavaScript の基本文法と実行方法を理解する。
  • DOM(Document Object Model)を操作し,イベントに反応する UI を作る。
  • モジュールや npm パッケージを使ってプロジェクトを整理する。
  • fetch を使ったデータ取得や非同期処理の基本を理解する。
  • TypeScript の型システムを使い,Next.js 開発につながる基礎を身につける。

学習の流れ

  1. Chapter 1: JavaScript の基本
    変数・条件分岐・関数をブラウザと Node.js で動かしてみます。
  2. Chapter 2: DOM 操作とイベント
    ボタンを押すと内容が変わるなど,インタラクティブなページを作ります。
  3. Chapter 3: モジュールと開発ツール
    ES Modules,npm,Lint/Format といったツールの使い方を学びます。
  4. Chapter 4: 非同期処理とAPI
    fetchasync/await を使って外部データを扱います。
  5. Chapter 5: TypeScript 入門
    型の基本と TypeScript プロジェクトをセットアップします。

事前準備

  • fes-training フォルダ内に javascript というフォルダを作成
  • Node.js 20 以上(環境構築 を参照)
  • VSCode とブラウザ(Chrome / Edge / Firefox など)

実践形式で学んでいくので,1 章ごとにコードを保存しながら進めてください。