VagrantとDockerを使用した開発環境構築

こんにちは、インフラエンジニアのトシです。

先日、とあるプロジェクトの開発環境をVirtualBoxのイメージ配布からVagrant + Dockerへ移行しました。そこで、今回はその内容を紹介いたします。

経緯などの説明に入る前に、VagrantとDockerについて簡単に説明しましょう。

Vagrantは仮想開発環境を簡単に構築・共有するためのソフトウェアで、
DockerはNginxやMySQLなどのサーバーソフトウェアを簡単に立ち上げることができるソフトウェアです。

<続きを読む>

今後の連載予定について〜予告!

フロントエンドエンジニアへの道:完結しました。

第2回
CSS規約(FLOCSS+α)、Sassについて
– FLOCSSをベースとした構成 (ディレクトリ、ファイル構成)
– 命名規約 (BEMを拡張した話、シングルクラス)
– プロパティの宣言順 (csscombでルールを定義して自動で並べ替え・フォーマットする話)
– 蛇足でエディタの話 atom, vscode, webstorm, netbeans
– エンジニアとデザイナーの思考の違い (少し脱線するが、非エンジニアにFLOCSSのオブジェクト指向(プログラム寄り)を理解してもらい、コーディングしてもらう話)
第2回は 6/26 (月) に公開予定です。ご期待ください。

第3回
Sassコーディングを行なう上で必要となる各種自動化の話
– タスクランナーgulp(概要説明)
– Sassコンパイル(変更を検知して自動コンパイル、ベンダープレフィックス、minify)
– ブラウザへの反映(browser-syncの話)
第3回は 7/10 (月) に公開予定です。ご期待ください。

第4回
Angular1 基本編
– はじめに(Angular2, Angular4がリリースされたのにAngular1を使っている経緯。Angular2への移行を見送った話)
– TypeScriptでコーディングする(静的型付けの重要性)
– TypeScriptの型定義ファイルについて(@typesパッケージを使用。@typeで提供されていないモジュールや自作した型定義についてはtypingsを使用)
– ライブラリーについて(jQueryとの共存)(基本はnpmリポジトリを使用。npmに存在せずbowerにのみ存在する場合のみbowerを使用)
– ディレクトリー構成(サンプル紹介)
– 自動コンパイルについて(gulpタスクの紹介)
– minify対策について(対策しないとエラーになる話)

第5回
Angular1 設計編
– コンポーネント指向設計について(Angular1からAngular2への移行を視野に入れコンポーネントを使っている話)
– ライブラリーの機能はwrapして使うべし($httpのカプセル化、$scope.$broadcast()のカプセル化など)
– 環境固有の設定について(サンプル紹介)
– バリデーション(入力チェック)について(サンプル紹介)

第6回
Angular1 Tips編
– URLによる二重クリック対策(サンプル紹介)
– ネットワークオフライン検知について(サンプル紹介)
– $scope.$watch() や $scope.$on() でイベントのリスナーを登録する際の注意事項(監視が不要になった時点でリスナーを解除する必要がある)
– jQueryによるDOMの変更をAngular側へ通知する(trigger(‘change’)のイベントを使用すること。trigger(‘input’)はIEで動作しない)
– ng-repeat でユニークキー重複エラー(Angularが生成するhash keyが重複するケースがある)