フロントエンド

プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

プログラミングを始めた頃に、
よくわからないと思っていたものの一つに『関数(かんすう)』があります。

『PHP』でも『JavaScript』でも『PHP』でも『Python』でも
ほとんどのプログラミング言語に備わっている機能が『関数』です。

遊ぶようにプログラミングが出来る『クリエイティブコーディング』でももちろん

『関数』を使えるかどうかで表現の幅がぐーーんと変わってくます。

一方、『関数』はどうも苦手・・っという人も多いと思います。

アオキ
僕も最初はなかなか使いこなせませんでした。

そこで今回は『関数』についてまとめてみることにしました。

アオキ
細かいところははしょっていますのでぜひ寛大な心でお読みください。
Sponsored link

プログラミングの関数をわかりやすく自動販売機に例えてみる

みんな大好き自動販売機。

お金を入れて、好きな飲み物をポチっと押すと、

ガシャーンという音とともに、飲み物と、お釣りがでてきます。

これが『関数』です。

アオキ
ざっくりな説明ですんません・・けどこれが『関数』なんですよね・・

『関数』は大きく分けて3つの要素をもっています。

  • 入力(インプット)
  • ゴニョゴニョ(処理)
  • 出力(アウトプット)

自動販売機の場合はこんな流れになります。

  • お金をいれる・飲み物を選ぶ・・入力(インプット)
  • 選ばれた飲み物を運ぶ・お釣りを計算する・・処理(ゴニョゴニョ)
  • 飲み物を出す・お釣りを出す・・出力(アウトプット)

なにかしら入力(インプット)があって、
インプットの内容を処理して、
その結果を出力(アウトプット)すると。

ゴニョゴニョがどんな事をやっているのか知らなくても、

とりあえずお金入れて飲み物選んだらすぐに飲み物が出てきますよね。

アオキ
インプット、ゴニョゴニョ、アウトプット
アオキ
インプット、ゴニョゴニョ、アウトプット・・・

プログラミング用語では、

  • インプットのことを『引数(ひきすう)』
  • アウトプットのことを『戻り値(もどりち)』

と言ったりもします。

アオキ
要は、インプット、ゴニョゴニョ、アウトプットです。

実際に使うときは、

関数名(インプット);

とすれば使えます。

注意点としては、

プログラミングの『関数』の場合、
インプットがなくてもゴニョゴニョできるし、
アウトプットを書かない場合もあります。

Sponsored link

プログラミングの『関数』はすでにたくさん使われている

遊ぶようにプログラミングができる『P5.js(ProcessingのJavaScript版)』で早速試してみます。

お題はこちら。

See the Pen
p5.js hsl-random
by aoki_monpro (@suica)
on CodePen.

参考記事

このプログラミングのコードは下記になります。

よくよく見ればわかると思いますが、

『P5.js(ProcessingのJavaScript版)』には最初からたくさんの『関数』が用意されていて、

すでにいろんなところで『関数』が使われています。

  • createCanvas() も
  • colorMode()も
  • background()も
  • fill()も
  • circle()も

全部『P5.js(ProcessingのJavaScript版)』で用意されている『関数』です。

アオキ
最初から用意されている関数のことを『組み込み関数』と読んだりします。

インプット、ゴニョゴニョ、アウトプットの3つのうち、
ゴニョゴニョとアウトプットは『組み込み関数』毎に決まっているので(例えばcircleなら円を描くとか)、

インプットを指定するだけで(引数に設定するだけで)使えるようになっています。

『P5.js(ProcessingのJavaScript版)』の元のファイルを見れば、

どんな設定が書かれているかの確認もできますが、

ゴニョゴニョの中身を知らなくても、簡単に使えるようになっています。

アオキ
『P5.js』も『Processing』も作った人すごいよねー(小並感
Sponsored link

プログラミングの『関数』のわかりやすい使い方

『P5.js(ProcessingのJavaScript版)』は最後にjsがついているとおり、『JavaScript』を使っています。

『JavaScript』の場合、『関数』はこう書きます。

 
function 関数名(インプット){
 
  ゴニョゴニョ;
 
  return アウトプット;
}
 

function は英語で関数だったり機能という意味です。

functionの後に関数名を書きます。

関数名のあとに () かっこをつけます。インプットがある場合はこの中に書きます。

実際の処理は {} 波かっこの中に書いていきます。

return の後にアウトプットを書く事で、結果を返します。

実は、インプットやアウトプットがなくても『関数』をつくることはできます。

Sponsored link

プログラミングの『関数』をしっかり使ってみる

今回は『createCircle』という名前で『関数』を作ってみました。

コードはこちら。

function createCircle と書いて、その後に() かっこを書いて(インプットなし)

波かっこの中に処理を書いています。(アウトプットもなし)

draw()関数の中で、作った関数名『createCircle()』として呼び出す事で、

function createCircle の中身が呼び出されることになります。

アオキ
なにがいいかって、draw関数の中がスッキリするんですよね。スッキリ大事。
Sponsored link

プログラミングの『関数』をしっかり使ってみる その2 インプットあり

続いて『関数』のインプットありバージョン。

See the Pen
p5.js function-test
by aoki_monpro (@suica)
on CodePen.

参考記事

コードはこちら。

function addVectorとして、『addVector』関数を作っています。

インプットとして、ボールを10個作るために、
for文iを0から9に変えているので、iをインプットに設定しています。

インプットを元に、『関数』の中のゴニョゴニョが実行されるので、

このインプットがなければこの『関数』はうごきません。

draw()関数の中で、addVector(インプット(今回はi)) と書いて、

『addVector(インプットはi) 』関数を呼び出しています。

アオキ
なにがいいかって、draw関数の中がスッキリするんですよね。スッキリ大事。(2回目
Sponsored link

プログラミングの『関数』をわかりやすく まとめ

実際のところ、

プログラミングの『関数』って奥が深くて、

特に『JavaScript』の場合、

無名関数、コールバック関数、クロージャなど
たくさんの『関数』がありはしますが、

基本的なつくりは一緒です。

  • インプット(ない場合もありえる)
  • ゴニョゴニョ
  • アウトプット(ない場合もありえる)
アオキ
インプット、ゴニョゴニョ、アウトプット。
アオキ
インプット、ゴニョゴニョ、アウトプット。

と言いつつ、ちょっとずつ『関数』を使ってみてもらえたらと思います。

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ【P5.js】(9)

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

12. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. フロントエンド

    TCDテンプレート『MAG』の見出し(h1,h2)の設定は変更しよう〜SEO重視するなら変更必須〜

    TCDといえばホームページ業者やブロガーならほとんど知っているんじゃな…

  2. バックエンド

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  3. フロントエンド

    【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.js…

    遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろ…

  4. システムデザイン

    受注管理・発送管理システムのつくり方を考えてみる【Laravel】

    プログラミングを上達するための秘訣は「何かをつくる」ということだと思っ…

  5. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

    先日とあるコミュニティで質問があがりまして。教えたがり性分の身…

Sponsored link

最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  3. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  5. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述