ポイントは「もし〜ならば〜しよう」 プログラミング初心者が占いアプリを作るまでを解説

今回学ぶのは「もし〜ならば〜しよう」

鈴木：早速コーチをお呼びしましょう。皆さんもチャット投稿で「中島コーチ」と投稿してお呼びしましょう。それではいきましょう、せーの！　中島コーチ！

江川：中島コーチ！

鈴木：あ、何か格好いい入り方（笑）。

江川：格好いい。

中島俊治氏（以下、中島）：よっ！

鈴木：最初ね、よっ！　です。中島コーチ、こんばんは！

中島：こんばんは！

江川：こんばんは！　今日はよろしくお願いします。

中島：（カメラを指さして）あとあちらもですね。こんばんは！

鈴木：Tシャツちょっと見せてくださいよ。

中島：お、見えますか？　We Love HTML5、CSS仕様です。ドット付けてますけどね。

鈴木：HTML5プロフェッショナル認定資格レベル1・2取得。プログラミングはもう、めちゃめちゃできる。

中島：いやいやいや。プログラミングできる人はね、スクーの中にはいっぱいいらっしゃいます。その内の1人ということで。

鈴木：いやいやいや。よろしくお願いいたします。

江川：よろしくお願いします。

鈴木：中島コーチが来たところで、今回のタイムスケジュールをちょっと見ていきましょう。ドン、はい来ました。

鈴木：今回はこんなスケジュールでいきます。今はオープニングですね。今回はこの水色に注目してください。全部で4つあります。4つのテーマで今回は実習を行っていきます。

鈴木：さて、1つ目のテーマに参りたいと思います。今回の1つ目のテーマを発表します。今回4つのテーマでやりますよ。まず1つ目のテーマはこちら。じゃん！

鈴木：もし〜ならば〜しよう！　ね、何を言ってるんだと（笑）。ちょっとわからないんですけど、ここで中島コーチに教えていただきたいんですが。まずはですね、今回の実習と実演の進め方なんですけれど、中島コーチの実演を、皆さんメモを取りながら、しっかり見ましょう。しっかり見てくださいね。しっかり見て、その後はみどちゃんと皆さんが実習するお時間があります。

江川：私と一緒にですよ、皆さん。フライングしちゃダメですよ。

鈴木：まずはですね、しっかりと中島コーチの実演を見ましょう。それでわからないことがあればですね、コメント投稿してください。『誰か教えて』タブに切り替えてコメント投稿してくださいね。で、もちろん先ほど練習しました『まって』ボタン。これ、活用してください。

鈴木：ということで、まずは1つ目のテーマですね。もし〜ならば〜しよう！　ここを中島コーチに実演をしてもらいたいと思います。中島コーチよろしくお願いいたします！

江川：お願いします。

中島：はい、では始めていきましょう。じゃあ、最初に私のほうの画面を見てもらうことにしましょう。JSくんのトップページがありますけれども、これは後ほど使います。その前に、もし〜ならば〜しよう！　について、画面で説明しますので見ていてください。見えますかね、いきますよ。「もす」、あ、間違えた。

江川：「もす」になった。

中島：ハンバーガ思い出した。

江川：お腹すきます（笑）。

中島：もし〜ならば〜しよう、ですね。

中島：このかじり部はなるべく横文字を減らすと。

鈴木：そうですね（笑）。

中島：もし〜ならば〜しよう。これがやっぱりプログラムには大事かなって思って、今日1番最初に持ってきました。もし〜ならば〜しよう、これが1つめのサンプルのキーワードになります。そうは言ってもプログラム自体は横文字ですので、これをちょっと横文字っぽくしてみたいと思います。

江川：はい！

一番大事なキーワードをメモ

中島：「もし」、これ英語で言うと？

江川：if。

中島：そうですね、if。そして「〜ならば」というのは、丸括弧でも括ってみましょう。「〜しよう」これはね、初めての人もいると思いますので。なにか処理しようというときは、こういう波括弧、こういうふうな感じで使っていきます。

中島：「〜ならば〜しよう」ということで、これが今日一番大事なキーワードです。せっかくですから、ちょっと赤色で。「もし」、これ大事にしてくださいね。

鈴木：みどちゃん、ちゃんとメモしてね。皆さんもね、メモしてくださいね。

中島：「〜ならば」というところですね、こちらは緑色で。ミドリーヌ。

江川：ミドリーヌ。

鈴木：みどちゃんのあだ名も募集中です。

江川：はい、募集中です（笑）。

中島：じゃあ次は、青色にでもしてみましょう。よいしょ。

江川：「〜しよう」。波括弧ですね、大事な。

中島：うん、この3つが大事です。これをしっかり、目に焼き付けてください。

鈴木：目に。

中島：そう、目に焼き付けてください。皆焼き付けたかな、どうだろう？

鈴木：皆さんどうでしょう？　メモ取ってね、ここが一番大事なんですよね？

