新卒1年目総合職がAMP×Nuxt×WordPressのJAMStackっぽいものを作った話

これってなんのnote？

新卒総合職なのにJAMstackっぽいもの一人で作っちゃったよ！
すごいでしょ！褒めて！！！っていうnoteです。

嘘です。後半が10%ほど嘘です。

※本作は原作者（自分）の意思を尊重し、書いたときの文字ほぼそのままを掲載しています。推敲やら語尾調整やらは何もしてないので、表記がバラバラです。お気をつけて！

タイトルにあるような諸々を使ってフロントを構築する人が、自分と同じところに引っかかる時のために少しでも道標を残しておこうかな〜と考えこのアカウントを作りました。
結構ドキュメントがなくて禿げそうだったので。

qiitaにしなかった理由としては、noteならお金がもらえると聞いたからです。
自分が作ったシステムは実際に副業に使ってる以上、「公開するのは嫌だな〜」と思いつつ、「情報の共有も大事だよね」と思いつつ、悩んだ結果お金に仲介してもらうことにしました。

と言うことで、このアカウントではAMP×Nuxt×WordPressでJAMstack的なものを作る時に考えたこととか、つまづいた所とかを共有していきます。
この記事では、その第１段として「何したか」「なんでしたか」「何考えたか」を書いていきます。
同じことを考えてる人は参考にしてみてください。同じことを考えてない人は何も言わずにお金をください。あなたのコーヒー１杯分のお金が、私のコーヒー１杯分のお金になります。

で、何したの？

＿人人人人人人人＿
＞     何もかも！   ＜
￣Y^Y^Y^Y^Y^Y^Y￣

高性能なWEBサイトを受注ベースでポンポン作れるようにしました。
そのために、Nuxtを基盤としてシステムを組みました。
ついでに、とことんスペックあげようと言うことで使えるものを色々突っ込みました。
制作期間は、正確には数えてないのでアレですが、土日を使って半年と言ったところでしょうか。結構長い。

WordPressで記事作ったら→webhookでキャッチして→勝手にAMP HTML（静的ファイル）をビルド＆デプロイする感じです（固定ページはNuxt側で作ることにしてます）。

かっこいいでしょ？

隠し味はアトミックデザインをベースに事前設計されたコンポーネント群です。

何使ったの？

イカれたメンバーを紹介するぜ！

まずは

「SSRもCSRもお手の物！」
Nuxt.js！

「静的ページ専用、ストライクゾーン3cmのWEBホスティングサーバー！」
Netlify！

「使い古されすぎて逆に新しいCMS！」
WordPress！

「名前の割にめちゃくちゃとっつきやすい画像CDN！」
Cloudinary！

「おなじみだけど使ってみるとよくわからないフレームワーク！」
AMP！

「タイプはめちゃくちゃあるのに使われるのは極一部、Google様への連絡役！」
JSON LD（Schema.org）！

以上だ！

なんでこんなことしたの？

とりあえず新そうなものを突っ込みたかったからです。No.1じゃなくてもOnly1になりたかったからです。

自分は性癖として何かを作ってる時が一番ワクワクできるので、半ば趣味みたいな感じで作りました。実はまだこれは道半ばで、土台が作り終わったくらいの段階です。この後実現したいヤバい機能があるので、そこに進むためのステップとして作った感じです。

話を戻しましょう。

ぶっちゃけWEBサイトの受注作成なんて誰でもできます。
ただ「WEBサイト作れます」だと差別化ができないので食いっぱぐれます。もしくは割に合わない仕事ばっかりになります。美味しくないと嬉しくないです。（ご飯と同じですね。不思議！）
なので、ニーズは絞られるとしても最先端の技術を注ぎ込んで独自性を出さないと営業がめんどくさいのと、そもそもあるべき姿を求めない姿勢は好きじゃないので作ってみました。（「営業がめんどくさい」と言いつつここ1年くらいは自分で営業をしておらず、ビジネスパートナーにお願いしてるのですが、、、）

自分で言うのもなんですが、これを作ったことで「どこにでもいるWEB制作組織」から「めちゃくちゃ技術レベルが高いWEBのプロ集団」に飛び級できたと勝手に思ってます。まだ個人事業主ですけど。
実際超ハイスペックのサイトを作るのに費用は相場とほぼ同じなので、めちゃくちゃ差別化はできました。相場価格でしっかり元が取れる（コーディング速度も高速化できちゃう）のがこのシステムの凄い所なんです。
隠し味がここで活きてるんですね〜

なんでこのメンバーでバンド組んだの？

Nuxt.jsに関しては、「SSRができるJS」「だいたいVue.jsなので使い易い（教育コストが低い）」と言うポイントを評価して選びました。現段階ではCSRはしてないですが、今後の計画で使うのでそこもポイント。

Netlifyについては、これも取っつきやすさが最大のポイントです。
本当にゴリゴリやるならAWSとかFirebaseとかがいいんでしょうが、あくまで個人単位でこぢんまりやるので、使いやすさ重視です。こじんだけに。
あと、何個もサイト作ってホスティングすることを考えると、Netlifyの料金体系がありがたく感じたのも裏ポイント＋１です。サーバーこっちで持つんで保守費用もらえてありがて〜！（この話は別の機会に）

