ゲーム作りで、短期間でスキルを身につけて楽しむ！

2014/9/8 【フロントエンドって？】

自己紹介

小菅達矢（こすげたつや）【twitter】@keinkosuge

【facebook】https://www.facebook.com/tatsuya.kosuge

■なうデジタルハリウッドSTUDIO渋谷・スタッフトレーナー２年弱くらい■いままで音楽やってた→コールセンターのSV→デジハリ（いまここ）→？？

JavaScriptに興味をもったきっかけ

http://shigi.net/shigimovie/

年末年始くらいにこれ作った。

問題が山積みだった前述のサイト

・Windows Vista以前でまともに動かなかった。（重すぎて）

当時の僕のスペック

・jQueryはなんとなくわかっていたつもり。・プラグインも使えた。

ちゃんとJavaScriptを理解したいなぁ…

スペックあげたのは今年

「ジョブドラ！」でJavaScriptを基礎から必死に勉強。（５月末〜７月頭、約１ヶ月半）

その時の師が、山崎先生。

ジョブドラでやったこと

・JavaScript基礎・jQuery基礎・Ajax

・Canvas / localStorage

・Geolocation

※毎週、最低２０時間はかかる課題付き・・・

難しそう…

でも、頑張ってみた

作ってみた作品（http://jsdo.it/castero）

JavaScript Siri シューティングゲーム

JavaScript Numeron

※数当てゲームCSS PK

インスタントラーメングラム

脱・ビギナーならこれ！

アルゴリズムを始めよう

アルゴリズムって？

・料理でいう「レシピ」・電子機器でいう「取り扱い説明書」

目的を達成したり、課題を達成したりするための処理手順のこと。

プログラミングにおける「設計書」みたいなもの。

（例図）友達とじゃんけんして・買ったら１００円もらえる。・負けたら１００円あげる。というゲーム。

プログラムでは無理でも図や言葉でかけと言われたらおそらく多くの方が右記のようにかけるのでは？

自分の手を決めて出す（グー・チョキ・パー）

勝ち負け判定

あいこ

勝ち 負け

１００円あげる

１００円もらう

This is アルゴリズム！！！図でまずは書いてみる！

ゲームは、アルゴリズムの宝石箱

・目的地、ゴールがイメージしやすい。（ルールがわかればいいので）（結構アルゴリズムの使い回しで色々できる）

あと立てた方針は２つ

①ライブラリ使わない（※僕はjQueryも使わなかった）

※ライブラリ→enchant.js等、便利にjavascriptを使えるパッケージ。

②「何かを再現したもの」とか「既存のゲーム」を作る。

ゲームなら、出来たものを実際にやってみると、楽しめる！

仕組み（レシピ）を自分で作っているのでつまづいて調べた時に得られる知識は、より本質に近いもの！（料理なら、野菜を炒める順番・野菜による切り方の違い等）

↓

難しいものや、規模の大きなものを作るときも太刀打ちできるようになる！

ライブラリ使わなかった理由

■プラグイン・つまづきあるある

プラグイン使う

→ チュートリアル通りにやった

→ 思い通りにならない

→「何を直したらいいかわからな

い・・・」

→ JavaScriptなんて嫌いだー！

プログラムの

仕組み・構造・本質

の理解不足

クックパッドを見ないで料理を作る（自作レシピを考え作る）

まずかったら、おいしく作るために色々調べる

ライブラリなしでプログラムを書く（自分で仕組みを作る）

動かなかったら、解決の為に色々調べる

②「何かを再現したもの」「既存のゲーム」を作った理由

手順や完成の状態（ゲームのルール、どうなったらゲームとして成立するか？）がわかっている。

アルゴリズムをプログラムで書くスキルを高めることに集中できる！

とにかくやってみよう！

まずはゲーム（やりたいこと）の仕組み（アルゴリズム）を図で書く！

↓

その後、仕組みをプログラム化！

実例で解説

「じゃんけんまんフィーバー」を再現http://jsdo.it/castero/ijFZ/fullscreen

ゲームのルール（ロジック）

スタートボタン

グー

チョキ

パー

勝ち負け判定

勝ち

あいこ

負け 「ずこーっ」

※メダル１枚減る

※機械の真ん中が

ランダムに表示※どれか押した

ら機械の真ん中

も

止まる！

ルーレットスタート

メダルゲット！

※止まった箇所の数字の

枚数分

作り続けて気づいたこと

・図にして、部分部分でプログラムを作っていくと、結構わかりやすいし、意外と大きな規模のものも出来る。

こんな感じ

スタートボタン

※メダル１枚減る

※機械の真ん中が

ランダムに表示

グー

チョキ

パー

※どれか押した

ら機械の真ん中

も

止まる！

①スタートボタン押した時

②グーチョキパー

どれかを押した時

③勝ち負け判定

勝ち負け判定

④判定後の動き

勝ち

あいこ

負け

例えば①

スタートボタンを押した時に↓

・メダルが１枚分減る。（※①）

・真ん中のところがランダム表示される。（※②）

・メッセージボードの文字が「じゃんけん」に変わる。（※③）

※③ ※

①

※②

スタートボタンを押す

メダルが１枚減る

真ん中のじゃんけん画像が常にランダムで変わる

メッセージ内のテキストが「じゃんけん」になる

①を図にしたら…

細分化したら、「なんかできそう」

と思える！

※スタートボタンを押すという

「イベント」が起きたら発生す

る処理！

グー・チョキ・パーのどれかを押す

メダルが１枚減る

メッセージ内のテキストが「グー・チョキ・パーのどれか」になる

②を図にしたら…

細分化したら、「なんかで

きそう」と思える！

真ん中のランダム表示が止まる

※グーチョキパーのどれかを押すという「イベント」が起きたら発生する処理！

③を図にしたら…

細分化したら、「なんかでき

そう」と思える！

勝ち負け判定

メッセージ内テキストが

「勝ち」になる

メッセージ内テキストが「負け」になる

あいこ

勝ち

負け

※①図に戻る。もう１回じゃんけん！

タグ辞典見れば出てくることは、やってればそのうち覚えます！！

ゲーム＆アプリを作ってみよう！絶対覚える！

例えば

・自分の誕生日から10,000日後がいつなのかを表示してくれるゲーム。・ボタンを押したらその日の運勢（大吉とか）がアラート表示されるゲーム

こんな感じのものでOK。難易度は問いません。とにかく「作る」こと！！！

ちなみに僕が「現在」スキルアップのために取り組んでいること

①週１回、プログラミング作品を「js do it」に投稿し公開中。（ものすごく大変だけど鍛えられる…）

http://jsdo.it/castero

②ピクセルグリッド社（http://www.pxgrid.com/）の

有料メール＆Webマガジンを購読し、内容を学習、会得している。

【WebマガジンのURL】https://app.codegrid.net/

※「Code Grid」というサービス名です。

オススメ書籍

「JavaScript」本格入門-山田祥寛著 -

技術評論社

マンガでわかるJavaScript

-クロノスクラウン著 -

秀和システム社

最後に、「現在」のオススメ本

【jQueryレッスンブック】

山崎大助 著

http://www.socym.co.jp/book/947

9/19（金）発売！！

※今日登壇したメンバーを育てた山崎先生の

エッセンスがふんだんに詰まっています！

ありがとうございました。