中島：そうですね、これが大事です。これを目に焼き付けた上で、今からJSくんに移りたいと思います。プログラムの授業ですけどね、なるべくわかりやすく、要点を絞ってお話をします。JSくんのトップページに移りますよ。良いですか、行きますよ。せーの。ぽい！あ、よいしょか。ごめんなさい、忘れてました。よいしょですね。

鈴木：（笑）。

江川：よいしょ（笑）。

「JSくん」を使って実演開始

中島：JSくんのトップページ。こちらに皆さん入ってください。皆URLは大丈夫かな？　トップページにもありますし、それから教務課の方からも連絡行くのかな。ちょっとわからないんですが。

鈴木：行くと思いますよ、はい。

中島：JSくんのトップページから入ってください。利用規約ありますが、使って良いよ、悪さしないでねっていうことです。利用規約に同意してください。これも、この後実際に実習でやってもらいますよ。規約に同意をしてもらいます。ぽい！　ちょっとごめんさいね、さっきちょっとサンプル作っちゃったものですから。いろいろ見えていますが、これはなかったものとしてください。

中島：あ、そうかよいしょか！　すいません（笑）。自分で忘れちゃってましたね。ありがとう！

江川：（笑）。

中島：この中で大事なものは、一覧というのはこの後皆さんが作ったものが一覧で見れるものです。全部で12個、1度に見れるようにしています。この中で大事なとこはここ、エディタですよね。こちらのボタンを押してください。

中島：なるべくね、赤いボタンを押せば次に次に行けるようにしてみました。エディタボタンをポイと押して。するとですね、よいしょ！　するとですね、JSくんエディタというのが登場しました。パチパチパチパチ。

鈴木：おおー。

中島：これの中の大事なところ。まずサンプルのところですね。見本ソース1、見本ソース2、見本ソース3、見本ソース4。後反映ボタン1,2,3,4,とありますが、まず大事なのは見本ソース1と反映1になってきます。これは後でちょっと一緒にやることにして、忘れない内に。ネームの入力というのがあります。これやっちゃいましょう。私はよくナカシマーと言われるので。ここはなるべくアルファベットにしておいてくださいね。

江川：マー。

中島：nakashimmerというふうに打ち込んでおきました。そうすると皆さんのファイル、作品にnakashimmerという名前が付きますので、くれぐれも本名とかは避けてくださいね。皆さんのオリジナルのニックネームを入れてもらったら結構だと思います。それが終わりましたらば、早速見本のソースの1なんですが、やっぱり全体像見たいですよね。なので、この見本ソースの1というところを押してみることにしましょう。

江川：はい。

中島：タブブラウザの方は同じブラウザの中に出る。もし違うウインドウだったらね、違うウインドウで出てくるようになっています。見本のソース1を押してみます。ポイ！　ほら、出てきた。

中島：これは各自で見ていただければ結構ですが、右か左かに置いておいてください。今日はこれを作っていく、難しそうだなあと思うかもしれませんが大丈夫！　安心してください。

鈴木：お！

中島：実際にはね、ここの15,16,17行目を見るんだけどね。見ていくとこ、ちょこっとだけ先に言っておきますよ。

中島：このファイル大丈夫ですかね、見れましたか？　皆大丈夫ですかね。皆さんはまだメモとってるはずですよね。

鈴木：一生懸命メモとってる。

中島：そっかそっか。じゃあこの画面は閉じておいて、ちょっとこの画面に戻ります。

最初は「占いアプリケーション」を作ろう

中島：実は普通の実習の授業というのは最初から作りましょうというかたちなんですが、今日はかじり部ですから、通りすがりの方もいらっしゃるかもしれない。ということで、なるべく簡単に要点を絞って。今日のタイトルは「もし〜なら〜しよう」。

さっき目に焼き付けたものありましたよね。あれをちょっと思い出した上で、反映1というのを押してみましょうか。実はとんでもないことが起こります。普通は最初から入ってるんだけど、行きますよ。反映1、押しました。そうすると下見てください。

中島：ここさっき空白だった。何かもうHTML入れちゃいました。ここ1回、コンッとクリックしておきましょう。定着させるっていう感じ。下のほう、scriptって書いてありますね。これ実はプログラムですよってことです。

プログラムの中、何からしいものもうあらかじめ入れちゃいました。さっきの反映1を押したらもうできたんですね。はい、ではこれを押してみてください。そうすると、上と下にもう入っちゃったんですね。入っちゃったら4番目、プレビュ反映というのがあります。これを押しますよ。ポイ。

中島：占いができちゃいました。

江川：小吉。

中島：最初は、占いアプリケーションを作ろうと思っています。

鈴木：なるほど。

江川：なるほど！

中島：最初から見ると結構難しいでしょ？

鈴木：難しいですよ。英語がいっぱい書かれていて、ちょっと何が何だかわかんないんですけど。

