LoginSignup
128
167

More than 5 years have passed since last update.

@tomoyamachi(Tomoya Amachi)

2017年のJavaScript開発で知っておきたい用語集/リンク集

Last updated at Posted at 2017-10-30

JavaScriptを本格的に学ばねばならぬときがきたので、よく知らなかった用語を調べた。
基本的に大項目のリンク先は公式ページ。参考記事は詳細に別途リンクを貼る。
HOTなツールを知りたいときは2016 JavaScript Rising Starsを見るとよさそう。

更新履歴

基本用語

Node.js

  • ネットワークアプリケーションを作成するためのJavaScript実行環境
  • 非同期型のイベント駆動

nvm (Node Version Manager)

  • Node.jsのバージョン管理システム

V8 (Google V8 JavaScript Engine)

  • Googleが開発しているJavaScriptエンジン
  • C++ベースでGoogle Chromeやnode.jsに使われている

ECMAScript(ES)

  • JavaScriptの標準言語仕様
  • 最新はECMAScript® 2017(ECMA-262 8th edition) ES8
  • バージョンは発表された西暦を使う場合と、発表ごとの連番を使う場合がある
  • ES2015以降はサポートしていないブラウザが多い 1
  • ブラウザへの対応状況はここで確認できる
  • 「エクマスクリプト」と読む

CommonJS

  • ウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクト - wikipedia
  • さまざまなツールの基盤になってはいるが、いまの重要度は低そう

SPA(Single-page Application)

  • 1枚のHTML+必要なアセット(JavaScript/CSS etc)で動作する
  • ページのリロードが発生しない


パッケージ管理

参考 : Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか

npm (Node Package Manager)

  • Node.jsでつくられたパッケージの管理システム
  • Node.jsをインストールすると標準でついてくる

Yarn

  • Facebook, Googleなどが開発したパッケージ管理システム
  • npmの課題を解決してある
    • lockファイルの作成
    • 並行ダウンロード

package.json

  • npm/Yarnで管理するパッケージリストを記載したファイル
  • 同じ書式で利用可能
  • npm仕様/Yarn仕様


モジュールバンドラ

参考ページ : What are the best client-side JavaScript module loaders?

Webpack

  • コード分割ができる
  • 柔軟性が高い
  • 最近はこちらがスタンダード

Browserify

  • シンプルな構成
  • CommonJSモジュールをブラウザ用にコンパイルする
  • 最近はこちらに対応していないモジュールも出てきている


ライブラリ/フレームワーク

参考 : https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282

React.js

  • Facebook製のJSライブラリ
  • 大規模開発で思い入れがないなら、これを選ぶとよいと言われた
  • Reduxと併用すると、stateの管理が楽と聞いた

Vue.js

  • オープンソースなJSライブラリ
  • 学習コストは低く、少しづつ導入していくときに良さそう
  • 大規模プロジェクトだと管理しづらくなると聞いた

AngularJS / Angular(旧Angular2)

  • Google製のJSフレームワーク
  • 1も2も学習コストが高いと聞く
  • 1と2は設計からして別物と聞いた

Ember.js

  • 少し前に大流行したフレームワーク
  • 学習コストが高いと聞いた
  • 規約による制限は強いが、慣れれば使いやすいと聞いた


コンパイラ/トランスパイラ

Babel

  • JavaScriptのコンパイラ ※以前はtranspilerだった気がする
  • まだブラウザが対応していない標準言語仕様で記載しても、動くコードを吐き出してくれる
  • そのため、ブラウザが対応してくれるようになれば、書いたコードをそのまま使えばよいだけになる

TypeScript

  • Microsoftが開発
  • 静的型付けができる
  • JavaScriptにコンパイルできる

CoffeeScript

  • JavaScript/JSXにコンパイルできる言語
  • Ruby/Pythonっぽい記法


React関連用語

Redux

  • JavaScriptの状態を管理するフレームワーク
  • Fluxの考え方をベースにつくられている
  • 以下の5要素で構成される
    • State : アプリケーションの状態
    • Store : Stateを一元管理する場所
    • Reducer : StoreにあるStateを変更し、新しいStateを返す。Actionをもとに起動する。
    • Action : Stateを変更する際に一番最初に発火する。Reducerに働きかける
    • ActionCreator : Actionを作るとき便利に呼び出しやすくするためのもの
  • 参考 : Redux入門【ダイジェスト版】10分で理解するReduxの基礎

