JS使用時のフロー
使用手順
STEP 01
2段階認証
JSを使用するとなった場合、まず担当ディレクターにJSの権限を解放して良いか確認を取る。
許可をもらったら、2段階認証でJSパーツの使用権限を解放する。
※パートナーや業務委託の方は、ベーシックへご依頼ください。
STEP 02
初期設定
下記ページに従ってJS使用時の初期設定を行う。
STEP 03
パーツ配置＆クラス付与
JSパーツ集の中から該当するパーツのページを参照して実装する。
■注意点
- JavaScriptのコードは変更しないでください。
コードに変更は加えずに、そのまま使用するようにお願いします。
CSSはデザインに合わせて自由に変更して構いません。
- JSパーツ集に掲載のある構成のままパーツ配置する
NG例）自動スクロールのアクセシビリティ対策用の停止ボタンを顧客要望でなく、制作者判断で外す。
- JavaScriptで操作するパーツのCSS記述箇所
各パーツのCSS・編集画面用CSSについては、カスタムCSS内に/*JS記述エリア*/を用意しているので、そちらに追加をしてください。
※編集画面用にも記述欄の用意があるので、パーツ毎にぞれぞれ適した場所に追加するようにお願いします。
- 公開ページでチェック
共有URL/プレビューと公開ページで挙動が変わる場合が稀にあります。
必ず公開ページで問題がないか最終的にチェックをするようにしてください。
STEP 04
STEP 05
ディレクター引き継ぎ
JSパーツ集にあるパーツを使用した場合、該当JSパーツページに記載している注意点/懸念点をよく読み、
案件のサイトチェックシートの引き継ぎ事項欄にも記入してディレクターによく伝える。
※他にも懸念事項や不具合が発生しそうな点があれば報告する。
注意点
jQueryを使用したスクリプトを複数使用する場合、jQueryの読み込みは一度のみとし、1つだけ共通フッターに設置するようにしてください。
jQueryが何回も呼ばれるのを避け、無駄な読み込みを減らすためです。（非常にサイトが重くなってしまう）
アップセルなどで既にjQueryが使用されている場合も、重複して読み込まないようにしてください。
複数のJSが入る場合はそれぞれJavaScript埋め込みパーツを配置し、スクリプトを個別に埋め込んでください。
スクリプトの管理が容易になり、必要に応じて特定のスクリプトの削除等がしやすくなります。
jQuery使用の際は「＄」ではなく、「jQuery」を使用
コンフリクトを回避するため通常「＄」で記述する箇所を「jQuery」に変更してください。
語尾にセミコロン【;】必須
通常はつけなくても動作しますが、ferretOneのJSではセミコロンがないと動作しない場合があります。
コメントアウトは /* 〇〇〇〇 */ で指定
※他者が見ても分かるように適宜コメントアウトを入れて下さい。
【//〇〇〇〇】で指定するとエラーが起きます。必ず上記の形で指定してください。
※ferretOneでは、JavaScriptコンパイル時にコードが一列になる為です。
ちらつき防止→「js-displayNone」
読み込み時に高さが出たりなど要素がちらつくのを防ぐ為、初期状態では要素を非表示「display: none;」にする事があります。その際、元々準備してあるクラス「.js-displayNone」を活用いただくと良いかと思います。
※非表示にした要素をJS側で表示「display: block;」させる記述は追加する必要があります。
console.logに出力・エラーを残さない
JS動作確認用に表示させていた文字列など、余計な出力・エラーが納品時に残らないようにしてください。
JSパーツ関連の無駄な余白を残さない
初期設定にもあるように、JavaScript埋め込みパーツにデフォルトでつく余白を消し忘れないようにしてください。
jQuery使用推奨
jQueryはエラーキャッチするのでエラーが出てもその後の処理が止まらないですが、JavaScriptはエラーキャッチ（例外処理）を自分で入れる必要があり、対策をしていないとお客様側で他のパーツを触ったりなどした場合に予期せぬエラーが起きるとその後の処理も止まってしまう恐れがあります。
※JavaScriptを使用した上でエラーキャッチを入れない場合、共通フッターではなく該当ページのセクション下に設置して他ページになるべく影響が出ないように工夫をしてください。
不具合・エラー
エラーあるある
- セミコロン抜け
- 遅延処理【setTimeout】すれば大体直る（HTMLより先にJSが走っている可能性が高い）
※記事リストパーツなどは読み込み時間がかかるため注意
よくある不具合
- Reactのレンダリングが通常のHTMLより遅いため、JavaScript埋め込みパーツの処理が先に走ってしまい動作しないことがあります。（※要素移動系【insertBefore】使用時など/記事リストスライダー...）
React18で正常に動かない件
- 最適な解決策は現状なし（React17にダウングレードすることのみ）
- 要素移動（insertBeforeなど）によってコンテンツモデルを無視した位置にHTMLを挿入することによって、NextJSからエラーが出る。そのエラーが出ることによって後続のJSパーツの記述が機能しなくなる。
- ferretOneのデフォルトの機能では再現できない無理やりな実装をしないことが一番の解決策。
（参考）
https://blog.ojisan.io/next-nest-ng/
© Basic Inc. All Rights Reserved.