🪁
taisablog
おれ的フロントエンド速習コース
🎇

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。

フロントエンドって？

どこからどこまで？何を指してる？と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。

3ヶ月前まで

  • JSとjQueryのみ
  • 毎回ノリで書いていた（もちろんカオスにならないように最大限工夫はしてるけど）
  • 流れが早いからモダン情報のキャッチアップはタイミングを見計らっている
  • けど2017年中にはなんとかしたい
  • やるなら一気にやりたい

始める前まではこんな感じだったけど、そろそろいってもいいかな？ということでやり始めた。

速習後

もともとは既存プロダクトをどうにかするつもりで始めていたけど、タイミングよく新規プロダクトを立ち上げることになったので採用した。何もしてなかったらかなり勇気が必要だったと思う。

  • ES6
  • React
  • VueJS
  • Webpack
  • Babel
  • PostCSS
  • Go
  • PHP(継続)

3ヶ月でやった事

  • JavaScript(ES5)を速習する
  • ES6を速習する
  • React(でSPAを)速習する
  • マークアップを速習する
  • Podcastで速習する
  • 勉強会で速習する
  • チームメンバーと速習する

JavaScript(ES5)を速習する

オライリー

本で速習

image

JavaScriptパターン ―優れたアプリケーションのための作法 Amazonより

「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め（発売時期がよい）。

※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。

ES6を速習する

WEB+DB PRESS

Vol.87で速習

image

WEB+DB PRESS Vol.87 Amazonより

非常に分かりやすく端的に説明されていてとてもよい。

React(でSPA)を速習する

image

WEB+DB PRESS Vol.97 Amazonより

React+Flux、クライアントサイドルーティング、サーバサイドレンダリング、webpackについて丁寧に説明されている。他にもマネジメントやPythonに関する内容があってとても読みごたえがある。

すぐに「理解できた」という訳にはいかない

Reactはそれなりに初期学習コストがあるので以下のことを繰り返しながらじっくり理解を進めていった。

マークアップを速習する

マークアップも一人でできるようになりたいというメンバーが多かったのもあり、社内のUI/UXデザイナーにハンズオンをしてもらった。このハンズオンの目的としては何から手をつけていいか分からないという状況から脱却して自分でもなんとか勉強できる状態にすることでこれだけでなんとかしようというものではない。

関連リンク– 初心者向けざっくりHTML/CSSコーディングハンズオン資料– 社内エンジニア向けにマークアップハンズオンを開催しました

その他の方法

Podcastで速習する

勉強会で速習する

コミュニケーションしながら疑問点を解決してもらえたのでとても助かった。他にもReact、VueJS、Angular以外も含めたフレームワーク発表会をやったりした。またそれをうけてあたらめてReact、VueJS、Angularはいいなと実感した。

チームメンバーと速習する

  • 今QはJSをやろうと全員で決めた（※この間業務でJS触る機会は0だった）
  • 情報共有しやすい
  • ここでもチームメンバーで分担してReact、VueJS、Angularを調べて発表会をした
  • チームメンバーのJSに対する意識が全体的に変わって導入障壁が低くなった

まとめ

  • 業務でJS触る機会が0だったとしても3ヶ月あれば結構イケる
  • 他にやりたいことができてもなるべく我慢してJSやるの大事
  • あとは実践あるのみ（※無謀な挑戦にならなくて済んだ）

結果

JSが好きになった🤗※ この内容は「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた」で発表した内容をベースにしています。

FacebookTwitterGitHub