内容
初心者が手間がかかる仕組みを避けてWebのサービスを作る方法の1つについて解説します。主に言語を1つぐらい知ってて、Webページ上でなんか動くもの作りたい人、古いWebアプリの作り方しか知らなくてキャッチアップしたい人を対象にしています。JavaScriptの話がメインですが、補足で周辺技術の話もあります。
詳しいマン向け：作者が軽く試した結果罠が少ないと感じたルートでしかないので、おれはこっちの方がいいという人はコメントするなり同じような記事を書くなりすればいいんじゃないかな。
必要なもの・できること
HTMLとJavaScriptはWebで何かを出す以上必須です。JavaScriptが無い場合は静的ページなのでブログとかで書けばいいので、ここではWebアプリのくくりに入れません。
JavaScriptだけで結構なものは作れますが、
- ブラウザをまたいでのデータ保存
- 同じサイトを見ている別の人とのやりとり
はできません。逆に言うと、ブラウザでのデータ保存はlocalStorageで1MB程度までなら問題なくできます(それ以上はブラウザ依存があるようです)。JavaScriptだけでファイルを処理するのも可能になりました。JavaScriptで他のWebアプリのAPIを叩くとかもできます。
サーバ
残念ながらJavaScriptだけで不可能という判断になった場合はサーバを用意することになります。
もしサーバを用意することになった場合、サーバはJSONを返すだけの単純なAPIサーバとして運用し、JavaScriptでレンダリング(表示を作る)のが良いでしょう。
サーバを用意することになった場合、24時間Webサーバを動かすリソース、多くの場合必要になるDB、落ちたときの対応、サービスレベルetcと考えることが爆発的に増えます。AWS/Azure/GCPなどのクラウドサービスやHerokuなどのプラットフォームであればある程度は丸投げできますが、どちらにせよ維持費を考える必要がでてきます。
JavaScript
HTMLは動かない静的な(主に)ドキュメントを表示するものですが、これをJavaScriptで表示・非表示を制御したり、書き換えたりすることによって、現代の動くWebページが作られています。
言語の選択
初期のJavaScriptは非常に使いづらい言語で、コンパイルでJavaScriptに変換する多数の言語(AltJSと言います)が作られてきました。一方でJavaScriptも急速に改善が進んでおり、主要なブラウザで動くES6であれば、細かいことを抜きにすればAltJS要らないかな、と思えるレベルにはなっています。
なので、ここではES6を推奨します。ただし重大な問題として、IE11はES6に対応していません。この場合はES6を使わないJavaScriptかAltJSが選択肢になります。
サーバサイドの良さげな言語を知ってる人だとES6でもかなりショボいんですが、AltJSはビルドまわりが現状混迷しているので当記事の範疇を越えると考えています。(訳：作者も匙を投げた)
ライブラリ
よくあるものは既に先人がライブラリ化して、読み込むだけで使えるようになっています。積極的に使いましょう。
最近はJSをダウンロードしてそこから読むようにすることも多いですが、CDNの方がURLを追記するだけなので楽だとおもいます。cdnjsやjsDelivrあたりが、種類も豊富で探しやすい印象です。
DOM操作
HTMLはレンダリングされるとDOMによってJS側からアクセスできるようになります。非常によく行なわれるので、Webサイトの技術的な設計がDOM操作のライブラリ(フレームワーク)によって大きく変化します。
VanillaJS
所謂ライブラリ無しです。デフォルトでDOM操作はできます。しかし、ちょっとでも複雑になるとすぐに破綻してしまうでしょう。書くなら10行以内で終わるようなものか、自前でラッパー作るような感じになります(そしてこの記事の範疇を越える)。
VueJS
一定以上複雑な画面ならこれで。使い方はこの記事での範疇を越えますが、他との違いは、VueJSはあくまでもライブラリであり、ビルド等が不要という可搬性です。
jQuery
やめましょう。確かによくメンテされていますが、VanillaJSと同レベルにメンテ性が悪く、jQueryが誕生した時期には存在した「ブラウザ互換性の問題」は、少なくともDOM操作という観点ではVanillaで解決しています。容量も小さくありません。
その他便利なもの
fetch API
Webページ内でHTTPアクセスするときに使います。Promiseが返ってくるので使いやすく、標準です。対応してないブラウザは極僅かにありますがPolyfill(いわゆる互換ライブラリ)を使えばいいでしょう。
サイトデザイン
1からサイトのデザインを作るのは大変です。CSS書くのはめんどうくさい。よく使うcomponentも1から作るのは大変です。そこでフレームワークを使いましょう。色々ありますが、選考の基準は、
- jQuery依存があるのか(無い方が良いです
- pure cssなのか
- カスタマイズ性
などでしょうか。作者も詳しくないので使ったことあるものだけを並べてみます。
Bootstrap
jQueryに依存します。シェア的には一番高そうですが、カスタマイズする人には嫌われてるような気がします。
MUI
pure cssです。Material Designのpure cssで作りたかったので試してみたのですが、悪くない感じでした(大きいのは作ってないけど)。
公開する
一通りできたら公開しましょう。結局のところサーバ側は静的なHTMLとJavaScriptがダウンロードできれば良いので、安価な手段もいくらかあります。
GitHub pages
殆どの場合Webアプリ開発はGitHubを使っていると思うので、これが一番楽だと思います。専用のbranch作って表示に必要なファイルを置いて、commitをpushするだけ。無料。
Amazon S3
S3はクラウドストレージサービスですが、Web上に公開することもできます。特筆すべきはカスタマイズ性の高さで、独自ドメイン、CloudFrontで大規模配信までできます。とはいえそこまで要らないことも多いですが…。有料ですが個人レベルのアクセス数なら塵芥みたいな値段だとおもいます。
nginx
もしサーバを必要とする場合は、そのサーバに同居させるのがよくある構造で、その場合は先頭にnginxを立て、URLに応じてnginxが直接返すHTML/JSなどの静的ファイルとAPIに分岐することになります。
WebFrameworkで配信
サーバに置くWebFrameworkによっては、自前で静的ファイルを配信できることがあります。その場合はそれに載せてもいいです。