DI-KITについて

DI-KITは、DI-CODINGのコンセプトに基づいて、HTMLとCSSを複数サイトのコーディングで再利用できるようにした「コーディングスターターキット」です。

DI-KITをご自分で作成したい場合、DI-CODINGの考え方が実現できるのであれば、フレームワークやジェネレータなどは自由に選択できます。
そもそもそういった仕組みすら使わなくても問題ないのですが、オフィシャルなDI-KITではNuxtを利用しています。

NuxtはVue.jsをベースにしたJavaScriptフレームワークです。
Nuxtを採用した理由は、Vue.jsがDI-CODINGとの親和性が非常に高い「単一ファイルコンポーネント」という機能を備えているためです。

この機能により、DI-CODINGに基づいたコードを一貫して維持しやすくなり、新しいチームメンバーでもDI-CODINGの考え方が理解しやすくなりました。

Nuxtは非常に懐の広いフレームワークなので、静的サイトジェネレータとして単純なコーディングに使えるほか、本格的なシングルページアプリケーション開発にも利用できます。
そのため、Nuxtで作成したDI-KITは、チームのスキルレベルやプロジェクトの要件に応じた使い方ができるようになるのです。

単一ファイルコンポーネントについて

Vue.jsの単一ファイルコンポーネントは、1つのファイルにHTML・CSS・JavaScriptのコードをまとめて書くことができ、DI-CODINGのコンセプトと同じくCSSの影響範囲をコンポーネント内だけに制限する仕様になっています。
（CSSをSassなどのメタ言語で記述することも可能です）

1つのファイルにコンポーネント固有のコードをまとめて書いてしまえるので、コードの再利用がしやすく、コンポーネントを撤去する際、不要になるコードを安全に削除できるのが特徴です。

コンポーネントファイルをDI-KITとして作り置きしていても、そのコンポーネントファイルを使っているページがなければ、公開されるサーバ上に不要なファイルが含まれることはありません。

こういった点もコードの再利用がしやすくなる理由のひとつです。

DI-CODINGの考え方を実現するために、この機能が必要というわけではありませんが、単一ファイルコンポーネントが使えると、より安全にコードの再利用ができるようになります。

オフィシャルDI-KITは静的サイトジェネレータとしての側面が強くなっていますが、前述の通りシングルページアプリケーションの開発にもご利用いただけます。

しかしながらPHPフレームワークなど、サーバサイドスクリプトを用いるシステムのフロント画面制作にはお使いいただけません。

またECショッピングモールでショップページを作成する場合や、WordPressのテーマ開発でも、お使いいただくのは難しいでしょう。

こういった場合は、それぞれの環境やフレームワークに応じたDI-KITを独自に作成するか、DI-CODINGの考え方に基づきながら都度コーディングしてください。

原則としてjQueryの利用は避け、Vue.jsおよびNuxtで用意されている各種プラグインやコンポーネントを利用してください。
どうしてもjQueryが必要な場合、以下の手順で利用可能です。

jQuery本体と利用したいjQueryプラグインをnpm installします。
以下の例ではjqueryが本体、jquery-zoomが利用したいプラグインです。

さらにTypeScript用にjQueryの型定義をnpm installします。

nuxt.config.js内のbuild:{}内に、以下を参考に追記します。
（build:{}内に他の記述がある場合は削除せず組み込んでください）

tsconfig.json内の"types": []内に、以下を参考に追記します。
（types:[]内に他の記述がある場合は削除せず組み込んでください）

jQueryプラグインを利用したコンポーネントファイル（.vueファイル）内で、HTMLのscript要素先頭部分で以下のように記述して利用したいjQueryプラグインを読み込みます。

続いて以下のように、実行するコードをmounted()内に記述します。