React開発時の汎用的なGitpod環境設定

• 開発時に、オンラインエディタであるGitpodを利用する機会があります。
• 同様の技術利用が多いため、環境テンプレートを作成する必要があります。
• 今回はReactを利用した開発においてのGitpod設定を記述します。
• ※Gitpodの概要や利用方法に関しては、こちら

前提

• Reactプロジェクトの準備
  • 試用の場合、create-react-app等で準備
  • ※npmプロジェクトであれば基本可

結果

• 先にGitpod設定ファイルである、.gifpod.ymlの記述を示します。

tasks:
  - init: npm ci
    command: npm start

ports:
  - port: 3000
    onOpen: open-preview

github:
  prebuilds:
    addComment: true
    addBadge: true

vscode:
  extensions:
    - dbaeumer.vscode-eslint@2.1.8:02aHhbJ0Q4aGdjHXlTdVKg==
    - esbenp.prettier-vscode@5.7.1:GDba64T6G+TUi1qmc6BE3A==
    - dsznajder.es7-react-js-snippets@3.0.0:9YEGn/57fW8lJt7cVxJQDQ==

• 以下、実際のGitpodでの開発画面。

内容

• 上記の結果は、主に以下を設定した開発環境を用意するための記述です。
  • 環境構築時の自動コマンド指定
  • 自動プレビュー
  • 起動速度の短縮
  • vscode拡張機能の自動追加

起動コマンド指定

• .gitpod.ymlでは、tasksで環境構築時の自動コマンド指定が可能です。
• そのため、React開発時に必要な以下を設定します。
  • 依存関係インストール
    • init(新規作成時のみ実行)プロパティで設定
      • ※再起動やスナップショット時は行われない
  • 開発サーバー起動
    • command(開始時に毎回実行)プロパティで設定

自動プレビュー

• .gitpod.ymlでは、portsサーバー動作設定が可能です。
• タブ抑止のため、open-previewでエディタ画面内にプレビューの表示を行います。

起動速度の短縮

• オンラインエディタでは、起動速度が遅い場合があります。
• Gitpodでは、Githubアプリ連携によるプレビルド機能により大幅な解消が可能です。
  • ※基本デフォルトで十分のため、githubで連携するのみで記述は必須では無い。
  • ※拡張の場合のみ、prebuildsプロパティを記述

vscode拡張機能の自動追加

• .gitpod.ymlでは、VSCode拡張機能も管理・共有することが可能です。
• extensionsプロパティで、React開発に最低限必要な以下を設定します。
  • eslint
  • prettier

まとめ

• 上記のことから、オンライン開発環境における最低限の定型化と良質な開発性の重要性を実感。

参考

• Gitpodドキュメント