【派遣ウェブクリエイター専用】勇者印の常駐開始時の制作環境構築 ver.2017(フロントエンド面が中心の記事です)

ご挨拶

はじめまして、フロントエンジニアの勇者あらかーです。
「ん?自分で勇者とか言っててやばい人だこの人...。」
って思った方いらっしゃいましたら、そっとブラウザを閉じてください。

冗談(本人は大真面目ですが)はさて置き、私、常駐型という働き方でウェブ制作を行なっている者です。
常駐型とは契約内容・期間に応じて相手企業様の職場で業務を遂行するワークスタイルで、派遣社員や業務委託(準委任契約)など色々な呼び名があったりします。

そのワークスタイル故に、常駐先が変わればその都度自身の制作環境を構築しなければなりません。
当記事は、毎回ゼロから作るのは面倒臭い非効率なのでルーチン化する為の自身の為の備忘・TODOリストになります。※Mac前提です。
ただし、技術の変化が激しい業界ですので、ずっと同じルーチンで行うのはお勧めしませんのであしからず。

アカウント作成

どの企業様に行っても必ずあるはずです。ただし、ルールの厳しさは場所によって大きく異なります。
主なアカウント作成は以下になります。

  • github ※企業によってはgithub enterprizeの可能性もあり
  • Adobe Creative Cloud
  • JIRA(Atlassian),Backlogなどのタスク管理ツール
  • Slackなどのコミュニケーションツール

これらを導入する時には必ずメールアドレスが必要になりますが、気をつけなくてはならないのがどのメールアドレスを使うのかを確認することです。常駐先(派遣先)で付与されたもの・会社(派遣元)から付与されたもの・個人のものなど企業によって大きく異なります。
企業によっては、権限窓口(システム)に申請・承認を通さなければアカウント作成してはならない・そもそも出来ない場合もありますので十分に注意してください。

PCの暗号化

参考URL
MacOSに搭載されているディスク暗号化機能です。起動ディスク上の情報への不正アクセスを阻止します。

  • FileVaultで暗号化する

おそらくですが、常駐先企業様の情報システム部が実施して頂ける流れだと思います。
充電ケーブル接続必須の完了するまで結構時間を要します。

公開鍵・秘密鍵の作成・登録

参考URL①
参考URL②

作成した公開鍵はどの常駐先でもgithubには登録することになるかと思いますが、常駐先サーバーに公開認証してアクセスする場合は公開鍵ファイルをサーバーに置く必要があります。
生成時にパスフレーズを設定しますが、常駐先によっては数ヶ月単位で変更指示がありますので忘れないようにしてください。

  • ターミナルを起動して作成
    • rsa形式の鍵を作成 ssh-keygen -t rsa
  • 作成される場所が表示されるので、問題なければEnter
  • パスフレーズを設定 ※2回求められます
  • 生成完了

格納場所(デフォルト) -> /Users/(ユーザー名)/.ssh/
秘密鍵 -> id_rsa -> クライアントPCに配置
公開鍵 -> id_rsa.pub -> 接続対象サーバーに登録


  • サーバーに公開鍵を設置
    • 設置方法は常駐先によって様々なので、都度確認する

環境構築

これも企業によってはセキュリティ観点でインストール不可があったりするので、事前に確認をしてください。

Node.jsのバージョン管理とインストール

参考URL

  • nodebrewのインストールと設定

    • Node.jsのバージョンを管理するツールであるnodebrewをインストールします。 curl -L git.io/nodebrew | perl - setup
  • .bash_profileを作成する

    • ホームディレクトリに移動 cd
    • ファイルを表示 ls -la
    • .bash_profileがないので作成 touch .bash_profile
    • 確認 ls -la ※.bash_profileファイルがあったらOK
  • .bash_profileを「テキストエディット.app」で開いて、以下2行の内容を書き込みます。 -> 「パスを通す」とかよく言います。

    • export PATH=/usr/local:$PATH
    • export PATH=$HOME/.nodebrew/current/bin:$PATH
  • .bash_profileを再読み込みします。 source ~/.bash_profile


  • Node.jsのインストール

    • 使用できるNode.jsのバージョンを確認 nodebrew ls-remote
  • Node.jsのバージョンが表示される。

  • 任意のバージョンをインストール ※バージョンが異なるとclone時にエラーになるので確認必須 nodebrew install-binary v0.10.38 ※v0.10.38はあくまで例です

  • インストールしたNode.jsをMacで利用できるようにする。 nodebrew use v0.10.38 ※v0.10.38はあくまで例です(2回目)

  • Node.jsのバージョンを確認 node -v


  • npmのアップデート ※Node.jsと一緒にインストールされるが最新とは限らない為
    • 現在のnpmのバージョンを確認 npm --version
    • npmのアップデート ※最新またはバージョン指定か確認 npm update -g npm

Atomのインストールとパッケージインストール

