ビジネスとIT活用に役立つブログBlog


過去のコードをComposition APIを使って書き直してみる(後編)

この記事をシェアする:

前回の記事では、前編としてComposition APIについてまとめました。
Composition APIの基本的なsyntaxが分かったところで、実際に当ブログでご紹介した以下の記事のコードをComposition APIを用いて書き直してみたいと思います。

JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(前編)
JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(後編)


後編執筆までの間にVue3が公開されました!

※本記事は前回構築した「Vue2.x + @vue/composition-api」の環境で記載しています。

対象のコード

過去記事のコードの最終形

Vue-cliに載せ替える

過去記事のコードはhtml、js、cssの3ファイルで構成されていますので、まずはSFC(SingleFileComponents)化していきます。

前回記載の方法で設置したvue-cliにToDoコンポーネントを作成し、各ファイルを  <template>  <script>  <style> に移植して行きます。

現在の構成は以下のようになっています。

ToDo.vueは以下のようになりました。
※長くなってしまうので、script部分のみになります。

Composition APIを用いて書き直し

次にComposition APIを用いて書き直します。
少しリファクタリングを行いましたが、ロジック自体は過去記事のものと同じになっています。

関数の切り出し

次に見通しを良くするために関数を切り出します。
 this が無いのですんなり切り出すことができました。

別ファイルへ切り出し

最後に各関数を別ファイルに切り出します。

現在の構成は以下のようになっています。

各種functionは前項でdefineComponentの外に切り出したものを、そのままファイルに切り出しただけになります。

最終的にToDo.vueは以下のようになりました。
別ファイルに切り出した関数をimportして使う形になっています。
とても見通しよくなったかと思います。

まとめ

Vue3ではVue2.xと同様にOption APIを使ってコードを書くこともできますが、Composition APIを使って書くことでコードの切り出しや共通化がしやすくなります。

Vue3に対応していないmoduleでもOptions APIであればほぼそのまま使用可能ですが、Composition APIだと基本的には使えない(使えたとしてもComposition APIの利点を消してしまう)という問題もあります。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!