• プログラミングの学習において一番大切なこと プログラミングはレゴブロックのようなもの

レッスン1　この本で学べること はじめる前に

• 1.1　Scratchを知っている人だけ……ではない
  • はじめてのプログラミングは何でしたか？
  • Scratchを知らなくてもいい理由
  • どんな人に読んでほしいか
• 1.2　この本で学べること
  • この本を読み終えると作れるようになるもの
  • この本で学ぶp5.jsについて
  • p5.jsとScratchの似ているところ
  • p5.jsとScratchが似ていないところ
  • この本で学ぶJavaScriptについて
  • なぜPythonじゃないの？
  • JavaScriptをおすすめする理由
  • さらに次のプログラミング言語のために
• 1.3　この本の読み進めかた
  • 本の構成
  • 用語について
  • 英語について
  • コラムについて
• 1.4　まとめ

レッスン2　はじめる準備 p5.jsをさわってみよう

• 2.1　p5.jsのアカウントを作ろう
  • p5.jsを開く
  • アカウントを作る
  • ユーザー登録する
  • ログインする
  • メールアドレスの確認
  • ユーザー名の変更
  • デスクトップにアイコンを作る
  • ログイン状態を確認する
• 2.2　p5.jsの基本操作
  • p5.jsの画面構成を知る
  • ペイン
  • コードエディター
  • プレビュー画面とキャンバス
  • コンソール
  • p5.jsを実行してみる
  • 円を描いてみる
  • コメント
  • エラーを起こしてみる
  • エラーメッセージ
  • 翻訳機能を使う
  • スケッチを保存する
  • スケッチの上書き保存
  • 保存のショーカットキー
  • 保存したファイルを開く
• 2.3　ピゴニャンを動かす準備
  • ピゴニャン
  • ピゴニャンのスケッチ
  • 別名で保存する
  • ピゴニャンのコード
  • 毎回やってもらうこと
• 2.4　まとめ

レッスン3　関数呼び出し ピゴニャンに命令してみよう

• 3.1　コードを書いてみよう
  • はじめてのコード比較
  • コードを打ちこむ準備
  • コピーと貼り付け
  • 行末のセミコロン
  • インデント
  • 空行とスペース
  • コード整形読みやすいコードのために
  • 全角と半角
  • p5.jsを実行する
• 3.2　関数呼び出しと引数
  • 関数呼び出し
  • 関数名と英語
  • 一時停止のawait
  • 引数
  • 文字列には" "をつける
  • 引数の値
  • 関数の実行は一瞬で終わる
• 3.3　ピゴニャンを操作してみよう
  • ピゴニャンの向きや色を変える
  • p5.jsの座標系
  • ピゴニャンが登場する位置
  • 座標を指定して移動する
  • ピゴニャンの位置を知る
  • 戻り値
  • 魚を配置する
• 3.4　「ピゴニャンのスケッチ」のルール
  • setupとdraw
  • drawの最初で1秒待つ理由
  • p5.js専用の関数とピゴニャン専用の関数
  • 便利なprint関数
• 3.5　まとめ

レッスン4　変数 魔法の箱を使いこなそう

• 4.1　変数の宣言と代入
  • たくさんの値を一度に書きかえる
  • Scratchで変数を作る
  • JavaScriptの変数宣言
  • 変数の値を変更する代入
  • 変数は魔法の箱
  • 変数同士の代入
  • 関数の戻り値を代入する
  • 変数宣言の書き方いろいろ
• 4.2　変数名のルールと作法
  • 変数名のルール
  • 同じ場所で使われている変数名は使えない
  • 同じ場所で使われている関数名は使えない
  • 予約語は使えない
  • 変数名のルール
  • 変数名の単語の区切り方
  • 変数名の作法
• 4.3　値の表現 リテラルとデータ型
  • 文字列と変数や関数を区別する
  • 変数名と文字列
  • リテラル
  • 数値と数字
  • データ型
• 4.4　letで宣言しない変数
  • 定数　あとから代入できない変数
  • システム変数
• 4.5　まとめ

レッスン5　演算プログラムに計算をさせてみよう

• 5.1　四則演算
  • 歩数を計算で求める
  • 演算子
  • 演算のルール
  • 変数を式に入れる
  • 計算するだけでは何も起こらない
  • 関数呼び出しを式に入れる
