0
はじめてのJavaScript
2014/03/08(Sat)
JS Girls Tokyo #1
PixelGrid Inc. @tacamy
自己紹介
山田敬美(@tacamy)
ピクセルグリッド

フロントエンド・エンジニア(新卒1年目)
HTML&CSS歴 : 4年
JavaScript歴 : 1年
会社紹介
“ピクセルグリッドはJavaScriptの会社です。”

代表取締役 中村享介
???
私のJavaScript歴
職種

JavaScript

期間

KAYAC

マークアップ

エンジニア

すぐに挫折

2年

NAVER

マークアップ

エンジニア

1行も書いてない

2年

専門学校

無職

@hokaccha...
今日の話
JavaScriptをまったく書けなかった人が、

4ヶ月でJavaScriptの会社に入るまでの話
効率的なJavaScript勉強方法のヒントに
教える側からすると、分からない人が

どこに引っかかるかが理解できるかも?
第一話

入社までの道のり
2012年12月某日
@tacamy

入社したーい
(●^o^●)

@hokaccha

今のレベルで入社しても

お互いに不幸になるだけだから、

学校卒業までの間に、どれだけ

できるようになるかで判断しよう

Oh…
そのときの私の状況
JavaScriptについての知識ゼロ
プログラミングの基礎知識もゼロで

退職して学校で下記を学んでいた
C : プログラミングの基礎とアルゴリズム
Java : オブジェクト指向
えっ、JavaScriptを覚えたいだけなのに、

CとかJavaをやらないといけないの?

No!それはただの趣味!
普通はこれでOK!
ノンプログラマのための

JavaScriptはじめの一歩
第2章 JavaScriptの文法
基本的な文法
文字列と数値
配列とオブジェクト
条件判定のための型と演算子
条件分岐
繰り返し
関数

PixelGrid @hokaccha 著
✄---------- ここから修行がはじまる ----------✄
Mission01

JS独特の仕様を

理解せよ!
Mission内容
@hokaccha先生から毎週1つ、

JavaScriptに関するキーワードをもらう
そのキーワードについて自分で調べて

間違っててもいいからブログにまとめること
間違ってたらブログのコメントで

指摘やヒントがもらえる
プロトタイプ
Javaと比較しつつ、JavaScriptのプロトタイ
プについて調べてみる - tacamy memo (旧)

http://d.hatena.ne.jp/tacamy/20121209/1355034499

プロトタイプチ...
理解したこと
JavaScriptは、プロトタイプベースの

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

http://tacamy.hatenablog.com/entry/2012/12/30/191125

JavaScriptのスコープチェーンとクロージャ
を理解...
理解したこと
関数内でのみスコープがつくられる

JavaScriptにブロックスコープはない
varを省略するとグローバル変数になる
巻き上げがあるので関数の先頭で変数を宣言
参照渡しの場合は関数外に影響を与える危険
理解したこと
スコープチェーンによる名前解決方法
変数の宣言と参照とは、

変数オブジェクトの読み書きのこと
クロージャによって、ローカル変数の状態を

保持できるメソッドがつくれる
this
JavaScriptのthisを理解する - tacamy.blog

http://tacamy.hatenablog.com/entry/2013/01/06/224718
理解したこと
thisはインスタンス自身を指す
関数内のthisは、関数を定義した

オブジェクトとは関係なしに、

関数を呼び出したオブジェクトを指す
イベントハンドラで関数を呼び出した場合の

thisは、イベントの発生源のオブジェクトを指...
ブログを書く理由
本やWebの記事を読むのもひとつの勉強方法
でも、頭で分かった気になっていても、

自分の言葉でブログにまとめられない
ブログにすることで、本当の理解に繋がる
忘れてもあとで見返すことで思い出せる
ブログの書き方
調べたことをとにかく列挙したのち

グループ分けする
自分の言葉で言い換えてみる
調べたことだけでなく、なぜそうなるかを

