#Overview

シンプルであることに越したことはない。
シンプルなら環境の移行や再構築も苦にならない。
シンプルなら必然的にミスする確率も低減する。
今回は環境構築メモの役割も含めて、Webサイト運営に使用しているアプリを公開しておきます。

記事を書いて１年経過したが、GitHubの拡張機能を一つ追加しただけでシンプルを維持できている。

#Target reader

シンプルかつ低コスト＆高い可用性を持つWebアプリを運用したい方。
Webサイトを作る上で最低限何を勉強しないといけないか知りたい方。

#Prerequisite

OSはWindows
- Macは1社に依存することからリスクヘッジのためWindows
- ただし、LinuxコマンドがメジャーなのでWindowsで実行する場合にググらないといけないことがある。
  （WindowsのLinux環境であるWSL2が一般的になれば格差は是正されるかもしれない）
言語はNode.js
- フロントエンドがJavaScript一択なので、バックエンドも同一言語ならパッケージも共有でき効率的。
- クラウドベンダーのFaaS（Functions）をみた場合、Node.jsは各社採用言語の中で1,2位に属している。
クラウドはFirebase（Google Cloud Platform）
- 個人でサービス提供するには可用性が命。その上でJavaScriptのコンテンツを配置するだけでいいFirebase Hostingは最善の一手。
  - PWA化することで、キャッシュ優先利用により更に可用性を高めることが可能。
  - データ転送量による完全従量制のため、ミニマムスタートにもってこい。
- そのほかオフライン対応の完全従量制DBであるFirestore等がそろっている。
- アプリが複雑化した際はGCPが控えているのでAWSやAzureにも決して見劣りはしない。

#Body

##Windowsにインストールしているアプリ

###Chrome

文句なしのブラウザシェアNo.1なので、Chromeで開発しないWebアプリはありえない。

###Git

Gitはソース管理のために利用する。
GitというよりGitHubはGCPにデプロイするためのハブになっているので不可欠。
GitHubに障害がおこるとデプロイできなくなるためもはや仕事不可。
（Gitはローカルで更新できるのでソースの修正を記録し続けることは可能）

###Node.js

フロントエンドもバックエンドもJavaScript言語で書けてしまうJavaScriptランタイム。
バックエンドは別言語でもいいが、あえて別の言語にする理由がないならJavaScript一つで十分。

###Visual Studio Code

Visual Studio Codeはソースコード書いたり、デバッグしたり、開発時に利用する。
WebアプリのIDEのスタンダードになりつつあるかな？
Windows開発向けに作られたVisual Studioが動作が重く、ダウンロードサイズも大きかったがこいつは軽量で人気が高い。
拡張機能も充実しており、IDEとの連携でVSCodeがないということは見たことない。

###[optional]Google Cloud SDK

今のところgcloud functions deployコマンドで必要になるが、Cloud Buildを利用してデプロイしているだめインストールされてなくても問題ない。
ただし、各プロダクトのコマンドを使うことになるはずなので、必要になったら入れたほうがいい。
入れなくてもCloud Shellがあるため乗り越えられるかもしれないが。
Cloud Build設定すれば、デプロイ目的のインストールは不要。
これによってアップデート作業がなくなり負担が軽減した。

###[optional]Firefox

ブラウザシェアはChromeが圧倒しているが、Firefoxも一定程度ユーザーがいる。
そのため、Firefoxでの動作確認もしておきたいところ。

###[optional]Edge

Edgeのシェアはかなりすくないが、Chromiumベースとなり標準でインストールされるようになったら今後無視できなくなるかも？
ChromiumベースでChromeと違いも少なくなると予想できることから、WindowsPCをある程度ターゲットにするなら動作確認したいところ。

###[optional]Slack

個人で開発しているとPC上でコミュニケーションは取る必要がないため、PCへのインストールは必須ではない。
ただし、通知はよく使うはずなので、スマホへのインストールは必須。

削除して１年経過したが、スマホのみで充分。

##npmでグローバルにインストールしているパッケージ

