Vue.js勉強記録その1

最近仕事がオンラインに移行して、通勤のために使っていた時間が空くことが多いです。

ひたすら晩酌の時間に当てていたのですが、それだと時間が勿体なさすぎる気がするので、勉強の時間をちょっとでも取ろうと思いました。（晩酌はやめませんw）

普段授業で教えている内容を、さらに昇華できるように、今教えているHTMLやCSS、JS、Wordpressなどの中から、知識を深めていくことも考えましたが、やっぱり今までやったことのない事を勉強してみようと思います。

今更と言われそうですが、Vue.jsの勉強をしていきたいと思います。

普段は先生としてweb制作を押していますが、Vue.jsは初めてです。初心に帰って頑張ります！！
まずは、書籍を買って勉強します。

選んだ書籍は、

Vue.js3超入門

こちらです。たまたま入った書店で、目についたもので、比較的新しいものを選びました。

備忘録と、モチベーション維持のためにnoteに記録を残していきます。
今日はまず、Chapter1から。

■Chapter1 Vueを使ってみよう

Chapter1は、Vue.jsの総論や準備のChapterです。
環境の整備をはじめ、必要なエディタなどのインストール方法が書かれています。

・1-1 Vue3のセットアップ

この項目は、フロントエンドやフレームワークの説明からはじまります。基本的には文章を読んでいく内容ですね。

ちなみにこの書籍は、2020年12月に発行されているので、発行されて約2年経っています。なので、少しだけこの書籍が書かれている内容と、現在の状況が違う場合があります。

Vue.js devtoolsをGoogle Chromeにインストールする際に、「Currently only supports Vue 3と表示されているものを選ぶ」とありましたが、そんな記述は見つかりませんでした。。

とりあえず、「beta」と書かれていない方を選んでみました。もし問題があれば、その時に変えてみようと思います。

・1-2 より本格的なプロジェクト

ここでは、Node.jsのインストールとVue CLIのインストールがメインです。
僕の場合はNode.jsはすでにインストールされていたので、Vue CLIのインストールまで読み飛ばしました。

Vue CLIのインストールで、

npm install -g @vue/cli

と、コマンドを実行してくださいとありますが、僕の環境（Mac）では、sudoをつけないとエラーが出ました。この辺りのコマンドは、Macではsudoつけないと動かない事が多いですね。

sudo npm install -g @vue/cli

僕は、コマンドがうまく動かない事自体に結構慣れていて、「あ、sudoつけてみようか」とすぐに気づきましたが、コマンドに慣れていない方はちょっと苦戦するかもしれないですね。。

・1-3 プロジェクトを作ろう

ここでは、プロジェクトを3種類の方法で作ります。

・Vue CLIを使った方法
・Viteを使った方法
・GUIを使った方法

の三つです。また、作成されるフォルダやファイルなどについても説明されています。

viteを使ったコマンド

npm init vite-app フォルダ名

cd フォルダ名

npm install

こんな感じで、viteでプロジェクトができる。

ここも、場合によって（おそらくフォルダやファイルを作る工程？）指定されたコマンドにsudoをつけないと動きませんでした。が、ひとまずそこまで詰まる事なく進めました。

その後、Visual Studio Codeのインストール方法が書かれていますが、こちらはすでにインストールされているので、飛ばしました。

■まとめ

ひとまず今回から定期的に書籍で勉強した内容を書いていきます。
結構分厚い書籍を買っちゃったので、しっかり頑張っていこうと思います！！