背景
SPA(シングルページアプリケーション)というワードに聞き覚えはありますか??
1画面で色々する類のアプリの総称で例えばGoogleスプレッドやslack, airbnbなどがあげられます。
サービス内すべてがSPAという場合もありますが、特定のページがSPAで実装されているケースが最近のサービスでよく見られます。
必要な部分だけ表示を変更するためユーザーが高速に目的を達成することができたりするわけです。
だれもスプレッドを更新する時にフォームを入力して行、列を指定し、送信!!リロード!!なんてしたくないですからねw
昔は(今も時々見かけますが...)javaアプレットなどもあったようですが、最近の傾向ではjsを使ってAjaxでデータを取得し該当箇所のHTMLをゴリゴリ変更する方法が主流となっています。
SPAを実現するためにjsには様々なライブラリやフレームワークが準備されていて、それに乗っかるだけで簡単なアプリはすぐに作成できます。
しかし、ライブラリ/フレームワークの流行り廃りの激しさやそれらを束ねるツールも検索すると様々出てくるため、開発初期の学習コストが少し高いという問題があります。
今回は、代表的なツールであるyarn, webpackについて必要最小限構成の開発環境を準備してみようと思います。
読者想定
- Macユーザー
- Homebrew導入済み(まだ導入してない方はこちら
- HTML/CSS/JSを書いたことがある
- Sass/Slim/erb/CoffeeScript/TypeScriptなどの↑の欠点を補完するメタ言語について聞いたことがある
紹介する主なツール
yarn
ドキュメント
パッケージ管理のツールです。
reactjsとかreduxなどのフレームワークやそれに関連するパッケージをダウンロードしてきたり、そのバージョンを管理することを目的にしてます。
webpack
ドキュメント
このツールは守備範囲が広いのですが、シンプルに言うとブラウザで実行可能な形式にファイルを変換することです。
複数に分割したファイルをまとめたり、拡張言語(e. g. slim, sass, CoffeeScript, JSX)をhtml, css, jsに変換したり、速度改善のためにminifyしたりするわけです。
yarnのインストール
超シンプルです
$brew install yarn
webpack/reactjsのインストール
yarnを入れたあとだと超簡単
$yarn init なんか色々入力を求められるけどあとで変更できるのですべてEnter その後package.jsonが作成される $yarn add webpack package.jsonにライブラリが追加されて、node_modules, yarn.lockが作成される。 $touch webpack.config.js webpackの設定ファイルを作成する
ではyarn/webpackを導入したので、使ってみましょう!!
Reactを導入してみる
最初にディレクトリ構成を決めます。
app
├──index.html
├──javascripts
│ └──app.js
│
src
└──react
├──main.jsx
└──components
├──HogeComponent.jsx
...
自分で編集するのはsrc以下のディレクトリで、appディレクトリはwebpackで処理された後のファイルが生成されるという構成です。
インプットになるディレクトリ/ファイルは作成してくれないので、自分で作成します。
$mkdir -p src/react $touch src/react/main.jsx
では、そのような構成になるようにwebpackの設定ファイルを作成します。
最初はこのような感じ
const webpack = require('webpack');
const path = require('path');
const APP_DIR = path.resolve(__dirname, 'app');
const JS_DIR = path.resolve(__dirname, 'src/react');
module.exports = {
entry: `${JS_DIR}/main.jsx`,
output: {
path: `${APP_DIR}/javascripts`,
filename: 'app.js'
},
}
ではwebpackを実行してみましょう!!
$./node_modules/.bin/webpack -d
app/javascripts/app.jsが作成されました。
ではベースになるindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yarn/Webpack/React-Sample</title>
<style>#app { width: 100%; height: 100vh;text-align: center;}</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./javascripts/app.js"></script>
</body>
</html>
div#idがアプリのビューを表示する箇所です。
scriptがwebpackのアウトプットになるapp.jsを読み込んでる場所ですね。
では本格的なreact導入を行います。
パッケージをじゃんじゃん入れて設定していきますよ〜
$yarn add react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react
babelの設定をします babelについての解説は別記事に委託しますが、簡単に言うとjsのバージョン差を吸収してくれたりするやつです。
{
"presets" : ["es2015", "react"]
}
それが終わったらwebpack.config.jsを編集します。
//これまでの設定
module: {
loaders: [
{
test: /\.jsx?/,
include: JS_DIR,
loader: 'babel-loader'
}
]
},
これで最低限Reactを触る準備が整いました!!
実際にComponentを作成してみましょう!!
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render() {
return (
<p>ReactSampleだよ</p>
);
}
}
render(<App/>, document.getElementById('app'));
コードを変更したら
$./node_modules/.bin/webpack -d
を実行してください。
これでopen app/index.htmlを実行するとAppコンポーネントがレンダリングされているのがわかります。
こんな感じ
変更を随時反映させたい!!って時は、
$./node_modules/.bin/webpack -d --watch
を実行すると、ファイルの変更を監視してwebpackを自動で実行してくれるようになります。
まとめ
今回はフロント開発をやろう!!と考えてから最初にぶつかるツールの壁yarn/webpackについてまとめました。
SPAを実現するにはかなり距離がありますが、壁を少しでも低くできたんじゃないかなと思いました。
サンプルに上げたコードのまとめはこちらにまとめておきます。
初級者の方の参考になれば幸いです!!
ではではm( )m
