Heroku案件で重要な開発プロセスの自動化
2017.06.01 HagaSatoshi
こんにちは。デベロッパーのHです。
今回は、Heroku案件を進めていく際に重要になる開発プロセスの自動化をご紹介します。前回のブログ「Herokuを活用して解決したお客様の課題」にてご紹介した案件を例にして説明します。色々なオープンソースを使用して自動化を行い、開発の生産性とシステムの品質の向上を行なっています。
自動化① : テストの実施と検証環境の更新を自動化
開発の現場では、ソースコードを書くだけがタスクではありません。テストコードの実行やテスト環境の最新化等の様々なタスクを行なってシステムの品質の向上を行なっています。いわゆる“継続的インテグレーション”ですが、この一連のタスクを自動化し頻繁に実行することで開発の生産性を高めています。
この図が前回のブログでご紹介した案件の例です。
テストコード : システムが正しく動作することをプログラムで自動チェック
システムが正しく動作することをプログラムでチェックしています。メソッドの処理内容の検証から、画面遷移をエミュレートするE2Eテストまで、色々なテストコードツールがあります。
CIツール : テストコードを定期的に自動で実行して検証を行う
そのテストコードを定期的に実行してシステムの品質を向上させています。この案件では、CircleCIを使用し、GitHubの更新を契機にすべてのテストコードを実行して、テストが正常終了したら検証環境に最新資源をアップする処理を実行しています。
自動化② : HTML/JavaScriptへの変換を自動化
最近では効率良く画面を開発できるプログラム言語がたくさんありますが、一般ユーザー向けのWebシステムでは古いブラウザが使われる事も想定されるため、提供する資源は普及しているバージョンのHTMLとJavaScriptでなければいけません。そのため、開発には効率の良い言語を使用して、アプリケーションサーバーに配置する際に旧バージョンのHTMLとJavaScriptに自動で変換する方法がよく行われます。
先日の案件の例でも、この仕組みを活用しています。
JavaScriptのビルド処理 : Babel / webpack
Babelを使用して新しいバージョンのJavaScriptを旧バージョンの構文に変換しています。また変換されたJavaScriptファイルをwebpackを使用して一つのファイルに結合しています。最近はJavaScriptの処理が多くなり、JavaScriptファイルのそれぞれの依存関係が複雑になっています。webpackを使って、この依存関係の解決を効率化させています。
HTMLのビルド処理 : slim
テンプレートエンジンという仕組みで、最終的にHTMLに変換されます。変数やファイルの共通化といった便利な機能があるほか、HTMLの閉じタグのような冗長的な記述が省略化されており、開発の生産性が上がります。
ビルド処理の自動化 : gulp
このような背景があるため、最近の開発ではビルド処理が複雑になり量も多くなっています。そのビルド処理を自動化するのがgulpです。ソースコードの変更の都度ビルドを自動的に実行したり、テストコードの実行も自動化することができます。
まとめ
今回は、Heroku案件で重要になってくる開発プロセスの自動化を説明いたしました。Heokuは特に開発プロセスの効率化にも力を入れており、Heroku CIというHeroku独自のサービスが先日公開されました。今後ますます自動化での効率化が強化されていくと思います。
Heroku CIについては近日中にご紹介したいと思います。お楽しみに！
