2020年 Gaji-Labo のフロントエンドを振り返る

メリークリスマス🎅 森田です。
早いものでもう年末。今年もあと1週間。私の今年最後の記事になりました。
また、エンジニアの記事もこれが今年最後なので今年のフロントエンドを振り返ってみたいと思います。

※ 「Gaji-Laboの」というタイトルにしてますが、ほとんど森田の主観ですので実際とズレがあるかもしれませんがご容赦ください。

案件の傾向

2020年に携わった案件として主要なものとしては、

• React (Next.js) のフロントエンドサポート
• Vue.js (Nuxt.js) のフロントエンドサポート
• Shifter を使ったWordPress の静的サイト構築
• Shopify の ECサイト構築

などでした。このような案件は昨年もやっておりましたが、今年から特に引き合いが増えたと感じました。

jQuery や Rails の view の案件は減少傾向にあり、 React (Next.js) や Vue.js (Nuxt.js) のご相談が増えている傾向です。

また、Shopify や SSG (Static Site Generator) などのご相談も増えております。

上記に挙げたキーワードが必ず出ると言っても過言ではありません。

主要なキーワード

ということで、今年弊ブログや案件、Slack などでよく耳にした・使ったキーワードを振り返ってみます。
また、以下のキーワードはこのブログの検索流入としても、とても多い検索ワードでした。

そのような2020年の主要キーワードと今年書いた記事やシリーズも併せて紹介させていただきます。

React vs Vue.js

今年に始まったことではないですが、「React か Vue.js か」という話は今年もよく聞きました。弊社としてフロントエンドの提案から入る場合にもよくご相談されます。
個人的感覚ですが、現在国内ではわりと拮抗していると思います。

npmtrends で比較

比較が世界中が対象となりますが、npmのパッケージのダウンロード数を擬核できる npm trends で React と Vue.js でダウンロード数などを比べてみました。

Vue.js は中国で開発されたのもありアジアで特に人気ですが、世界で比較すると React が4倍以上使われているみたいです。

ちなみに「next vs nuxt」ですとこのような結果でした。
React が多いので当然ですが Next.js が多いですね。

来年はこの勢力図がどのように変わるのか大変興味深いです。

Jamstack

APIから取得したデータを静的にビルドして表示するWebアーキテクチャであるJamstack。

弊社サイトも Gatsby.js を用い Jamstack で作られています。

GatsbyJS

GatsbyJS は React製のフレームワークで、SSG として静的にサイトを構築することができます。
SPAの非常に高速なサイトを作ることができ Jamstack を代表するフレームワークのひとつです。

Headless CMS

Jamstack に欠かせない API を配信してくれる Headless CMS。
弊社は Jamstackを提唱するホスティングサービス Netlify を使い、Headless CMS として Netlify CMS を併せて使っています。

他にも国産の Micro CMS や contentful なども有名です。

SSG

SSG (Static Site Generator)。
日本語では静的サイトジェネレーターとも言われます。

その名の通り、静的サイトをビルドするツールを指し、ページの高速化で圧倒的なメリットをもたらします。

こちらのメリットについては以下の記事がオススメです。

Core Web Vitals

上記記事でも出ていた Core Web Vitals。
サイトの UX を測る指数であり、2021年からGoogle検索結果にも影響します。

来年はよりこのキーワードを聞くことになるでしょう。

Material-UI

Google 製のデザインシステム Material Design をベースに作られた、Reactコンポーネントライブラリです。

弊社では Material-UI のナレッジを沢山得ております。

TypeScript

もはや React とセットと言っても過言ではない TypeScript。

Shopify

SaaS型ECサイトプラットフォーム Shopify。
最近、ご相談も増えております。

Eコマースの黒船 Shopify、来年はより国内サービスをシェア争いをしそうですね。

まとめのまとめ

主要なキーワードと共に2020年の Gaji-Labo フロントエンドを振り返ってみました。

昨年のアドベントカレンダーからそのまま1年間営業日はブログを更新しました。このように主要キーワードと共に沢山の記事で今年を振り返れるのはそれだけ弊社メンバーの知見たナレッジが貯まっている証拠ですね。

来年も引き続き弊社の知見を紹介できればと思います。
それでは来年も Gaji-Labo をよろしくお願いいたします。