他にtoとupdateというパッケージがインストールされていた。
手動でインストールした記憶はないが、何かのインストールでバンドルされるなら消さないほうが吉。

###firebase-tools

firebase関連のコマンド実行の際に必要。
現状だとFirebase Hostingにデプロイする際に使用している。

##npmで各プロジェクトにインストールしているパッケージ

###React

個人開発に重要なSPAで今構築するならVue.jsかReact。
私は仕事でReactを経験したので、それを引き継いでいるがVue.jsの採用を検討したいところ。

###Material-UI

Reactだけでは生のHTMLで記述するため、見た目がかなり貧相になる。
そのため、見た目をよくするために必要なパッケージとして有力なのがMaterial-UI。
基本的なサンプルソースがそろっており、カスタマイズもしやすいので非常に使いやすい。

###REACT ROUTER

WEBのページ遷移を管理するためライブラリ。
パスとそれに対応したコンポーネントを指定することで簡単にページ切り替えができる。
コードが多くなるとコード分割が必須になるが、導入しておくとパスごとに簡単に分割できるので便利。

##VisualStudio Codeにインストールしている拡張パッケージ

###Debugger for Chrome

VSCode上でChromeをデバッグするために必要な拡張機能。
個人的にはあまり使っていないが、入れておいた方がいいだろう。

###Japanese Language Pack for Visual

VSCodeを日本語表記にしてくれる。

###GitHub Pull Requests and Issues

GitHubでソースを管理し、MasterにマージしたらDeployするようにしているため、マージ操作を多用している。
この拡張機能があるとブラウザより早く処理できるため、かなり重宝している。
プルリクとマージ以外では使っていないが😅

###[optional]REST Client

いろんなパラメータを含んだWebAPIをコールしたいときに便利。
個人的にはあまり使っていないが、入れておいた方がいいだろう。

###[optional]DotEnv

Reactで環境変数を使う際に.envというファイルを使うが、VS上で強調表示してくれるもの。
なくても支障はない。

###[optional]VSNotes

MarkDown形式でメモできる拡張機能。
課題やメモ等をとにかく書き込んで使っている。
最低限のものしかインストールしていないので、最終的にこのVSNotesが何でも屋としてフォローしてくれている。

##Google Chromeにお気に入りとしているサイト

###Search Console

自身のサイトがGoogle検索に正しく登録されているか、ユーザーがどんな検索ワードで入ってきているか等がわかる。
Webサイトを公開するなら100%通る道。

###Google Analytics

サイトに入ってから出るまでのあらゆる情報が収集されている。
サイトを成長させるうえで分析は効果的ゆえ、これも必ず導入したいものの一つ。

###Create React App

Reactを新規で作るなら、もはやCreate React Appは必須といっても過言ではない。
Create React Appを用いれば、深い知識を必要とせずに簡単に本番向けのサイトを構築できる。

###Google Cloud Platform

GCPのダッシュボード。クラウドを扱う以上必須。

###Firebase

Firebaseのダッシュボード。クラウドを扱う以上必須。

###Google Adsense

Webサイトの収益化の筆頭。モバイルがApp StoreかGoogle PlayならWebはAdsense。
審査に通れば簡単に収益化できる反面、厳しい処置を受けることもある。
身綺麗な運営と理不尽と感じてもそれを受け入れる忍耐が必要。

#Conclusion

インストールが必要なアプリやライブラリが20個未満でサイトの運用が可能です。
これらを理解したなら、その少し先に私がいるということです。
学習コスト高いものもありますが、低コスト＆高い可用性実現のために頑張ってみてください。

便利なものはつい入れたくなりますが、依存関係を増やす以上のメリットがあるか考えてみるといいでしょう。
インストールしているものが一般的なものなら、クラウドベンダーが提供しているDockerイメージをそのまま利用できる場合もあります。
個人的には数年後、SurfaceGo持ち歩きながらVS Onlineで開発して、パワフルなノートPCを持たない人を目指しています

simple is best!
Have a great day!