Web制作者は確実に学習しておきたい、日本語リファレンス一覧

• 作成：2015/08/24
• 更新：2017/04/16
• Web制作 > 開発環境

フロントエンド開発規模が増大してカオスな状態みたいだし、何が流行っていて何を勉強すればよいのか分からない。今回は出来るだけ日本語対応してある、2015年も引き続きトレンドになるかもしれないリファレンスやツールを厳選しました。メジャーなもの中心。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

altJS

• 1.Dart
• 2.TypeScript

MVC

• 3.AngularJS
• 4.Backbone js
• 5.React
• 6.Knockout js

JavaScript テンプレートエンジン

• 7.JsRender
• 8.Underscore

開発環境

• 9.JSHint
• 10.LiveReload
• 11.VirtualBox / modern IE
• 12.BrowserStack

altJS

altJS（オルトjs）は一言で言うとJavaScriptへ変換する代替言語。jsの処理を簡潔・安全に実装させるための代表的な言語を2つ。

1.Dart

グーグルによって開発されたDart（ダート）は、JavaScriptへコンパイルさせるための言語。DartPadからブラウザで実行できます。

• [リファレンス] dartrefjp
• [逆引き] Dart逆引きリファレンス ｜ Developers.IO
• [公式] Dart

2.TypeScript

JavaScriptを知っているなら、挑戦してみたい言語の一つ。CoffeeScriptが簡潔に書けるのに対し、TypeScriptはデータ型の指定が可能です。可読性の高い記述が可能で、JavaScriptと同じ書き方もできます。厳密で標準化されたコードを生成。

• TypeScript早わかりチートシート【1.5.3対応】 - Build Insider
• [公式] TypeScript

MVC

MVCはデータやDOMを分けることでした。大規模なアプリケーションを作る時、コードを管理・設計しやすくするため読んでおきたい、ビジネスロジックとデザインを別々に扱うためのフレームワークをいくつか。

3.AngularJS

htmlにテンプレートを書ける、つまりhtmlを直接テンプレートとして使えるのが一番の特徴なので、取っ付き易い。

• [リファレンス] AngularJS 1.2 日本語 | js STUDIO
• [公式] AngularJS

4.Backbone js

AngularJSよりも機能が少ないので覚えやすい。メンテナンス性を向上させるために使いたいフレームワークの一つ。Underscore jsに依存。

• [リファレンス] Backbone.js 日本語
• [公式] Backbone js

5.React

instagramなどで使われているReact（リアクト）jsは、FacebookがリリースしたMVCのViewの部分（パーツなど）を提供するJavaScriptライブラリ。コンポーネントはReact Componentsから。

• [リファレンス] React 0.13 日本語 | js STUDIO
• [チュートリアル] Getting Started | React
• [公式] React

6.Knockout js

MVVM（プレゼンテーション（Presentation）とドメイン（Domain）の分割を目的としたMVC系のパターンの1つ）をサポートするフレームワーク。実際にコードを書いてみるならlearn.knockoutjs.comで試せます。

• [リファレンス] Knockout js 日本語ドキュメント
• [公式] Knockout : Home

JavaScript テンプレートエンジン

JavaScriptからhtmlを分離させ、シンプルで見やすいコードを書くために必要なライブラリを2つ。

7.JsRender

jQuery テンプレートの後続と言われるJsRenderは、軽量で高速。HTML内へ変数を組み込んでいきます。

• [リファレンス] JavaScriptのテンプレートJsRenderとJsViewsの紹介 - Qiita
• [公式] JsRender/JsViews

8.Underscore

複雑になりがちなソースコードを簡潔に書くことができる軽量なライブラリ。ライブラリ本体を読み込んで使います。概要は第1回　Underscore.jsとは：Underscore.jsの入り口｜gihyo.jp … 技術評論社が分かりやすいです。

• [リファレンス] 便利機能満載のライブラリUnderscore.js - にのせき日記
• [公式] Underscore.js

開発環境

構文をチェックしたり、ブラウザーをオートリロードさせるものなど便利なツール。

9.JSHint

Javascriptの構文をチェックするツール。SublimeText版はJSHintでJavascriptの構文チェック&Sublime Text2でのチェック ｜ Developers.IOで。

• JavaScript - JSHint Options 日本語訳 - Qiita
• JSHint

10.LiveReload

ファイルを保存した時にブラウザをオートリロード（自動更新）させるGUIツール。

• JavaScript - LiveReloadが便利すぎる - Qiita
• [公式] LiveReload

11.VirtualBox / modern IE

PCに仮想環境を作ってくれるVirtualBoxと、様々なOS＋ブラウザの環境でのチェックをしてくれるWEB検証サービスのmodernIE。

• VirtualBox と modern.IE を使って無償で Mac 上に日本語入力可能な Windowsのテスト環境を構築する Blog new
• VirtualBox
• modernIE : Microsoft Edge Dev

12.BrowserStack

Webブラウザのテストを自動化。

• Node.jsでBrowserStack Automateを使ってテスト - Qiita
• BrowserStack