公式URL

  • Atomのインストール ※2017/12/1の段階で推奨
    • 公式URLからインストールしてください。

  • パッケージインストール ※任意で行なってください
    • 画面左上のメニューから[File]→[Settings]を選択する
    • 画面右側に「Settings」タブが表示される
    • 「Settings」タブの[+Install]を選択する

以下、私がインストールしたパッケージになります。ご参考まで。
○推奨 △出来たら

○Japanese-menu -> 日本語化
○auto-encording -> 文字コード自動判別
○autocomplete-plus -> HTMLタグ・CSSプロパティなどの自動保管
○autocomplete-sass -> sassファイル内でスタイルのオートコンプリートを追加してくれる
○autocomplete-paths -> オートコンプリートにプロジェクト内のファイルパスを追加してくれる
○highlight-selected -> 選択したテキストが同じファイル内に有る時にそれらをハイライトしてくれる
○pigments -> カラーコードをハイライトしてくれる
○color-picker -> カラーピッカー機能を追加
○show-ideographic-space -> 全角スペースのハイライトしてくれる
○platformio-ide-terminal -> Atom上でターミナルが開ける
○terminal-plus -> Atom上でターミナルが開ける
○git-plus -> git操作が楽になる。 ※登録されているコマンドしか打てない
△git-log -> gitのコミット履歴が見れるようにする
△tree-view-git-branch -> branchをatom上で見れて変更も出来る
△marge-conflict -> コンフリクトが起こったときに解消しやすくしてくれる
△Linter -> 画面下部にリアルタイムで表示される ※言語に対するプラグインを別途入れる必要がある。
△Minifier -> jsとcssのminifyが出来るようになる ※タスクランナーに入っているなら不要。
△autoprefixer -> ブラウザ指定で自動でプレフィックスをつけてくれる ※タスクランナーに入っているなら不要

  • 環境設定の確認
    • 文字コード
    • インデント
    • タブ

ステージング環境の確認

  • host設定 ※そもそも入る必要が無い場合もあります
    • プロジェクトによってIPアドレスがあるはず

git・github・GUI(source tree)

  • GUIのインストール ※使わなければ無しでOK
  • git commandの確認 ※今までGUI操作が主だったので
  • branchの命名規則・ルール・運用の確認 ※大抵git flowからの派生系です。
  • fork -> upsteram -> commit(push) -> pull request(upstreamに対して) -> merge までの流れの確認 ※fork禁止の企業もあります。常駐先次第です。
  • コメントの書き方・ルールの確認

css設計・scss記法の確認

css設計はBEM・OOCSS・SMACSS・FLOCSSなどが2017年現在ではよく採用されています。多くの設計方法を知っている事も大事ですが、「法則性を早い段階で理解して対応出来る力」「プロジェクトの内容に適した設計を選ぶ力」が特に大事だと私は思ってます。

  • css設計に何を採用しているか?どういう派生のさせ方をしているか?
  • 命名規則の確認
  • scss記法のルール・推奨記述の確認 (ネスト,プレースホルダーセレクタ,変数,@extend @mixin)
  • プレフィックスの確認 (js-hoge,is-hoge)
  • プロパティの順序

gulp

gulpとはタスクランナーです。コーディングなどの作業を一部自動化します。
常駐型の場合、プロジェクトに途中からアサインすることがほとんどですので、基本的にリポジトリをcloneしたら、npm installすればpackage.jsonの内容が自動でインストールされるはずなので、心配しなくて大丈夫です。
ただし、初期設定ではグローバルでgulpをインストールする必要があります。
npm -g install gulp

webpack

webpackとはモジュールバンドラーです。複数のモジュールを1つにまとめたファイルを出力するツールのこと。
これもリポジトリをcloneしたら自動でインストールされるはずなので、心配しなくていいです。

React.js

React.jsとはUIのパーツ(構成部品)を作るためのライブラリです。
M-V-C(M-V-MV)で言うところのViewの一部の機能を提供するライブラリ(コンポーネント=UIの部品)です。

  • class(css)の書き方に癖があるので確認
  • チュートリアルを再度やる

sc5-styleguide

参考URL

sc5-styleguideとはスタイルガイド作成ツールでangularJSで作られたSPA(シングルページアプリケーション)です。CSS設計の意図などを簡単にドキュメント化することが出来ます。

  • マークダウン記法の確認 ※overview.mdがインデックスファイルになる
  • KSS記法(scssのコメントの書き方)の確認
  • チュートリアルをやってみる

グラフィックアプリケーション

  • illustrator -> 環境設定・ショートカット
  • photoshop -> 環境設定・ショートカット
  • scketch

おわりに

常駐後、タスクへのアサインがスムーズなように前始末をしておくことをお勧めします。
ルーチン化は後々楽ですが、技術のトレンドが激しい業界ですので、常に情報をキャッチしドキュメント化しておくこともお勧めします。