小学生でも簡単にJavaScriptプログラミング！ー p5.js ウェブエディタの使用方法を詳細解説！
プログラミングを始めようと思い立ってまずぶち当たる疑問は「何を使ってプログラミング」するかです。プログラミング言語によって使える開発ツールも変わってくる一方で、ツールにも様々な種類があります。そこで、JavaScriptでプログラミングを始めようと思った時、一番簡単でお手頃なツールがあります。それがp5.js Web Editorです。
プログラミングを学習するのにはベストな環境！
まずこれを薦める利用をざっと挙げてみましょう。
✅ インストール不要：ブラウザ内でプログラミングができるのでインストールの必要がない
✅ どのPCでもOK：WindowsでもMacでも全く同じようにツールが使える
✅ 普通のコードも書ける：p5.js（詳しく後述）だけではなく通常のHTML、CSS、JavaScriptのコーディングができる
✅ どこでもプログラミング：作ったプロジェクトはサーバー側に保存できるのでどこでも、誰のPCでもプログラミングができる
✅ コードを簡単に共有：作ったプロジェクトを簡単に他の人と共有したり披露したりできる
✅ ローカル保存も可能：自分のマシン（ローカル）にもプロジェクトを保存することもできる。Visual Studio Codeなどで読み込むことも簡単
✅ 日本語対応：日本語のインターフェースが用意されている（ただしエラーメッセージなどは全て英語）
この中で一番の注目は、「コードを簡単に共有できる」という点です。これを使うと、こんなやりとりがリモート環境でも可能になります。
生徒：「すみませんどうしても変なエラーが出るんですが」
先生：「では共有でリンクを送ってくれる？」
生徒：「今送りました」
先生：「では開けてみるね・・・ああ、これね。15行目のところの変数名が大文字になっているよ」
生徒：「あっ、そうか。ありがとうございます」
コードのやりとりだけならメールやチャットでも可能ですが、複数のプロジェクトファイルがあると大変めんどうなことになります。でもこのエディタには「共有」機能があって、生徒が直面しているエラーなども自分のエディタ内で即再現できます。他の利点もご覧になってわかる通り、とにかく教育用には最適なツールと言えます。言うまでもありませんがすべて無料です。
それでは詳しい利用方法を解説していきます。
ステップ１：Sign up/Log in ー アカウントを作る
エディタはすぐに使用できますが、アカウントを作ってログインしないと、ブラウザを閉じるとコードは消えてしまいます。まずは自分のアカウントを作ってください。
画面右上にあるSign up（サインアップ）をクリックしてください。
ここでアカウントを作ります。ユーザー名とパスワードを決めて、必ずメールアドレスを入力してください。GitHubかGoogleアカウントがあるとそれを利用することも可能ですが、ここはエディタ用のアカウントを作ることをお薦めします。
二回目以降はLog inのほうをクリックし、設定したユーザー名とパスワードを入れるだけです。
ステップ２：プロジェクト名を付ける
まずは何かコードを書き始める前に、今開いているコード画面にプロジェクト名を付けてください。画面左上のAuto-refreshとある横に、ペンのアイコンが付いたテキストがあります。エディタを開いた段階では適当な名前のプロジェクト名が割り当てられています。次の例ではSnowmrscaponeとなっていますがまったく意味のない名前です。
ここをクリックすると入力ボックスに切り替わるので、自分の好きなプロジェクト名にします。例えば「練習プロジェクト」にしてみます。
入力したらその下の適当なところをクリックすると確定します。
ステップ３：Save ー プロジェクトを保存する
そして重要なステップ、保存です。コードを変更したら必ずプロジェクト全体を保存してください。そうしないと、ブラウザが閉じてしまうと変更したコードが消えてしまいます。
保存は簡単。FileメニューからSaveを選ぶだけです。
ステップ４：Open ー 自分のプロジェクトをロードする
いったんプロジェクトを保存すると、あとはいつでも自分の”プロジェクトフォルダ”からどのプロジェクトでも選択ができます。
FileメニューからOpenを選ぶだけです。
するとこれまで保存されたプロジェクトが一覧表示されますので、そこから好きなプロジェクトをクリックするだけでプロジェクトをすべてロー＝ドすることができます。
ステップ５：Share ー プロジェクトを共有する
さて、自分のプログラミングを他の人に見てもらいたい場合、いくつかの「共有」機能があります。まずはFileメニューからShareを選んでください。すると次のウィンドウが表示されます。
✅ ブログで紹介したい
最初のEmbed（埋め込む）というのは自分が書いたウェブサイトの中にJavaScriptのアプリを組み込みたい時に使います。上級者用ではありますが、ブログなどを書いていてウェブアプリを入れたい時にはこの機能を使うと簡単にできます。すごく便利！
✅ 人に作品を見せたい
2つ目のPresent（プレゼンする）は文字通り、他の人に披露したい時に使います。リンクをコピーして他の人に贈ると、他の人はあなたの作品をブラウザの中で見ることができます。
✅ エディタ内で作品を見せたい
3つ目のFullscreenはPresentと同様にアプリを実行した状態で他の人に見せますが、p5.jsエディタ内で見せることになります。実行状態からコードにもアクセスできますが、結局受け手はエディタで即実行ができるので、最初からフルスクリーンで見せるという必要はあまりないと思います。
✅ 人にコードをチェックしてもらいたい
人にコードを見てもらいたい場合には4つ目のEditが便利です。リンクをコピーして、それをチャットやLINE、メールなどで送ります。受け手はそれをクリックするだけでエディタを開くことができ、即実行して問題をチェックできます。
ステップ６：Duplicate ー 人から共有されたプロジェクトを自分のフォルダに保存する
Edit共有で人からもらったプロジェクトはそのままだと保存ができません。自分のアカウントにログインしてEdit共有されたプロジェクトリンクを開いてもSaveメニューが表示されていません。それは当然、他人にプロジェクトを共有して、その人にコードを変更されるのはまずいですよね。そこで、共有されたプロジェクトを自分のリストに取り込むのはDuplicate（複製）を使用します。共有プロジェクトを開いた状態でFileメニューからDuplicateを選ぶだけで自分のリストに同じプロジェクト名で入れることができます。
やり方は次の通り。
❶ 他の人からプロジェクトのリンクが送られてきたらそれをそのまま開く
❷ 自分のアカウントにログインする
❸ FileメニューからDuplicateを選ぶと、同じプロジェクト名で自分のプロジェクトリストに保存される
では次にコーディングに関する操作方法を解説します
コーディング１：エディタ画面を理解する
まずエディタには４つのエリアがあります。左側にはプロジェクトに含まれるファイルやフォルダが表示されるエリア（エクスプローラーなどと呼ばれます）。コードを書くエディタ部分の下にはエラーやメッセージが表示されるエリア（コンソールと呼ばれます）があります。
そしてコードを実行する左上の▶ボタンをクリックするとプログラムが自国され、右の実行画面（ブラウザ）に表示されます。プログラムを停止したい場合は■ボタンをクリックしてください。
コーディング２：新しいファイルやフォルダを新規作成する
新しいプロジェクトを作ると、index.htmlとsketch.js、style.cssという３つのファイルが最初からデフォルトで入っていますが、新しいファイルやフォルダを追加したい場合は、▼ボタンをクリックして出てくるメニュ―からCreate FolderまたはCreate Fileを選択してください。
コーディング３：新しいファイルをアップロードする
背景画像やキャラクター画像など、プロジェクト内で参照する外部ファイルを追加したい場合はUpload fileを選択します。
Uploadウィンドウが現れるので、追加したいファイルがあるフォルダを表示させ、そこからマウス操作でドラッグアンドドロップしてください。
コーディング４：エラーを処理する
まず、コードにエラがあると大抵の場合はプログラムを実行しても右のブラウザ画面に何も出てきませんのですぐに何かがおかしいことがわかります。
そしてコーディングエリアの下のウィンドウにエラーメッセージが表示されます。
エラー対処❶：コード中の赤波線に注意
明らかなシンタックスエラーがあるとコード中に次のように赤い波線が表示されます。まずはこれに注意してみてください。
この場合は中括弧が一つ余計に入っているためにエラーが出ています。修正は簡単で、この括弧を取るだけです。そしてもう一度実行すると今度はうまくいきます。
エラー対処❷：エラーメッセージを理解する
特に構文の問題もない場合はエラーメッセージを読みます。先の括弧の問題ではこういったメッセージが出ています。
Unexpected token '}' (sketch: line 18)
余計なトークン、"｝" （sketch: 18行目）
まずメッセージの理解ができない場合、何行目に問題があるのかを見てください。その行を見ただけで問題がすぐにわかるケースも結構あります。
それでもよくわからない場合はエラーを読んでみます。英語が苦手な方はDeepLという機械翻訳などを利用してみてください。
先のエラーならこんな感じで出てきます。
エラー対処❸：Undoをしてうまくいっていた状態に戻す
誰かからシェアされた完成形をもとにコーディングする場合、ある時点ではうまく動いていたはずです。コーディングに自信がなかったり、あるいは複雑なコーディングをする場合、コードを書きながらこまめにプログラムを実行してチェックするのが得策です。うまくいっていない原因が分からない場合、まずはうまくいっていた時点までUndo（元に戻す）をして戻れるようにしておくことです。そうするとどの段階でエラーが入り込んだかがわかります。
サンプルコードでプログラミングを勉強する
エディタからは豊富なサンプルコードにアクセスできます。FileメニューからExamplesを選択してみてください。
その中からHello P5: Shapesといのを選んで実行してみてください。
極簡単なコードで円や四角形、三角形などを描く方法がわかります。よくプログラミングがわからなくても、数字を少し変えてみてください。
例えばこの部分をご覧ください。
// A rectangle
rect(40, 120, 120, 40);
ここにある120という数字を倍にしてみます。
rect(40, 120, 240, 40);
変更したらいったんプログラムを停止し、また実行します。すると四角形の横幅が長くなりました。つまりそこの数字は図形の幅（width）を決めていたわけです。
同じように他の数字も倍にして実行し直してどう図形が変かするかみてください。そうすると四角形を描く方法は
rect (横方向の場所、縦方向の場所、幅、高さ）
ということに気づくはずです。ちなみにrectとはrectangle、四角形という意味です。
こうやって分かる範囲内でサンプルプログラムに手を加えていって、自分の変更がどうプログラムに反映されるかをみていくだけでプログラミングの構文が理解できます。基礎からコツコツ勉強してもよいのですが、このように完成形をいじりながらプログラミングを覚えるのも一つの手です。
p5.jsのリファレンスやチュートリアル
p5.jsライブラリで使えるメソッドやプロパティなどはすべてこのページで調べることができます。詳しい構文について知りたい時は利用してください。
またチュートリアルもたくさん掲載されています。
残念なのは日本語がまだ用意されていないこと。いまは頑張って英語でやるほかありません。ただ、コードを見ていけばある程度はわかるはずなので、臆せずに挑戦してみてください！
この記事が気に入ったらサポートをしてみませんか？