対象
- デザイナー・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(コマンドライン)ツールとしても活用される。サーバーサイドエンジニア以外は、コマンドラインツールとしての使い方を覚えておけばいい。
例えば
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で管理。
{
"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
<!-- ライブラリの読み込み -->
<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。