弾丸トーーーク

1. G’s ACADEMY 2期生 卒業制作
"学びたい"よりも"つくりたい"人のための
プログラミング学習サイト
2016/03/02
No.16 木下 雄策

2. 今日のスライド、
77枚あります

3. 神速でいきます

4. まずは！

5. このプレゼンの
目的！！

6. 僕という人間を
知ってもらう！

7. でも…

8. すみません、
今は転職する気
ないです…(つД-｀)

9. すみません、
今は転職する気
ないです…(つД-｀)
今の仕事、とっても楽しいんです…

10. もしかしたら
いつかくるかもしれないその
日のために…

11. 今日が何かいいご縁に
なればいいなと:)

12. ということで！

13. 自己紹介

14. 自己紹介
■名前：
木下 雄策(27歳・福岡出身) @afroscript10
■略歴：
九州大学で宇宙の研究
2013年 レバレジーズ入社
■今のお仕事：
日本のエンジニア業界を最強にすること!!
→エンジニア特化型Q&Aサイト【teratail】のDevRel担当
→ITの勉強会【ヒカ☆ラボ】
■その他
→Gs'ACADEMYでプログラミング修行中…
→LIGブログ「0エンジニアから0.5エンジニアへ」連載中

15. 卒業制作紹介
〜"学びたい"よりも"つくりたい"人のための
プログラミング学習サイト〜

16. 背景

17. 【プログラミング学習サイトの現状】

18. 【プログラミング学習サイトの現状】
・無料でほとんど学べる

19. 【プログラミング学習サイトの現状】
・無料でほとんど学べる
・コンテンツも非常に充実(多様な技術に対応)

20. 【プログラミング学習サイトの現状】
・無料でほとんど学べる
・コンテンツも非常に充実(多様な技術に対応)
・体系的に(各言語やツール毎に)まとまって講座が作られている

21. 【プログラミング学習サイトの課題】
逆に言うと…
Webで何かつくりたい！
早くつくりたい！
プログラミングを学び始める人

22. 【プログラミング学習サイトの課題】
逆に言うと…
・コンテンツが充実しすぎている
Webで何かつくりたい！
早くつくりたい！
プログラミングを学び始める人

23. 【プログラミング学習サイトの課題】
逆に言うと…
・コンテンツが充実しすぎている
→何から学べばいいか分からない
Webで何かつくりたい！
早くつくりたい！
プログラミングを学び始める人

24. 【プログラミング学習サイトの課題】
逆に言うと…
・コンテンツが充実しすぎている
→何から学べばいいか分からない
・体系的に順序よくしか学べない
Webで何かつくりたい！
早くつくりたい！
プログラミングを学び始める人

25. 【プログラミング学習サイトの課題】
逆に言うと…
・コンテンツが充実しすぎている
→何から学べばいいか分からない
・体系的に順序よくしか学べない
→「何かつくりたい！」と思って学び始めたとき、
何かつくりあげるまで時間がかかる
プログラミングを学び始める人
Webで何かつくりたい！
早くつくりたい！

26. 【プログラミング学習サイトの課題】
逆に言うと…
・コンテンツが充実しすぎている
→何から学べばいいか分からない
・体系的に順序よくしか学べない
→「何かつくりたい！」と思って学び始めたとき、
何かつくりあげるまで時間がかかる
どれやればいいの!?
いつになったら作れる
の!?
プログラミングを学び始める人

27. 【何から学べばいいか分からない】
「初心者はPHPからでしょ！」
「Railsなら楽に作れるよ！」
「需要が多いJavaやれば？？」
「やっぱプログラミングはCからやらないと！」
「最近機械学習でPythonが盛り上がってきてるよ！」
「今どきGoでしょ！」
…etc

28. 【何から学べばいいか分からない】
「初心者はPHPからでしょ！」
「Railsなら楽に作れるよ！」
「需要が多いJavaやれば？？」
「やっぱプログラミングはCからやらないと！」
「最近機械学習でPythonが盛り上がってきてるよ！」
「今どきGoでしょ！」
…etc
多すぎる…
どれをやればいいのか…

29. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓

30. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓
「ドットインストールでHTML/CSS/JS入門を学ぼう！」となったとしても…

31. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓
「ドットインストールでHTML/CSS/JS入門を学ぼう！」となったとしても…
・HTML入門： 全24回×3分=72分
・CSS入門： 全22回×3分=66分
・JavaScript入門： 全24回×3分=72分

32. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓
「ドットインストールでHTML/CSS/JS入門を学ぼう！」となったとしても…
・HTML入門： 全24回×3分=72分
・CSS入門： 全22回×3分=66分
・JavaScript入門： 全24回×3分=72分
⇒合計：3時間30分
⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる

33. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓
「ドットインストールでHTML/CSS/JS入門を学ぼう！」となったとしても…
・HTML入門： 全24回×3分=72分
・CSS入門： 全22回×3分=66分
・JavaScript入門： 全24回×3分=72分
⇒合計：3時間30分
⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる
⇒結局、14〜18時間ほどかかる。
そしてレッスン後に残るのは制作物でなく知識。

34. 【つくるまでに時間がかかってしまう】
例えば…
「なんかWebでつくってみたい！」
↓
「ドットインストールでHTML/CSS/JS入門を学ぼう！」となったとしても…
・HTML入門： 全24回×3分=72分
・CSS入門： 全22回×3分=66分
・JavaScript入門： 全24回×3分=72分
⇒合計：3時間30分
⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる
⇒結局、14〜18時間ほどかかる。
そしてレッスン後に残るのは制作物でなく知識。
朝9時に始めても
夜中12時くらいまで
かかるのか…

35. そんなことより
早くつくりたい！！

36. 『ツクッタ！！-TSUKUTTA-』
"学びたい"よりも"つくりたい"人のための
プログラミング学習サイト

37. ツクッタ！！の2つの特徴

38. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない

39. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！

40. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる

41. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く

42. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く
→作品をつくり上げていくなかで、
いろんな技術に触れていく

43. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く
→作品をつくり上げていくなかで、
いろんな技術に触れていく
Low Level
High Level
HTML CSSJavaScript
【LESSONのイメージ】

44. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く
→作品をつくり上げていくなかで、
いろんな技術に触れていく
→最初は簡単なHTML/CSS/JSを使った作品
Low Level
High Level
HTML CSSJavaScript
【LESSONのイメージ】
Lesson 1の作品完成

45. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く
→作品をつくり上げていくなかで、
いろんな技術に触れていく
→最初は簡単なHTML/CSS/JSを使った作品
→だんだん高度なテクニックも入ってくる
Low Level
High Level
HTML CSSJavaScript
Lesson 1の作品完成
Lesson 2の作品完成
Lesson 3の作品完成
Lesson 4
Lesson 5
【LESSONのイメージ】

46. 【ツクッタ！！-TSUKUTTA- の2つの特徴】
(1)HTML/CSS/JavaScriptしかやらない
・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！
→JSメインに広げる！
(2)1レッスンで1作品完成させる
→学ぶことよりも”つくりあげる”ことに
フォーカスを置く
→作品をつくり上げていくなかで、
いろんな技術に触れていく
→最初は簡単なHTML/CSS/JSを使った作品
→だんだん高度なテクニックも入ってくる
⇒HTML/CSS/JSのスキルレベルが並行して
あがっていく
Low Level
High Level
HTML CSSJavaScript
Lesson 1の作品完成
Lesson 2の作品完成
Lesson 3の作品完成
Lesson 4
Lesson 5
【LESSONのイメージ】

47. Demo

48. ツクッタ！！-TSUKUTTA-はこちら
↓
http://160.16.242.124:3000/lesson/take/1/1/1

49. 【サービス全体イメージ】
■TOPページ ■レッスンページ
■(ログインページ)←スコープアウト ■(ユーザページ)←スコープアウト

