【p5.js】プログラミングってなにから始めたらいいの？初心者のための解説講座

「プログラミングを学習したい！」

「でも何から始めたらいいかわからない」

「初心者からでもプログラミングって学習できるの？」

プログラミングに興味を持っていざ始めてみたいけど、何から始めたらいいか全然わからないといったことはありませんか？

この記事では、そんなプログラミング初心者の方へ向けて、プログラミングをより楽しく学んでいくために、まず初めに何をしていけばいいのかについて、詳しく解説していきます。

コンテンツ一覧

プログラミングって一体なに？
1. プログラム
2. プログラミング言語
プログラミングでできることはたくさんある
プログラミングに気軽に触れてみよう
「p5.js」に触れる
さいごに

プログラミングって一体なに？

「プログラミング」とは、簡単にいうと「コンピュータにしてほしいことを順番に記述すること」を指します。何を目的として、どのように実行していくのかを「プログラム」を作成することでコンピュータに伝え、実際に実行していきます。

しかし、コンピュータを思い通りに動かすには、コンピュータが処理できるように伝えなければなりません。

コンピュータは通常「機械語」と呼ばれる「0」と「1」の羅列によって表現される言語のみ理解できます。

しかし、我々人間がこの機械語を思いどりに記述するのはほとんど不可能です。

そのため、我々は「プログラミング言語」と呼ばれる、人間でも理解できるレベルに近づけたものを利用してプログラミングを行います。

プログラム

「プログラム」とは、「コンピュータにしてほしいことを順番に記述した一連の作業書のこと」を指します。プログラムを作成するには「プログラミング言語」と呼ばれる人間が扱いやすいように作られたコンピュータに伝わる言語をも落ちいて記述していきます。

プログラミングにおけるプログラムは、例えば運動会のプログラムや料理のレシピなどと同じように、指定された順番通りに実行・処理されます。

プログラミング言語

プログラミング言語とは、プログラムの内容を人間とコンピュータの間で相互にやり取りするために作られた言語です。日本語でプログラムを書いても、コンピュータは直接理解できないため、実行してほしい内容をプログラミング言語に置き換えて記述する必要があります。

プログラミング言語はその目的によって様々な言語が存在し、一般的によく使われているプログラミング言語だけでも100種類以上存在します。

例えば、ゲーム開発では主に「C#」や「Java」、アプリ開発では「Ruby」「Swift」、機械学習などの学問分野では「Python」などが使われています。

それぞれのプログラミング言語によって「文法」としてのルールが存在し、きちんとルールに則って記述しなければ、エラーになったり、思い通りに動作しなかったりします。

プログラミングでできることはたくさんある

プログラミングと言っても、できることはたくさんあります。

僕らが普段よく見るWebサイトを作ることもできますし、普段遊んでいるあんなゲームやこんなゲームも、プログラミングを用いて作られています。

コンピュータ、機械、パソコンを使ってできることは大抵プログラミングで作られていたり、プログラミングを利用して自分で動かしたりすることができるのです。

著作者：macrovector（出典：Freepik）

プログラミングに気軽に触れてみよう

「プログラミング」と聞くと、どうしても「難しい」というイメージがありますが、全てが難しいというわけではありません。

プログラミングでのスキルをしっかり身につけたいのであれば、まずはプログラミングをしっかり楽しむことから始めましょう。

今回は、初心者の方向けに、プログラミングを直感的に楽しめる「p5.js」についてご紹介します。

興味がある方はぜひお手元で実際に操作してみてください。

「p5.js」に触れる

まずは、プログラミングを楽しむための環境を構築してみましょう。

※ この記事ではMacでの実行結果を掲載しています。Windows環境の方は適宜読み替えてご実行ください。

Visual Studio Code

まずプログラムを書くためのツールとして、パソコンにコードエディタを導入します。

コードエディタには無料で利用できるものと有料のものがありますが、Visual Studio Codeは完全無料で利用できます。

以下のリンクから、Visual Studio Codeへアクセスします。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

「今すぐダウンロード」をクリックしましょう。

移動先のページから、Mac用のインストーラーを選択します。

ファイルを準備

プログラムを書くためのファイルを準備します。

「Finder」のアプリを開きましょう。デスクトップに移動して、ファイルを入れておくフォルダを用意しましょう。

デスクトップで右クリックして「新規フォルダ」をクリックします。

作成するフォルダ名はなんでもいいですが「Example」としておきました。

先ほど導入した「Visual Studio Code」で、いま作成したフォルダを開きましょう。

Visual Studio Codeを開きます。

左のメニューから「Open Folder」をクリックしましよう。

先ほど作成したデスクトップの「Example」フォルダを選択し、「開く」をクリックします。

左のメニューから、「New File…」のアイコンをクリックします。

新たにファイルが作成されるので、名前を「index.html」としておきましょう。

まずは、このファイルに、結果を表示するためのプログラムを書いていきます。

以下のように書いてみてください。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>サンプル</title>

</head>

<body>

  

</body>

</html>

書けたら「Command + S」で保存しましょう。

次にファイルを読み込む設定を書き込みます。

Gooogleから以下のURLにアクセスしてください。

https://cdnjs.com/libraries/p5.js

一番上の項目を読み込みます。右にある「＜/＞」の記号をクリックしてください。

クリックできたら、先ほどの「index.html」ファイルの所定の位置に貼り付けます。

「</body>」の前の行に貼り付けてください。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>サンプル</title>

</head>

<body>

  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>

</html>

このようになっていればOKです。

もう一つ、ファイルを読み込むための設定を行います。

さらに「index.html」を以下のように修正してください。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>サンプル</title>

</head>

<body>

  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="script.js"></script>

</body>

</html>

書けたら「Command + S」で保存しましょう。

<script src=”script.js”></script>の一行を書き足しました。

次に、先ほど「index.html」のファイルを作った時と同様に、「New File…」のアイコンをクリックして、ファイルを作成します。

名前は「script.js」としておきましょう。

このファイルにプログラムを書くことによって、Googleなどのブラウザでプログラムの実行結果を見ることができます！

プログラムを書いてみる

いま作成した「script.js」を次のように編集してみましょう！

let x_1;

let y_1;

let x_2;

let y_2;

let radius;

let theta_1;

let theta_2;

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  radius = 200;

}

function draw() {

  stroke(255);

  strokeWeight(0.1);

  theta_1 = random(0, TWO_PI);

  theta_2 = random(0, TWO_PI);

  translate(width/2, height/2);

  x_1 = radius * cos(theta_1);

  x_2 = radius * cos(theta_2);

  y_1 = radius * sin(theta_1);

  y_2 = radius * sin(theta_2);

  line(x_1, y_1, x_2, y_2);

}

書けたら「Command + S」で保存しましょう。