1. 開発環境

1.1. 開発環境の整備

エクメルンではフロントエンド、サーバサイドが独立して開発できるようにそれぞれの開発環境を用意しました。この章では各環境の特徴と構築のポイントについて紹介します。

1.1.1. フロントエンド用の開発環境

開発環境用のサーバとしてwebpack-dev-serverを使用し、HTML, CSS, JavaScriptだけで動作確認できる環境を構築しました。

特徴
  • サーバサイドとは疎結合サーバサイド側の実装状況に左右されることなくフロントエンドの開発に専念できる。
  • webpack-dev-serverの標準機能が便利(live-reloadなど) ファイル編集時に自動コンパイル & ブラウザ自動更新がされるため動作確認も楽に。
  • 素早く開発が始めれる webpack-dev-server起動ですぐにフロントエンドの開発ができるように。
関連ライブラリ
  • webpack-dev-server
    ローカルマシン上で動く簡易サーバ。
    live-reload機能があるため、ファイル更新後にすぐブラウザで確認できる。プロキシ機能を使うことで、API通信時にはモック用のサーバへの接続することも可能。

1.1.2. サーバサイド用の開発環境

Ruby on Railsを使いフレームワークに則った開発環境にしています。フロントエンドとの結合はタスクランナーのgulpを使い以下の手順で動作確認ができるようにしました。

  1. gulpコマンドでフロントエンドのコードをコンパイル。
  2. railsコマンドでローカルサーバを起動して動作確認。
特徴
  • APIの動作確認はフロントエンドのコード不要サーバ側実装はAPIがメインとなるためAPIクライアントを使えばRailsだけでも動作確認可能。
  • 非同期処理(ワーカー)や外部サービス連携が必要な処理はgemなどのライブラリを活用 SQSやS3との連携は開発用ライブラリを使うことでローカルマシンのみでも動くようにした。
関連ライブラリ
  • fake_sqs
    AWS SQSの動作をローカルマシン上でエミュレートするgem
  • fake_s3
    AWS S3の動作をローカルマシン上でエミュレートするgem
  • DynamoDB ローカル
    AWS DynamoDBの動作をローカルマシン上でエミュレートするJavaアプリケーション。
  • localstack ローカルマシン上に必要なAWSサービスを準備できるライブラリ。
  • foreman
    複数プロセスを一括管理するgem。エクメルンではWebサーバ、ワーカープロセスの起動、停止をこのgemでまとめている。
  • Postman
    Google Chromeのアドオンとして提供されているアプリ。APIの開発に利用。 API動作確認だけでなく、ログイン、メール作成、メール変更、メール送信といったシナリオを作成して開発者間で共有することで、チーム全体の開発効率を向上。特徴:
    • HTTPリクエストを生成して送信できる
    • リクエストをコレクションとして管理できる
    • リクエストの履歴を保存して再利用できる
    • 復数の環境にすぐに切り替えられる
    • テストケースを書いてレスポンスの検証ができる

1.1.3. 各環境を用意するメリット、デメリット

メリット
  • 同時並行での開発がしやすい→ 疎結合な開発であればフロントエンド、サーバサイドが同時に開発を進めても問題が発生しにくい
  • デバッグしやすい→ 関連する要素が制限された状態で開発ができるため、エラー発生時に原因を特定しやすい
デメリット
  • 構築の手間がかかる→ 各環境ごとに構築する必要がある
  • 結合するまで潜在している問題が確認しにくい→ もし各環境で異なる認識をしたまま進めてしまうと結合時の手戻りが大きくなる

デメリットもありますが、開発の進めやすさを考えると各環境を用意することのメリットの方が大きいと思います。ある程度実装した段階で試験的に結合するフローを用意しておくことで、各環境での認識違いを早期発見&解消することもできます。(エクメルンでは開発中にサーバサイド、フロントエンド連携の実装に認識違いが生じていたことがあったが、早い段階で結合することで傷口が浅いうちにリカバリーできました)

1.1.4. その他開発環境構築のポイント

  • 環境の統一開発マシンはMac、エディタはRubyMine(サーバサイド用), Visual Studio Code(フロントエンド用)で統一エディタを統一することで共通のフォーマッタ機能が使えるなどの恩恵があった。
  • Browsersyncを活用した動作確認開発環境でもIEやスマホの動作確認ができる※ Browsersyncについては フロントエンド の章にて詳しく紹介。
  • 必要なミドルウエアやインストール手順、アプリ起動手順などの整備新しいメンバーがプロジェクトにジョインした際に参考になる
  • その他環境構築に役立つツール　　
    • rbenv, ndenv プロジェクトごとにRuby, Node.jsのバージョンを統一できる
    • dotenv
      開発環境用の環境変数設定が楽になる
    • Docker コンテナ上で動くようにして、環境を楽に構築できる

results matching ""

    No results matching ""