中島：そういうところで、さっき目に焼き付けてもらった……。何か見えません？

江川：あ！　さっきのifとか波括弧とか。

中島：そうそうそう。if〜ならば〜しましょう。何となく薄目でちょっと見てあげてください。しっかり見るとね、やっぱりわかんなくなる。薄目で見る。

鈴木：やっぱりちょっと恐いですよね、まだ。

中島：そうそう。それで薄目で、半眼で見るんですね。そうするとね、nが0のときは小吉だよって、何となくわかりません？　しかもifってありますね。もしnが0だったら小吉だねって。

江川：うんうん。

中島：もしnが1だったら中吉だね、もしnが2だったら？

江川：大吉。

中島：そうそう、大吉！　っていうことです。それわかってもらったら結構。そうするとね、これでもうアプリケーションできあがりなんですよ。

江川：え、これでですか!?

占いの部分を「明日のお昼何にする？」に変えるには

中島：もうできあがっちゃってる。でも私さすがに思うんだけど、オリジナルってやっぱり大事じゃないですか。皆が占いアプリケーションを作ってもおもしろくないですよね。ということで、今から1つ試してみます。皆さんは、明日のお昼何にする？　この上のh1ってタイトルだと思ってくださいね。

中島：ここの小吉は何が良いですかね。

鈴木：ちょっと聞いてみますか、皆さんに。

江川：そうですね、皆さんに明日のお昼に食べたいもの。食べたくないものでも良いんですけど。

鈴木：いやいや、それは困る（笑）。

江川：何かご飯を教えてください（笑）。

鈴木：お昼ごはんのリクエスト、お待ちしております。タイムラインに投稿してくださいね。何か皆さん一緒にやってるみたいで、大吉だったとかね。

江川：本当だ。Aさん小吉。Bさん大吉とか仰ってますね。

鈴木：これがプログラミングなんですもんね。

プログラミングには「基礎から作る」と「カスタマイズ」の2つがある

中島：そうですね。プログラミングはですね、2つやり方あると思います。1つ目は、1から作っていく、基礎から作っていく。2つ目は、できたものをカスタマイズする。

鈴木：今回は？

中島：カスタマイズする（笑）。

鈴木：なるほど。

中島：オムライス、チキンライス。

鈴木：ラーメン、冷やし中華、ひやむぎ、博多ラーメン。

江川：何かすごい、麺系が多いですね。

鈴木：そうですね、皆ちょっと夏バテ気味なのかもしれない（笑）。

中島：冷やしラーメンと、それから何々？

鈴木：カレーもきてますね。

中島：すいません、今日のお昼カレーでした。

江川：（笑）。

鈴木：餃子定食、とんかつ、たこ焼き。

江川：素麺。

中島：じゃあ、餃子定食頂きました。

中島：こんな感じで作りましたよ。皆さんもやってみてくださいね。これで上も下も1回クリックして定着させて、じゃあこれで持ってプレビュー反映させます。ポイ。

中島：ほら、明日のお昼私カレーです。

鈴木：カレーにしますか。

中島：華麗なコーチ。

鈴木：華麗なコーチ、中島コーチです（笑）。

中島：でね、できましたらばこうしてください。上っかわに上がりますと、コーチに提出するボタンがあります。ボタンを押しますよ。nakashimmerで押しました。ポイっと押すと、これでほら。

中島：nakashimmerで明日のお昼は冷やしラーメン。

江川：冷やしラーメンで入ってますね。

中島：そうするとこの上にURLありますからね、コンとクリックしてください。ちょっと長いこのURLですが、これをさっきの部活の部屋で投稿してください。

鈴木：プログラミングかじり部のグループに投稿してください。これじゃないですよ。この後皆さんに、オリジナルを作っていただきます。それのURLを後ほど投稿してくださいということですね。

中島：ということで、冷やしラーメンのできあがり。でもこれは、リロードするといろいろ変わります。

江川：カレーになりましたね。

中島：餃子定食にも。だから1日1回にしてくださいね。でないと1日3回食べたらやばいです。

鈴木：太っちゃいます。

江川：太っちゃいますねえ（笑）。

中島：今こっち見ました？

鈴木：いやいやいや（笑）。そういう、そういうことじゃないです！

江川：そんなことじゃないです！

中島：冗談です（笑）。

鈴木：はい（笑）。ということで、ここからは中島コーチの実演は終わりにして、みどちゃんと部員の皆さんがこれから実習をしていきます。

江川：私も『できた』ボタン押します。できた！

鈴木：素晴らしい。後で皆さんの投稿見るのが楽しみですね。

中島：本当にそうですね。うん。

鈴木：それでは、これで1つ目は終わりですか？

中島：終わりですね。

鈴木：ということで、テーマの1つ目を終了させていただきます。皆さんお疲れ様でした。

江川：お疲れ様でした。

中島：お疲れ様でした。