Webサイトのつくりかたは日々進歩しており、最近は作るのも公開して維持するのもだいぶ楽になってきました。
ついこの間まではレンタルサーバーを借りてどうのこうの設定したり、その関係で月々でお金がかかったり、その他サイト作成から公開までのプロセスがめんどくさすぎて「だったら自分のサイトなんて持たずにTwitter村かはてな村に入村して細々やるべな」みたいな感じになりがちでした。
が、人類にはまだSNSというオーパーツは早すぎたため、村は動物と美少女とポリティカルコレクトネスに支配され、おじさんたちはバーチャル美少女アバターを被りその素性を隠すことでしか存在できなくなりました。
そんなマッポーインターネット世界で信じられるのは自作Webサイトしかありません。
みなさんWebサイトを作りましょう。
今からWebサイトを作る上で、知っておくべきはJAMstackというキーワードです。
ブログやコーポレートサイト、イベント特設サイト、アーティストの公式Web、インターネットレーベル等そこまで複雑じゃない (= 動的処理が必須じゃない) Webサイトは、JAMstackの原則に則って構築すると開発も維持も楽になります。
このブログも React Static + Contentful + Netlify で構築しており、JAMstackです。
この記事は、
「ちょっとだけ凝ったWebサイト作りたいけどWordPressくらいしか知らん」👦🧒
という方から
「SPAとかSSRとかイマイチついていけなかったけどWebフロントエンド最近どうなの」🧑👩
という方ぐらいまでを対象にしています。
JAMstackは2018年後半あたりに提唱された、ざっくり言うと「Webサイトはこういう構成で組むと色々良さげだよ」という標語です。
原文が英語なので理解がしんどい方は有志が日本語訳しているのでそちらを参照してもよいかと思います。
JAMstackはJavaScript, APIs, Markupの頭文字を取ったもので、噛み砕きまくって言うと
「プログラム的な処理はサーバーでやらないで基本的にぜんぶクライアント側のJavaScriptでやろうね」
「どうしてもサーバーでやらなきゃいけない処理とかデータベース的なことはAPIでアクセスできるようにして、切り離そうね」
「レイアウト(Markup)はテンプレートとして作っておいて、公開する前に組み立てて静的ファイルにしておこうね」
です。
これだけ言われてもなんのこっちゃという感じですが、身も蓋もない言い方をすると静的サイトジェネレータを使って構築された静的サイトを、なんらかのホスティングサービス上で公開してればそれはJAMstackです。
これは公式にも書いてあるので噛み砕きつつ引用。
Better Performance
静的ファイルを参照しているだけなので、当たり前のようですが単純にパフォーマンスが良いです。
SPA (Single Page Application) や SSR (Server Side Rendering) といったWebフロントエンド技術はここ最近のトレンドで、それ自体とても素晴らしいのですが、常に
「ローディング遅くな〜い？🤷♂️」
「SEO不利じゃな〜い？🤷♀️」
「というか単純なWebサイト作るときにそんなに複雑なことしたくなくな〜い？🤷♀️🤷♂️🤷♀️🤷♂️」
という声が絶えず、ジッサイ確かにその通りでした。
JAMstackはあえて静的サイトに先祖返りすることで、そのへんをクリアしています。
Higher Security
処理を極力クライアントで行い、サーバー処理部分をAPIに限定している分、セキュリティ上対策すべきことも限定されます。
サーバー処理やホスティングを外部のサービスに委託できるので、その分自分は楽できます。
たとえば、NetlifyはSSH接続を無料でサクッと提供してくれます。
Cheaper, Easier Scaling
レンタルサーバーはランニングコストがかかりますが、静的サイトはNetlifyやFirebaseなどのCDN (Content Delivery Network) を利用して公開できるため、ランニングコストが基本的にかからないと言っていいでしょう。これ地味に革命的じゃないですか？
Better Developer Experience
「サーバーのこと考えなくていいのは単純に楽」というのは最近のフロントエンドやさんの合言葉みたいになりつつあります。
趣味やら小規模プロジェクトやらで人数が限られているときは特に、フロントエンドに集中できるのはスピーディで気楽ですね。
静的サイトジェネレータにはGoとかRubyとかPythonを使うものもあるので、JavaScriptスキルにあんまり興味ない人も手を出しやすいのも良いトコです。
良くないです。
すみません言い過ぎました。
Wordpressは確かに良い技術ですが、今からあえて手を出す理由は無いです。
WordpressはサーバーからフロントエンドまでガッチリWordpress用に構築する必要があり、何をするにもWordpressのお作法に従う必要が出てきます。
昨今のWeb技術の発展傾向を見るに、Wordpressに頼って色々乗りこなして行くのは今後確実にしんどくなっていくはずです。
すでに免許皆伝し素手でクマを倒せるようになったWordpress師範代の方を除き、今からWordpress山に籠もるのはやめときましょう。
Netlifyを始め、多くのCDNで必要になります。
GitはWeb開発以外でもむちゃくちゃ使いますし、Gitに触れてこなかった方はこれを機に仲良くなってみてもいいのでは。
基礎知識だけでいけます。
CLI (Command Line Interface) 、黒い画面に文字を打ち込んでどうのこうのするアレです。
Macだと『ターミナル』というアプリが最初からありますね。Windowsは『mintty』が使えるらしいです。
「これが嫌だからWordpress使ってるんだけど😡😡」という人もいるかと思います。
慣れましょう。
読もう。
JAMstackを始めるにおいて選択肢は色々あるんですが、触ってみて良さそうだった組み合わせをご紹介して記事を〆ようかと思います。
簡単、親切、そしてSSL対応やカスタムドメイン設定まで無料でやってくれる素晴らしいCDN。
ここのCEOがJAMstackの提唱者らしいです。
Githubはもちろん、GitlabやBitbucketとも連携できるのが嬉しさポイント高いです。
Vue.jsベースのフレームワークです。もともとはSSRを手軽に実現するためのものですが、静的サイトジェネレータとしてもなかなか優秀に使えると思います。
おすすめポイントは利用者の多さです。2017年あたりからVue.jsが爆発的に伸び、Vue.js自体の利用者層がそもそも厚いですし、Nuxt.jsも日本で触っている方が比較的多いように感じます。
僕もVue.jsを触り始めるきっかけになったのがNuxt.jsで、環境的にだいぶ初学者にフレンドリーで助かった記憶があります。
何より、ドキュメントが日本語対応済みです。ありがたいですね。
Web開発の流行りにキャッチアップしたい方は、とりあえずNuxt.jsを触ってみるのは選択肢として大アリです。
Netlifyを利用するなら、データソース作成はNetlify CMSがおすすめです。
オープンソースのHeadlessCMS (Content Management System) で、導入すると管理画面とエディタを提供してくれます。
詳しい仕組みは割愛しますが、ざっくり言うと
というフローを実現してくれます。
早い話がWordpressみたいに記事投稿できるわけです。🙌
設定も難易度は低く、なんだったら非公式ですがスターターテンプレートもあるので、サクッと試せます。
以前Qiitaでこのような記事を書いた手前、React Staticをおすすめしないのはどういう了見？という自己葛藤があるにはあるんですが...
React Static、設計思想もシンプルでとっつきやすく、このブログもReact Static製なので当然おすすめではあるんですが...いかんせん公式ドキュメントが少なく、現状圧倒的に色々整備不足、発展途上感があるため、初学者には胸を張っておすすめしにくさがあります🙃
オレはReactでやっていきてえ👊という方はぜひ一度おためしください。
JAMstackは一時期のLAMPのように、小規模Webサイト構築においてデファクトスタンダードとなっていくでしょう。
アウトプットまでの道のりが短く、エンジニアリング入門としても適しているボリューム感のため、これからプログラミング学んでいくぞ〜👶という方にもおすすめです。
2018年のトレンドになるかもしれないJAM Stackの日本語情報がなかったので和訳してみる
ご指摘やご質問などありましたら筆者ツイッターアカウントまで。