JS Girls Tokyo #1で、JavaScript初心者向けの勉強方法について話しました。 私自身、HTML/CSSはできてもJavaScriptが大の苦手でしたが、@hokaccha 先生による修行によって、なんとか理解できるようになりました。 その修業の中で、何をどうやって勉強したかを紹介することによって、同じように悩んでいる人へのヒントになればうれしいなと思って書いてみました。

1. はじめてのJavaScript
2014/03/08(Sat)
JS Girls Tokyo #1
PixelGrid Inc. @tacamy

2. 自己紹介
山田敬美（@tacamy）
ピクセルグリッド
フロントエンド・エンジニア（新卒1年目）
HTML&CSS歴 : 4年
JavaScript歴 : 1年

3. 会社紹介

4. “ピクセルグリッドはJavaScriptの会社です。”
代表取締役 中村享介

5. ？？？

6. 私のJavaScript歴
職種
JavaScript
期間
KAYAC
マークアップ
エンジニア
すぐに挫折
2年
NAVER
マークアップ
エンジニア
1行も書いてない
2年
専門学校
無職
@hokacchaによる修行
1年
（修行 4ヶ月）
PixelGrid
フロントエンド
エンジニア
現在進行形で修行中
1年目

7. 今日の話
JavaScriptをまったく書けなかった人が、
4ヶ月でJavaScriptの会社に入るまでの話
効率的なJavaScript勉強方法のヒントに
教える側からすると、分からない人が
どこに引っかかるかが理解できるかも？

8. 第一話
入社までの道のり

9. 2012年12月某日
@tacamy
入社したーい
（●＾o＾●）
@hokaccha
今のレベルで入社しても
お互いに不幸になるだけだから、
学校卒業までの間に、どれだけ
できるようになるかで判断しよう
Oh…

10. そのときの私の状況
JavaScriptについての知識ゼロ
プログラミングの基礎知識もゼロで
退職して学校で下記を学んでいた
C : プログラミングの基礎とアルゴリズム
Java : オブジェクト指向

11. えっ、JavaScriptを覚えたいだけなのに、
CとかJavaをやらないといけないの？
No！それはただの趣味！
普通はこれでOK！

12. ノンプログラマのための
JavaScriptはじめの一歩
第2章 JavaScriptの文法
基本的な文法
文字列と数値
配列とオブジェクト
条件判定のための型と演算子
条件分岐
繰り返し
関数
PixelGrid @hokaccha 著

13. ✄---------- ここから修行がはじまる ----------✄

14. Mission01
JS独特の仕様を
理解せよ！

15. Mission内容
@hokaccha先生から毎週1つ、
JavaScriptに関するキーワードをもらう
そのキーワードについて自分で調べて
間違っててもいいからブログにまとめること
間違ってたらブログのコメントで
指摘やヒントがもらえる

16. プロトタイプ
Javaと比較しつつ、JavaScriptのプロトタイ
プについて調べてみる - tacamy memo (旧)
http://d.hatena.ne.jp/tacamy/20121209/1355034499
プロトタイプチェーンをもっと理解する tacamy.blog
http://tacamy.hatenablog.com/entry/2012/12/17/000931

17. 理解したこと
JavaScriptは、プロトタイプベースの
オブジェクト指向
関数がそのままコンストラクタになる
プロトタイプチェーンによる継承の仕組み
参照のコピーと値の変更の仕組み

18. スコープ
JavaScriptのスコープを理解する tacamy.blog
http://tacamy.hatenablog.com/entry/2012/12/30/191125
JavaScriptのスコープチェーンとクロージャ
を理解する - tacamy.blog
http://tacamy.hatenablog.com/entry/2012/12/31/005951

19. 理解したこと
関数内でのみスコープがつくられる
JavaScriptにブロックスコープはない
varを省略するとグローバル変数になる
巻き上げがあるので関数の先頭で変数を宣言
参照渡しの場合は関数外に影響を与える危険

20. 理解したこと
スコープチェーンによる名前解決方法
変数の宣言と参照とは、
変数オブジェクトの読み書きのこと
クロージャによって、ローカル変数の状態を
保持できるメソッドがつくれる

21. this
JavaScriptのthisを理解する - tacamy.blog
http://tacamy.hatenablog.com/entry/2013/01/06/224718

22. 理解したこと
thisはインスタンス自身を指す
関数内のthisは、関数を定義した
オブジェクトとは関係なしに、
関数を呼び出したオブジェクトを指す
イベントハンドラで関数を呼び出した場合の
thisは、イベントの発生源のオブジェクトを指す

23. ブログを書く理由
本やWebの記事を読むのもひとつの勉強方法
でも、頭で分かった気になっていても、
自分の言葉でブログにまとめられない
ブログにすることで、本当の理解に繋がる
忘れてもあとで見返すことで思い出せる

24. ブログの書き方
調べたことをとにかく列挙したのち
グループ分けする
自分の言葉で言い換えてみる
調べたことだけでなく、なぜそうなるかを
自分で考えて考察をつける

25. ブログのススメ
ぜひ私と同じようにやってみてほしい
プロトタイプ
スコープ
this
一気にJavaScriptの理解度が上がり、
人のコードが理解できるようになる