WordPressは言わずもがな。ここは唯一クライアントが触れる場所なので、ドキュメントの多さ重視です。WordPressならだいたいみんな知ってるので運用し易い＝こっちに無駄な問い合わせがこないと言うことで。ぶっちゃけCMSしてくれてAPIがあればなんでもOKです。

次は聴き慣れない人もいるかもしれないCloudinary。こいつはめちゃくちゃ優秀です。
そもそも今回は静的ファイルにした上に極限までCSSやら削って軽量化してるのですが、それでも画像対策しないとGoogleさんはPageSpeed Insightsとかで平気で40点って言ってきます。世知辛い。
そんなあなたにこれ！Cloudinaryに画像をあげてURLをちょちょいといじればあら不思議、画像をサイズもフォーマットもいい感じにして配信してくれます！しゅごい。
一番速度に貢献してくれてる子。実はこの子が一番肝かもしれない。愛してる。

AMP、これは言わずもがなですね。Google様に擦り寄る姿勢の象徴として選びました。
今回は（問い合わせ含め）全ページAMP HTMLで構築してますが、AMPは単純なコンポーネント用フレームワークとしてでも優秀です。Bootstrapは過去の人ってレベル。LazyLoadしてくれるし、Accordionとかもあるし、Inviewアニメーションも実装できるし、カルーセルもあるしで結構すごい子。さすが天下のGoogle。そりゃすりすり擦り寄りたくもなりますわ。

最後のJSON LD、ぶっちゃけこれはなくてもいい気もしてる。パンくずリストを伝える以外は現状ほぼほぼ使ってないですたい。
使ってもいいんだけど、結構SearchConsoleが姑みたいに煩くなるから費用対効果が微妙。まあそれでもPublisherはしっかり設定しますけどね！

何考えたか

ここまで読んでくださった方は気づいておいででしょうが、今回の記事は導入なので、中身がないです。
２８００文字もあるのに、「マウント取ってきてるな〜」くらいしか感想が湧かないでしょ？
このままだと投げ銭がもらえない気がするので、ちょろっと自分の考えをば。

これを作った理由は先にある通り、夢（趣味）と実益を兼ねてです。
実益はこれまでの内容でだいたいわかると思うので、夢の部分を語りましょう。

自分は今24歳でそこまで人生経験があるわけではないですが、それでも昨今の技術の進歩は速いな〜と思ってます。
ただ、その中でぶっちゃけあんまり進歩してない気がする分野があります。それがWEBサイトです。

フロントエンドは今キてる言語でフロントエンドエンジニアの市場価値は高いと思いますが、あくまでそれはサービスに使う前提の話で、WEBサイト自体はそこまで重視されてない気がします。
だってTwitterやらInstagramやらYoutubeやらが出てきて、「コンテンツって文字だけじゃないよね〜」ってなって来てますから。

確かに動画コンテンツやらSNSやらは情報の入手難度や新鮮さと言う面で優れてると思います。ただ、これら（特にSNS）は揮発性が高く、「長く残すべき情報」の保存が難しいのが現状です。
WEBサイトがそれらに取って変わるべきだとは思っていませんが、少なくとも「WEBが担うべき役割」はきちんと担える必要があると思ってます。
新しい情報や簡単な情報は動画やらSNS、古いものやらなんやらはWEBサイト、といったイメージです。
じゃないと、いざ古い情報を掘り当てようとした時に、「欲しいものがどこにもないっすわ〜」ってなっちゃいますから。

しかし、WEBの技術は古く17年前のシステム（WordPress）が依然最前線という現状です。
もちろんWordPressがそれほど優れてるということもありますが、やはり時代の変化に合わせて変わるべき部分はしっかり変わって役割を果たせるレベルになるべきだと思うので、微力でも支えになろうと思いました。
今のままのWEBでも探せば見つかるのですが、ぶっちゃけエンドユーザーの検索能力はどんどん下がってるし今後も下がっていくと思います。だって最近のサービスはレコメンド機能モリモリなんですもん。
「水は低きに流れ、人もまた低きに流れる」とSAC 2ndGIGでクゼが行ってましたが、結構真理だと思います。
今後人が今よりも低い位置に流れてて、「探そうとしてもWEBの位置が高すぎて届かないっすわ」なんてなってたら詰むでしょ？と。

何が言いたいかっていうと、「今のWEBサイトって古い気がするから、俺がイケてる感じに作り替えてやるぜ〜」ってことです。
傲慢だとは思いつつ、それを実現するための面白そうなアイデアを思いついちゃったので、地ならしをしてたらできたのがこれなんですね。楽しい〜

投げ銭タイム

さあ、なんかいいことっぽい事書いたところで、唐突な投げ銭タイム！
有料購入したからと言って特に何もないですが、「こいつイカれてるから金やっちゃる」という方は清き１票を！

あなたがコーヒーを１杯我慢するだけで、わたしがコーヒーを１杯我慢しなくて済みます

これは投げ銭するっきゃない！
※マジのガチで単なる投げ銭なので、その場のノリ以外の気持ちで購入しないでください。コンテンツは何もないです。返金もできないです。お気をつけてお金ください！

お賽銭箱はこちら