Modern JS for Designer #JavaScript

対象

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

背景

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

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

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

Topic

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

Node.js

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

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

例えば

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

$ npm i -g create-react-app

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

$ create-react-app sample1

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

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。