Flux

  • アプリケーションのデータ管理パターン
  • データが単一の方向に流れる

Element (React)

  • Reactのアプリケーションを構成する最小要素
  • ReactDOMという、オブジェクトでできている
const element = <h1>Hello, world</h1>;

Component (React)

  • 関数のようなもの
  • 入力(props)に対して、画面に表示するElementを返す
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

JSX

  • XMLのような構文をサポートした拡張言語
  • DOMの設計を理解しやすい
  • Reactで利用する
const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

仮想DOM(Virtual DOM)

  • 実際のDOMを直接操作しない
  • 操作した状態のDOM情報をオブジェクトとして持ち、実際のDOMに対し、差分のパッチを当てることでDOMを描画する
  • 参考 : 仮想DOMの内部の動き

ミドルウェア (Redux)

  • Reduxの拡張ではミドルウェアの使用が推奨される

redux-thunk


テストツール

参考 : An Overview of JavaScript Testing in 2017

Jest

  • Facebook製。Reactのテストはこれを使っている@Facebook
  • 変更した際の差分をテストするので大規模プロジェクトでも高速
  • スナップショットテストもできる

AVA

  • テストを並列で実行することで高速化
  • シンプルな構成
  • スナップショットテストもできる

Jasmine

  • BDD(ふるまい駆動開発)
  • 必要なものはあるていど揃っている

Mocha

  • 柔軟性が高く、よく利用されるツール
  • 外部のツールなどを利用するので複雑になりやすい

enzyme

  • AirBnB製。React用のテストユーティリティライブラリ
  • テストが格段に書きやすくなる
  • 他のツールと組み合わせて利用する

flow

  • プロジェクトに気軽に型チェックを導入できる


CSS関連のLoader

「どんなものでも最終的な出力をjavascriptで実行できる形に変換する」もの。

参考
WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる
なんとなくで理解しないWebpackのCSS周辺

css-loader

  • CSSの依存関係を解決し、JSで読み込めるようにする
  • @importとurl()で管理する

raw-loader

  • cssをJSで読み込めるようにする
  • css-loaderのように高機能ではない。超シンプル

style-loader

  • DOMに <style>タグを挿入し、CSSを読み込ませる
  • 要するにHTMLにCSSを挿入する

less-loader

  • Less(CSSを記述するためのDSL)をCSSに変換するためのLoader
  • 実際に使うときは、その上にcss-loader, style-loaderを載せる
require("!style!css!less!./file.less");

Postcss-loader

  • PostCSS(JSでつくられたCSS変換ツール)でCSSを処理するLoader


その他ライブラリ

Promiseライブラリ

  • 非同期処理を抽象化したオブジェクトとして扱う
  • callbackでもできるが、ルールが統一されたため
  • 非同期処理をキューにして管理することができる

Bluebird

ユーティリティライブラリ

  • ネイティブ型を扱うライブラリ
  • ES2015以降でサポートされている記法もある
  • 基本的にはどちらか一方を利用する

Underscore

  • 100以上の関数が定義されている(map, filter...)
  • 公式ページが分かりやすい

Lodash

時間操作ライブラリ

Moment.js

  • タイムゾーンの設定
  • フォーマットの指定
  • 日時計算


開発に便利なライブラリ

npm-run-all

  • 並行でのnpmコマンド実行や、npmコマンドの単純化ができる
  • 以下の3つのコマンドが用意される
    • run-s : sequentialに実行
    • run-p : parallelで実行
    • npm-run-all : どちらも指定できる。デフォルトはsequential 
$ npm run clean && npm run build:css && npm run build:js && npm run build:html
↓ 簡潔に実行できる
$ npm-run-all clean build:*

rimraf

  • rm -rfを実行できる
  • npm run clean で使うことが多い
  "scripts": {
    "clean": "rimraf targetDir"
  }

  1. @erukiti さんのご指摘により大幅に修正 ↩

128
167
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
128
167