Skip to content

Commit

Permalink
fix: lint (punctuation-mark)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ubugeeei
ubugeeei committed Sep 18, 2024
1 parent f81c165 commit 4a4556e
Show file tree
Hide file tree
Showing 45 changed files with 5,920 additions and 5,134 deletions.
3 changes: 3 additions & 0 deletions .textlintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"rules": {
"ja-space-between-half-and-full-width": {
"space": "always"
},
"prh": {
"rulePaths": ["rules/prh-punctuation-mark.yml"]
}
}
}
112 changes: 56 additions & 56 deletions book/online-book/src/00-introduction/010-about.md
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions book/online-book/src/00-introduction/020-what-is-vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

## Vue.js についてのおさらい

早速本題に入っていきましょう。
っとその前に改めて Vue.js についておさらいしておきます。
早速本題に入っていきましょう．
っとその前に改めて Vue.js についておさらいしておきます．

## Vue.js ってなんだっけ？

Vue.js とは「Web ユーザーインタフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク」です。
これは[公式ドキュメントのトップページ](https://ja.vuejs.org/)に掲げられているものです。
ここに関しては僕の解釈を入れるよりも公式の言葉をそのまま持ってくるのがわかりやすいと思うので以下に引用します。
Vue.js とは「Web ユーザーインタフェース構築のための，親しみやすく，パフォーマンスと汎用性の高いフレームワーク」です．
これは[公式ドキュメントのトップページ](https://ja.vuejs.org/)に掲げられているものです．
ここに関しては僕の解釈を入れるよりも公式の言葉をそのまま持ってくるのがわかりやすいと思うので以下に引用します．

> Vue (発音は /vjuː/、view と同様) は、ユーザーインタフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインタフェースの開発を効率的に支えるフレームワークです。
Expand Down Expand Up @@ -39,17 +39,17 @@ Vue.js とは「Web ユーザーインタフェース構築のための、親し
[引用元](https://ja.vuejs.org/guide/introduction.html#what-is-vue)
宣言的レンダリングやリアクティビティに関してはそれを説明するチャプターで詳しくやるので、ここではほんとに概要レベルの理解で問題ないです。
宣言的レンダリングやリアクティビティに関してはそれを説明するチャプターで詳しくやるので，ここではほんとに概要レベルの理解で問題ないです．
また、ここで「フレームワーク」という言葉が出てきていますが、Vue.js は「プログレッシブフレームワーク」を謳っています。
それについてもドキュメントの以下の部分を参照するのが最も端的で正確でわかりやすいと思います。
また，ここで「フレームワーク」という言葉が出てきていますが，Vue.js は「プログレッシブフレームワーク」を謳っています．
それについてもドキュメントの以下の部分を参照するのが最も端的で正確でわかりやすいと思います．
https://ja.vuejs.org/guide/introduction.html#the-progressive-framework
## 公式ドキュメントとこの本の違い
公式ドキュメントの方では、この次は「どうやって Vue.js を使うか」という点についてフォーカスし、チュートリアルやガイドが豊富に展開されています。
公式ドキュメントの方では，この次は「どうやって Vue.js を使うか」という点についてフォーカスし，チュートリアルやガイドが豊富に展開されています．
しかし、この本では少し切り口を変えて「Vue.js はどうやって実装されているか」という点についてフォーカスし、実際にコードを書きながら小さな Vue.js を作っていきます。
しかし，この本では少し切り口を変えて「Vue.js はどうやって実装されているか」という点についてフォーカスし，実際にコードを書きながら小さな Vue.js を作っていきます．
また、この本は公式のものではなく完全なものではありません。もしかするとおかしな点がいくつか残っていることもあるとおもうので、随時ご指摘いただければと思います。
また，この本は公式のものではなく完全なものではありません．もしかするとおかしな点がいくつか残っていることもあるとおもうので，随時ご指摘いただければと思います．
74 changes: 37 additions & 37 deletions book/online-book/src/00-introduction/030-vue-core-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,34 @@

## Vue.js のリポジトリ

Vue.js はこのリポジトリにあります。
Vue.js はこのリポジトリにあります．
https://github.com/vuejs/core

実はこれは 3.x 系のリポジトリで、2.x 以前はまた別のリポジトリにあります。
実はこれは 3.x 系のリポジトリで，2.x 以前はまた別のリポジトリにあります．
https://github.com/vuejs/vue

前提として、今回は core リポジトリ(3.x 系)を使って説明していきます。
前提として，今回は core リポジトリ(3.x 系)を使って説明していきます．

## Vue.js を構成する主要な要素

さて、まずは Vue.js の実装の全体像から把握してみましょう。
Vue.js のリポジトリにコントリビュートに関するマークダウンファイルがあるので、余力がある方はそこをみてみると構成についても色々書いてます。(まあみなくてもいいです)
さて，まずは Vue.js の実装の全体像から把握してみましょう．
Vue.js のリポジトリにコントリビュートに関するマークダウンファイルがあるので，余力がある方はそこをみてみると構成についても色々書いてます．(まあみなくてもいいです)

https://github.com/vuejs/core/blob/main/.github/contributing.md

ざっくり説明すると、Vue.js は以下のような主要な要素があります。
ざっくり説明すると，Vue.js は以下のような主要な要素があります．

## runtime

ランタイムとは実際の動作に影響する部分全般です。レンダリングであったり、コンポーネントのステート管理であったり。
Vue.js で開発した Web アプリケーションのうち、ブラウザ上やサーバー上(SSR の場合)で動作している部分全般のことです。
具体的には以下の要素を含んでます。(それぞれの詳しい説明は各チャプターでやるのでざっくり)
ランタイムとは実際の動作に影響する部分全般です．レンダリングであったり，コンポーネントのステート管理であったり．
Vue.js で開発した Web アプリケーションのうち，ブラウザ上やサーバー上(SSR の場合)で動作している部分全般のことです．
具体的には以下の要素を含んでます．(それぞれの詳しい説明は各チャプターでやるのでざっくり)

### Reactivity System

「リアクティビティ」は日本語で言うと「反応性」です。
コンポーネントでもつステートを追跡し、変更があった場合に画面の更新をしたりします。
この、追跡して反応して何かを行うことを反応性と呼んでいます。
「リアクティビティ」は日本語で言うと「反応性」です．
コンポーネントでもつステートを追跡し，変更があった場合に画面の更新をしたりします．
この，追跡して反応して何かを行うことを反応性と呼んでいます．

```ts
import { ref } from "vue";
Expand All @@ -44,53 +44,53 @@ const increment = () => {

### Virtual DOM

Virtual DOM (仮想 DOM) もまた、Vue.js の強力なシステムの一つです。
Virtual DOM は JS のランタイム上に DOM を模倣した JavaScript のオブジェクトを定義し、それを現在の DOM と見立て、更新時は現在の Virtual DOM と新しい Virtual DOM とを比較して差分のみを本物の DOM に反映する仕組みです。詳しくは専用のチャプターで詳しく解説します。
Virtual DOM (仮想 DOM) もまた，Vue.js の強力なシステムの一つです．
Virtual DOM は JS のランタイム上に DOM を模倣した JavaScript のオブジェクトを定義し，それを現在の DOM と見立て，更新時は現在の Virtual DOM と新しい Virtual DOM とを比較して差分のみを本物の DOM に反映する仕組みです．詳しくは専用のチャプターで詳しく解説します．

### Component

Vue.js はコンポーネント指向なフレームワークです。
それぞれのユーザーの要件に応じて保守性の高いコンポーネントを作ってカプセル化・再利用を行うことができます。
また、コンポーネント間でのステートの共有(props/emits や provide/inject など)であったり、ライフサイクルフックの提供を行ったりしています。
Vue.js はコンポーネント指向なフレームワークです．
それぞれのユーザーの要件に応じて保守性の高いコンポーネントを作ってカプセル化・再利用を行うことができます．
また，コンポーネント間でのステートの共有(props/emits や provide/inject など)であったり，ライフサイクルフックの提供を行ったりしています．

(よくよく考えると、値を変更しているだけなのにちゃんと画面が更新されているのは不思議ですよね。)
(よくよく考えると，値を変更しているだけなのにちゃんと画面が更新されているのは不思議ですよね．)

## Compiler

コンパイラとは開発者インタフェースと内部実装の変換を担う部分です。
ここでいう「開発者インタフェース」とは、「実際に Vue.js を使用して Web アプリケーション開発を行う開発者」と「Vue の内部実装」の境界のことです。
具体的には、普段皆さんが書いている Vue を使った実装を想像してもらって、それを内部で扱うための方に変換をする機能が Vue.js に存在していると思ってもらえれば大丈夫です。
コンパイラとは開発者インタフェースと内部実装の変換を担う部分です．
ここでいう「開発者インタフェース」とは，「実際に Vue.js を使用して Web アプリケーション開発を行う開発者」と「Vue の内部実装」の境界のことです．
具体的には，普段皆さんが書いている Vue を使った実装を想像してもらって，それを内部で扱うための方に変換をする機能が Vue.js に存在していると思ってもらえれば大丈夫です．

Vue.js で開発をしていると、明らかに JavaScript の記述ではない部分があると思います。テンプレートのディレクティブであったり、Single File Component であったり。
これらの記法(文法)は Vue.js が提供しているもので、これを JavaScript のみ記述に変換する機能があるのです。
そしてこの機能はあくまで開発段階で使われるもので Web アプリケーションとして実際の動作にしている部分ではありません。(JavaScript コードにコンパイルする役目のみを果たします。)
Vue.js で開発をしていると，明らかに JavaScript の記述ではない部分があると思います．テンプレートのディレクティブであったり，Single File Component であったり．
これらの記法(文法)は Vue.js が提供しているもので，これを JavaScript のみ記述に変換する機能があるのです．
そしてこの機能はあくまで開発段階で使われるもので Web アプリケーションとして実際の動作にしている部分ではありません．(JavaScript コードにコンパイルする役目のみを果たします．)

このコンパイラも大きく二つのセクションに別れています。
このコンパイラも大きく二つのセクションに別れています．

### Template Compiler (compiler core)

名前の通りテンプレート部分のコンパイラです。
具体的には v-if や v-on といったディレクティブの記法や、ユーザーコンポーネントの記述(`<Counter />`みたいなオリジナルのタグとして書くやつ)や slot の機能などです。
名前の通りテンプレート部分のコンパイラです．
具体的には v-if や v-on といったディレクティブの記法や，ユーザーコンポーネントの記述(`<Counter />`みたいなオリジナルのタグとして書くやつ)や slot の機能などです．

### SFC Compiler

名前の通り Single File Component のコンパイラです。
.vue という拡張子のファイルで、コンポーネントの template, script, style を単一のファイルで記述する機能です。
script setup で使用する defineComponent や defineProps などもこのコンパイラが提供しています。(これは後述)
名前の通り Single File Component のコンパイラです．
.vue という拡張子のファイルで，コンポーネントの template, script, style を単一のファイルで記述する機能です．
script setup で使用する defineComponent や defineProps などもこのコンパイラが提供しています．(これは後述)

そして、この SFC コンパイラですが、実際には Webpack や Vite などのツールと組み合わされて使用されます。
他のツールのプラグインとしての実装部分ですが、ここは core リポジトリには存在していません。core に存在するのは SFC コンパイラの主要な機能で、プラグインはプラグインで別のリポジトリに実装されています。(参考: [vitejs/vite-plugin-vue](https://github.com/vitejs/vite-plugin-vue))
そして，この SFC コンパイラですが，実際には Webpack や Vite などのツールと組み合わされて使用されます．
他のツールのプラグインとしての実装部分ですが，ここは core リポジトリには存在していません．core に存在するのは SFC コンパイラの主要な機能で，プラグインはプラグインで別のリポジトリに実装されています．(参考: [vitejs/vite-plugin-vue](https://github.com/vitejs/vite-plugin-vue))

ちなみに今回の実装では実際に Vite のプラグインを実装して自作 SFC コンパイラを動作させます。
ちなみに今回の実装では実際に Vite のプラグインを実装して自作 SFC コンパイラを動作させます．

## vuejs/core のディレクトリを覗いてみる

Vue の主要な要素をざっと把握したところで実際のソースコードがどのような感じになっているか見てみましょう(といってもディレクトリだけだけど)
packages というディレクトリにメインのソースコードが詰まっています。
packages というディレクトリにメインのソースコードが詰まっています．

https://github.com/vuejs/core/tree/main/packages

中でも注目したいのは、
中でも注目したいのは，

- compiler-core
- compiler-dom
Expand All @@ -100,8 +100,8 @@ https://github.com/vuejs/core/tree/main/packages
- runtime-dom
- vue

です。
それぞれの依存関係についてはコントリビュートガイドのこの図がとてもわかりやすいです。
です．
それぞれの依存関係についてはコントリビュートガイドのこの図がとてもわかりやすいです．

```mermaid
flowchart LR
Expand Down
Loading

0 comments on commit 4a4556e

Please sign in to comment.