ビルド環境で使える、Vue 3の機能
- カテゴリー
- JavaScript >
- Vue.js
Vue 3には、ビルドシステムを前提とした機能がいくつかあります。これらについて、ビルドシステムの導入の手引も兼ね、解説していきます。
最終回 CSSのカプセル化モードに最適化した命名規則（後編）
CSSのカプセル化機能を補完するために考えた命名規則を、Scoped CSSとCSS Modulesに適用し、さらなる最適化を図ります。規則の伝達性とコードの見やすさ、それぞれに比重をおいたときの命名規則も考えてみましょう。
第9回 CSSのカプセル化モードに最適化した命名規則（前編）
CSSのカプセル化機能を安全に使うために、CSS設計の命名規則を導入してみましょう。また、Vueとの併用により、従来感じていたCSS設計のどのような課題が解決され、命名規則のどのような最適化が可能なのかを考えてみましょう。
第8回 CSSのカプセル化モードの仕組みと適切な使い方（後編）
Scoped CSSとCSS Modulesの、それぞれの仕組みにより適したスタイルの定義の方法を見てみます。両モードのカプセル化の有効性を検証しながら考えてみましょう。
第7回 CSSのカプセル化モードの仕組みと適切な使い方（前編）
Viteにより生成されたVueプロジェクトで標準サポートされている2つのカプセル化モード、Scoped CSSとCSS Modulesについて解説します。まず、その2つのカプセル化モードの違いを見てみましょう。
第6回 Vue 3のTypeScript向けの機能（後編）
TypeScriptに最適化されたVue 3では、JavaScriptと変わらないコードで型サポートを受けられます。しかし、より柔軟に要件に応えつつ型の利点を活かすには、明示的な型宣言が必要になります。TypeScriptの構文を使ったその方法を見てみましょう。
第5回 Vue 3のTypeScript向けの機能（前編）
Vue 3は、TypaScriptへの対応が進んでいます。前編と後編に分けて、TypeScriptによるVueアプリケーション開発の手引きを解説していきます。
第4回 scriptブロックのsetup属性の指定で実装するコンポーネント
scriptブロックにsetup属性を指定することで、コンポーネントをより簡潔なコードで実装できます。具体的な実装方法とその注意点を見てみましょう。
第3回 SFC構文の仕様
SFC構文の詳細な仕様を理解することは、SFCの柔軟性や制約を知ることにつながります。SFCを採用してコンポーネントを量産する前に、これらのことを知っておきましょう。
第2回 ビルド環境下の実装構成とSFCの導入準備
ビルドシステムを使ったVueでのアプリケーションの全体構成を見ながら、概要を掴んでみましょう。また、ビルドシステムを用いたVueのプロジェクトでは独自構文のSFCを採用するのが一般的ですので、これを使うメリットを確認し、環境を整えていきます。
第1回 Vue 3と始めるビルドシステム
ビルドシステムを前提とした、Vue 3の機能を解説します。まずはなぜビルドシステムが必要か、Viteが提供するビルド環境を利用しながら理解していきましょう。