自分で考えて考察をつける
ブログのススメ
ぜひ私と同じようにやってみてほしい
プロトタイプ
スコープ
this

一気にJavaScriptの理解度が上がり、

人のコードが理解できるようになる
1ヶ月後…

次は、何でもいいからとりあえず

jQueryプラグイン作ってみて
!

※ブログは続けてね
Mission02

とりあえず書こう

jQueryプラグイン
Mission内容
jQueryプラグインを書いてGitHubで公開
何をつくるかは自由、カンタンなものから
分かる人にコードを見てもらって、

間違いや改善点をGitHubのコード上で

コメントしてもらう
でも問題が…
そもそもつくりたいものなんてない
あまりにも分からなさすぎると、

何からどう手をつけていいかも分からず、

手を動かすことすらできない
そんなときの救世主が…
Webデザイナーのための

jQuery入門
jQueryの考え方を

簡潔で分かりやすく
サンプルコードが

豊富&あるある感
なぜこう書くのかという

説明が具体的

PixelGrid @Takazudo 著
書けない場合は?
サンプルに載っているものをパクる
最初に答えを見て、組み立て方がイメージ

できたら、まずは本を見ないで書いてみる
詰まったら本を見れば1人で進められる
元コードにちょっとした機能追加や改変を
もらえるコメント
tacamy/jQueryStudy

https://github.com/tacamy/jQueryStudy/commit/
1c2f49517982a06569ab4942fff63c226ad2f060
書いてみての気付き
JavaScriptでは、イベントを起点にして

すべての処理が行われると気づく
JavaScriptのオブジェクトはすべて、

KeyとValueの組み合わせと気付き、

カンマやセミコロンやカッコの位置で

混乱しなくな...
1ヶ月後…
jQueryの課題お休みして、

卒業制作で、jQueryとNode.jsで

Webサービスつくってみたい!

OK!
※ブログは続けてね
つくったもの
豚レース(未完成)

http://pigrace.herokuapp.com/
勉強はじめて2ヶ月くらいで

これくらいならできるようになるよの例
フロント実装
(品質はさておき)必要な機能は実装できた
ほしい機能が明確になると、

必要な処理の流れを自分の頭で考えるので

コピペに頼らなくなるのでよい
サーバーサイド
正直、無謀すぎた/(^o^)\
Node.jsをHerokuで動かすとこで力尽きた
Node.js + Express を Heroku で動かすまでの手順まとめ

http://tacamy.hatenablog.com/en...
1ヶ月後…
まーがんばったし

入社してもいいんじゃない?

やったー!!!
これからも修行がんばります!
第二話

入社後の修行
最初の頃の失敗談
分からないことも自分で調べて、

どうしてもダメなとき「だけ」聞くのは、

動けばOKなコードになりがち
ノーチェックで納品する危険性

※会社として品質を担保できない
でも、どうしても質問を遠慮してしまう…
そこでプルリ運用
プルリとは?
GitHubのプルリクエストという機能の略語
【参考】

pull request を利用した開発ワークフロー
// Speaker Deck

https://speakerdeck.com/hotchpotch/pull-re...
プルリ運用のルール
1. 機能別にブランチを切って開発
2. プルリを送る → メールが飛ぶ
3. CTOと手の空いてる人がコードレビュー
4. レビューが通ったもののみマージ
どんな細かい修正もすべてをプルリにする
プルリのメリット
遠慮する必要がなくなる
動けばOKじゃなくて、

よりよい実装方法を知ることができる
会社として品質を担保できる
お互いメリットしかない!オススメ!
信頼できる情報源
コピペに注意
JavaScriptのコードをどっかからコピペする

→ ほぼ100%コピペした部分を指摘される
拾い食いコードは信用してはいけない
信頼できる情報源って…?
CodeGrid
ピクセルグリッドの

エンジニアが執筆
編集者が検証した上で

分かりやすく編集
過去記事アーカイブ
毎週木曜配信(月4回)
月840円(30日無料)

