卒展web係になったのでモダンなフロントエンド開発について

IAMAS 現M1の日比野光紘と申します。
大学でバックエンド技術を学んだ後にIAMASに入学して、現在は「プログラミングが好きで堪らない技術オタクの為に、冗長なコードの理解を手助けする」ことを目的に修士研究を進めていこうと考えています。
この度はIAMAS2018のwebページ作成担当になりました。

テーマ

私の専門がバックエンド技術なのでIAMASに入学するまではフロントエンド開発に関しての知識がほとんどありませんでした。1年前はHTMLもCSSも生で書いていました。
この一年でwebベースのシステムを作成することが多かったので、この記事では最近のモダンなフロントエンド開発環境について書きたいと思います。
なお、近年のwebのフロントエンド開発は使用技術の流行り廃りが激しく、詳細な技術の使い方について説明しても半年後にはその内容が最新では無いことが多いです。なのでこの記事では近年の主流になっているNode.jsの環境を使った開発方法の概念の説明だけにします。

Node.js

Node.js は、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である。Webサーバなどのスケーラブルなネットワークプログラムの記述を意図している。

https://ja.wikipedia.org/wiki/Node.js

コマンドライン上でJavaScriptを動作させるためのプラットフォームです。webのサーバサイドを記述する用途が主かと思われますが、フロントエンドの開発環境としても広く用いられています。

npm

Node.jsにはnpmという強力なパッケージ管理ツールが用意されています。

$ mkdir dev-dir
$ cd dev-dir
$ npm init
// Node開発環境の初期化
$ npm install **********
// 必要なパッケージたちのインストール

上記の手順で、ディレクトリ一つの中に開発環境をセットアップしていきます。

自動化という概念

フロントエンド開発にNodeを用いる事の一番の肝が"自動化"です。
静的なwebサイトの構築には

  • 数多くのHTMLファイルを吐き出すがページのテーマやレイアウトは共通する部分が多い
  • 最新規格のJavaScriptの構文で書きたいが、古いブラウザへの対応も求められる。
  • そもそも冗長すぎる生のHTMLやCSSを書きたくない

などなど、様々なペインが存在します。
その中で生まれたのが、面倒な作業を設定ファイルに書いておいて自動化するという概念です。
その作業に使われる現在の主流が「タスクランナー」と呼ばれる類のソフトウェアです。

タスクランナー

タスクランナーとは。

ものすごくざっくり言ってしまえば、必要な処理を自動でジャンジャンやってくれるやつ。と言えるでしょう。

フロントエンドエンジニアが主に使うツールです。

世の中には、

「プログラマーよ怠惰であれ」

という言葉もあるそうです。

http://migo-media.com/tool/

Gulpを使った例

タスクランナーの中でも現在広く使われているGulpというツールでは下記のような方法で自動化する事ができます。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-load-plugins
$ npm install --save-dev *****
/* 自動化したい項目のパッケージをインストール */

$ vim gulpfile.js
---------------------------------------------
const gulp = require("gulp");
const glp = require("gulp-load-plugins");
const $ = glp();
// HAML形式でマークアップされたドキュメントをHTML形式に変換する処理手順
gulp.task("haml", function(){
    gulp.src("index.haml")
        .pipe($.haml())
        .pipe(gulp.dest("dist/"));
});
---------------------------------------------

$ gulp haml

この例のように手順を書くだけで、

  • テンプレートエンジンからHTMLの生成
  • 最新記法で書かれたJavaScriptやAltJSをBabelでトランスパイル
  • SassをCSSに変換
  • 静的なライブラリを自分のページにコマンド一つで組み込む
  • 画像ファイルの圧縮
  • ソースコードの圧縮
  • ......etc

といった処理が行えるようになります。

関連するツールについて

例にはGulpを使用しましたが、自動化はモダンなフロントエンドの中でも一番流行り廃りが激しい分野の一つです。

といった様々な後続ツールも登場しています。これに関してはもう自分の使いやすいツールを使うのが勝ちといった雰囲気がありますね......。

おわりに

フロントエンドを書くことができれば、Github Pagesになどにデプロイしてノーコストで自分のポートフォリオサイトなんかを作ることができます。
IAMASの方々も是非。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.