G’s ACADEMY 2期生 卒業制作

"学びたい"よりも"つくりたい"人のためのプログラミング学習サイト

2016/03/02No.16　木下　雄策

今日のスライド、

77枚あります

神速でいきます

まずは！

このプレゼンの

目的！！

僕という人間を

知ってもらう！

でも…

すみません、

今は転職する気

ないです…(つД-｀)

すみません、

今は転職する気

ないです…(つД-｀)

今の仕事、とっても楽しいんです…

もしかしたら

いつかくるかもしれないその

日のために…

今日が何かいいご縁に

なればいいなと:)

ということで！

自己紹介

自己紹介

■名前：

　木下　雄策(27歳・福岡出身) @afroscript10

■略歴：

　九州大学で宇宙の研究

　2013年　レバレジーズ入社

■今のお仕事：

　日本のエンジニア業界を最強にすること!!

　→エンジニア特化型Q&Aサイト【teratail】のDevRel担当

　→ITの勉強会【ヒカ☆ラボ】

■その他

　→Gs'ACADEMYでプログラミング修行中…

　→LIGブログ「0エンジニアから0.5エンジニアへ」連載中

卒業制作紹介

〜"学びたい"よりも"つくりたい"人のためのプログラミング学習サイト〜

背景

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

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

・無料でほとんど学べる

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

・無料でほとんど学べる・コンテンツも非常に充実(多様な技術に対応)

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

・無料でほとんど学べる・コンテンツも非常に充実(多様な技術に対応)・体系的に(各言語やツール毎に)まとまって講座が作られている

【プログラミング学習サイトの課題】

逆に言うと…

Webで何かつくりたい！早くつくりたい！

プログラミングを学び始める人

【プログラミング学習サイトの課題】

逆に言うと…・コンテンツが充実しすぎている

Webで何かつくりたい！早くつくりたい！

プログラミングを学び始める人

【プログラミング学習サイトの課題】

逆に言うと…・コンテンツが充実しすぎている　→何から学べばいいか分からない

Webで何かつくりたい！早くつくりたい！

プログラミングを学び始める人

【プログラミング学習サイトの課題】

逆に言うと…・コンテンツが充実しすぎている　→何から学べばいいか分からない

・体系的に順序よくしか学べない

Webで何かつくりたい！早くつくりたい！

プログラミングを学び始める人

【プログラミング学習サイトの課題】

逆に言うと…・コンテンツが充実しすぎている　→何から学べばいいか分からない

・体系的に順序よくしか学べない　→「何かつくりたい！」と思って学び始めたとき、　　　何かつくりあげるまで時間がかかる

プログラミングを学び始める人

Webで何かつくりたい！早くつくりたい！

【プログラミング学習サイトの課題】

逆に言うと…・コンテンツが充実しすぎている　→何から学べばいいか分からない

・体系的に順序よくしか学べない　→「何かつくりたい！」と思って学び始めたとき、　　　何かつくりあげるまで時間がかかる

どれやればいいの!?いつになったら作れるの!?

プログラミングを学び始める人

【何から学べばいいか分からない】

「初心者はPHPからでしょ！」

「Railsなら楽に作れるよ！」

「需要が多いJavaやれば？？」

「やっぱプログラミングはCからやらないと！」

「最近機械学習でPythonが盛り上がってきてるよ！」

「今どきGoでしょ！」

…etc

【何から学べばいいか分からない】

「初心者はPHPからでしょ！」

「Railsなら楽に作れるよ！」

「需要が多いJavaやれば？？」

「やっぱプログラミングはCからやらないと！」

「最近機械学習でPythonが盛り上がってきてるよ！」

「今どきGoでしょ！」

…etc

多すぎる…どれをやればいいのか…

【つくるまでに時間がかかってしまう】

例えば…「なんかWebでつくってみたい！」　↓

【つくるまでに時間がかかってしまう】

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

【つくるまでに時間がかかってしまう】

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

　・HTML入門： 全24回×3分=72分　・CSS入門： 全22回×3分=66分　・JavaScript入門： 全24回×3分=72分

【つくるまでに時間がかかってしまう】

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

　・HTML入門： 全24回×3分=72分　・CSS入門： 全22回×3分=66分　・JavaScript入門： 全24回×3分=72分

　⇒合計：3時間30分　⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる

【つくるまでに時間がかかってしまう】

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

　・HTML入門： 全24回×3分=72分　・CSS入門： 全22回×3分=66分　・JavaScript入門： 全24回×3分=72分

　⇒合計：3時間30分　⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる

　⇒結局、14〜18時間ほどかかる。

　　そしてレッスン後に残るのは制作物でなく知識。

【つくるまでに時間がかかってしまう】

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

　・HTML入門： 全24回×3分=72分　・CSS入門： 全22回×3分=66分　・JavaScript入門： 全24回×3分=72分

　⇒合計：3時間30分　⇒動画見て手を動かしながら学ぶと考えるとさらに約4,5倍かかる

　⇒結局、14〜18時間ほどかかる。

　　そしてレッスン後に残るのは制作物でなく知識。

朝9時に始めても夜中12時くらいまでかかるのか…

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

『ツクッタ！！-TSUKUTTA-』

"学びたい"よりも"つくりたい"人のための

