いま現在、HTML5/CSS3/Angular1を使ったシングルページアプリケーション(SPA)の開発を行なっています（自社サービスとして近日中にローンチ予定です）。
私はプレーイングマネージャーとして、このSPA開発に携わっており、開発環境・インフラ周りも担当しています。
もちろん、コーディングも行ないます。
開発チームは私を含めて4人体制ですが、チーム発足当初、我々にはフロントエンドエンジニアとしてのスキルが不足していました。そこで、フロントエンドエンジニアとなるべく奮闘が始まったのですが、開発の過程で感じたこと、苦労した点などを、今回から数回にわたって紹介していきたいと思います。
まず、フロントエンドエンジニアとは？何をする人たちなのか
フロントエンドエンジニアとは？と聞かれたあなたはどう答えるでしょうか。
フロントエンジニアの定義は各社によって異なると思いますが、当社では「HTML/CSS/JavaScriptのコーディングだけでなく、UI/UXの設計、フレームワークやライブラリの選定、API等のサーバーサイドのプログラミングも含めて、WEBサイトの制作ができる人」と定義しています。
このような考え方の会社さんが多いのではないでしょうか。
開発チームでは、これまでにWEBサイトの制作をいくつも行なってきましたが、モダンなサイトにしたい場合は、デザイン（見た目）とHTML/CSSのコーディングを外部業者に委託していました。
しかし、今回自社サービスを立ち上げるにあたり「デザインもコーディングもすべて自社でやろう！フロントエンドエンジニアになろう！」というミッションのもと、開発を進めることになったのです。
デザイン/CSSを外注していたことから、我々開発チームにはデザイン/CSSの知識が不足していました。
また、SPAの開発を行なう上では、ブラウザー側でのコンポーネントの管理やルーティングなどの処理も必要となるため、JavaScriptの知識もこれまで以上に必要となります。
各メンバーにはjQuery/Ajaxでの開発経験がありましたので、jQueryでSPAを実装するのも一案でしたが、かなりの労力がかかることが想定されたため（もちろんjQueryで事足りるケースもあると思います）、SPAフレームワークも導入することにしました。
このような状況では「私たちはフロントエンドエンジニアです」とはとても言えません。 ここからフロントエンドエンジニアへの道のりが始まります。
HTML5/CSS3の基礎知識を身につける〜すぐにできたことはこれだ！
これまでにもWEBサイトの制作は行なっていましたので、HTMLは書くことができますし、CSSもある程度は読み書きすることができました。
しかし、HTMLの知識はHTML4がベースとなっており、HTML5/CSS3についてはきちんと学習したことがなかったため、オンラインの学習サービスと書籍を併用し、HTML5/CSS3の学習を行ないました。学習期間は3日程度でした。
書籍は以下を利用しました。参考までに。
これらの学習が終わったら「習うより慣れろ！ 実際にコーディングを始めよう！」・・・とはいきません。
CSSの規約の策定が必要でした。
CSS規約をつくるために考えたこと
CSSのコーディングを始める前に、最低限以下の事項(項目)を決定する必要があります。
– マルチクラスにするかシングルクラスにするか？
– クラスの命名規則をどうするか？
これらは、CSSの設計方法（方法論）として各種提唱されており、OOCSS、BEM、SMACSS、FLOCSS、ITCSS などが有名かと思います。わかりやすさ（初心者にとっての開発しやすさ）が重要だったり、メンテナンス性が重要だったりと、ケースによって重視するポイントは異なってくると思いますので、どれが正解でなにが優れていると、一概に言えるものではありません。
サイトやチームの特性を考慮したうえで、それに適した方法論を採用することになると思います。
我々のチームでは、FLOCSSをベースとして一部をカスタマイズする形式をとりました。その内容については、次回ご紹介したいと思います。
hiloki/flocss: CSS organization methodology.
– CSSプリプロセッサー（Sass や Less）を導入するか？ 導入するとコーディングの効率化、簡略化が見込めます。
我々のチームでは、導入以外の選択肢はありませんでした。
全員エンジニアなので導入の敷居が低かったこともありますが、エンジニアは少しでも楽をしたいと常日頃思っていますからね。
実際にCSSコーディングを行ない、CSS規約をブラッシュアップする
CSS規約ができたら、実際に規約に従ってサンプルページのコーディングを行なってみました。
実際にコーディングを行なってみると、改善すべき点や追加すべき規約も浮き彫りになってきますので、規約をブラッシュアップしていくことになります。
テキストボックスやボタンなど、共通的に使用可能なスタイルは部品化する。
さらに、部品化したスタイルについて、使い方やマークアップ例をスタイルガイドにまとめます。
今回は「sc5-styleguide」というスタイルガイドジェネレーターを使用しました。
CSSファイルに所定の形式でコメントを記述すると、自動でスタイルガイドを生成してくれるので、重宝しました。
また、CSSの規約だけではなく、HTMLに関する規約も追加する必要が出てくることがあります。
たとえば、
・フォームのボタンには<button>タグもしくは<input type=”button” />タグを使用します。
・<a>タグは不可（disabledが効かないため）。
などです。
今回はCSSコーディングを行なうにあたっての事前準備について書かせていただきました。
次回はCSS規約の実例について紹介させていただきたいと思います。
フロントエンドエンジニアへの道
１- HTML/CSSコーディングはじめるぞ〜HTML/CSSコーディングを行なうにあたっての事前準備
２- チーム作業をするための最適なCSS規約、Sassについて考えた
３- Sassコーディングを行なう上で必要となる各種自動化の話
４- Angular1によるSPA開発 – 基本編
５- Angular1によるSPA開発 – 設計編
６- Angular1によるSPA開発 – Tips編