50. 【今後追加予定のレッスン内容】
(1)いろいろものがclickやhoverとかで動く自己紹介ページ ←60％完成
→HTMLとCSSとJavaScriptの基礎的なとこやる。
(2)簡単だけど見た目おもしろいゲーム ←追加予定！！
→JavaScript/CSSをしっかり使ったなんかおもしろいゲーム
(3)高度なお絵描きアプリ ←追加予定！！
→canvas使ってみる
(4)テトリス的なの ←追加予定！！
→AngularJSとかFW使ってみる

51. 【今後追加予定のレッスン内容】
(1)いろいろものがclickやhoverとかで動く自己紹介ページ ←60％完成
→HTMLとCSSとJavaScriptの基礎的なとこやる。
(2)簡単だけど見た目おもしろいゲーム ←追加予定！！
→JavaScript/CSSをしっかり使ったなんかおもしろいゲーム
(3)高度なお絵描きアプリ ←追加予定！！
→canvas使ってみる
(4)テトリス的なの ←追加予定！！
→AngularJSとかFW使ってみる
HTML/CSS/JSだけで
おもしろいのいっぱいつくります！
(今考えてます…)

52. ツクッタ！！が目指すもの

53. 【ツクッタ！！が目指すもの】
■Mission of “TSUKUTTA!!”

54. 【ツクッタ！！が目指すもの】
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。

55. 【ツクッタ！！が目指すもの】
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。
■Vision of “TSUKUTTA!!”

56. 【ツクッタ！！が目指すもの】
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。
■Vision of “TSUKUTTA!!”
「何かつくろう」って思い立った人、
全員クリエイターにする。

57. 【ツクッタ！！が目指すもの】
"ツクッタ！！-TSUKUTTA!!-"は、
ただプログラミングを学びたいという人に、
「プログラミング分かった！」という学びの体験を届けるサイトではありません。
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。
■Vision of “TSUKUTTA!!”
「何かつくろう」って思い立った人、
全員クリエイターにする。

58. 【ツクッタ！！が目指すもの】
"ツクッタ！！-TSUKUTTA!!-"は、
ただプログラミングを学びたいという人に、
「プログラミング分かった！」という学びの体験を届けるサイトではありません。
このサービスは、
"つくりたい"想いを持った人に、
「これ、自分でつくった！」という"喜び"の体験を届けるサイトです。
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。
■Vision of “TSUKUTTA!!”
「何かつくろう」って思い立った人、
全員クリエイターにする。

59. 【ツクッタ！！が目指すもの】
"ツクッタ！！-TSUKUTTA!!-"は、
ただプログラミングを学びたいという人に、
「プログラミング分かった！」という学びの体験を届けるサイトではありません。
このサービスは、
"つくりたい"想いを持った人に、
「これ、自分でつくった！」という"喜び"の体験を届けるサイトです。
このサービスを通じて、
Webを使って面白いものをつくる人を増やしていこうと考えています。
■Mission of “TSUKUTTA!!”
ワクワクする作品を作りたい人に、
ワクワクの作り方を届ける。
■Vision of “TSUKUTTA!!”
「何かつくろう」って思い立った人、
全員クリエイターにする。

60. こだわったとこ

61. 全部JavaScriptでつくる！！

62. 年末に引きこもってゼロから勉強

63. 新しく技術学ぶの楽しい:)

64. そんなこんなで

65. 〜入学前〜

66. HTML→タグ10〜20個くらいは知ってる
CSS→全然できない
JavaScript→for文/if文知ってるくらい
PHP→10ヶ月独学でやって挫折…
Node.js→まさかやることになるとは…

67. 〜now〜

68. 〜now〜

69. なんかいろいろ挑戦してます

70. とうことで、
ひたすら技術が大好きです。

71. テクノロジーが世界を
どんどん変えていくことにワクワクします

72. もっとテクノロジーを使って
世界をさらにワクワクさせる人を
増やすために

73. プログラミング、ライティング、広報、
営業、イベント開催、司会、etc...

74. なんでもやります！

75. 何か一緒にできたら幸いです

76. テクノロジーの世界が
もっと盛り上がりますように

77. ご清聴ありがとうございました:)