• 5.2　代入演算子
  • 変数自体の値を変える
  • 変数の値を増やす演算子
  • さまざまな代入演算子
• 5.3　文字列の足し算
  • 文字列の連結
  • 型変換
  • テンプレート文字列
• 5.4　その他の演算
  • 代表的な演算の機能
  • 剰余演算子
  • 関数として用意される演算
  • 乱数
  • 整数の乱数を生成する
• 5.5　まとめ

レッスン6　条件分岐 「もし〜」でコードを分けてみよう

• 6.1　「もし〜なら」 if文
  • ピゴニャンの位置によって色を変える
  • Scratchの［もし〜なら］ブロック
  • if文
  • if文を使って書いてみよう
• 6.2　条件式
  • 比較演算子
  • 条件式の結果
  • 真偽値型
  • if文の入れ子
  • 論理演算子
• 6.3　「そうでなければ〜」 else文とelse if文
  • else文
  • else if文
  • if文〜else if文〜else文
  • 複数の条件式が同時にtrueになるとき
• 6.4　三項演算子
  • 「どちらかの値を選ぶ」三項演算子
  • 三項演算子を使ってみる
  • 変数宣言はif文の外で……
• 6.5　まとめ

レッスン7　while文 繰り返しの魔法を使ってみよう

• 7.1　「〜のあいだ繰り返す」 while文
  • 同じコードを繰り返す
  • Scratchの繰り返しブロック
  • while文
  • カウンター変数
  • 「〜まで」と「〜のあいだ」
• 7.2　いろいろな繰り返しパターン
  • カウントダウンする
  • カウンター変数以外の変数を使う
  • 乱数を使う
  • ループの中で条件分岐する
  • 繰り返しと剰余演算子
• 7.3　入力イベントがあるまで繰り返す
  • 入力イベント
  • マウスボタンが押されるまで
  • キーを押したとき
  • キーでピゴニャンを動かす
  • 繰り返しにはsleepを忘れずに……
• 7.4　繰り返しの途中で……
  • ループから抜け出す break文
  • 入力イベント＋break文
  • 次の繰り返しに進む continue文
  • continue文の注意点
  • ［注意］while文を使ったイベント待ちのコードについて
• 7.5　まとめ

レッスン8　for文 決められた範囲で繰り返してみよう

• 8.1　「○回繰り返す」 for文
  • for文
  • for文のサンプルコード
  • 複数の変数を使う
  • カウンター変数の有効範囲
• 8.2　いろいろな繰り返しパターン
  • カウントダウンする
  • カウンター変数以外の変数を使う
  • 乱数を使う
  • 繰り返し＋条件分岐
  • 入力イベントがあるまで繰り返す
  • for文とwhile文の使い分け
• 8.3　繰り返しの中で繰り返す
  • ピゴニャンを往復させる
  • 魚を四角く並べる
  • 二重ループとbreak文およびcontinue文
• 8.4　値のリストを使って繰り返す for ... of文
  • for ... of文
  • 文字列から1文字ずつ取り出す
  • 並べた値から1つずつ取り出す
• 8.5　まとめ

レッスン9　配列 連結された魔法の箱を使ってみよう

• 9.1　配列の基本
  • 配列 連結された“箱”
  • Scratchのリスト
  • 配列の宣言
  • 配列を使ってみる
  • 配列の要素を書きかえる
• 9.2　配列と繰り返し
  • 配列＋for ... of文
  • for...of文と配列の書きかえ
  • 配列＋for文
  • 配列の長さ
  • プロパティ
• 9.3　配列のメソッド
  • 配列に要素を追加する
  • 配列操作の基本メソッド
  • スタックとキュー
  • 基本メソッドを使ってみる
  • 先頭や末尾以外の要素を操作するメソッド
  • 配列の中身を調べる
  • 配列からランダムに要素を選ぶ
• 9.4　まとめ

レッスン10　オブジェクト 魔法の箱の詰め合わせを使ってみよう

• 10.1　オブジェクトの基本
  • データに名前を付けてまとめておきたい
  • オブジェクトの宣言
  • プロパティを使ってみる
  • プロパティの追加と削除
  • オブジェクトと戻り値
  • ドット記法とブラケット記法
• 10.2　複雑なオブジェクト
  • 入れ子のオブジェクト
  • プロパティに配列を指定する