https://app.codegrid.net/
HTML5Experts.jp
「すべての記事が

永久保存版」を目指す

Web技術情報メディア
著者のスキルの高さ
無料で読める
http://html5experts.jp/
情報の目利き方法
誰が書いている?

→ 身元保証により書き手に責任感が生まれる

いつの情報?

→ バージョンに違いがあるかも

きちんと検証された情報?

→ 動かなかったときの時間ロスを考えよう
おまけ

Chrome Extention
Chrome Extention
今日Girlsのみなさんがつくるそうなので

私もつくってみたよ!
楽天カンタン送料表示(Chrome拡張)を公開したよ!

http://tacamy.hatenablog.com/entry/2014/01...
まとめ
JavaScript必勝法
人に教わる前段階の基礎は自力でがんばる
学んだり教わったことはブログに書こう
聞ける人が周りにいない?

今日がJavaScript友達を増やすチャンス!
自信を持とう
知識ゼロからはじめても

数ヶ月でイチから書けるようになる
ちょっと書けるようになると、

苦手だったJavaScriptも楽しくなってくる
今日のハンズオンで苦手意識を克服しよう
みんなで一緒に

がんばろう∼
ありがとうございました
Upcoming SlideShare
Loading in...5
×

はじめてのJavaScript / JS Girls Tokyo #1

6,328

Published on

JS Girls Tokyo #1で、JavaScript初心者向けの勉強方法について話しました。

私自身、HTML/CSSはできてもJavaScriptが大の苦手でしたが、@hokaccha 先生による修行によって、なんとか理解できるようになりました。

その修業の中で、何をどうやって勉強したかを紹介することによって、同じように悩んでいる人へのヒントになればうれしいなと思って書いてみました。

Published in: Technology
0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,328
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
33
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

