windowsでVue.jsとfirebaseの開発環境を整えていくぜぃ！【Webプログラミングはじめてみたい！という人にもおススメ】

Gakuです。
macが好きです！
でも、windowsにも慣れないといけない事案が発生しました。。。
WSLもあるし、winもWebに優しい世界になっている!と信じ、今回はfirebaseとVue.jsを使った開発環境を構築していきたいと思います。
（※Webプログラミングやってみたい！でもmacがない。。。という人！この記事見てWinでやっていこうぜ！firebaseもVue.jsも簡単だから怖くないよ(*´ω｀*)b）

# エディタとターミナル
とりあえず、エディタは特にこだわりなければVSCode使っておけばokかと思います。
[Visual Studio Code](https://code.visualstudio.com/)
日本語で利用したい場合、「Japanese Language Pack for Visual Studio Code」というプラグインを入れましょう！
[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

コマンドを実行するためのterminalですが、今回はVSCode付属のterminalを利用します。
VScodeのterminalですが、デフォルト設定だと「PowerShell」となっており使いにくいので、WSL(bash)になるように設定しておきます。

```text:設定手順
1.VSCodeで[ファイル]-[基本設定]-[設定] を選択
2.検索欄に terminal.integrated.shell.windows を入力
3.「Windowsでターミナルが使用するシェルのパス」に以下を入力します。
C:\\WINDOWS\\System32\\bash.exe
```
これでokです。[ターミナル]-[新しいターミナル]でterminalを開き、「bash」となっていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/4f0321da-99ef-40e6-3b58-6d33e2366691.png)

# Vue.jsの環境を整える
Vue.jsを扱うためのvue-cliというコマンドツールをinstallしていきます。
さきほど設定したターミナルで以下コマンドを実行します。

```bash:コマンド
# aptのupdate
sudo apt update
# nodeとnpmを最新バージョンでinstall
sudo apt install -y nodejs npm
sudo npm cache clean
sudo npm install -g n
sudo n stable
sudo npm update -g npm
# yarnのinstall
sudo npm install -g yarn
# vue-cliのinstall
sudo yarn global add @vue/cli
# vue-cliのバージョン確認
vue -V
```
最後の「vue -V」コマンドでバージョンが表示されれば、無事Vue.jsを利用する環境が整いました。
バージョンが出力されなかった場合、どこかでエラーが発生しているかと思います。
エラー内容(英語)を頑張って読んで、修正しましょう！

# firebaseの環境を整える
Firebase CLIというコマンドツールをinstallしていきます。
vueの時と同じようにターミナルで以下コマンドを実行します。

```bash:コマンド
# Firebase CLIのinstall
sudo yarn global add firebase-tools
# Firebase CLIのバージョン確認
firebase -V
```
vue-cliのinstallの際、npm等をinstallしているので簡単ですね。
こちらもバージョンが表示されれば成功です！

# ここから先は。。。
以上でVue.jsとfirebaseを扱うための環境を整えることができました。
実装方法等は他に記事がたくさんあるので割愛します。

プログラミングという趣味（沼）に飛び込んで、楽しい実装ライフを共に堪能しましょう(*´ω｀*)b

# 追加の設定(主にWSL周り【理解できない場合、飛ばしてください。】)
## ホームディレクトリの変更
WSLではデフォルトのHomeディレクトリが/home/{user_name}であり、このディレクトリはwinsowsから参照できません。
windowsのuserフォルダをHomeディレクトリにすることで、簡単に参照することができるようになるので便利です。

```text:設定方法
$ sudo vim /etc/passwd

{ubuntu上のユーザ名}:x:1000:1000:,,,:/mnt/c/Users/{windowsのユーザ名}:/bin/bash # こんな感じで編集
```

## permissionの設定
windowsのpermissionは基本的に「フルオープン」です。
しかも、permission変更コマンドのchmodやchownをしても変更することができません。。。
以下設定で、chmodやchownを使えるようにしておきましょう。

```text:設定方法
sudo vim /etc/wsl.conf

----以下を追記---
[automount]
enabled = true
options = "metadata"
mountFsTab = false
```
これでchmodやchownが使えるようになります。
wslだとtouchやmkdirでファイルやディレクトリを作成したときのデフォルトパーミッションがフルオープンとなるのは都合が悪いので、その点もubuntuと同じようになるように設定しておきます。

```text:.bash_profile
umask 022 # 追記
```
これでmkdirなら755で作成されるし、touchなら644で作成されるようになります。

## gitの変更
VScodeのgitはデフォルトではwindowsにインストールされているgitを参照しています。
実装を進めていくと気になってくる点なので、以下でubuntuのgitを参照するように変更しておきます。

[ここから](https://github.com/andy-5/wslgit/releases)wslgit.exeをダウンロードし、C:\Users\｛user_name｝\AppData\Local\Programsに保存します。
あとはvscodeのuser設定で以下を追記します。

```json:settings.json
"git.path": "C:\\Users\\{user_name}\\AppData\\Local\\Programs\\wslgit.exe"
```

これでubuntuにinstallされているgitを参照するようになります。

# 最後に
windowsとか何の縛りプレイやねん！と思ってましたが、winもまぁまぁ戦えそうですね。
6月中にwindows terminalなるものもリリースされるらしいので、winでの開発もどんどん良くなっていくと思います。

「自宅PCはゲーム専用でハイエンドwin!」みたいな人も多いかと思うので、よかったら構築してみてください。

でもまぁ。。。僕はお金がたまったらmacbookproの16G、i7のやつ買ってmacで実装ライフ堪能する('Д')

# 参考文献
[【WSL】Windows10とUbuntuとVSCodeで快適なプログラミング環境を構築](https://cpp-learning.com/wsl_vscode/#i-3)
[[Qiita]VSCode の統合ターミナルで Bash on Ubuntu を利用するための設定](https://qiita.com/m_zuma/items/6b2ee25001109a6506c4)
[[Qiita]とりあえず Ubuntu で新しい Node.js, npm をインストール](https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28)
[WSLのパーミッション周りの設定を色々とやっていく](https://dhonuk.com/windows/permission.html)
[[Qiita]【WSL】ホームディレクトリ変更手順](https://qiita.com/funafuna/items/c3bb78a546cf2605205d)
[[Qiita]VScode・WSL・Git導入](https://qiita.com/Philosophistoria/items/48c4779739e6fafc63e0)