サーバサイドエンジニアがフロントエンド技術を触った話
僕の立場
初めましての方は初めまして、@yoshikawataikiです。
僕は、ネットワークなどに興味があってサーバ周りを弄ってるエンジニアです。
好きな言語は特にはないのですが、 PHP, Ruby, Python, golang をメインに書いてます。
最後にCSSを書いたのが、1年も前なので少し覚えているかなくらいです。
めんどくさがり屋 なので、CSSを1000行以上書くとか、やりたくないです。
僕は研究やサークルのWebサイトなどを開発していこうと意気込んでいました。
しかしながら、フロントエンドが書ける人が僕の周りにいませんでした。
...
...
......
どうなったか、分かりますよね？
僕自身が、フロントエンドも開発しなければいけなくなりました。
記事概要
最新のフロントエンド開発(webpack4など)を触ってみて、サーバサイドエンジニアもフロントエンドエンジニアらしいコーディングが出来たということをまとめています。
対象読者
- 何でもやれる俺SUGEEE!!したい人
- サーバサイド技術しか触ったことのない人
- フロントエンド技術しか触ったことのない人
フロントエンド技術を紹介
ここからは、真面目にフロンエンド技術について触れていくよ。
webpack4
そもそも、webpackってなんだよ💢
ええ、僕も知った時はなんやこれ…使えるんか…ってなったんですが、これ便利です…
2018年2月にwebpack4がリリースされました。
webpackは、最新のJavaScriptアプリケーション用の静的なモジュールバンドラです。
CSSやJavaScriptを1つのJavaScriptファイルにまとめたり、複数のファイルに分割して出力することができます。
ファイル出力の際に、JavaScriptを圧縮や難読化したり、画像の画質を下げてファイルサイズを小さくすることも出来ます。
前述のとおり、あくまでもwebpackはモジュールバンドラなので、ローダーを使用して画像圧縮などを行います。
なぜファイルを1つにまとめる必要があるかというと、 ウェブページのHTTPリクエストを減らして高速でWebサイトを表示しようぜ！ の世の中になってきました。
webpackが注目されているのは、これが一番なのかなと思ってます。
EJS
EJSはJavaScriptからHTMLを生成できるテンプレートエンジン。パーツごとに分けたりするので、ソースコードの管理がしやすいです。
SASS・SCSS
ずっとCSSを使っている僕にとって、SASS・SCSSは結構画期的なものでした。
例えば、超サイヤ人が超サイヤ人2になった感じです。
CSSを兼ね備えてるスーパーCSSって感じです。
かっちょいいですね 知らんけど
SASS記法とSCSS記法があるのですが、僕はCSSをずっと読んできたので、SCSS記法を採用しました。
また、変数を扱えることや、出力するCSSを1つのファイルにまとめること出来るなどメリットがいっぱいです。
SASS・SCSSの概要はこちらへ
Bulma
僕自身、Bootstrapしか知りませんでした。しかし、世界は広かった。
多くのCSSフレームワークが存在しました。
僕が尊敬している先輩が「これいいよ！」と勧めていたのが、Bulma
ドラゴンボールじゃないよ
Bulmaの利点として、Flexboxベースのフレームワークであり、JavaScriptを必要としていないところです。
使い方はBootstrapと似ているので、導入してみることにしました。
TypeScript
JavaScriptで開発するか悩んでいて、そういえば色々なAltJSあるけど、どれが良いんだろうって調べた結果、「型がしっかりしている言語で開発したい！」というこだわりがあったので、TypeScriptが一番良いのかなと思いました。
開発してみる
以下のリポジトリを参考にして、開発していきます。
テキストエディタは何でもいいです。僕はVisual Studio Codeを使っています。
Node.jsのインストール
Node.jsのインストールをしてください。
インストールしたらCLIでnode -v npm -vを実行してバージョンが表示されるか確認します。
$ node -v v9.3.0
$ npm -v 6.0.0
プロジェクトディレクトリを作成
作業するためのディレクトリを作成します。
mkdir front-end
開発用のディレクトリを作成
cd front-end して mkdir src
front-end/ └ src
webpack(ビルドツール)を用いた開発は、開発ディレクトリ内で開発して、ビルドすると出力先のディレクトリにファイルが作られる仕組みになります。
プロジェクトの初期設定をする
プロジェクトディレクトリでnpm init -yと入力します。
front-end/ ├ src | └ package.json
package.jsonの中身はこんな感じです。
{
"name": "front-end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
package.jsonのテンプレート
webpack4 + EJS + SCSS + TypeScript + Bulmaを使うため bulma-scss, typescriptなどなどが必要になります。
今回はpackage.jsonを以下の用に書き直しました。
{
"name": "front-end",
"version": "1.0.0",
"description": "modern web page",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production --module-bind 'ts=ts-loader' --resolve-extensions .ts,.js",
"start": "webpack --mode development; webpack-dev-server --mode development"
},
"author": "YoshikawaTaiki",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.2.0",
"bulma-scss": "^0.6.0",
"css-loader": "^0.28.11",
"ejs-compiled-loader": "^1.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"postcss-loader": "^2.1.3",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^4.3.0",
"typescript": "^2.8.1",
"webpack": "^4.8.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"copy-webpack-plugin": "^4.5.1"
}
}
npm install でパッケージのダウンロードができます。
補足
今回は、上記のpackage.jsonを使いますが、通常ならば、下記のコマンドでパッケージをインストールします。
npm install --save-dev [パッケージ]
パッケージの説明
webpack4 を使うために、webpack, webpack-cli, webpack-dev-serverをインストールします。
webpack4から、以下の2つが必要になりました。
webpack, webpack-cliです。
どうやら、webpackから分離して、webpack-cli が誕生したそうです。
皆さん、webpack-cliの入れ忘れには気をつけてください！
EJS はejs-compiled-loader, html-webpack-pluginが必要になります。EJSのコンパイルローダーを使い、HTMLを出力します。また、外部に公開する際に、HTMLファイルを書き出す必要があるので、html-webpack-pluginでHTMLファイルを作成します。
SCSS はstyle-loader, css-loader, sass-loader, postcss-loader, node-sassが必要になります。SCSSファイルをコンパイルするため、node-sassを使います。css-loader, sass-loaderとpostcss-loaderでローディングして出力します。prefixの付与をするため、autoprefixerを導入しました。
また、ファイル出力をするために、extract-text-webpack-plugin,file-loaderでローディングして、画像を出力させます。
TypeScript を使うために、typescriptとts-loaderが必要になります。TypeScript本体とTypeScriptをロードするためのパッケージです。
Bulma はbulma-scssを導入してscssファイルに@import '~bulma-scss/css/bulma';を記入すれば、読み込む事ができます。
Configファイルの作成
設定ファイルは以下の配置です。
front-end/ ├ src | ├ package.json ├ postcss.config.js ├ tsconfig.json └ webpack.config.js
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
browsers: 'last 5 versions'
})
]
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
// TSはECMAScript 5に変換
"target": "es5",
// TSのモジュールはES Modulesとして出力
"module": "es2015",
// node_modules から引っ張ってくる
"moduleResolution": "node",
"lib": [
"dom",
"es2017"
]
}
}
webpack.config.js
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, './src/ts/main.ts'),
output: {
path: path.resolve(__dirname, './public'),
filename: './js/main.js'
},
plugins: [
new ExtractTextPlugin({
filename: './css/main.css'
}),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.ejs'
})
],
resolve: {
extensions: [
'.ts', // for ts-loader
'.js' // for style-loader
]
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
'css-loader',
'postcss-loader',
'sass-loader'
]
})
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: './images/[name].[ext]',
outputPath: './',
publicPath: path => '.' + path
}
}
},
{
test: /\.ejs$/,
use: 'ejs-compiled-loader'
}
]
}
}
実行してみる
npm startを実行。
localhost:8080にアクセスします。
コンソール画面に以下の出力がされていれば、TypeScriptでの出力が出来ていることが証明されます。
これで、src内をガツガツ書きまくれば、モダンなWebサイトを作ることが出来ます！
これで、フロントエンドエンジニアにコードで差をつけろ！（俊足）
それでは、良いフロントエンド開発を！お疲れ様でした！
