Download to read offline
ゲームづくりで短期間でフロンドエンドのスキルアップ
- 1.
- 2. 自己紹介 小菅達矢（こすげたつや） 【twitter】 @keinkosuge 【facebook】 https://www.facebook.com/tatsuya.kosuge ■なう デジタルハリウッドSTUDIO渋谷・スタッフトレーナー２年弱くらい ■いままで 音楽やってた→コールセンターのSV→デジハリ（いまここ）→？？
- 3.
- 4. 問題が山積みだった前述のサイト ・Windows Vista以前でまともに動かなかった。 （重すぎて） 当時の僕のスペック ・jQueryはなんとなくわかっていたつもり。 ・プラグインも使えた。
- 5.
- 6.
- 7. ジョブドラでやったこと ・JavaScript基礎 ・jQuery基礎 ・Ajax ・Canvas / localStorage ・Geolocation ※毎週、最低２０時間はかかる課題付き・・・
- 8.
- 9. 作ってみた作品（http://jsdo.it/castero） JavaScript Siriシューティングゲ ーム JavaScript Numeron ※数当てゲーム CSS PK インスタントラーメングラム
- 10.
- 11.
- 12. アルゴリズムって？ ・料理でいう「レシピ」 ・電子機器でいう「取り扱い説明書」 目的を達成したり、課題を達成したりするための処理手順 のこと。 プログラミングにおける「設計書」みたいなもの。
- 13. （例図） 友達とじゃんけんして ・買ったら１００円もらえる。 ・負けたら１００円あげる。 というゲーム。 プログラムでは無理でも 図や言葉でかけと言われたら おそらく多くの方が右記のように かけるのでは？ 自分の手を決めて出す （グー・チョキ・パー） 勝ち負け 判定 あいこ 勝ち負け １００円 あげる １００円 もらう
- 14. This is アルゴリズム！！！ 図でまずは書いてみる！
- 15. ゲームは、アルゴリズムの宝石箱 ・目的地、ゴールがイメージしやすい。 （ルールがわかればいいので） （結構アルゴリズムの使い回しで色々できる）
- 16. あと立てた方針は２つ ①ライブラリ使わない（※僕はjQueryも使わなかった） ※ライブラリ→enchant.js等、便利にjavascriptを使えるパッケージ。 ②「何かを再現したもの」とか「既存のゲーム」を作る。 ゲームなら、出来たものを実際にやってみると、楽しめる！
- 17. 仕組み（レシピ）を自分で作っているので つまづいて調べた時に得られる知識は、 より本質に近いもの！ （料理なら、野菜を炒める順番・野菜による切り方の違い 等） ↓ 難しいものや、規模の大きなものを作るときも 太刀打ちできるようになる！
- 18. ライブラリ使わなかった理由 ■プラグイン・つまづきあるある プラグイン使う → チュートリアル通りにやった → 思い通りにならない →「何を直したらいいかわからな い・・・」 → JavaScriptなんて嫌いだー！ プログラムの 仕組み・構造・本質 の理解不足
- 19. クックパッドを見な いで料理を作る（自作 レシピを考え作る） まずかったら、おいしく作 るために色々調べる ライブラリなしでプ ログラムを書く（自分 で仕組みを作る） 動かなかったら、解決の為 に色々調べる
- 20. ②「何かを再現したもの」「既存のゲーム」を作った理 由 手順や完成の状態（ゲームのルール、どうなったらゲーム として成立するか？）がわかっている。
- 21.
- 22. とにかくやってみよう！ まずはゲーム（やりたいこと）の 仕組み（アルゴリズム）を図で書く！ ↓ その後、仕組みをプログラム化！
- 23.
- 24. ゲームのルール（ロジック） スタートボタン グー チョキ パー 勝ち負 け判定 あいこ 負け「ずこーっ」 勝ち ※メダル１枚減る ※機械の真ん中が ランダムに表示 ※どれか押した ら機械の真ん中 も 止まる！ ルーレットスタート メダルゲット！ ※止まった箇所の数字の 枚数分
- 25.
- 26. こんな感じ スタートボタン ※メダル１枚減る ※機械の真ん中が ランダムに表示 グー チョキ パー ※どれか押した ら機械の真ん中 も 止まる！ ①スタートボタン 押した時 ②グーチョキパー どれかを押した時 ③勝ち負け判定 勝ち負 け判定 ④判定後の動き あいこ 負け 勝ち
- 27. 例えば① スタートボタンを押した時に ↓ ・メダルが１枚分減る。（※①） ・真ん中のところが ランダム表示される。（※②） ・メッセージボードの文字が 「じゃんけん」に変わる。（※③） ※ ③ ※ ① ※ ②
- 28. スタートボタンを押す メダルが１枚減る 真ん中のじゃんけん画像 が常にランダムで変わる メッセージ内のテキス トが「じゃんけん」に なる ①を図にしたら … ※スタートボタンを押すという 「イベント」が起きたら発生す る処理！ 細分化したら、「なんかできそう」 と思える！
- 29. グー・チョキ・パーの どれかを押す メダルが１枚減る メッセージ内のテキス トが「グー・チョキ・ パーのどれか」になる ②を図にしたら … 細分化したら、「なんかで きそう」と思える！ 真ん中のランダム表示 が止まる ※グーチョキパーのどれかを 押すという「イベント」が起き たら発生する処理！
- 30. ③を図にしたら … 細分化したら、「なんかでき そう」と思える！ 勝ち負け判定 メッセージ内 テキストが 「負け」 メッセージ内 テキストが 「勝ち」になる になる あいこ 勝ち 負け ※①図に戻る。 もう１回じゃんけん！
- 31.
- 32. ゲーム＆アプリを作ってみよう！絶対覚える！ 例えば ・自分の誕生日から10,000日後がいつなのかを表示してくれるゲーム。 ・ボタンを押したらその日の運勢（大吉とか）がアラート表示されるゲーム こんな感じのものでOK。 難易度は問いません。とにかく「作る」こと！！！
- 33. ちなみに僕が「現在」スキルアップのために取り組んでいること ①週１回、プログラミング作品を 「jsdo it」に投稿し公開中。 （ものすごく大変だけど鍛えられる…） http://jsdo.it/castero
- 34. ②ピクセルグリッド社（http://www.pxgrid.com/）の 有料メール＆Webマガジンを購読し、 内容を学習、会得している。 【WebマガジンのURL】 https://app.codegrid.net/ ※「Code Grid」というサービス名です。
- 35. オススメ書籍 「JavaScript」本格入門 -山田祥寛著- 技術評論社 マンガでわかるJavaScript -クロノスクラウン著- 秀和システム社
- 36. 最後に、「現在」のオススメ本 【jQueryレッスンブック】 山崎大助著 http://www.socym.co.jp/book/947 9/19（金）発売！！ ※今日登壇したメンバーを育てた山崎先生の エッセンスがふんだんに詰まっています！
- 37.