JavaScript
webpack
babel
More than 1 year has passed since last update.

対象

  • デザイナー・HTML/CSSコーダーで、少しだけJavaScriptを使うこともある人
  • 最近のJavaScriptがよく分からない、バックエンドエンジニア

背景

JSerとデザイナー・コーダーの話が噛み合わない

  • 「プラグインはnpmから取ってきてよ」
  • 「ビルドはWebpack使ってるから必要なら設定書きかえてね」
  • 「babel使ってるからvarじゃなくてconstね」

この会話が通じるようになるといいな。


Topic

  • Node.js
  • npm
  • Webpack(browserify)
  • ES6(ES2015)、Babel

Node.js


Node.js

  • サーバーサイドのJavaScript言語
  • コマンドラインで動くJavaScript(で、サーバーとしても使える)

Webサーバーとしてだけでなく、CLI(コマンドライン)ツールとしても活用される。サーバーサイドエンジニア以外は、コマンドラインツールとしての使い方を覚えておけばいい。


例えば

gruntgulp_001.jpg


node.js製のコマンドを使う

$ npm i -g create-react-app

create-react-appコマンドが使えるようになる。

$ create-react-app sample1

npm


npm

Node.jsのパッケージ管理ツール。OSSで公開されているライブラリの、ダウンロード・バージョン管理を行う。

  • Rubyで言うところの「gem」
  • PHPでいうところの「Composer」

GruntもGulpもnpmで配布されている。最近ではフロントエンド開発でも使われる(詳細は後述)


インストールしたパッケージはpackage.jsonで管理。

package.json
{
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  }
}

package.jsonがあれば、npm installコマンドで必要なパッケージを全てダウンロードできる。

$ npm install

新しいパッケージを使う場合は、npm install <パッケージ名> --save

$ npm install react --save

ここまでのまとめ

  • Node.jsはサーバーだけでなく、コマンドラインツールとしても使われる
  • 最近のJavaScriptのライブラリは、npmで管理するのが主流

Webpack


Webpack

npmの登場により、
「同じJavaScriptなら、フロントエンドでもnpmで配布されているライブラリを使ったらいいんじゃない?」

=> WebPack/Browserifyが登場


例えば

バックでもフロントでも使えるモジュール

  • moment.js(日付操作ライブラリ)
  • lodash(便利ライブラリ)

その他、独自ライブラリをフロント/バックエンドで共通化したり。


どうやっているか

昔のJS

index.html
<!-- ライブラリの読み込み -->
<script src="http://code.jquery.com/jquery.js"></script>

今のJS

$ npm install jquery --save

jsファイルでモジュールの読み込み

import $ from 'jquery';

Webpackでビルド

Webpackを実行

$ webpack --config webpack.config.js

自分で書いたJS+読み込んだnpmライブラリが、ひとつのファイルに連結される(=ビルドされる)。

あとは通常通りHTMLで読み込み。

<script type="text/javascript" src="/bundle.js" />

フロントの開発でもnpmが前提に

最近では、フロントエンドでしか使えないもの(jQueryや、その関連ライブラリなど)も、npmで配布されるようになっている。

フロントエンドの開発は、npmでライブラリを管理し、Webpack/browserifyを使ってビルドするのが主流に。


ES6(ES2015)とbabel


ES6

  • JavaScriptの時期バージョン
  • 別名ES2015
  • 今まで使ってたJavaScriptはES5(か、IE対応していた人はES3)

便利な記法がいろいろと追加されている。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {

でも...

  • エンジニアは便利なのでES6で書きたい
  • ただ、世の中の全てのブラウザがES6(= 新しいJavaScript)に対応している訳ではない。
  • IEの悪夢再び

=> ここでbabelが登場。


babel

ES6の記法で書いたJavaScriptを、ES5のJavaScriptに変換するライブラリ。

エンジニアは書きやすいES6で書き、ブラウザで実行するのは変換後のJavaScript( =どのブラウザでも動く)。

※babelで変換することを、バベると言ったり言わなかったり


const say = (str) => console.log(str);

const msg = "hoge";
say(msg);

// ↑をバベると...↓

var say = function say(str) {
  return console.log(str);
};

var msg = "hoge";
say(msg);

ここまでのまとめ

  • Webpackの登場で、npmがフロントエンドでも使われるようになっている
  • 最近のエンジニアはES6でJavaScriptを書いている
  • でも実際に動いているのは、バベった後のES5のプログラム

以上です


エンジニアとのコミュニケーション

  • 「ライブラリ管理は何を使ってますか?」
  • 「ビルドは何を使ってますか?」
  • 「記法はES6ですか?」

このあたりを押さえておけばたぶんOK。