JavaScript

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

投稿日:2017年8月8日 更新日:


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

フロントエンドって?

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

3ヶ月前まで

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

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

速習後

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

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

3ヶ月でやった事

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

JavaScript(ES5)を速習する

オライリー本で速習

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め(発売時期がよい)。
※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。

ES6を速習する

WEB+DB PRESS Vol.87で速習

非常に分かりやすく端的に説明されていてとてもよい。
(こんなツイートも↓)

React(でSPA)を速習する

で速習

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してきた」で発表した内容をベースにしています。


-JavaScript
-, ,

執筆者:

関連記事

JavaScriptパターン

「JavaScriptパターン」第4章-関数-が面白かったからまとめながら写経した

タイトルにあるようにとても面白かったというのと、JavaScriptパターンの輪読会で第4章「関数」の後半を担当したのでその記録も兼ねて内容まとめながら写経した。 目次 はじめに 4.1 背景 4.2 …

ECMAScript 6を触ってみる – モダンになった文法

WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」に …

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

ECMAScript 6を触ってみる – 非同期処理 PromiseとGeneratorによるフロー制御

前回に引き続きJSの速習コースを実践。今回は「WEB+DB PRESS Vol.87 第1特集 第5章-簡潔で柔軟な非同期処理-」を速習する。 PromiseとGeneratorによるフロー制御 これ …

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。 これまでのモジュール管理 JavaScr …