株式会社リクルートスタッフィング（以下ITSTAFFING）と、株式会社ディー・エヌ・エー（以下DeNA)が協同で開催するDeNAスキルアップイベント。
第４回となる今回は「Web制作を効率化しよう」をテーマに、静的サイトジェネレーター「Assemble」や、「GitHub Pages」を使って無料で静的なWebページを公開するハンズオン形式の勉強会が開催されました。
静的サイトジェネレーターAssembleをGitHub Pagesで公開してみよう
「公開するサーバーはPHPやPerlなどのプログラムは使えない。でもテンプレートやインクルードを使って同じ記述を再利用し効率化したい」
そんな悩みを解決してくれるのが、静的サイトジェネレーター（Assemble）です。GitHub Pagesを利用すると無料でサイトを公開できるので、それらを使って効率的にサイト公開してみようというのが今回のハンズオン勉強会の内容です。
今回の講師はDeNAの新規事業でUX、アプリ『マンガボックス』ではデザインを担当した後、現在はmobage関連事業でフロントエンジニアとして活躍する笠井知晶さん。学生時代はヒッチハイクで日本一周をし、エッセイ本「ヒッチハイク女子」を出版。株や音楽、将棋にグルメ、旅行などを楽しむ活動的な女性エンジニアです。
▲今回の講師：株式会社ディー・エヌ・エー デザイン戦略室第一グループ 笠井知晶さん
2015年4月入社。DeNA Webデザイナー CSSとJavaScriptでアニメーションを巧みに実装できるフロントエンドエンジニアを目指している。
Assembleとは何か？
Node.jsおよびGruntのインストール、GitHubのアカウント作成・ログインなどの事前設定について参加者に確認をした後、まずはAssembleについて説明がありました。
Assembleとは、Node.jsベースのGruntで動かすことができる静的サイト生成ツールです。コンパイルすることでHTMLを生成するジェネレータツールとなります。
サーバーサイドのプログラムやデータベースがなくてもテンプレートシステムが使えるので、headerやfooterなどを切り分けて管理することが簡単にできます。また、切り分けたファイルのみを修正すればいいので、コード量も減り、メンテも楽になるというメリットがあります。
Gruntのプラグインなので、Gruntを触ったことがある人であればそれほど苦労せずに実装ができ、JavaScript製のテンプレートエンジンHandlebarsやYAMLという手軽にインデント形式で書くことができるテキストフォーマットを使うことも可能です。
lesson1 : YAMLとhandlebarsを用いてテンプレートをコンパイルしてみよう
まずは、ハンズオン用に用意されたファイルにターミナルコマンドで移動し、Gruntの実行時に必要なファイルをインストールします。
サンプルのconfig.ymlをエディタで見てみると、JSON（下の画像）より手軽にインデント形式で書けることがわかります。
▼YAMLの場合
▼JSONの場合
実際にGruntfile.jsにタスクを書いて、Assembleを使ってみます。
▼Gruntfile.jsの場合
タスクの内容を定義し、コンパイルするとこのような結果になります。
▼コンパイル前のHTML（上）とコンパイル後のHTML（下）
lesson2 : partialsを使ってheaderとfooterのファイルを切り分けてみよう
メインテンプレート（**.hbs）ファイルをテキストエディタで開き、以下のようにheaderとfooterを読み込むために黄色枠のところを変更します。
▼コンパイル前のHTMLの場合
h1をheaderに、ulをfooterに書き換えます。切り分けたheaderとfooterのテンプレートを作り、好きなように編集します。
Gruntfile.jsにタスクを追加し、タスクの定義を行ったら、コンパイルします。
htmlファイルをテキストエディタで開いてみると、headerとfooterのテンプレートがちゃんと読み込めているのが確認できます。
▼コンパイル後のHTML
lesson3 : YAML front matterでページ固有の変数を定義してみよう
▼コンパイル前のHTML
YAML front matterは、そのページ内だけに有効な変数を利用することが可能となります。
hbsファイルに好きな変数を書き、Gruntfile.jsにタスク追加、定義を行い、コンパイルすると、YAML front matterがちゃんと読み込めているのが確認できます。
▼コンパイル後のHTML
lesson4 : helperのisを使ってみよう
続いては、assembleにあるhelperのisについてです。簡単に言うとif文とほぼ同じように使うことができ、「 A is B : A = B 」で、イコール（=）の場合trueになります。
▼コンパイル前のHTML
hbsに好きな変数と条件分岐を追加し、Gruntfile.jsにタスクを追加、タスク定義を行いコンパイルしてみると新しくHTMLファイルが生成されます。変数名gameが"FFRK"の場合、上のpタグ（ファイナルファンタジー…）の内容が表示されます。
lesson5 : layoutsで共通のレイアウトを定義してみよう
続いては、layoutsオプションを使ってbodyもテンプレートから切り出し、任意のファイルで読み込む方法についてです。hbsファイルに新たにbody変数を追加し、body変数に表示するために新規のbody.hbsテンプレート（テンプレート名は自由）を作成します。 Gruntfile.jsに、layoutsオプションでbody変数が書かれたテンプレートのパスを指定し、タスク追加、定義をするとbody変数がちゃんと読み込めているのが確認できます。
lesson6 : GitHub Pagesを使って静的なサイトを公開してみる
最後のハンズオンは、GitHubにログインし、New repositoryを作成するところから、公開されるところまでを体験しました。GitHub Pagesとは、静的サイトのファイルをGitHubで管理して、GitHubのリポジトリへプッシュすれば公開できるというものです。
まずは、GitHubにログインし、New repositoryを作ります。
Repository name（assemble_test）を決めてCreate repositoryを押します。
git cloneする前に任意のフォルダを作ってcdで移動し、コマンドを使ってローカルにクローンします。cloneしたフォルダへ移動し、assemble_masrerのファイルをgit cloneしたフォルダassemble_testに移動orコピペします。masterブランチにassemble_testのあるディレクトリでコマンド実行します。
すると、GitHubに反映されます。
さらに、画面確認なども行い、ハンズオンは終了となりました。途中でつまづいてもDeNAの皆さんがサポートしてくれるので、安心してワークができた参加者が多かったようです。
DeNAフロントエンドエンジニアの開発環境
続いては、DeNA竹口茂樹さんから、「DeNAで働くって？」をテーマに、フロントエンドエンジニアがよく使う開発ツールやフレームワーク、社内の開発体制などについて紹介がありました。
DeNAでは大きく「ゲーム」「非ゲーム」「EC事業部」などの部署に分かれています。
職能的には主に、以下のようなスキルを活用します。ほぼ全員がJavaScriptを使いこなし、UIのアニメーションなどの技術も駆使。技術スキルをさらに向上するために、社内では勉強会も積極的に行われているそうです。
● HTML＋CSS＋JavaScript
● PC、タブレット、スマホ、ガラケー
● ブラウザ、スマホアプリのWebView
開発環境はほぼ全員がMacを使っており、エディタはSublime Textを使うことが多いのですが、最近ではAtom、Visial Studio Codeも増えてきているとのことです。また、GitHub、Photoshop、Sketch3、Wikiなども活用されています。
使っているフロントエンド技術を以下のように挙げていただきました。
● HTMLはテンプレートエンジンを使うことが多い
SGではXlateが多い。サービスはhamiなども使っている
● CSSは、Sass（Scss記法）、Compass、cssnext
● JavaScriptはCofeeScript、TypeScriptを使うプロジェクトもある
フレームワークはjQueryからBackbone.js、Angular、Vue.jsなど
プロジェクトごとに選定している
● その他にはGrunt、Gulp、webpackなどをプロジェクトに応じて選定
コミュニケーションはSlackが中心で、Wikiでドキュメント化する文化や、GitHubのプルリクエストでコードレビューをしているそうです。さらに使っているフロントエンド技術や勉強会などについての紹介がありました。
「エンジニア×派遣」のメリットとは
最後に、ITSTAFFINGを運営しているリクルートスタッフィングによる「エンジニア×派遣」と題したライトニングトークを実施。実際にリクルートスタッフィングに登録し、派遣エンジニアとして働くスタッフの声として、エンジニア職で派遣スタッフとして働く理由を紹介しました。
１．働いた時間の分、きっちりもらえる
派遣スタッフの給与は時給制なのですが、きちんと労務管理がされていて、労働時間に合わせて給与が支払われます。
２．大手企業の案件も選ぶことができる
大手企業で働くことが出来るポジションも多く、その時々の自分の希望や方向性に合わせてチャレンジできます。
３．自分の時間が作りやすい、自由なスタイルで働ける
残業なし、時短、週４日など、自分の時間と両立した働き方が実現できます。
ITスタッフィングでは、自宅でも派遣登録が完了するオンライン登録ができ、また、お仕事をお探しの際には職種専門コーディネーター（仕事紹介担当）にメールもしくはお電話にて相談することも可能です。
ぜひ次回のセミナーにご参加いただき、実際にフロントエンドエンジニアとしてご活躍されている方の生の話を聞くことで ご自分のさらなるスキルアップに繋げてみてはいかがでしょうか？
▼派遣登録をご検討される方は、２つの登録方法があります！
オンライン登録／来社登録 ご自分にあった登録方法をどちらかお選びください。
（執筆：馬場美由紀 撮影：延原優樹）
