関数はまるでチーズバーガーセット!? シャッツキステのエンジニア登竜門

ITスキルがほとんどない、秋葉原にあるカルチャーメイドカフェ「私設図書館シャッツキステ」のメイドさんたちがプログラミングを学ぶ連載企画「エンジニア登竜門」。

前回、ITエンジニア教育の専門スクール「リナックスアカデミー(http://www.linuxacademy.ne.jp/)(※)」にやってきた彼女たちは、変数やfor文など基礎知識を教わりました。今回は引き続き、同校にてプログラミングの文法を学びます。

関数や引数など、少しだけレベルアップしたカリキュラムが登場。果たして彼女たちは、“エンジニア登竜門”をかけ登ることができるのでしょうか!?

※…ITエンジニア教育の専門スクール。社会人のためのプログラミングスクール・エンジニアスクールとして、5000人を超える受講生がLinuxやネットワーク、プログラミング、スマホアプリプログラミングを習得し、卒業しています。20代から50代まで幅広い層に支持されるスクールです。

<今回の登場人物>

icon
先生・高坂一城さん:リナックスアカデミーで教鞭をとる先生。コンピュータ黎明期からゲームにハマり、自作でゲームを作っていた。プログラミングの大ベテラン。

icon
エリスさん:シャッツキステ 代表取締役&総メイド長。HTMLとCSSの基本はわかるが、JavaとPerlの勉強で挫折した過去を持つ。いつかプログラミングをきちんと学びたいと思っていた。

icon
ミソノさん:シャッツキステのメイド。図書館で司書をしつつ、シャッツキステでもメイドとしてお給仕している。おっとりしているようで、時折鋭い考察を入れる。

icon
ノバラさん:シャッツキステのメイド。歌が大好き。プログラミングができたら、歌を歌うロボットを作って、いつでもシャッツキステに自分の歌を届けられるようにしたい。

[ 関数 ] 処理をまとめるチーズバーガーセット!?

image1

icon
先生:では、今回はまず関数について勉強していきましょう。

icon
ノバラ:かんすう?

icon
ミソノ:いきなり数学っぽい話になった……。関数って、確か教科書で見たことがあるような。

icon
先生:いえ。高校の数学で使われる関数とは意味合いが違います。プログラミングにおける関数は「特定の処理をひとまとまりにして、いつでも呼び出せる状態にしたもの」なんです。ちょっとイメージしづらいと思うので、ホワイトボードに書いてみましょうか。

image1

先生:左側に書かれているのが、関数を使わないケースです。上から順に「処理1 → 処理A → 処理B → 処理2 → 処理A → 処理B → 処理3」となっています。このなかに「処理A → 処理B」が2回出てきているのがわかるでしょうか。

同じ処理をコピペして書くのは面倒くさいですし、もしも処理Bの内容が変更になったら、2箇所を修正する必要が出てきます。この例は2箇所だからまだいいですが、実際のアプリケーションでは処理Bが何十箇所も出てくるケースもあります。

icon
ミソノ:そうなると、全部書き換えるのはすごく面倒くさいですね……。

icon
先生:その大変さを解消するため、関数が使われます。ホワイトボード中央を見てください。「処理A → 処理B」を「関数AB」という関数にして、呼び出せるようにしています。

こうすることで、右側に書かれているケースのようにソースコードを短くできるんです。それに「処理A → 処理B」の内容が変更になっても「関数AB」の中身を書き換えるだけで済みます。関数はいわば、プログラムを効率的に作る必殺技なんです。

icon
ミソノ:(必殺技……!!)

icon
エリス:前回勉強した変数って数字を入れておく箱みたいなものでしたけど、関数は処理をまとめる収納術なんですね。

icon
先生:そうです。同じ処理を何度も何度も書くなら、まとめた方が便利じゃないですか。 それでは、JavaScriptのソースコードを見てみましょう。

image1

<想定結果>

image1

icon
先生:「function」というのが「関数を宣言すること」を示していて、その後の「loop」が関数名です。この名前はどんなものにしても構いません。この場合は、くり返し処理をするため「loop」と名付けています。

icon
ノバラ:好きにつけていいってことは「田中さん」とかでもいいんですか?

icon
先生:大丈夫です(笑)。ただ、「田中さん」にしてしまうと、他の人がそのソースコードを見たときに、どんな機能なのかわかりづらいかもしれません。

icon
ミソノ:なんか、ハンバーガー屋さんに似ていますね。

image1

icon
先生:えっ!? ハンバーガー屋さん?

icon
ミソノ:ハンバーガー屋さんでは、チーズバーガーとポテトとドリンクの組み合わせをチーズバーガーセットって呼ぶじゃないですか。でもそれって「うきうきセット」と名付けてもいいと思うんです。だけどそうすると他の人が頼みたいとき、中身がすぐにはわからない。

icon
先生:(笑)。でも確かにその通りで、「名前を見たときに、どんな処理をしているのか推測できること」が、関数の良い名付け方です。

実は、関数をさらに便利にできる方法があります。引数(ひきすう)を使うことです。これによって関数に情報を受け渡すことで、呼び出すたびに処理の内容を変えることができます。

言葉だけだとわかりづらいと思うので、先ほどの「loop」関数に引数を追加したものをみてみましょう。

image1

<想定結果>

image1

icon
先生:関数の後ろに「max」とありますよね。これが引数です。関数を呼び出す時に、この箇所にくり返しの回数(=MAX値)を入れて呼び出します。「loop(8)」とか「loop(20)」がそれです。こうすることで、前者は「8回くり返す」、後者は「20回くり返す」となり、処理の内容を変えることができます。

[ イベント ] 何かの出来事が起きたら、処理を実行する

icon
先生:次は「イベント」について勉強していきましょう。プログラミングにおけるイベントとは「事前に定義されている何かの事象」のことです。例えば「マウスをクリックする」とか「キーボードをタイピングする」などがそれにあたります。

ユーザーが何かを操作すること(=アクション)が引き金となって、イベントが発生します。イベントとはアクションの内容を伝える伝道師のようなものです。

icon
ミソノ:先生!

icon
先生:はい。何でしょう。

icon
ミソノ:(日常生活で用いられる意味での)イベントって、事前に準備しておかないと開催できないですよね。だから、プログラミングで使われるイベントという用語も「事前に準備されている」という意味が含まれているんでしょうか。

icon
先生:その視点はおもしろいですね! たしかにイベントは事前に定義しておかなければいけないものです。今度、授業でその説明を使わせてもらおうかな(笑)。

icon
ミソノ:よかった。ぜひ、使ってください(笑)。

icon
先生:イベントは、イベントハンドラがセットになります。イベントハンドラとは「イベントが発生したときに呼び出される処理」のことです。

image1

icon
先生:よく使われるイベントハンドラとしては

onClick = 要素やリンクをクリックした時に発生
onMouseOver = マウスが乗った時に発生
onMouseOut = マウスが離れた時に発生
onLoad = ページや画像の読み込みが完了した時に発生

などがあります。

これを使えば、ボタンを押した時に「ボタンが押されました」というポップアップを出すような画面を作ることができます。

image1

<想定結果>

image1

icon
エリス:イベントやイベントハンドラという用語は、JavaScript以外の言語でも使われますか?

image1

icon
先生:全部共通です。ただ「onClick」などのイベントハンドラはJavaScript特有のもので、別の言語になるとイベントハンドラの内容そのものも変わってきます。

[ 演習 ] コードを書いて、ドロイド君を動かしてみよう!

icon
>先生:それでは今日学んだ文法を使って、画面上に表示されているドロイド君を動かしてみましょう。

image1

icon
先生:今の状態だと「話す」「こわす」「ふやす」などの文字列をクリックしても何も起こりません。でも、今回の講義で学んだ関数やイベントハンドラを使えば、意図した通りに動かせるようになりますよ。

icon
ノバラ:すごい! やってみます。

image1

icon
ノバラ:うーん……。コードを書いてみたけれど、ドロイド君が動かない……。

icon
先生:コードの綴りや大文字小文字が間違っているのかもしれません。よくバグを探してみてください。

icon icon
エリス&ミソノ:力を合わせて、一緒に探しましょう!!

icon
ノバラ:ありがとうございます!

image1

icon icon icon
一同:うーん…………。

icon
ノバラ:あ、わかった!!!

トタタタタ タタタン
(キーボードを叩く音)

icon icon
エリス&ミソノ:おおっ。

image1
▲「こわす」をクリックすると、画像が切り替わったドロイド君。

icon icon icon
一同:できた!! かわいいー!!!

みんなで共有し合って、ソフトウェアを良いものにする

icon
先生:みなさん、本当によく頑張りましたね。これで、リナックスアカデミーの講義は以上になります。

icon
エリス:先生、質問があります!

icon
先生:何でしょうか?

icon
エリス:今回登場したJavaScriptは、いくら使ってもお金がかかりませんでした。こんなに便利なのにプログラムが無料で使えるのってどうしてなんでしょうか?

icon
先生:良いところに気づきましたね。なぜなら、世界のどこかにいるエンジニアが、プログラミング言語やIT系のツールを無償で公開してくれているからです。なんなら、誰でもカスタマイズできるようになっています。これを「オープンソース」と言います。

今回の講義でコードを書くのに使った「Atom」というテキストエディタも無料なんですよ。

image1
▲Atomの編集画面。

icon
ノバラ:「頑張って作ったものだから、自分だけのものにしよう」とエンジニアさんは考えないんですか?

icon
先生:ITの世界では、そういう考え方はしません。誰かが作ったものをみんなで共有し合って、色々な人の技術やアイデアが加わることで、どんどん良くなっていくという思想なんです。

image1

icon
先生:みなさん、プログラミングを体験してみてどうでしたか?

icon
エリス:最初に「関数」って聞いたら数学で出てくるような難しいものだと思って、勝手に苦手意識を持っていました(笑)。でも、実際に説明を受けてやってみると楽しかったです。関数って私たちの味方だったんですね。

icon
ノバラ:オープンソースの考え方に感動しました。みんなに共有して良いものにしていくってすごい。私も何か良いことを、世の中のみんなに伝えていけたらいいな。

icon
ミソノ:プログラミングの文法だけじゃなくて、考え方にまで触れられて面白かったです。先生、ありがとうございました。

icon
先生:どうもありがとうございました!

みんなで共有し合って良いものを作る「オープンソース」という概念に触れた3人。エンジニアは1人で黙々と作業するだけではなく、他の人たちと協力し合うのも、とても大事なことなんです。それでは、次回のエンジニア登竜門もお楽しみに。3人の新たなるチャレンジに、乞うご期待です!

~ to be continued ~

取材協力:私設図書館シャッツキステリナックスアカデミー

この記事が気に入ったらいいね!しよう

いいね!するとi:Engineerの最新情報をお届けします

プライバシーマーク