Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ゲーム作りで、短期間でスキルを身につけて楽しむ! 
2014/9/8 【フロントエンドって?】
自己紹介 
小菅達矢(こすげたつや) 
【twitter】 
@keinkosuge 
【facebook】 
https://www.facebook.com/tatsuya.kosuge 
■なう 
デジタルハリウッドSTUDIO渋谷・スタ...
JavaScriptに興味をもったきっかけ 
http://shigi.net/shigimovie/ 
年末年始くらいに 
これ作った。
問題が山積みだった前述のサイト 
・Windows Vista以前でまともに動かなかった。 
(重すぎて) 
当時の僕のスペック 
・jQueryはなんとなくわかっていたつもり。 
・プラグインも使えた。
ちゃんとJavaScriptを理解したいなぁ…
スペックあげたのは今年 
「ジョブドラ!」でJavaScriptを基礎から必死に勉強。 
(5月末〜7月頭、約1ヶ月半) 
その時の師が、山崎先生。
ジョブドラでやったこと 
・JavaScript基礎 
・jQuery基礎 
・Ajax 
・Canvas / localStorage 
・Geolocation 
※毎週、最低20時間はかかる課題付き・・・
難しそう… 
でも、頑張ってみた
作ってみた作品(http://jsdo.it/castero) 
JavaScript Siri シューティングゲ 
ーム 
JavaScript Numeron 
※数当てゲーム 
CSS PK 
インスタントラーメングラム
脱・ビギナーならこれ!
アルゴリズムを始めよう
アルゴリズムって? 
・料理でいう「レシピ」 
・電子機器でいう「取り扱い説明書」 
目的を達成したり、課題を達成したりするための処理手順 
のこと。 
プログラミングにおける「設計書」みたいなもの。
(例図) 
友達とじゃんけんして 
・買ったら100円もらえる。 
・負けたら100円あげる。 
というゲーム。 
プログラムでは無理でも 
図や言葉でかけと言われたら 
おそらく多くの方が右記のように 
かけるのでは? 
自分の手を決めて出す...
This is アルゴリズム!!! 
図でまずは書いてみる!
ゲームは、アルゴリズムの宝石箱 
・目的地、ゴールがイメージしやすい。 
(ルールがわかればいいので) 
(結構アルゴリズムの使い回しで色々できる)
あと立てた方針は2つ 
①ライブラリ使わない(※僕はjQueryも使わなかった) 
※ライブラリ→enchant.js等、便利にjavascriptを使えるパッケージ。 
②「何かを再現したもの」とか「既存のゲーム」を作る。 
ゲームなら、出来...
仕組み(レシピ)を自分で作っているので 
つまづいて調べた時に得られる知識は、 
より本質に近いもの! 
(料理なら、野菜を炒める順番・野菜による切り方の違い 
等) 
↓ 
難しいものや、規模の大きなものを作るときも 
太刀打ちできるようにな...
ライブラリ使わなかった理由 
■プラグイン・つまづきあるある 
プラグイン使う 
→ チュートリアル通りにやった 
→ 思い通りにならない 
→「何を直したらいいかわからな 
い・・・」 
→ JavaScriptなんて嫌いだー! 
プログラム...
クックパッドを見な 
いで料理を作る(自作 
レシピを考え作る) 
まずかったら、おいしく作 
るために色々調べる 
ライブラリなしでプ 
ログラムを書く(自分 
で仕組みを作る) 
動かなかったら、解決の為 
に色々調べる
②「何かを再現したもの」「既存のゲーム」を作った理 
由 
手順や完成の状態(ゲームのルール、どうなったらゲーム 
として成立するか?)がわかっている。
アルゴリズムをプログラムで書くスキルを 
高めることに集中できる!
とにかくやってみよう! 
まずはゲーム(やりたいこと)の 
仕組み(アルゴリズム)を図で書く! 
↓ 
その後、仕組みをプログラム化!
実例で解説 
「じゃんけんまんフィーバー」を再現 
http://jsdo.it/castero/ijFZ/fullscreen
ゲームのルール(ロジック) 
スタートボタン 
グー 
チョキ 
パー 
勝ち負 
け判定 
あいこ 
負け「ずこーっ」 
勝ち 
※メダル1枚減る 
※機械の真ん中が 
ランダムに表示 
※どれか押した 
ら機械の真ん中 
も 
止まる! 
...
作り続けて気づいたこと 
・図にして、部分部分でプログラムを作っていくと、結構 
わかりやすいし、意外と大きな規模のものも出来る。
こんな感じ 
スタートボタン 
※メダル1枚減る 
※機械の真ん中が 
ランダムに表示 
グー 
チョキ 
パー 
※どれか押した 
ら機械の真ん中 
も 
止まる! 
①スタートボタン 
押した時 
②グーチョキパー 
どれかを押した時 
③...
例えば① 
スタートボタンを押した時に 
↓ 
・メダルが1枚分減る。(※①) 
・真ん中のところが 
ランダム表示される。(※②) 
・メッセージボードの文字が 
「じゃんけん」に変わる。(※③) 
※ 
③ ※ 
① 
※ 
②
スタートボタンを押す 
メダルが1枚減る 
真ん中のじゃんけん画像 
が常にランダムで変わる 
メッセージ内のテキス 
トが「じゃんけん」に 
なる 
①を図にしたら 
… 
※スタートボタンを押すという 
「イベント」が起きたら発生す 
る処...
グー・チョキ・パーの 
どれかを押す 
メダルが1枚減る 
メッセージ内のテキス 
トが「グー・チョキ・ 
パーのどれか」になる 
②を図にしたら 
… 
細分化したら、「なんかで 
きそう」と思える! 
真ん中のランダム表示 
が止まる 
※...
③を図にしたら 
… 
細分化したら、「なんかでき 
そう」と思える! 
勝ち負け判定 
メッセージ内 
テキストが 
「負け」 
メッセージ内 
テキストが 
「勝ち」になる 
になる 
あいこ 
勝ち 
負け 
※①図に戻る。 
もう1回じ...
タグ辞典見れば出てくることは、 
やってればそのうち覚えます!!
ゲーム&アプリを作ってみよう!絶対覚える! 
例えば 
・自分の誕生日から10,000日後がいつなのかを表示してくれるゲーム。 
・ボタンを押したらその日の運勢(大吉とか)がアラート表示されるゲーム 
こんな感じのものでOK。 
難易度は問いま...
ちなみに僕が「現在」スキルアップのために取り組んでいること 
①週1回、プログラミング作品を 
「js do it」に投稿し公開中。 
(ものすごく大変だけど鍛えられる…) 
http://jsdo.it/castero
②ピクセルグリッド社(http://www.pxgrid.com/)の 
有料メール&Webマガジンを購読し、 
内容を学習、会得している。 
【WebマガジンのURL】 
https://app.codegrid.net/ 
※「Code G...
オススメ書籍 
「JavaScript」本格入門 
- 山田祥寛著- 
技術評論社 
マンガでわかるJavaScript 
-クロノスクラウン著- 
秀和システム社
最後に、「現在」のオススメ本 
【jQueryレッスンブック】 
山崎大助著 
http://www.socym.co.jp/book/947 
9/19(金)発売!! 
※今日登壇したメンバーを育てた山崎先生の 
エッセンスがふんだんに詰まっ...
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

ゲームづくりで短期間でフロンドエンドのスキルアップ

1,095 views

Published on

9/8に講演した際に使用したスライドです。

Published in: Engineering
  • Be the first to comment

ゲームづくりで短期間でフロンドエンドのスキルアップ

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

×