HTML/CSSコードを
効率化・高速化・最適化
DI-CODING®（ディーアイ・コーディング）は、
Webコーディングを効率化するメソッドです。
DI-KIT（ディーアイ・キット）の併用で、
最大50%の工数削減を実現します。
短期間で学べて
すぐに役立つ
完全無料
商用利用OK
Webコーディングを
シンプルかつ安全に
DI-CODINGは、Webコーディングの生産性を向上させることを目的に開発されたコーディングメソッドです。
プログラミングにおけるDI、つまり「Dependency（依存性） Injection（注入）」になぞらえて、あらかじめ用意されたコードに後からデザインを注入する「Design（デザイン）Injection（注入）」という考え方に基づいて「DI-CODING」と名付けました。
DI-CODINGは、Webページを個別のコンポーネント（部品）に分け、各コンポーネント内でCSSの影響範囲を制限することで、従来のCSSフレームワークにおける複雑な依存関係をシンプルにします。
これによって、コーダーが理解しなければならないコード範囲が縮小され、コーディングの労力とテスト時間が短縮されるだけでなく、メンテナンスや引継ぎ作業が容易になります。
Webサイトの構成要素である「部品」は、実際にはある程度パターン化されており、コードの再利用によってコーディング時間を短縮しつつ、多様なデザインに対応できます。
エンジニアとデザイナーのシームレスなコミュニケーションを促進し、お互いの専門知識を共有しやすくすることで、協力的なチームワークを形成します。
ほんの少しのルールだけ！
簡単に習得できます
DI-CODINGは、初級者でも理解しやすく、短期間で学べるコーディングメソッドです。
いちど理解してしまえば、様々な制約のある状況でも活用することができる柔軟な概念になっています。
コンポーネント単位でCSSの影響範囲が限定されるため、コードがシンプルで再利用性が高く、メンテナンスも簡単です。
DI-CODINGが提供するのは概念に留まるため、コンポーネントに対応する具体的なCSSコード管理を委ねられると、コーディング初級者は不安に感じるかもしれません。
その場合はDI-KITを使うことでCSSの管理や再利用性をさらに向上させることができます。
DI-KITの利用で
最大の効率を実現
DI-KITは、JavaScriptフレームワークであるNuxtをベースにしたコーディングスターターキットとなっており、DI-CODINGでは概念のみで具体的に言及していないCSS管理について「単一ファイルコンポーネント」という機能を提供します。
DI-KITを利用することで、コンポーネントの再利用性をさらに高められるほか、NuxtやVue.jsのプラグインとして提供されている様々な機能を追加することができます。
DI-KITがNuxtをベースにしていることにはいくつかのメリットがあります。
Nuxt自体もVue.jsをベースにしているため、Vue.jsに慣れている開発者にとっては低い学習コストで自由なカスタマイズが可能です。
また、NuxtはVue.jsの機能を拡張した静的サイトジェネレーターで、SSR（サーバーサイドレンダリング）に対応しているため、高速なページロードやSEOに優れています。
基盤からオリジナルにすることにこだわらず、普及したフレームワークを活用することで、VueやNuxtに慣れ親しんだエンジニアの学習コスト低減や開発効率の向上、初級者でも恩恵を受けられる高速なページロードやSEO対策の実現など、多くのメリットがあります。
もちろんVue.jsを理解していなくてもDI-KITを使ってサイト制作することは可能です。
