チャプター1事前準備

はじめに

学習を始めるための準備および学習内容や、進め方について説明します。

1. 1 はじめに

みなさん、こんにちは。プログラミングの世界へようこそ。
本格的なコーディングを学び、ゲームの制作を通じて、JavaScriptの基礎を習得しましょう。 プログラミングを使って「自分の考えたことをカタチにできる」ことを体感していただきます。分からないことがあれば、メンターに聞いてください。

このレッスンでは、学習を始めるための事前準備を進めていきます。テキストをよく読みながら、準備をすすめてください。

 

 

1. 2 Webエディタにアクセスしよう

webエディタにアクセスしましょう

https://p5js.orgにアクセス

次のような画面になっていればOKです

Webエディタの使い方

Webエディタの画面について説明します。

• 実行ボタン/停止ボタン
  • 三角のボタンを押すと、コードが実行される
  • 四角のボタンを押すと、コードが停止される
• コードを書くエリア
  • ここにコード（プログラムを書く）
• コンソールエリア
  • コンピュータと対話するための表示エリア。（詳細は、あとのレッスンで説明します。）
• プレビューエリア
  • プログラムの実行結果が表示される。

Tips

• 2020年10月Webエディタが日本語化されました。エディタの右上の言語設定を変更してください。

• また、編集メニューに「コード整形」があります。使うとコードが整形されますので活用してください。

1. 3 コードを実行してみよう

まずは、以下のコードをコピー&ペーストして、実行してみましょう。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if(mouseIsPressed){
    fill(0);
  }else{
    fill(255);
  }
  ellipse(mouseX, mouseY, 40, 40);
}

実行結果は次の通りになるはずです。

• プレビューエリアに円が描かれます。
• 円は、マウスの動きと連動して動きます。
• マウスがクリックされると色が白から黒に変わります。

このようにp5.jsを用いると、簡単に図形を描画することができます。アニメーションはもちろん、ゲームをつくることもできます。

1. 4 アカウントの取得

p5.jsのwebエディタのアカウントを取得しましょう。アカウントを取得することで、自分の書いたコードの管理や共有ができるようになります。

次の手順に従って、すすめてください。

1.右上のLog in or Sign upをクリック
2.必要事項を入力して、Sign Upをクリック

3.登録したメールに、認証確認メールが届くので、認証ボタンをクリック
（認証しなくてもアカウントは取れていますが、全ての機能を使うことができません。）

これで準備は、完了です！p5.jsのプログラミングをはじめましょう！

チャプター2ゲーム開発コースの概要

2. 1 ゴール

このコースでは、ゲームを自分でつくることができるようになることを目的としています。このコースの受講を終えた頃には、オリジナルのゲームをつくることができます。 インベーダーゲームやシューティングゲーム

2. 2 p5.jsについて

p5.jsは、アーティスト・デザイナー・初心者向けに作られた Javascriptのライブラリだよ。

p5.jsは、プログラミングによる視覚的な表現（イメージの生成・アニメーション）の技法をやさしく学習するために生まれたんだよ。

p5.jsを使って自由にゲームやアニメーションを作ることができるよ。p5.jsを覚えて、自分だけの作品を作っていこう！

2. 3 プログラミングについて

プログラミングとはプログラムを書くことです。 プログラムはコンピュータに与える命令です。プログラミング言語によって様々で、プログラミングをする言語はたくさんあります。 言語によって、得意な処理、不得意な処理があります。Processing/p5.jsは図形を描くことを得意としている言語です。

チャプター3学習のすすめ方

学習は次のように進めてください。

1. 各レッスンをテキストを読みながら、自身のアカウントにコードを作成して、完成させる。
2. 完成させる途中で、必ずコードを保存してください。
3. 学習終了時は、必ずログアウトするようにしましょう
   • ほかの人が誤ってアクセスして、コードを上書きしたり削除したりしてしまうのを防ぐためです。

3. 1 名前をつけて保存する

コードには名前をつけることができます。分かりやすい名前をつけて、FileのメニューからSaveを選択して保存しましょう。

3. 2上手な質問の方法

上手な質問をすることが、スムーズに学習するために大切です。

• どのレッスン、どのチャプタで困っているのか？
• どんなことで困っているのか？
  • プログラムのエラーが直せなくて困っている
  • 学習内容で聞きたいことがある など

上記を整理してから質問をするだけでも、かなりスムーズになるはずです。

1.質問内容

「どのレッスン、チャプタを学習しているか」+「困っている内容」

質問の例

• レッスン4のチャプタ8を進めています。画面のような状態です。図形が動くスピードをうまく調節できません。
• レッスン10のチャプタ2を進めています。エラーが回避できずに困っています。

2.必要であれば、エラー内容も

エラー内容とコードの全文も質問の解決のために助けとなる材料です。

エラー内容は、次のように、エディタの下に表示されています。

また、保存してURLを送るとコードの全文を共有して確認できます。

 

3. 3 カリキュラムの構成

カリキュラム全体は3部構成となっています。

p5.js入門（第1章）

まずは、p5.jsの使い方全般について学びます。コードを完全に理解する必要はなく、書いて実行する、どのような処理が行われているのかを考えながら進めてください。

プログラミング基礎（第2章）

プログラミングの基本を学びます。基本とは、「条件分岐」や「繰り返し」、他には「変数」や「乱数」、「関数」など、どのプログラミング言語にも共通する内容について学びます。

プログラミング応用（第3章）

プログラミングの基本を活かして、応用に挑戦します。「配列」や簡単な「数学」についても触れます。学校でまだ習っていない内容もありますが、1から丁寧に説明しているので、気にする必要はありません。

3. 4 レッスンの構成

レッスンの構成要素は次の通りです。

写してみよう

「写してみよう」のパートでは、コードの例が記載されているので、写してください。写し終わったら実行しましょう。

変更しよう

「変更しよう」のパートでは、コードを変更してください。

コードの説明

コードの説明をします。処理の流れやポイントを簡単にまとめているので、対応させて読み進めてください。使っている関数などの説明も、しっかりと読み進めましょう。

チャレンジしよう

学習が進むにつれて、知識が定着しているかを確認するための課題が設けられています。
ヒントを参考に、指示通りのコードを完成させましょう。

次のチャプターでは、サンプルレッスンとして、学習の進め方を練習してみましょう。

チャプター4サンプルレッスン

実際のレッスンを想定して、first_programのコードを変更していきましょう。まずはファイルを作成してください。

4. 1 変更しよう

-や+を目印にしてプログラムを変更しましょう。

（変更前）

    fill(255);
  }
- ellipse(mouseX, mouseY, 40, 40);
}

（変更後）

    fill(255);
  }
+ ellipse(mouseX, mouseY, 80, 80);
}

変更できたら実行してみよう。描かれる円の大きさが大きくなればOKだよ。

4. 2 チャレンジしよう

完成したプログラムを変更して、次のような挙動になるようにしてみよう。

 

マウスをクリックした際に、黒ではなく赤にする。

（ヒント）

• 7行目付近のfill(0)をfill(255, 0, 0)に変更する

---

それでは、次のレッスンより、本格的に学習を進めていきましょう！