現実逃避をするためにVue.jsでポートフォリオサイトを作った話-環境構築編-

です。プログラミングの記事はQiitaに書く人が多いと思いますが、なんとなく敷居が高いのとプログラミング以外のことも投稿したいのでnoteやってみようと思ってはじめました。

・Qiita
いつもお世話になっております。これからもよろしくお願いします。

エンジニアに関する知識を記録・共有するためのサービス - Qiita

作ろうと思ったきっかけ

就職活動をしていて自身のポートフォリオサイトの提示を求められたりすることがあり、あったほうがいいかなあと思ったので作りました。(現実逃避)
この記事は備忘録とか自分用メモとかそういうやつ。未来の自分が環境構築で詰まった時に見に来ると思う。

出来上がったポートフォリオサイトはこちら

まずは開発環境構築

何かを作るときは材料と作業する場所が必要。

【材料】
・パソコン(npmでいろいろインストールできる状態)
・まとまった時間
・諦めない気持ち
・お好みのプログラミング言語、フレームワーク

今回はゆっくりプログラミングを勉強している暇がなかったので以前使ったことあったVue.js(JavaScriptのフレームワーク、公式ドキュメントが読みやすくて好き) + webpack4 で開発した。(それでやってるチュートリアル系記事がいっぱいあったから、webpackのことはまだ全然わかっていない)

Vueでポートフォリオサイト！みたいにざっくり検索するとVueCLI(初期設定とか環境構築をよしなにやってくれるすごいやつ)を勧められるので素直にインストールの前にwebpackもインストールしろって勧められたのでそっちからインストール。

$ npm install webpack 
// webpackをインストール
// + webpack@4.43.0


$ npm install webpack-cli
// webpack4からwebpack-cliが必要らしいのでインストール
// + webpack-cli@3.3.11


$ npm install webpack-dev-server
// webpack-dev-serverをインストール(web serverを提供してくれるらしい)
// + webpack-dev-server@3.11.0

続いてVueの導入
ここでvue-cli3ってやつがwebpack4でのVueの開発環境をいい感じに勝手に作ってくれることを知る。
webpackの設定がまだ良くわからないのでできれば自動でやっていただきたいのでさっき一生懸命入れたwebpackをアンインストール(node module削除)。
その後vue-cliをインストール。バージョン指定せんくても勝手に新しいやつ入れてくれるからとりあえず入れたいときはありがたい！↓↓

$ npm install vue-cli
// + vue-cli@2.9.6

あれ？
何回インストールしてもバージョン2.9.6以上がインストールされやん！なんでや！なんでや…
…
…
…

～100億万年後～

VueCLIの公式ドキュメントを見るとvue-cliはバージョン3から@vue/cliに変わったらしい(公式ドキュメント最強！！)。気を取り直してインストール。

$ npm install @vue/cli
// + @vue/cli@4.3.1

(予定してたバージョン3じゃなくて4になったけどまあええやろ！)

インストールできたので、

$ vue create 好きなプロジェクト名

であとは指示に従って選択したらVueのプロジェクトを用意してくれる、
はずなのにできない。
エラーを読むとvueコマンドが使えないよって言われてる。
そのままぐぐったらパスが通せていないっぽい(？)。
モジュールとかのインストールの仕方について調べたときになんでもかんでもグローバルでインストールするの怖いなーとローカルでインストールした弊害(というかきちんと設定できていない自分が悪い)
この問題ははグローバルでインストールすると自動で設定してくれるぽい。助かる。

// 一旦アンインストール
$ npm uninstall @vue/cli


// からのグローバルで再度インストール
$ npm install -g @vue/cli
// + @vue/cli@4.3.1


// 好きな名前でプロジェクトを作る
$ vue create 好きなプロジェクト名

すると、以下のようなメッセージが出るので読んで選ぶ。わからなければとりあえずdefaultでいいと思います。

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
 Manually select features


🎉  Successfully created project 自分がつけたプロジェクト名.
👉  Get started with the following commands:

$ cd 自分がつけたプロジェクト名
$ npm run serve

始めるには以下のコマンドを使えと言われているので言われた通りにする。

$ cd 自分がつけたプロジェクト名
$ npm run serve
// 'server'ではない


//  App running at:
//  - Local:   http://localhost:8080/

無事起動。http://localhost:8080/をブラウザで開くとVueのようこそ！的なページが出る。よっしゃー！

GitHubで管理できるようにする

$ /自分が作った/プロジェクトが/置いてある場所で/ git init

次にブラウザを開いてGitHubにアクセスしてmy repository的なところで新規リポジトリを作成、readmeはチェック入れないでおく(ほかのツールとかが勝手に作ってくれている場合readmeが意図しない形で混ざったりして困るので、と解釈している)。

$ git remote add origin https://github.com/ユーザー名/作ったリポジトリ名.git
$ git push -u origin master

// 2つ目のやつをコピペ

少ししてmasterブランチができたよ！的なメッセージが出たら成功。
GitHubをリロードしたらさっき作ったプロジェクト名のリポジトリができている。
これでコミットしたりいろいろできるようになる。やったー！

あとはウェブページの作り方とかそういうの見ながらごりごりコード書いてくと最終的にいい感じのページが出来上がる…はず。
実際に作っているときのそこらへんの話は書くのめんどくさくなってきたからまた別の記事で書けそうなときに書くつもり。

まとめと教訓

VueCLIを使って無事ポートフォリオサイトが出来上がった(満身創痍)。
やはり環境構築に伴うバージョンの問題とかそういうのに苦戦した。
公式ドキュメントには大体のことが書いてあるので公式ドキュメントを信じてしっかり読めば大体のことは解決する。
公式ドキュメント最強！

Vue.js