ichiroc subset

書きながら考える・考えをまとめる場所

"How it feels to learn JavaScript in 2016" を読んだ感想

はじめに

最近読んだ記事の記録。

最近久しぶりにWebアプリを作ろうと思ったときの苦労が全て書かれていて面白く読みました。 英語だけど会話形式だからかそれほど難しくないです。

Webアプリのキャッチアップを始めた

自分は Rails2 - Rails4 の初期あたりは少しさわっていました。 しかしその後仕事が忙しくなったり iOS 開発に興味が湧いたりして、Web開発からは遠ざかっていました。

この状況に対してこのままではイカンな、勿体無いな、とボンヤリ感じ続けていたのですが、とうとう一念発起して久しぶりに Web アプリを作ろうと思いたちました。 しかし特に進化が激しいと思った今どきのフロントエンドのキャッチアップを始めたところ、環境構築と新たなツールの調査に予想以上に時間を取られてなかなか大変でした。

まさに浦島太郎状態だったのでしょうがないなと思っていましたが、特に Rails との相互運用性あたりはまだベストプラクティスがないのか(あるのかな?)何がベストがわからず右往左往していました。

そんなときに Hacker News で上記の記事が話題になっていて、自分以外にも似たような感じの人がいるんだな、と思って笑ってしまいました。 自分もこんな相談相手が欲しかった・・。

2016年の間に JS の環境構築で苦労した方が上のリンクを読むと結構楽しめると思います。 この記事ではJSの再学習で自分がどんな過程を辿ったのかを残しておきたいと思います。

自分が体験した学習の流れ

  1. よし、Webアプリ作ろ
  2. せっかく今つくるんだから React とか使ってみたい
  3. ほうほう、 JSX
  4. JSX を使えるようにするには babel ってので変換するのか。
  5. これは npm で入れるのか。 node もそれほど知らないけどやってみよう。
  6. てゆーか Web でころがっているサンプルは import とかあるけどこれは?
  7. ES6 の文法か。あれでしょ、ECMA Script の新しいやつ。でもブラウザ対応してないよね?
  8. これも babel でやるのか babel-preset-es2015。 ( es2015 ?)
  9. おー。でけた。
  10. でもこれどうやって rails でやるの?
  11. gem 'react-rails' なるほど。
  12. bower ってゆーフロントエンドのパッケージマネージャで react 入れれば簡単なね。
  13. rails でやるには bower-rails を使うのか。
  14. (束の間の幸せを堪能中。)
  15. よし。なんか出来はじめた。
  16. あー、でもフロントエンド側のモデルというか、データの管理はどうするんだ。
  17. redux ってので管理するするのか・・。ちょいややこしいな。
  18. よし、 redux なんとなく分かった。
  19. で、どうやって rails でやるんだっけ。
  20. react-reduxbower はあんまりサポートしないんだって。うげげ。
  21. browserify でやるのか。。
  22. (環境構築うまくできんな。。)
  23. webpack でやるのか。。
  24. (環境構築うまくできんな。。)
  25. クックパッドの開発者ブログ のおかげでできた。ようやくコード書ける・・。
  26. (束の間の幸せを堪能中・・。)
  27. bootstrap いれたいなー。
  28. ん? webpack って JS 以外に CSS や画像もまとめられるんだよね? css ってどうやんの?
  29. style-loader, css-loadernpm で入れて webpack でやるんか。(…なんで style と css が別なんだろ)
  30. CSS modules なんかなるほど感あるけど、今はやめておこう。
  31. require('!style!css!./node_modules/bootstrap/dist/css/bootstrap.css');
  32. (require の中の構文・・。)
  33. bootstrap の js の方は jQuery が見付からないってでる。依存しているのか。
  34. imports-loader ってので解決するのか。
  35. require('imports?jQuery=jquery!bootstrap');
  36. (require の中の構文・・。)
  37. でも何故か出来ない。Github のサンプルは通るんだけどな・・。
  38. window.jQuery = reqruie('jquery') コレデエエンカイナ・・
  39. it works! しかしええんか、これ↑・・。 ← イマココ!

まとめ

フロントエンドは react, redux, webpack で固まってきてるみたいなことをいつかの回の rebuild で言ってました。 今回調べて何となくその感覚は分かりました。

しかしまだまだ進化は続きそうです。 yarn なんて新しいパッケージマネージャーも台頭してきるし。

この進化スピードはほんとうに凄いですね。 このスピードで進化する背景はやはり Web の進化スピードが早いからでしょうか。 それかフロントエンドの開発者の年齢とかも関係しているでしょうか。(年齢層知らないですけど) このカオスな感覚は他ではなかなかないかも。

なんにしろ継続的なキャッチアップをする為にもプライベートな Web プロジェクトが必須だなー、と思いました。