複雑化する開発環境から考える「真に必要とされるもの」とは

複雑化している今のフロントエンドの開発環境について、少しだけ考えさせられるできごとがあった。とある案件で、webサービスの運用とシステム開発を顧客側が担当し、私たちはデザインとフロントエンド実装の領域を手がける形で協業している。

弊社ではコーディングにCSSプリプロセッサ言語のSassHTMLテンプレートエンジンのPugなどを利用することが当たり前になっている。こうしたメタ言語(ある言語の代替となる言語)を制作に利用するメリットは一体どれくらいあるのだろうか。

上記の案件では、納品先の顧客は基本フロントエンドを手がけないため、Sassを導入していない。私たちにスタイル調整の依頼が来た際はSassで行うが、簡単な修正の場合は顧客側で直接CSSファイルを触ることもある。この時点で双方の書く環境とコードに違いが生じてしまう。

結論から書くと、コンパイルの必要がある言語や環境の使用は「制作側の効率化や品質のためには有益だが、納品先にとってはそこまで重要でない」ことがほとんどだ。顧客やユーザーが真に欲しいものは先進的な環境を構築し、先駆的な書き方で作ったコードではない。それらは目的ではなく、制作手段の1つに過ぎない。

では我々制作側はどうするべきか。彼らが欲しいものは、使いやすい機能、分かりやすい情報、おもしろいコンテンツ、美しい見た目などだ。そのために私たちに求められるのは、運用を見通した設計、マニュアルやアフターサポートなどで運用開始後もアドバイスができることなのではないかとふと思った。

納品先にもよるが、SassHTMLテンプレートエンジンをバリバリ使っている例はほとんど見ない。これらを使うこと、使う環境を用意することはある程度専門的でハードルが高く、学習コストもかかるためだろう。

一方、制作側がSassPugなどを使う意義は大きい。mixinや関数、制御構文など便利にコードを使い回せる仕組みがある。長いコードを繰り返し書かずに済み、使い方次第で生産性に寄与する。また、言語をコンパイルしたり、ベンダープレフィックスを自動付与したり、画像ファイルを最適化したりと、いろいろな作業を任せられる開発環境の構築が必要だ。

この開発環境に使われる技術が、Node.js製のnpm(Node Package Manager)Yarnといったパッケージマネージャー、webpackというモジュールバンドラー、gulpというタスクランナーなどだ。これらも今のフロントエンド開発には欠かせないものになっている。さらに、Vue.jsReactなどのJavaScriptフレームワーク、TypeScriptなどのaltJSを用いた開発が選択されることもある。

膨大な関連ツールが現れては消え、これらを管理し扱うのはなかなか大変だ。介在するツールが多ければ多いほど、不確実性を背負い込んでいるともいえる。 

正しく運用すれば致命的なエラーは出にくいはずだが、複雑なものをときに複数人で扱うことで食い違いが生まれ、安定を保ち続けることは難しくなる。開発環境を導入する途中で出るエラー解決に時間がかかり、疲弊してしまうような本末転倒な状況にもよく遭遇する。

できれば複雑さの少ないシンプルな開発環境を目指したい。だが、これらの技術をそれぞれの案件ごとにうまく取捨選択しながら、付き合っていくこともまた今のフロントエンド制作には必要とされる。 

「真新しさ」や「増やすこと」より「必要なものに絞りリスクを減らす」「最適化する」ということが大切だと感じる。手段を目的化せず「真に必要なものは何か?」にフォーカスして、引き続きこの仕事に臨みたい。