プログラミング学習サイト

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

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない　・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！　　→JSメインに広げる！

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない　・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！　　→JSメインに広げる！

(2)1レッスンで1作品完成させる

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない　・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！　　→JSメインに広げる！

(2)1レッスンで1作品完成させる　→学ぶことよりも”つくりあげる”ことに　　フォーカスを置く

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない　・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！　　→JSメインに広げる！

(2)1レッスンで1作品完成させる　→学ぶことよりも”つくりあげる”ことに　　フォーカスを置く　→作品をつくり上げていくなかで、　　いろんな技術に触れていく

【ツクッタ！！-TSUKUTTA- の2つの特徴】

(1)HTML/CSS/JavaScriptしかやらない　・jQuery,Milkcocoa,Monaca等、JSに関するものは使うが、他の言語はやらない！　　→JSメインに広げる！

(2)1レッスンで1作品完成させる　→学ぶことよりも”つくりあげる”ことに　　フォーカスを置く　→作品をつくり上げていくなかで、　　いろんな技術に触れていく

Low Level

High Level

HTML CSSJavaScript

【LESSONのイメージ】

【ツクッタ！！-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の作品完成

【ツクッタ！！-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のイメージ】

【ツクッタ！！-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のイメージ】

Demo

ツクッタ！！-TSUKUTTA-はこちら

↓ http://160.16.242.124:3000/lesson/take/1/1/1

【サービス全体イメージ】

■TOPページ ■レッスンページ

■(ログインページ)←スコープアウト ■(ユーザページ)←スコープアウト

【今後追加予定のレッスン内容】

(1)いろいろものがclickやhoverとかで動く自己紹介ページ　←60％完成　→HTMLとCSSとJavaScriptの基礎的なとこやる。

(2)簡単だけど見た目おもしろいゲーム　←追加予定！！　→JavaScript/CSSをしっかり使ったなんかおもしろいゲーム

(3)高度なお絵描きアプリ　←追加予定！！　→canvas使ってみる

(4)テトリス的なの　←追加予定！！　→AngularJSとかFW使ってみる

【今後追加予定のレッスン内容】

(1)いろいろものがclickやhoverとかで動く自己紹介ページ　←60％完成　→HTMLとCSSとJavaScriptの基礎的なとこやる。

(2)簡単だけど見た目おもしろいゲーム　←追加予定！！　→JavaScript/CSSをしっかり使ったなんかおもしろいゲーム

(3)高度なお絵描きアプリ　←追加予定！！　→canvas使ってみる

(4)テトリス的なの　←追加予定！！　→AngularJSとかFW使ってみる

HTML/CSS/JSだけで

おもしろいのいっぱいつくります！

(今考えてます…)

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

【ツクッタ！！が目指すもの】

■Mission of “TSUKUTTA!!”

【ツクッタ！！が目指すもの】

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

【ツクッタ！！が目指すもの】

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

■Vision of “TSUKUTTA!!”

【ツクッタ！！が目指すもの】

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

■Vision of “TSUKUTTA!!”　「何かつくろう」って思い立った人、　全員クリエイターにする。

【ツクッタ！！が目指すもの】

"ツクッタ！！-TSUKUTTA!!-"は、 ただプログラミングを学びたいという人に、 「プログラミング分かった！」という学びの体験を届けるサイトではありません。

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

■Vision of “TSUKUTTA!!”　「何かつくろう」って思い立った人、　全員クリエイターにする。

【ツクッタ！！が目指すもの】

"ツクッタ！！-TSUKUTTA!!-"は、 ただプログラミングを学びたいという人に、 「プログラミング分かった！」という学びの体験を届けるサイトではありません。

このサービスは、 "つくりたい"想いを持った人に、「これ、自分でつくった！」という"喜び"の体験を届けるサイトです。

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

■Vision of “TSUKUTTA!!”　「何かつくろう」って思い立った人、　全員クリエイターにする。

【ツクッタ！！が目指すもの】

"ツクッタ！！-TSUKUTTA!!-"は、 ただプログラミングを学びたいという人に、 「プログラミング分かった！」という学びの体験を届けるサイトではありません。

このサービスは、 "つくりたい"想いを持った人に、「これ、自分でつくった！」という"喜び"の体験を届けるサイトです。

このサービスを通じて、 Webを使って面白いものをつくる人を増やしていこうと考えています。

■Mission of “TSUKUTTA!!”　ワクワクする作品を作りたい人に、　ワクワクの作り方を届ける。

■Vision of “TSUKUTTA!!”　「何かつくろう」って思い立った人、　全員クリエイターにする。

こだわったとこ

全部JavaScriptでつくる！！

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

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

そんなこんなで

〜入学前〜

HTML→タグ10〜20個くらいは知ってる

CSS→全然できない

JavaScript→for文/if文知ってるくらい

PHP→10ヶ月独学でやって挫折…Node.js→まさかやることになるとは…

〜now〜

〜now〜

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

とうことで、

ひたすら技術が大好きです。

テクノロジーが世界を

どんどん変えていくことにワクワクします

もっとテクノロジーを使って

世界をさらにワクワクさせる人を

増やすために

プログラミング、ライティング、広報、

営業、イベント開催、司会、etc...

なんでもやります！

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

テクノロジーの世界が

もっと盛り上がりますように

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