本日は私たちのフロントエンド開発体制についての話題です。私たちの目ざす品質と、そのための社内体制についてのお話が中心ですが、内部に開発チームを持つお客さまの参考になるかもしれません。

さて、フロントエンド開発と一口にいっても、さまざまな異なる要素から成り立っています。そしてそれぞれを開発するための技術知識と、実際に開発するための環境が必要となります。

その主な構成要素とは、

• HTML
• CSS
• JavaScript
• 画像

です。
これらの要素は単体で存在すればよいものではなく、互いに連携したり、さらには別に存在するデータとのやり取りをしながら、意図した表示を実現しています。

誰もが実感されている通り、フロントエンドで実装が求められる内容は日を追って複雑化、高度化しています。
この複雑化や高度化によって、複数メンバーによる開発や中長期にわたる開発作業が当然になりました。そのため作業履歴や分担管理の必要性がますます強くなりました。
さらにミスやバグの回避、データの整理、データの大容量化防止、開発期間の長期化対策など、さまざまな課題が浮き彫りになってきました。

私たちはこれらの課題を解決し、フロントエンド開発の品質と効率を向上するのための取り組みをしています。
今回はそのアウトラインをご紹介します。

（１）基本環境の整備による実践

今やほぼ必須となっているフロントエンド開発の基本環境、GitとSassをまずは導入しました。これらによってデータの適切な管理や基本的な品質、効率性を確保しています。

●Gitによるバージョン管理環境

作業履歴の管理や複数スタッフによる作業への対応としてもはや必須となっています。起きがちなミスの回避や、以前のデータの再利用や確認などにも欠かせない管理環境です。

●SassなどCSSプリプロセッサによるCSSの生成

破綻がなく再利用しやすいCSSを記述するために、SassなどのCSSプリプロセッサもの導入も欠くことはできません。これによって制作効率の向上、そしてデータの軽量化も図ることができます 。

（２）イングスの独自拡張環境による実践

この基本環境をベースに、私たちは独自に拡張した開発環境を構築しています。
ここで開発を行うことで作業効率が飛躍的に高まるだけでなく、バグなどのない高い品質やメンテナンス性の高いデータの提供が可能になりました。

●自社統合環境　IABS　(ings Advanced Build System) 　による各種データの生成

HTML、CSS、JavaScript、画像などのサイト構成データや、静的サイトデータなどを各種ビルドツールを動作させて生成します。最終的にはGulpなどのタスクランナーを動作させることで、最適化されたデータを一度に生成します。

●独自開発フレームワーク 　IAF　 (ings Advanced Framework)　 を利用した開発

この独自フレームワークには、既存パーツの流用、バグ対応済みデータの使用、データネーミングなどの非効率作業の自動化などなど、品質やメンテナンス性を高めるさまざまなノウハウが集積されています。
さらにスタイルガイドを生成することで、共同作業や引継ぎ作業効率化のために機能しています。

これらを図にするとこうなります。

（３）知識とスキルの向上

これらはあくまで開発環境であり、これさえあれば全てが簡単に実現するわけではありません。
特に独自フレームワーク IAF は、既存フレームワークのようにガチガチにルールを規定したものではなく、どのようなタイプの案件にも対応できるような柔軟性を持って設計されています。
それだけに使用するスタッフには、CSSの高度な記述知識やBEMなどの設計手法の知識 、オブジェクト指向CSSの知識、Node.jsやNPMなどJavaScriptの記述スキルなどが必要になってきます。
まだまだスキル面でもシステム面でも完成に至っていませんので、さらなる品質向上と効率化を目指してブラッシュアップを続けていく考えです。

以上が私たちの取り組みです。参考になりましたでしょうか。
もとはといえば、開発における無駄な作業や繰り返しの修正依頼、それに伴う不具合などの弊害が多いことを痛感したエンジニアが、こつこつ積み上げたものです。したがって、非常に実践的に組み立てられたしくみとなっているのが特徴です。例えばやむを得ず短納期・大量となった案件の際には、これを活用して文字通り爆速、かつ正確に開発を進め、事なきを得ました。
（もちろん、爆速対応のために構築したわけではありません。あしからず...）

＜プロデューサー：岩田亮二／チーフエンジニア：丸永英男＞

※これらのフレームワークなど開発環境を使ったWEBサイト構築は、大規模サイトや更新頻度の多いサイト、あるいは類似したサイトを複数を構築する際などに特に大きなメリットを発揮します。
ご興味のある方は、 こちら からお気軽にお問い合わせください。