Transcript of "はじめてのJavaScript / JS Girls Tokyo #1"

  1. 1. はじめてのJavaScript 2014/03/08(Sat) JS Girls Tokyo #1 PixelGrid Inc. @tacamy
  2. 2. 自己紹介 山田敬美(@tacamy) ピクセルグリッド
 フロントエンド・エンジニア(新卒1年目) HTML&CSS歴 : 4年 JavaScript歴 : 1年
  3. 3. 会社紹介
  4. 4. “ピクセルグリッドはJavaScriptの会社です。” 代表取締役 中村享介
  5. 5. ???
  6. 6. 私のJavaScript歴 職種 JavaScript 期間 KAYAC マークアップ
 エンジニア すぐに挫折 2年 NAVER マークアップ
 エンジニア 1行も書いてない 2年 専門学校 無職 @hokacchaによる修行 1年 (修行 4ヶ月) PixelGrid フロントエンド
 エンジニア 現在進行形で修行中 1年目
  7. 7. 今日の話 JavaScriptをまったく書けなかった人が、
 4ヶ月でJavaScriptの会社に入るまでの話 効率的なJavaScript勉強方法のヒントに 教える側からすると、分からない人が
 どこに引っかかるかが理解できるかも?
  8. 8. 第一話 入社までの道のり
  9. 9. 2012年12月某日 @tacamy 入社したーい (●^o^●) @hokaccha 今のレベルで入社しても
 お互いに不幸になるだけだから、
 学校卒業までの間に、どれだけ
 できるようになるかで判断しよう Oh…
  10. 10. そのときの私の状況 JavaScriptについての知識ゼロ プログラミングの基礎知識もゼロで
 退職して学校で下記を学んでいた C : プログラミングの基礎とアルゴリズム Java : オブジェクト指向
  11. 11. えっ、JavaScriptを覚えたいだけなのに、
 CとかJavaをやらないといけないの? No!それはただの趣味! 普通はこれでOK!
  12. 12. ノンプログラマのための
 JavaScriptはじめの一歩 第2章 JavaScriptの文法 基本的な文法 文字列と数値 配列とオブジェクト 条件判定のための型と演算子 条件分岐 繰り返し 関数 PixelGrid @hokaccha 著
  13. 13. ✄---------- ここから修行がはじまる ----------✄
  14. 14. Mission01 JS独特の仕様を
 理解せよ!
  15. 15. Mission内容 @hokaccha先生から毎週1つ、
 JavaScriptに関するキーワードをもらう そのキーワードについて自分で調べて
 間違っててもいいからブログにまとめること 間違ってたらブログのコメントで
 指摘やヒントがもらえる
  16. 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. 17. 理解したこと JavaScriptは、プロトタイプベースの
 オブジェクト指向 関数がそのままコンストラクタになる プロトタイプチェーンによる継承の仕組み 参照のコピーと値の変更の仕組み
  18. 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. 19. 理解したこと 関数内でのみスコープがつくられる
 JavaScriptにブロックスコープはない varを省略するとグローバル変数になる 巻き上げがあるので関数の先頭で変数を宣言 参照渡しの場合は関数外に影響を与える危険
  20. 20. 理解したこと スコープチェーンによる名前解決方法 変数の宣言と参照とは、
 変数オブジェクトの読み書きのこと クロージャによって、ローカル変数の状態を
 保持できるメソッドがつくれる
  21. 21. this JavaScriptのthisを理解する - tacamy.blog
 http://tacamy.hatenablog.com/entry/2013/01/06/224718
  22. 22. 理解したこと thisはインスタンス自身を指す 関数内のthisは、関数を定義した
 オブジェクトとは関係なしに、
 関数を呼び出したオブジェクトを指す イベントハンドラで関数を呼び出した場合の
 thisは、イベントの発生源のオブジェクトを指す
  23. 23. ブログを書く理由 本やWebの記事を読むのもひとつの勉強方法 でも、頭で分かった気になっていても、
 自分の言葉でブログにまとめられない ブログにすることで、本当の理解に繋がる 忘れてもあとで見返すことで思い出せる
  24. 24. ブログの書き方 調べたことをとにかく列挙したのち
 グループ分けする 自分の言葉で言い換えてみる 調べたことだけでなく、なぜそうなるかを
 自分で考えて考察をつける
  25. 25. ブログのススメ ぜひ私と同じようにやってみてほしい プロトタイプ スコープ this 一気にJavaScriptの理解度が上がり、
 人のコードが理解できるようになる
  26. 26. 1ヶ月後… 次は、何でもいいからとりあえず
 jQueryプラグイン作ってみて ! ※ブログは続けてね
  27. 27. Mission02 とりあえず書こう
 jQueryプラグイン
  28. 28. Mission内容 jQueryプラグインを書いてGitHubで公開 何をつくるかは自由、カンタンなものから 分かる人にコードを見てもらって、
 間違いや改善点をGitHubのコード上で
 コメントしてもらう
  29. 29. でも問題が… そもそもつくりたいものなんてない あまりにも分からなさすぎると、
 何からどう手をつけていいかも分からず、
 手を動かすことすらできない そんなときの救世主が…
  30. 30. Webデザイナーのための
 jQuery入門 jQueryの考え方を
 簡潔で分かりやすく サンプルコードが
 豊富&あるある感 なぜこう書くのかという
 説明が具体的 PixelGrid @Takazudo 著
  31. 31. 書けない場合は? サンプルに載っているものをパクる 最初に答えを見て、組み立て方がイメージ
 できたら、まずは本を見ないで書いてみる 詰まったら本を見れば1人で進められる 元コードにちょっとした機能追加や改変を
  32. 32. もらえるコメント tacamy/jQueryStudy
 https://github.com/tacamy/jQueryStudy/commit/ 1c2f49517982a06569ab4942fff63c226ad2f060
  33. 33. 書いてみての気付き JavaScriptでは、イベントを起点にして
 すべての処理が行われると気づく JavaScriptのオブジェクトはすべて、
 KeyとValueの組み合わせと気付き、
 カンマやセミコロンやカッコの位置で
 混乱しなくなった(初心者あるある?)
  34. 34. 1ヶ月後… jQueryの課題お休みして、
 卒業制作で、jQueryとNode.jsで
 Webサービスつくってみたい! OK! ※ブログは続けてね
  35. 35. つくったもの 豚レース(未完成)
 http://pigrace.herokuapp.com/ 勉強はじめて2ヶ月くらいで
 これくらいならできるようになるよの例
  36. 36. フロント実装 (品質はさておき)必要な機能は実装できた ほしい機能が明確になると、
 必要な処理の流れを自分の頭で考えるので
 コピペに頼らなくなるのでよい
  37. 37. サーバーサイド 正直、無謀すぎた/(^o^)\ Node.jsをHerokuで動かすとこで力尽きた Node.js + Express を Heroku で動かすまでの手順まとめ
 http://tacamy.hatenablog.com/entry/2013/02/16/235127
  38. 38. 1ヶ月後… まーがんばったし
 入社してもいいんじゃない? やったー!!! これからも修行がんばります!
  39. 39. 第二話 入社後の修行
  40. 40. 最初の頃の失敗談 分からないことも自分で調べて、
 どうしてもダメなとき「だけ」聞くのは、
 動けばOKなコードになりがち ノーチェックで納品する危険性
 ※会社として品質を担保できない でも、どうしても質問を遠慮してしまう…
  41. 41. そこでプルリ運用
  42. 42. プルリとは? GitHubのプルリクエストという機能の略語 【参考】
 pull request を利用した開発ワークフロー // Speaker Deck
 https://speakerdeck.com/hotchpotch/pull-requestwoli-yong-sitakai-fa-wakuhuro
  43. 43. プルリ運用のルール 1. 機能別にブランチを切って開発 2. プルリを送る → メールが飛ぶ 3. CTOと手の空いてる人がコードレビュー 4. レビューが通ったもののみマージ どんな細かい修正もすべてをプルリにする
  44. 44. プルリのメリット 遠慮する必要がなくなる 動けばOKじゃなくて、
 よりよい実装方法を知ることができる 会社として品質を担保できる お互いメリットしかない!オススメ!
  45. 45. 信頼できる情報源
  46. 46. コピペに注意 JavaScriptのコードをどっかからコピペする
 → ほぼ100%コピペした部分を指摘される 拾い食いコードは信用してはいけない 信頼できる情報源って…?
  47. 47. CodeGrid ピクセルグリッドの
 エンジニアが執筆 編集者が検証した上で
 分かりやすく編集 過去記事アーカイブ 毎週木曜配信(月4回) 月840円(30日無料) https://app.codegrid.net/
  48. 48. HTML5Experts.jp 「すべての記事が
 永久保存版」を目指す
 Web技術情報メディア 著者のスキルの高さ 無料で読める http://html5experts.jp/
  49. 49. 情報の目利き方法 誰が書いている?
 → 身元保証により書き手に責任感が生まれる いつの情報?
 → バージョンに違いがあるかも きちんと検証された情報?
 → 動かなかったときの時間ロスを考えよう
  50. 50. おまけ Chrome Extention
  51. 51. Chrome Extention 今日Girlsのみなさんがつくるそうなので
 私もつくってみたよ! 楽天カンタン送料表示(Chrome拡張)を公開したよ!
 http://tacamy.hatenablog.com/entry/2014/01/23/124024
  52. 52. まとめ
  53. 53. JavaScript必勝法 人に教わる前段階の基礎は自力でがんばる 学んだり教わったことはブログに書こう 聞ける人が周りにいない?
 今日がJavaScript友達を増やすチャンス!
  54. 54. 自信を持とう 知識ゼロからはじめても
 数ヶ月でイチから書けるようになる ちょっと書けるようになると、
 苦手だったJavaScriptも楽しくなってくる 今日のハンズオンで苦手意識を克服しよう
  55. 55. みんなで一緒に
 がんばろう∼
  56. 56. ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×