フューチャーAdventCalendar2020 13日目です。
昨日は、Shin Kurita(@montblanc18 )さんによる、GoでGoogleSpreadsheet出力するでした。
はじめに
今年はFuture技術ブログに２記事書かせていただいています。
数字で振り返るフューチャー技術ブログ（2020）でも記載がある通り、Vue.jsのslotの機能を初心者にわかるように解説してみた は、1.1万PVとなかなかの数、閲覧いただいております。ありがたいことです。
この記事を書くために、私物のMacBook Air(2018)にVue-CLIをインストールしたのですが、びっくりするほど苦戦しました。
原因はセキュリティソフトだったのですが、備忘のために、対応を残しておこうとおもいつつ、忘れていたので、アドカレ用に温めておいたので、ここで書いておきます。
Vue.CLIをインストールする
Vue.js を vue-cli を使ってシンプルにはじめてみるを参考に、インストールしていきます。すたこらとインストールし、プロジェクトを起動します。
（Vue.js を vue-cli を使ってシンプルにはじめてみるより）
http://localhost:8080 にアクセスしたところ、サンプルが表示されませんでした。
（このページは動作していません localhostからデータが送信されませんでした。 ERR_EMPTY_RESPONSE）
こちらは私のMacBook Airに入れていたESETというセキュリティソフトが、8080ポートをブロックしていたようです。（インストールに苦戦したというタイトルをつけましたが、インストール自体はうまくいっていたのが本当は正しいです。）
起動するポート番号を変える
セキュリティソフトの設定を変えてもいいのですが、起動する開発サーバーのポート番号を変えることで対処してみます。
※例えば会社でセキュリティソフトの設定が変えられない場合などはこちらで対応することになるかと思います。
Vue-CLIの公式ドキュメントによると、vue.config.jsファイルを用意すると、設定を読みこむようなので、ファイルを用意して、port番号を指定してあげます。
module.exports = {
devServer : {
port: 8888,
},
};
npm run serveコマンドで、再度立ち上げてみると、無事localhost:8888にVue-CLIのサンプルプロジェクトが立ち上がることが確認できました。
終わりに
これで無事に環境も整いました。
環境構築って何かしらうまくいかないことが多い経験をしている気がするのですが、気のせいでしょうか。
環境構築の挫折が、特に初心者が学習する意欲を失う原因No.1なんじゃないかと勝手に思っています。
詰まったところが解消したら、ちゃんと知見に残すのが大切ですね。
Vue.js初心者な皆さんは、Vue.jsのslotの機能を初心者にわかるように解説してみた も読んでもらえたら嬉しいです。