• 10.3　オブジェクトと繰り返し
  • オブジェクトはfor ... of文で繰り返せない
  • for ... in文オブジェクトのための繰り返し構文
  • オブジェクトの配列
  • データのフィルタリング
• 10.4　まとめ

レッスン11　関数定義 魔法の呪文を作ってみよう

• 11.1　関数呼び出しと関数の本体
  • 関数とは……？
  • 関数の本体を自分で書く
  • 関数の種類
• 11.2　関数を定義する
  • Scratchのブロック定義
  • JavaScriptの関数定義
  • 定義した関数を呼び出す
  • setupとdrawの正体
  • awaitと関数定義
• 11.3　関数を作って使ってみる
  • 関数に切り出す
  • 関数はいくつでも定義できる
  • 関数定義の順番
  • 自作関数の中から自作関数を呼ぶ
• 11.4　イベントで呼び出される関数の定義
  • イベントハンドラー
  • 入力イベントに反応するプログラム
  • マウスクリックに反応するイベントハンドラー
  • キー入力に反応する関数の定義
  • p5.jsの入力イベントハンドラーの一覧
  • イベントオブジェクト
• 11.5　まとめ

レッスン12　引数ありの関数定義 魔法を自在に操ろう

• 12.1　引数ありの関数を定義する
  • 自作関数に引数を渡す
  • Scratchの引数ありのブロック定義
  • JavaScriptの引数ありの関数定義
  • 引数を追加する
  • 引数を増やす
  • 配列やオブジェクトの引数
  • 同じ名前の実引数と仮引数
• 12.2　変数のスコープ
  • 変数の有効範囲
  • ブロックスコープ
  • スコープのたとえ話
  • 各構文のスコープ
  • 関数スコープ
• 12.3　グローバル変数
  • setup関数でセットアップしたい
  • グローバル変数
  • グローバル変数とイベント
• 12.4　まとめ

レッスン13　戻り値ありの関数定義 魔法の国から召喚しよう

• 13.1　戻り値ありの関数を定義する
  • 入力➡関数➡出力
  • 戻り値ありの関数定義
  • return文のルール
  • Scratchには戻り値がない
  • キャンバスから出そうかどうか判断する
  • 戻り値ありの関数を追加する
  • イベントハンドラーと組み合わせる
  • ピゴニャンをクリックする
• 13.2　関数式
  • JavaScriptの関数定義の構文
  • 変数に代入できる関数
  • アロー関数
  • アロー関数を使ってみる
• 13.3　アロー関数を使った配列のメソッド
  • アロー関数を使う配列メソッド
  • forEach 要素を順に処理する
  • map 各要素を加工する
  • filter 要素を選び出す
  • every 条件を満たすか調べる
• 13.4　まとめ

レッスン14　本当のp5.jsをはじめよう ゲーム＆アニメーションを作る

• 14.1　ピゴニャンのいないp5.jsを使ってみる
  • p5.jsの最初のスケッチ
  • 円を描く
  • 背景をぬりつぶす
  • フレームレートを変更する
  • 繰り返しの停止と再開
  • 「ピゴニャンのスケッチ」のdraw関数はなぜ1回？
  • さようなら，sleep関数
  • ピゴニャンがイモ虫にならない理由
• 14.2　ピゴニャンのゲームを作ってみよう
  • これから作るゲーム
  • ❶土台となるコードを用意する
  • ❷ピゴニャンを矢印キーで操作する
  • ❸ピゴニャンが端に着いたら跳ね返す
  • ❹魚をランダムに配置する
  • ❺食べた魚の数を数える
  • 残り時間を計算する ❻-1：残り時間を表示する
  • キャンバスへ表示する ❻-2：残り時間を表示する
  • ❼ゲームを終了させる
  • 関数に切り出す
  • 装飾してみる
  • 問題を解消する
  • プログラムを整理する
  • コード全体 ピゴニャンのゲーム
• 14.3　アニメーションを作ってみよう
  • 作成手順
  • ❶土台となるコードを用意する
  • ❷円を横一列に並べる
  • ❸円に色を付ける
  • ❹円をキャンバスに敷き詰める
  • ❺正方形を追加する
  • ❻マウスの動きに合わせて変化させる
  • ❼円の大きさを変化させる
  • ❽色を1秒に1回更新する
  • コード全体 アニメーション
• 14.4　まとめ

• おわりに　——どこまでたどり着いたか
• この本の次は……