Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Modern JS for Designer

Modern JS for Designer

by KeitaMoromizato
1 / 27

対象

  • デザイナー・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。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
23
Help us understand the problem. What are the problem?