この本では、リストからツリーを作成するツールを Vue で作っていきます。リストは、編集、追加、削除、階層変更ができ、それに連動してツリーが作成されます。

完成形はこちらにあります。
<a href="https://tools.nakaken88.com/list2tree/" target="_blank" rel="nofollow noopener noreferrer">https://tools.nakaken88.com/list2tree/</a>

この小さなアプリケーションを作りながら、Vue について学んでいきましょう。（Vue3対応です）

【想定対象者】
- jQueryやJSは触ったことがあって、Vue について学んでみたい人。
- ドキュメントを一通り読むより、具体例を見て学びたい人。
- 「作りたいものを作りながら学ぶのがいいよ」と言われたものの、特に作りたいものがない人。

【扱っていること】
Vue3 での書き方 / createApp / dataオプション / 算出プロパティ / v-for / イベントハンドリング / スタイルのバインディング / ref / $nextTick / created と mounted の違い

2024/08/09: Vueの公式サイトへのリンクを見直しました。
2024/09/05: 外部サイトへのリンクを見直しました。

この本では、リストからツリーを作成するツールを Vue で作っていきます。リストは、編集、追加、削除、階層変更ができ、それに連動してツリーが作成されます。

完成形はこちらにあります。
https://tools.nakaken88.com/list2tree/

この小さなアプリケーションを作りながら、Vue について学んでいきましょう。（Vue3対応です）

【想定対象者】
- jQueryやJSは触ったことがあって、Vue について学んでみたい人。
- ドキュメントを一通り読むより、具体例を見て学びたい人。
- 「作りたいものを作りながら学ぶのがいいよ」と言われたものの、特に作りたいものがない人。

【扱っていること】
Vue3 での書き方 / createApp / dataオプション / 算出プロパティ / v-for / イベントハンドリング / スタイルのバインディング / ref / $nextTick / created と mounted の違い

2024/08/09: Vueの公式サイトへのリンクを見直しました。
2024/09/05: 外部サイトへのリンクを見直しました。

リストからツリーを作成するツールをVueで作ろう

はじめに

リストの部分を作ろう

Vue アプリケーションを作り始めよう

リストの中身を表示する処理を作ろう

リストの変更内容をツリーに反映させよう

Tabキーを押したときの処理を考えよう

Tabキーを押したときに位置が変わるようにしよう

Tabキーを押したときの処理を作りこもう

Shift+Tabキーを押したときの処理を作ろう

上下キーを押したときの処理を作ろう

Enterキーを押したときの処理を作ろう

上下キーを入力したときの処理を修正しよう

Enterキーを押したときの処理を改善しよう

リストアイテムの削除機能を作ろう

リストからツリーを作る処理を作成しよう

ツリーの削除機能を作ろう

リストとツリーの初期化機能を作ろう

javascript

vue3

なかけん