Hatena::ブログ(Diary)

日々、とんは語る。

この日記のはてなブックマーク数 はてなスターカウンター Peace この日記をあなたのはてなアンテナに追加する。 rss
お問い合わせ先 mailto

2016-04-03 暑い日。

10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)。

15:36 |

2015年CSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います

最初結論を書いておくと、

『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』

という組み合わせが、いま僕の採用しているJavaScript環境です。

主要ライブラリは React

去年、一気に普及したReactは、今年に入っても絶好調です。他のライブラリや、Angular 2など、色々と騒がれていましたが、去年1年間で個人的に当面はReactに完全決着したと思っています。数年前は、jQueryが使えないとフロント仕事は難しいと言われていましたが、これからはReactが使えないとフロント仕事は難しいと言われることになるでしょう。

Reactはブラウザで動作するアプリケーション以外にも、React Nativeによるモバイルアプリ開発も行えますので、今後ますます成長していきそうです。

アプリケーションフレームワークは Redux

Reactで本格的にアプリケーションを開発する場合フレームワーク必要です。Reactの普及にともなって、Fluxや、Fluxxorなど様々なフレームワークが乱立しましたが、現在首位に立っているのは、Reduxだと感じています

僕も最初Fluxで開発していたのですが、その後、Reduxが登場し、評判が良いので全面書き換えを行ったのですが、その便利さがとても良く分かりました。Fluxではdispatch, store, actionなどの処理を結構地道に実装していく必要があったのですが、Reduxの場合Fluxのときと比べて50%くらいのコード量で同じ機能実装できました。

まだ、完全決着とはいかないかもしれませんが、これから開発される方は、とりあえず Redux で始めてみるのが良いと思います

ルーティングは react-router

React + Redux アプリルーティング必要場合は、Redux と同じコミュニティで開発されている react-routerを選択しておけば、まず間違いないでしょう。最近v2リリースされたので、これから利用しはじめる場合は、そちらを利用しましょう。

UIフレームワークは material-ui

UIは好み応じて選択すれば良いと思いますが、オススメ個人的に React を本格的に利用するようになったきっかけとなるのが material-ui です。GoogleMaterial Designを React コンポーネントによって再現したフレームワークで、フロントアプリ開発が爆速になります

見た目とかそういうのではなく、とにかくHTMLCSSを一切書かずに、用意されたコンポーネントばんばん配置していくだけで、アプリケーションができていくため、UI設計に完全にフォーカスできるのが最大の利点だと思っています

HTTP Request は axios

axiosを利用する前は、superagentを利用していたのですが、Promise ベースの方が楽なので乗り換えました。superagentのときと比べて、XHRまわりで悩まされなくなりました。

記述は ES2015(ES6)

JSは書きにくい、という意見からCoffeeScriptTypeScriptなどのAltJS採用するプロジェクトも多くなりましたが、去年ES2015がリリースされたお陰で、本家原点回帰する流れができたような気がします。

後述するBabelなどビルド環境が整ったお陰で、積極的にES2015の構文が利用できるようになった事も大きいのですが、実際にES2015を書いてみると、とても書き心地が良く、これが普及要因だと思っています

個人的には、これからJavaScriptを覚えたいという人は、最初からES2015で覚える方が良いでしょう。

ビルド環境は Babel + webpack

ビルド環境についても、色々な動きがありました。トランスパイラは、BabelがReactをサポートしたことなどもあり、完全に一本化した感がありますが、ビルド処理は、Grunt、Gulp、Browserify、webpackなどのツールを、どの組み合わせで選択すれば良いのか、本当によく分かりませんでした。

ただ、最近海外を中心に webpackに一本化する動きが広がってきており、僕もこの流れに乗っています。開発サーバーもwebpack-dev-serverを利用すれば、簡単に用意できるところも実にナイスです。

文法・構文チェックは ESLint + Airbnb JavaScript Style Guide

ES2015やReactを利用して開発するということは、大袈裟に言えば、必要となる構文知識が単純なJavaScriptの3倍になると言えます大袈裟)。せっかく新しい構文、新しいライブラリを利用して開発するのであれば、新しい構文に早く慣れたいものです。そこで役に立つのが、ESLint + Airbnb JavaScript Style Guideの組み合わせです。

ESLintは、厳しめの構文チェッカで、設定が多いことでも有名でしたが、最近プラグイン形式第三者作成した設定を簡単にインポートすることができるようになり、とても使いやすくなりました。

中でも、Airbnb JavaScript Style Guideは、ES2015とReactの構文を、かなり前のめりでサポートするように設定されているため、警告に従って修正していれば、古いスタイル記述強制的にどんんどん新しくなっていき、速攻で新しい構文を学習できるため、とても助けられました。

Atomを利用している場合は、linter + linter-eslintプラグインを入れておくと良いでしょう。

テストは…

テストはまだどれが良いのか決まっていません。なんとなく、jsdom + chai + mocha を利用してみたりしていますが、Rubyテストについては揺れていますので、一本化は難しいのかもしれません。

まとめ

去年1年はフロント回りの激しい流れに、多くの方が翻弄されたのではないかと思いますが、個人的には落ち着いてきたように見えてきました。

学習コストは一気に跳ね上がりましたが、逆に言えば、Web進化が激しい中、10年前からほぼ変っていなかったフロント回りの技術が、いよいよ時代に追い付かなければならなくなり、去年みたいな大変革が起きたと思えば、とても自然な流れと言えます

流石に今後は、去年のような激しい変化は起きないと思いますので、フロント回りを静観しておられたかたは、ぜひ今年で一気に追い付くと良いでしょう。

追記

これから時代を支えるエンジニアを育成する1年で最先端Webエンジニアになれる、サウスピーク光速Webエンジニアプラン【先着10名、5月末まで】という事業をやってみることにしました。興味のある方はぜひこちらもご欄ください。

1年で最先端Webエンジニアになれる、サウスピーク光速Webエンジニアプラン【先着10名、5月末まで】

JSJS 2016/04/27 15:30 フロント>サーバサイドも多少>5年後以降には将来はアプリ制作も考えたいと思っている者です。
絶対的な答えはないので、沢山の方の意見が聞きたく質問しています。

HTML5>CSS3>jQueryとやってきたのですが、その後どう学んでいくか迷っています。

その後どうするかがわかりません。
候補は下記ですが、

・リアクト
・メテオ
・タイプスクリプト
・jQueryはオワコンのようなので、JSその物でフロントを一年ほどやり、その後サーバサードをやる事になった時に、エクスプレスかメテオをやる。
・jQueryはオワコンのようなので、JSその物でフロントを一年ほどやり、その後サーバサードをやる事になった時に、英語の読み書きをやってメテオをやる。

リアクトはサーバサイドは出来ないようなので、いきなりメテオが出来れば一番合理的なのかなと思っていますが、重くて小中規模のサイトには向かないのと、
本を買って学べば何とかなると思っていましたが、日本語の本もほとんどないという事なので数年は手が出せない物なのかなと思っています。

リアクトをお勧めておられるので、サーバサイドのみ出来ないようですが、JSの基礎をやった後にすぐにリアクトを始め、
その後サーバサードをやる事になった時に、エクスプレスかメテオをやるのが一番でしょうか?
小中規模のサイト制作を請けるフリーランスか小規模企業での仕事を考えています。

それでは、今後も勉強になる記事を楽しみにしています。
頑張ってください。

トラックバック - http://d.hatena.ne.jp/tomoya/20160403/1459665374
<< 2016/04 >>
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30