フロントエンド開発ガイドライン

この文書では、GitLabのフロントエンドチーム全体の一貫性と品質を保証するための様々なガイドラインについて説明します。

概要

GitLab はHamlを使って Ruby on Railsの上に構築されており、Vue.jsを使って JavaScript ベースのフロントエンドも構築されています。Hamlit を使うことによる制限に注意してください。 また、SCSSとプレーン JavaScript を使っており、Babel を使って最新の ECMAScript 標準をサポートし、webpack を使ってES モジュールをサポートしています。

フロントエンドアセットを使用するには、Node (v10.13.0以上)とYarn (v1.10.0以上)が必要です。 これらのインストール方法については、インストールガイドをご覧ください。

ブラウザサポート

現在サポートされているブラウザについては、要件を参照してください。

BrowserStackを使用して、サポートされているブラウザでテストします。 GitLabの共有1PasswordアカウントのEngineeringvaultに保存された認証情報でBrowserStackにサインインします。

取り組み

現在のハイレベルなフロントエンドの目標は、フロントエンドエピックに掲載されています。

原則

GitLabに貢献するためのハイレベルなガイドライン。

開発プロセス

フロントエンドの仕事をどのように計画し、実行するか。

アーキテクチャ

GitLabのフロントエンドチームにおける基本的なデザインの決定や、フロントエンド開発ガイドラインの変更について。

テスト

どのようにフロントエンドのテストを書き、GitLabテストスイートを実行し、テストに関連するイシューをデバッグするか。

パジャマデザインシステム

再利用可能なコンポーネントの技術的および使用ガイドラインは、パジャマデザインシステムでご覧いただけます。

デザインパターン

GitLabのコードベースによくあるJavaScriptのデザインパターン。

Vue.jsのベストプラクティス

Vue特有のデザインパターンとプラクティス

Vuex

Vuex特有のデザインパターンとプラクティス

Axios

アクシオス特有の慣行とゲッチャ。

GraphQL

GraphQLの使い方。

アイコンとイラスト

アイコンとイラストにSVGを使う方法。

依存関係

フロントエンドの依存関係とその管理方法についての一般的な情報です。

フロントエンドFAQ

フロントエンドのFAQを読むと、よくある小さなお役立ち情報が載っています。

スタイルガイド

私たちのガイドラインやリンティングに関する情報については、関連するスタイルガイドを参照してください：

  • Airbnbのスタイルガイドをベースに、若干の変更を加えています。
  • SCSS:scss-lintを通して強制される私たちのSCSS規約。
  • HTML：他のコードベースと一貫性のあるHTMLコードを書くためのガイドライン。
  • Vueコードのガイドラインと規約はこちらをご覧ください。

ツーリング

私たちのコードは、私たちのガイドラインに従うようにPrettierで自動的にフォーマットされます。 詳細については、ツーリングガイドをお読みください。

パフォーマンス

フロントエンドのパフォーマンスを監視し、最大化するためのベストプラクティス。

セキュリティ

フロントエンドセキュリティの実践。

アクセシビリティ

アクセシビリティの基準とリソース

国際化（i18n）と翻訳

フロントエンドの国際化サポートはこのドキュメントで説明されます。ガイドの外部化パートでは、利用可能なヘルパー/メソッドについて説明します。