Edited at

Modern JS for Designer

More than 3 years have 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。