JavaScript書けない人間が1年間でフロントエンドエンジニアになった話

こんにちは、デザイン部所属の石橋です。
今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。

そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。

入社時のぼく

• HTML出来ます！（ただし<section>の使い方はぼんやり）
• CSS出来ます！（ただしスタイリングだけで設計は出来ない）
• jQuery出来ます！（ただし既存プラグイン実装に限る）

おや…？

• 「（フロントエンドってなんだろう…）」
• 「（JavaScriptとjQueryって何が違うんだろう…）」

やばい。

当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。

シンデレラストーリー

プロローグ

弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、
入社時にまわりの能力の高さにちょっと本気で「ヤベェ所に来てしまった…」感がありました。
特にJavaScriptまわりが壊滅的だったため、これは早急に覚えないと社会的に死ぬとすら感じました。

STEP.1：JavaScriptを書けるようになる

この状況で最初にアサインされた仕事が、見事にJSファイルを触る仕事でした。（しかも結構ヤバいやつ）
とにかくフロントエンドエンジニアとして今の時代必要なものはやっぱりJavaScriptなのです。

私の場合まずはjQueryから覚えました。（３ヶ月くらい）
「どの本がオススメですか」っていう無知丸出しの質問をしたら、西畑一馬さんの本を教えてもらったのでとりあえず読む。 セレクタや代表的なメソッドのチートシートが付いてるので、未だにデスクに常駐してます。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

その後ネイティブのJavaScript。（これは今でも勉強中）
「JavaScript入門」！みたいな本を買っても無駄金になりそうだったので、無難にオライリーをチョイスしました。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

さらにその後は最近ブイブイ言わせているものを結構何でもかんでも触る。
例えば、入社半年経ったくらいでAngularJSをいじったりGruntのタスクを追っかけていました。
だいたい２〜３週間毎に違うものを調べたりしてます。詳しくは次のSTEPで。

STEP.2：誰よりもインプットをする

ここ数年のフロントエンド界はもう激流のようで、毎日新しい何かが見つかって本当に楽しいです。
以下は、私が毎日巡回しているルートです。

• はてなブックマーク
• はてなブックマーク - 人気エントリー - テクノロジー
• Qiita - プログラマの技術情報共有サービス
• TechCrunch Japan - 最新のテクノロジーとスタートアップ・Webに関するニュースを配信するブログメディア

ここで１つ重要なのが、フロントエンドエンジニアだからといってフロントエンド系だけの情報に絞らないことです。
例えばPHPやDockerなどのサーバー系から、仕事のハックやチーム内コミュニケーションまで色々見るようにしました。

STEP.3：良いと思ったものをひたすら布教活動する

毎週異なる「◯◯おじさん」になって、いろんな技術やツールを布教してました。
なんとコレをしてると、「あの人はなんかスゲェ人だ感」を醸し出すことが出来ます。

実際布教が成功して良いフィードバックが貰えたりすると、次第に社内のフットワークも軽くなる気がします。
ここで一番重要なのは、「 相手個人・チーム・会社のいずれかに恩恵があると確信があるもの」に限ります。
そこを守らないとただの自己満足のウザい人になるので注意。

STEP.4：セミナーや勉強会に顔を出しまくる

社内・社外限らず、少しでも興味があるものだったら全部出るようにしました。
特に社外のは結構名刺交換タイムがあったりして、横の繋がりを広げるのが実はめっちゃ簡単です。
そのあとFacebookで繋がったり。すごい有名な人でも結構承認してくれるやつ。

これを繰り返すと、「飲み会にいつもいる人」「誘ったら来る人」というレッテルを貼られるので人脈拡大に超便利になります。


もう１つ重要なのは参加して終わりにせずに、気になったことを翌日に調べることです。
そしてあわよくばそれをチームメンバーに共有する。
メンバーへの共有はとても大事。とっても大事なんです。（大事なことなので2回言いました）
dots.は興味あるタグを登録しておくと、それに関係するイベントを毎日メールで送ってくれるから重宝してます。

そして

上記の４つを常に意識して１年過ごした結果、名刺の肩書きをフロントエンドエンジニアにしてもらいました。ヤッタ！

とにかく意識してたことは、フットワークの軽さ。
思い立ったらすぐに行動に移すように。その分出来ることも増えていくので楽しいですよ。


今ではチームリーダーにもさせてもらって追うだけでなく追われる立場にもなったので、むしろ引き離すくらいの勢いで頑張っていく次第でございます。


※（9/4）一部誤表記を修正しました。ブコメ・SNSなどでのご指摘ありがとうございました。