目次
フレームワークとは
初めてVue.jsについて知ったとき、「Vue.jsはJavaScriptのライブラリ・フレームワークです」と言われ、「フレームワークとは？」という疑問が出てきました。フレームワークとは、プログラミングにおいて汎用的なひな形の機能・処理のことであり、ざっくり言えばVue.jsとはJavaScriptでよく使われる処理をまとめて使いやすくしたもの、ということになります。
フレームワークには独自の書き方のルールがあるので、そのルールに沿って開発することで、複数人で開発するときに足並みをそろえて開発することができます。
Vue.js以外のJavaScriptのフレームワークだと、ReactやAngulerといったものがありますが、今回はVue.jsに絞って話を進めたいと思います。
Vue.jsの特徴
ではなぜVue.jsなのかというと、公式ドキュメントなどの教材が豊富かつ書き方が理解しやすいので、学ぶコストが低いからです（だそうです）。自分はそもそものJavaScriptが得意では無いので、どのフレームワークを学習するかの良し悪しもわかりません。調べてみて、最初のとっかかりには良さそうということでVue.jsを選びました。Vue.jsの特徴はシンプルかつ高速に処理をすることができるという点です。仮想DOMを用いて変更前と変更後の差分にだけ処理を施しています。また、vueファイルというファイルの中に機能ごとにhtml,css,JavaScriptを記述することで、プロジェクトの管理、作業の分担がしやすくなります。そしてページ遷移を行わず描画の内容を変えるシングルページアプリケーションの開発に向いています。
…と調べたことをまとめてみましたが、そう言われても文字だけでは何もわからないので、実際にアプリケーションを作りながらVue.jsへの理解を深めていきたいと思います。
Vue.jsの導入
では今回は、実際にVue.jsを導入して、アプリケーション開発の下地を作っていきたいと思います。 最初にプロジェクトを格納するフォルダを作成します。
次にVscodeでnpm init vue@latestと入力し、Vue.jsをインストールします。
この時ターミナルに9つほど質問が表示されるのでYes/Noで回答していきます。
質問の内容は以下の通りです。
Project name
プロジェクトの名前を入力しますAdd TypeScript?
TypeScriptで記述するかを選択できますAdd JSX Support?
JavaScriptのコード内にHTMLを記述できるJSXの使用を選択できますAdd Vue Router for Single Page Application development?
シングルページアプリケーションが簡単に作れるようになるVue Routerの使用を選択できますAdd Pinia for state management?
データ管理ライブラリのPiniaの使用を選択できますAdd Vitest for Unit Testing?
ユニットテストを行うためのVitestの使用を選択できますAdd an End-to-End Testing Solution?
UI操作を含めたアプリ全体のテストを行うEnd-to-Endの使用を選択できますAdd ESLint for code quality?
コードの間違いを検出して指摘するESLintの使用を選択できますAdd Prettier for code formatting?
ソースコードを整形するPrettierの使用を選択できます基本的に最初のプロジェクト名だけ決めてしまえばすべての選択肢がNoでもVueを使うことができます。必要に応じてYesを選択します。それぞれのツールの使用シーンについては別の機会にまとめたいと思います。
回答すると回答内容に合わせたVue.jsがインストールされます。
次にcd~で階層を一つ下げ、npm installを実行し、npm パッケージもインストールします。
こうしてVue.jsでアプリケーション開発をする環境が整いました。
最後にnpm run devと入力すると以下のようなURLが出力されるのでアクセスし、以下の画面が出てきたら成功です。
まとめ
初めてフレームワークという概念を知ったとき、絵を描くためにお絵かきソフトを買ってインストールするように、Vue.jsという言語で開発するために何か特殊なソフトが必要なのではないか、などと考えたりしていましたが、実際のところフレームワークとはプログラミングの汎用的な処理をまとめたものであり、Vue.jsとはJavaScriptの開発をやりやすくしたものであることがわかりました。導入もまったく複雑ではなく、コマンドだけで簡単に出来てしまいました。
次回は実際にTODOアプリケーションを作りながら、仮想DOM・コンポーネントの概念を学んでいけたらいいなと思います。
最後までお読みいただきありがとうございました。
また来月のLabでお会いしましょう。
それではまた。
