- 公開日：2017年07月08日
記事概要
今はjavascriptやcssの開発でもコンパイル環境が必要になってきました。
この記事は、Dockerでフロント開発の環境を構築する方法を記載しました。webpackとbabel(とreactやvueやbackborn)を使って開発することを前提に構築します。
汎用性は求めていないので、dockerファイルは使いません。あくまでメインマシンを汚さないために、dockerで開発環境を用意します。
環境
- macOS Sierra
- docker 17.06.0-ce
- Ubuntu 16.04.2 LTS
- nvm 0.33.2
- node v8.1.3
- webpack 3.1.0
前提
- dockerをインストール済み
- webpackやbabelなどのライブラリの多少の知識がある
工数
blogを書きながらでも2時間くらいで構築できました。
私はAndroidとRailsアプリをメインで開発しているのでフロントは専門ではありませんが、慣れている人ならあっという間に終わると思います。
dockerコンテナ起動
利用するdockerイメージを確認します。
// フォルダ移動 cd /Users/dameotoko/workspace/docker // dockerイメージの確認 docker images ubuntu latest d355ed3537e9 2 weeks ago 119MB
ubuntuのイメージを使います。
ttyでdockerを起動します。
// ttyで起動 docker run -v /Users/dameotoko/workspace/docker/react:/var/www -i -t ubuntu /bin/bash
オプション -v はVOLUME命令です。
Dockerコンテナ内の指定したパスをマウントできるように命令します。
ここではmacの/Users/dameotoko/workspace/docker/reactフォルダ配下と、dockerコンテナの/var/www配下を共有して開発するように指定しています。
共有できているか試してみます。
// mac cd /Users/dameotoko/workspace/docker/react touch index.html // docker cd cd var/www ls -l total 0 -rw-r--r-- 1 root root 0 Jul 8 06:07 index.html
macとdockerコンテナでファイルが連携されました。
nvmインストール
最新のnode.jsを使えるように、nvmをインストールします。
nvmは、rubyのrbenvとか、pythonのcondaと同じバージョン管理ツールです。
まずはsudoを利用可能にします。
apt-get update apt-get install -y sudo
ソースパッケージをビルドするために必要なパッケージを事前にインストールします。
sudo apt-get install build-essential libssl-dev
curlをインストールします。
sudo apt-get install curl
nvmをインストールします。
// https://github.com/creationix/nvm // DL curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash // shellを反映 source ~/.bashrc nvm --version 0.33.2
nvmが正常にインストールされました。
nodeインストール
nodeをインストールします。
// 利用可能なバージョン確認 nvm ls-remote v8.1.3 // install nvm install 8.1.3
~/.nvm ディレクトリ配下に、指定したバージョンのnode.jsがインストールされます。
ls -l ~/.nvm/versions/node/ total 4 drwxr-xr-x 7 root root 4096 Jul 8 06:45 v8.1.3
デフォルトに設定されていることを確認します。
nvm ls -> v8.1.3 default -> 8.1.3 (-> v8.1.3) node -> stable (-> v8.1.3) (default) stable -> 8.1 (-> v8.1.3) (default) node -v v8.1.3 npm -v 5.0.3
準備完了です。
プロジェクトHello world作成
サンプルとしてjsプロジェクを作成します。
// プロジェクトフォルダ cd /var/www npm init -y npm install --save-dev webpack babel-loader babel-core babel-preset-env babel-preset-react babel-preset-es2015
プロジェクトが作成されます。バージョン指定していないのでwebpackは3.1.0がインストールされました。
webpack.config.jsは自動作成されないので、生成します。
// 生成 touch webpack.config.js
設定を記載します。
module.exports = {
// エントリポイント(最初に読まれるjs)
entry: "./entry.js",
// バンドルされたjsファイル(成果物)
output: {
// 出力先のパスを指定
path: __dirname,
// ビルド後のファイル名を指定
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:{
presets: ['react', 'es2015']
}
}
]
}
};
webpack3だとloader: "babel-loader"になっているので注意してください。具体的な設定はここが参考になります。
簡単なHello worldアプリを作成します。
まずはエントリーポイントを作成します。
// 生成 touch entry.js
entry.jsを作成します。
続けてindex.htmlを作成します。
// 生成 touch index.html
htmlタグを記載します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>webpack tutorial</title>
</head>
<body>
<div id="myapp"></div>
<script src="bundle.js"></script>
</body>
</html>
ビルドします。
npm run build
> www@1.0.0 build /var/www
> webpack
Hash: cc0f9a75acd498c84298
Version: webpack 3.1.0
Time: 2287ms
Asset Size Chunks Chunk Names
bundle.js 2.51 kB 0 [emitted] main
[0] ./entry.js 13 bytes {0} [built]
babelを使ってMessageクラスを作成します。
// 生成 touch message.js
コードを記載します。
class Message {
constructor(msg) {
this.msg = msg;
}
}
export default Message;
エントリーポイントで利用します。
import Message from './message';
var message = new Message('Hello world');
console.log(message);
htmlをブラウザで開いてコンソールログを確認します。
Message {msg: "Hello world"}
msg
:
"Hello world"
__proto__
:
Object
うまくいきました。あとはアプリの開発をするだけです。
まとめ
webpackやbabelを使った開発ができるフロントエンジニアはまだ少ないみたいです。フロントができるといいながら、jqueryしかできない人を未だによく見かけます。時代をちゃんと追いかけましょう。
今後は他の言語と同じように開発環境の構築が求められていくはずです。複雑そうに見えますが、実際に触ってみるとそれほど難しくないので、定期的にキャッチアップしていくといいと思います。
今から学習するなら、TypeScriptとReactの組み合わせが、一番良い選択だと思います。
また、開発環境はdockerじゃなくてvagrantでも良いと思います。ただ、dockerの方が簡単だと(個人的に)思います。
また、サーバーエンジニアやスマホのネイティブエンジニアもフロントを触ってみてください。色々と知識を応用できるようになってきているので、定期的に簡単なアプリを作ると良いと思います。
以上です。
運営サイト(railsで作成しています)
参考記事
- babel/babel-loader
- Dockerでつくる開発環境【nginxコンテナ編】
- webpack+babel環境でフロントエンドもES6開発
- JavaScript Promiseの本
- Modern JavaScript概観、そしてElectronへ
- TypeScriptでReactを書く
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