コーディング仕様¶

使用言語¶

ベースはHTMLとCSS、JavaScriptを使用します。
サーバーサイドの値を出力するのに Liquid を使用します。
Liquidは必須で頻繁に使いますが、アサイン時に経験がなくても問題ありません。
案件をこなしながら覚えていきます。

SASSは使用していません。ただ、ご自身のローカル環境で使用いただくことは問題ありません。

ecforce本体とは別のアンケートアプリ「ecforce profile」ではThymeleafを使用します。
ただこちらはLiquidほど必須ではありません。

リセットCSS¶

ecforceのデフォルトテーマでセットされているため、記述は不要です。

/ec_force/assets/bundle.css 423-549行目

jQuery¶

ecforceのデフォルトテーマでセットされているため、読み込みは不要です。

/ec_force/assets/bundle.js

リファレンス¶

ecforceのガイドページなど役に立つリンクを掲載します。

テーマガイド

各テンプレートで使用できる変数

Liquid reference

また、ChatGPTは積極的に活用していきましょう。

ルール¶

1. クラス名の命名規則¶

特にルールは定めていませんので、ご自由に決めていただいて構いません。
ただ、ページ内での規則性は持たせてください。自分以外のコーダーが保守することを想定し、理解しやすいクラス名を心がけてください。

ecforce本体はFLOCSS + BEMを採用しており、この命名規則を理解していると構造が理解しやすくなります。

FLOCSSとBEMについての大まかな説明はこちらから。

2. バックアップ¶

先述の通り、バージョン管理ツールが無いため、作業時は必ずバックアップを取ってください。
修正する前のコードをコピーし、修正前ファイルとして保存しておいてください。
また修正後のファイルも必要になる場合があるため、保管していただきますようお願いいたします。
実際に過去に修正ミスにより、すぐバックアップのデータに戻す必要があったり、別作業者の手違いにより修正後のファイルが必要になるケースが発生しています。