はじめに

こんにちは！マーケターから未経験のエンジニア職に転身した社員Tです。
この度は、初めてのブログ記事を執筆する機会を得て、とても嬉しく思います。
この記事では、自身の学びと成長を振り返りながら、過去に実施した vue.js について書いていきたいと思います。

本記事の対象の方

本記事は、JavaScriptのフレームワークであるVue.jsを学びたい初学者や、Vue.jsを実際に使用してアプリケーションを開発したい方が対象です。記事では、Vue.jsの基本的な機能やメリットから始めて、環境構築方法や外部APIからのデータ取得、ディレクティブの活用方法などを解説しています。

vue.jsとは？

まずVue.jsとは、JavaScriptのフレームワークの1つであり、HTMLとJavaScriptの間でデータの連携を行う役割を果たします。このデータの連携には、Vue特有の機能であるディレクティブが使用されます。「ディレクティブ」とは、HTML内で特定の属性や要素に指示を記述することで、Vue.jsがその部分を監視し、データの変更に応じて動的にHTMLを更新します。

メリット

Vue.jsを扱うメリットは、JQueryよりも記述が簡単であり、初心者でも扱いやすいことです。
さらに、Vue.jsは※双方向のデータバインディングが可能です。
つまり、UIとデータのいずれか一方が更新されれば、もう一方も自動的に更新される仕組みになっています。これにより、データとUIが常に同期されるため、開発効率が向上します。
初学者の私には、理想的な学習機会となりました。
※データモデルとUI（ユーザーインターフェース）の間でデータが自動的に同期される仕組み

環境構築の手順

Vue.jsを導入する方法

Vue.jsは、いくつかの方法で使用することができます！

• scriptタグを埋め込む
• NPMを利用してインストール
• CLIを利用してインストール(単一ファイルコンポーネントが利用可)

今回はbody終了タグの直後にscriptタグを挿入しました！

Vue.jsの拡張機能をインストール

事前にお使いのブラウザにVue Devtoolsをインストールしておくことをおすすめします。
Vueコンポーネントの階層構造や状態を視覚化できます。
私はchromeを使うため、拡張機能vuejs-devtoolsを入れました。

問題取得とディレクティブの活用

タイトルに記載のとおり、学習アプリの制作に挑戦しました。
このアプリは、ユーザーに問題を提供し、解答を受け付け、解説を表示する、一問一答のサービスです。
ここからは、特に問題の取得とVue.jsのディレクティブの活用にフォーカスしてみたいと思います。

問題の取得と表示

問題の取得や回答の解説表示にはChatGPTのAPIを利用しています。
具体的には、JAVA側でAPIエンドポイントを指定し、axiosを使用してHTTPリクエストを送信しています。
これにより、アプリが動的に問題を取得し、表示することが可能になります。

デザイン（ディレクティブの活用）

Vue.jsのディレクティブを活用して、動的な表示を実現します。
具体的には、v-ifやv-cloakなどのディレクティブを利用しました。

エラーテキストの表示

条件に応じて要素を表示または非表示にしたい場合には、「v-if 」ディレクティブを利用しています。
今回はシステム上、なにかしらの問題が発生した際にはエラーを表示させたいが、通常時は表示したくない場合に「v-if 」ディレクティブを活用しました。

解説の非表示

演習を行うアプリでは、問題を解いている際に回答が見えてしまったら使いものになりません。
そのため、ユーザーが回答の閲覧を希望するまでは解説を非表示にする必要があります。
さらに、次の問題に進む際には、新しい問題と回答が再取得されるため、一時的にデータが表示されることを防ぐために今回は、v-cloak ディレクティブを使用しました。

v-cloak ディレクティブは、Vue.jsの初期化が完了するまで要素を隠すためのディレクティブです。初期化が完了する前にデータが表示されてしまうことを防ぎ、見栄えを向上させます。

これらのディレクティブを活用することで、アプリの見た目や動作をスムーズに調整することができます。

おわりに

以上、Vue.jsを使用して問題の取得からディレクティブの活用までをご紹介させていただきました！
次回も、Vue.jsについてさらに深く掘り下げていきたいと思います。
皆さんもぜひ、Vue.jsを使った開発に挑戦してみてください！