プログラミング

プログラミング

思わず「あっ!」と驚いてしまう20のJavaScriptツール【後編】

581 views

今回はSegrio CruzさんのJavaScriptに関する投稿についてご紹介したいと思います。きっと「あっ!」と驚いてしまうと思います。この記事は前編と後編の2部構成となっております。前編がまだの方はこちら

 

11.NPM:フロントエンドディペンデンシーの導入
eihzwlk6sxq4i5cr4mmvdk
自分のローカルコードをベースに外部ディペンデンシーを導入するためのさまざまなノウハウが提唱されてきましたが、NPMの台頭で何もかもNPMで済ませるデベロッパが増えてきています。

 

12.Angular:ひとつのフレームワークですべてを網羅

 

AngularはGoogleとオープンソースコミュニティの手で運用されているJavaScriptのフレームワークです。

 

最新版のAngular2はUIだけでなく、モバイル開発などあらゆる可能性を秘めたプラットフォームになっています。

 

13.React:世界を変えたビューライブラリ
kiydqyadhdsxbqe8fho6ak
Reactで書かれたアプリはコンポーネントベースのアーキテクチャを持っているため、コンパクトで扱いやすく、問題解決に関数型パラダイムを使うことが多いです。

 

14.Ember:もしもRuby on RailsがJavaScriptを使ったら?
hrf7szilehwepri5qsqcdk
Webアプリを開発したことのある人ならわかると思いますが、Ruby on Railsはアプリの書き方に縛りがあります。

 

そこに目を付けたのがEmberで、予測可能なデベロップメントプラクティスを含むJSデベロッパ向けのフレームワークになっています。

 

15.Redux:マネジメントをやりやすく

 

ReduxはReactと一緒によく使われており、少しずつAngularコミュニティーに受け容れられつつあります。パフォーマンスが安定するのでユーザが多くなりそうなアプリの開発にもってこいですし、素晴らしいデベロッパエクスペリエンスを提供してくれますよ。

 

16.PhantomCSSでビジュアルリグレッションテストを

 

PhantomCSSは変更前と変更後の画面のスクリーンショットを比較し、違いを計算するビジュアルリグレッションテストのパッケージです。

 

17.Console.logだけではない
wmkbtfin7qffuygsy4fbak
Console.log()を使ってデータを表示することはよくありますが、dir()やtable()といった方法で開発中にデータを視覚化できることをご存じでしたか?

 

オブジェクトならconsole.dir(object)、配列ならconsole.table(array)。カンタンに見やすく表示できます。

 

18.Debuggerを使う

 

デベロッパが見過ごしがちなのがdebuggerです。Console.log()の代わりにdebuggerを入れるだけで、Google Chromeなどのブラウザがブレークポイントをつけ加えてくれます。

 

19.セミコロンはお好みで

 

JavaScriptでセミコロンはつけなくてもいいんです。JavaScript公式から出ている“automatic semicolon insertion(ASI)”という機能が自動でセミコロンを入れてくれます。使うときはlinterなどでバグに気を付けてくださいね。

 

20.ストリクトなコードベースも

 

大規模なJavaScriptアプリはストリクトタイプシステムに欠けるという論争もありましたが、Facebookで開発されたFlowとMicrosoftで開発されたTypeScriptという2つのプログラムで、それが解消されました。

 

最後に私が言いたいのは、JavaScriptはカンタンで覚えやすいのに使っていない人はもったいない!ということです。

 

※本稿は20 JavaScript tools to blow your mindを翻訳・再編集したものです。

関連記事

おすすめ記事