26. 1ヶ月後…
次は、何でもいいからとりあえず
jQueryプラグイン作ってみて
!
※ブログは続けてね

27. Mission02
とりあえず書こう
jQueryプラグイン

28. Mission内容
jQueryプラグインを書いてGitHubで公開
何をつくるかは自由、カンタンなものから
分かる人にコードを見てもらって、
間違いや改善点をGitHubのコード上で
コメントしてもらう

29. でも問題が…
そもそもつくりたいものなんてない
あまりにも分からなさすぎると、
何からどう手をつけていいかも分からず、
手を動かすことすらできない
そんなときの救世主が…

30. Webデザイナーのための
jQuery入門
jQueryの考え方を
簡潔で分かりやすく
サンプルコードが
豊富＆あるある感
なぜこう書くのかという
説明が具体的
PixelGrid @Takazudo 著

31. 書けない場合は？
サンプルに載っているものをパクる
最初に答えを見て、組み立て方がイメージ
できたら、まずは本を見ないで書いてみる
詰まったら本を見れば1人で進められる
元コードにちょっとした機能追加や改変を

32. もらえるコメント
tacamy/jQueryStudy
https://github.com/tacamy/jQueryStudy/commit/
1c2f49517982a06569ab4942fff63c226ad2f060

33. 書いてみての気付き
JavaScriptでは、イベントを起点にして
すべての処理が行われると気づく
JavaScriptのオブジェクトはすべて、
KeyとValueの組み合わせと気付き、
カンマやセミコロンやカッコの位置で
混乱しなくなった（初心者あるある？）

34. 1ヶ月後…
jQueryの課題お休みして、
卒業制作で、jQueryとNode.jsで
Webサービスつくってみたい！
OK！
※ブログは続けてね

35. つくったもの
豚レース（未完成）
http://pigrace.herokuapp.com/
勉強はじめて2ヶ月くらいで
これくらいならできるようになるよの例

36. フロント実装
（品質はさておき）必要な機能は実装できた
ほしい機能が明確になると、
必要な処理の流れを自分の頭で考えるので
コピペに頼らなくなるのでよい

37. サーバーサイド
正直、無謀すぎた／(^o^)＼
Node.jsをHerokuで動かすとこで力尽きた
Node.js + Express を Heroku で動かすまでの手順まとめ
http://tacamy.hatenablog.com/entry/2013/02/16/235127

38. 1ヶ月後…
まーがんばったし
入社してもいいんじゃない？
やったー！！！
これからも修行がんばります！

39. 第二話
入社後の修行

40. 最初の頃の失敗談
分からないことも自分で調べて、
どうしてもダメなとき「だけ」聞くのは、
動けばOKなコードになりがち
ノーチェックで納品する危険性
※会社として品質を担保できない
でも、どうしても質問を遠慮してしまう…

41. そこでプルリ運用

42. プルリとは？
GitHubのプルリクエストという機能の略語
【参考】
pull request を利用した開発ワークフロー
// Speaker Deck
https://speakerdeck.com/hotchpotch/pull-requestwoli-yong-sitakai-fa-wakuhuro

43. プルリ運用のルール
1. 機能別にブランチを切って開発
2. プルリを送る → メールが飛ぶ
3. CTOと手の空いてる人がコードレビュー
4. レビューが通ったもののみマージ
どんな細かい修正もすべてをプルリにする

44. プルリのメリット
遠慮する必要がなくなる
動けばOKじゃなくて、
よりよい実装方法を知ることができる
会社として品質を担保できる
お互いメリットしかない！オススメ！

45. 信頼できる情報源

46. コピペに注意
JavaScriptのコードをどっかからコピペする
→ ほぼ100%コピペした部分を指摘される
拾い食いコードは信用してはいけない
信頼できる情報源って…？

47. CodeGrid
ピクセルグリッドの
エンジニアが執筆
編集者が検証した上で
分かりやすく編集
過去記事アーカイブ
毎週木曜配信（月4回）
月840円（30日無料）
https://app.codegrid.net/

48. HTML5Experts.jp
「すべての記事が
永久保存版」を目指す
Web技術情報メディア
著者のスキルの高さ
無料で読める
http://html5experts.jp/

49. 情報の目利き方法
誰が書いている？
→ 身元保証により書き手に責任感が生まれる
いつの情報？
→ バージョンに違いがあるかも
きちんと検証された情報？
→ 動かなかったときの時間ロスを考えよう

50. おまけ
Chrome Extention

51. Chrome Extention
今日Girlsのみなさんがつくるそうなので
私もつくってみたよ！
楽天カンタン送料表示（Chrome拡張）を公開したよ！
http://tacamy.hatenablog.com/entry/2014/01/23/124024

52. まとめ

53. JavaScript必勝法
人に教わる前段階の基礎は自力でがんばる
学んだり教わったことはブログに書こう
聞ける人が周りにいない？
今日がJavaScript友達を増やすチャンス！

54. 自信を持とう
知識ゼロからはじめても
数ヶ月でイチから書けるようになる
ちょっと書けるようになると、
苦手だったJavaScriptも楽しくなってくる
今日のハンズオンで苦手意識を克服しよう

55. みんなで一緒に
がんばろう∼

56. ありがとうございました