はじめてのjavascript / js girls tokyo #1
Post on 24-Jun-2015
1.697 Views
Preview:
DESCRIPTION
TRANSCRIPT
はじめての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も楽しくなってくる
今日のハンズオンで苦手意識を克服しよう
みんなで一緒にがんばろう~
ありがとうございました
top related