はじめてのJavaScript2014/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による修行1年

（修行 4ヶ月）

PixelGridフロントエンドエンジニア

現在進行形で修行中 1年目

今日の話

JavaScriptをまったく書けなかった人が、4ヶ月でJavaScriptの会社に入るまでの話

効率的なJavaScript勉強方法のヒントに

教える側からすると、分からない人がどこに引っかかるかが理解できるかも？

入社までの道のり

第一話

2012年12月某日

今のレベルで入社してもお互いに不幸になるだけだから、学校卒業までの間に、どれだけできるようになるかで判断しよう

入社したーい （●＾o＾●）@tacamy @hokaccha

Oh…

そのときの私の状況

JavaScriptについての知識ゼロ

プログラミングの基礎知識もゼロで退職して学校で下記を学んでいた

C : プログラミングの基礎とアルゴリズム

Java : オブジェクト指向

No！それはただの趣味！

普通はこれでOK！

えっ、JavaScriptを覚えたいだけなのに、CとかJavaをやらないといけないの？

ノンプログラマのためのJavaScriptはじめの一歩

第2章 JavaScriptの文法

基本的な文法

文字列と数値

配列とオブジェクト

条件判定のための型と演算子

条件分岐

繰り返し

関数

PixelGrid @hokaccha 著

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

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

Mission01

Mission内容

@hokaccha先生から毎週1つ、JavaScriptに関するキーワードをもらう

そのキーワードについて自分で調べて間違っててもいいからブログにまとめること

間違ってたらブログのコメントで指摘やヒントがもらえる

プロトタイプ

Javaと比較しつつ、JavaScriptのプロトタイ

プについて調べてみる - tacamy memo (旧) http://d.hatena.ne.jp/tacamy/20121209/1355034499

プロトタイプチェーンをもっと理解する -

tacamy.bloghttp://tacamy.hatenablog.com/entry/2012/12/17/000931

理解したこと

JavaScriptは、プロトタイプベースのオブジェクト指向

関数がそのままコンストラクタになる

プロトタイプチェーンによる継承の仕組み

参照のコピーと値の変更の仕組み

スコープ

JavaScriptのスコープを理解する -

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

JavaScriptのスコープチェーンとクロージャ

を理解する - tacamy.bloghttp://tacamy.hatenablog.com/entry/2012/12/31/005951

理解したこと

関数内でのみスコープがつくられるJavaScriptにブロックスコープはない

varを省略するとグローバル変数になる

巻き上げがあるので関数の先頭で変数を宣言

参照渡しの場合は関数外に影響を与える危険

理解したこと

スコープチェーンによる名前解決方法

変数の宣言と参照とは、変数オブジェクトの読み書きのこと

クロージャによって、ローカル変数の状態を保持できるメソッドがつくれる

this

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

理解したこと

thisはインスタンス自身を指す

関数内のthisは、関数を定義したオブジェクトとは関係なしに、関数を呼び出したオブジェクトを指す

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

ブログを書く理由

本やWebの記事を読むのもひとつの勉強方法

でも、頭で分かった気になっていても、自分の言葉でブログにまとめられない

ブログにすることで、本当の理解に繋がる

忘れてもあとで見返すことで思い出せる

ブログの書き方

調べたことをとにかく列挙したのちグループ分けする

自分の言葉で言い換えてみる

調べたことだけでなく、なぜそうなるかを自分で考えて考察をつける

ブログのススメ

ぜひ私と同じようにやってみてほしい

プロトタイプ

スコープ

this

一気にJavaScriptの理解度が上がり、人のコードが理解できるようになる

次は、何でもいいからとりあえずjQueryプラグイン作ってみて

!

※ブログは続けてね

1ヶ月後…

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

Mission02

Mission内容

jQueryプラグインを書いてGitHubで公開

何をつくるかは自由、カンタンなものから

分かる人にコードを見てもらって、間違いや改善点をGitHubのコード上でコメントしてもらう

でも問題が…

そもそもつくりたいものなんてない

あまりにも分からなさすぎると、何からどう手をつけていいかも分からず、手を動かすことすらできない

そんなときの救世主が…

WebデザイナーのためのjQuery入門

jQueryの考え方を簡潔で分かりやすく

サンプルコードが豊富＆あるある感

なぜこう書くのかという説明が具体的

PixelGrid @Takazudo 著

書けない場合は？

サンプルに載っているものをパクる

最初に答えを見て、組み立て方がイメージできたら、まずは本を見ないで書いてみる

詰まったら本を見れば1人で進められる

元コードにちょっとした機能追加や改変を

もらえるコメント

tacamy/jQueryStudyhttps://github.com/tacamy/jQueryStudy/commit/

1c2f49517982a06569ab4942fff63c226ad2f060

書いてみての気付き

JavaScriptでは、イベントを起点にしてすべての処理が行われると気づく

JavaScriptのオブジェクトはすべて、KeyとValueの組み合わせと気付き、カンマやセミコロンやカッコの位置で混乱しなくなった（初心者あるある？）

jQueryの課題お休みして、卒業制作で、jQueryとNode.jsで Webサービスつくってみたい！

1ヶ月後…

OK！ ※ブログは続けてね

つくったもの

豚レース（未完成）http://pigrace.herokuapp.com/

勉強はじめて2ヶ月くらいでこれくらいならできるようになるよの例

フロント実装

（品質はさておき）必要な機能は実装できた

ほしい機能が明確になると、必要な処理の流れを自分の頭で考えるのでコピペに頼らなくなるのでよい

サーバーサイド

正直、無謀すぎた／(^o^)＼

Node.jsをHerokuで動かすとこで力尽きた

Node.js + Express を Heroku で動かすまでの手順まとめhttp://tacamy.hatenablog.com/entry/2013/02/16/235127

まーがんばったし入社してもいいんじゃない？

1ヶ月後…

やったー！！！ これからも修行がんばります！

入社後の修行

第二話

最初の頃の失敗談

分からないことも自分で調べて、どうしてもダメなとき「だけ」聞くのは、動けばOKなコードになりがち

ノーチェックで納品する危険性※会社として品質を担保できない

でも、どうしても質問を遠慮してしまう…

そこでプルリ運用

プルリとは？

GitHubのプルリクエストという機能の略語

【参考】pull request を利用した開発ワークフロー

// Speaker Deckhttps://speakerdeck.com/hotchpotch/pull-request-

woli-yong-sitakai-fa-wakuhuro

プルリ運用のルール

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/23/124024

まとめ

JavaScript必勝法

人に教わる前段階の基礎は自力でがんばる

学んだり教わったことはブログに書こう

聞ける人が周りにいない？今日がJavaScript友達を増やすチャンス！

自信を持とう

知識ゼロからはじめても数ヶ月でイチから書けるようになる

ちょっと書けるようになると、苦手だったJavaScriptも楽しくなってくる

今日のハンズオンで苦手意識を克服しよう

みんなで一緒にがんばろう～

ありがとうございました