Gakuです。
macが好きです！
でも、windowsにも慣れないといけない事案が発生しました。。。
WSLもあるし、winもWebに優しい世界になっている!と信じ、今回はfirebaseとVue.jsを使った開発環境を構築していきたいと思います。
（※Webプログラミングやってみたい！でもmacがない。。。という人！この記事見てWinでやっていこうぜ！firebaseもVue.jsも簡単だから怖くないよ(´ω｀)b）
エディタとターミナル
とりあえず、エディタは特にこだわりなければVSCode使っておけばokかと思います。
Visual Studio Code
日本語で利用したい場合、「Japanese Language Pack for Visual Studio Code」というプラグインを入れましょう！
Japanese Language Pack for Visual Studio Code
コマンドを実行するためのterminalですが、今回はVSCode付属のterminalを利用します。
VScodeのterminalですが、デフォルト設定だと「PowerShell」となっており使いにくいので、WSL(bash)になるように設定しておきます。
1.VSCodeで[ファイル]-[基本設定]-[設定] を選択
2.検索欄に terminal.integrated.shell.windows を入力
3.「Windowsでターミナルが使用するシェルのパス」に以下を入力します。
C:\\WINDOWS\\System32\\bash.exe
これでokです。[ターミナル]-[新しいターミナル]でterminalを開き、「bash」となっていれば成功です。
Vue.jsの環境を整える
Vue.jsを扱うためのvue-cliというコマンドツールをinstallしていきます。
さきほど設定したターミナルで以下コマンドを実行します。
# 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の時と同じようにターミナルで以下コマンドを実行します。
# 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ディレクトリにすることで、簡単に参照することができるようになるので便利です。
$ sudo vim /etc/passwd
{ubuntu上のユーザ名}:x:1000:1000:,,,:/mnt/c/Users/{windowsのユーザ名}:/bin/bash # こんな感じで編集
permissionの設定
windowsのpermissionは基本的に「フルオープン」です。
しかも、permission変更コマンドのchmodやchownをしても変更することができません。。。
以下設定で、chmodやchownを使えるようにしておきましょう。
sudo vim /etc/wsl.conf
----以下を追記---
[automount]
enabled = true
options = "metadata"
mountFsTab = false
これでchmodやchownが使えるようになります。
wslだとtouchやmkdirでファイルやディレクトリを作成したときのデフォルトパーミッションがフルオープンとなるのは都合が悪いので、その点もubuntuと同じようになるように設定しておきます。
umask 022 # 追記
これでmkdirなら755で作成されるし、touchなら644で作成されるようになります。
gitの変更
VScodeのgitはデフォルトではwindowsにインストールされているgitを参照しています。
実装を進めていくと気になってくる点なので、以下でubuntuのgitを参照するように変更しておきます。
ここからwslgit.exeをダウンロードし、C:\Users\｛user_name｝\AppData\Local\Programsに保存します。
あとはvscodeのuser設定で以下を追記します。
"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で快適なプログラミング環境を構築
[Qiita]VSCode の統合ターミナルで Bash on Ubuntu を利用するための設定
[Qiita]とりあえず Ubuntu で新しい Node.js, npm をインストール
WSLのパーミッション周りの設定を色々とやっていく
[Qiita]【WSL】ホームディレクトリ変更手順
[Qiita]VScode・WSL・Git導入