Blog

どこを見ても「ジャムスタック」という言葉があります。したがって、静的サイトジェネレーターを使用してサイトを構築することを考えたことがあるでしょう。しかし、どこから始めますか？あなたとあなたのチームに適したフレームワークをどのように選択しますか？

この記事では、2つの主要なJSフレームワーク（ReactとVue.js）を、学習曲線、パフォーマンス、コミュニティの規模、雇用主の関心など、さまざまな観点から比較します。

また、それぞれの静的サイトジェネレーターであるGatsbyとGridsomeを使用して静的サイトを構築することの違いについても説明します。

Jamstackは常にJavaScriptですか？

Jamstackを初めて使用する場合は、それが製品やフレームワークではなく、Webサイトを構築する方法であることを知っておいてください。 Jamstackは、JavaScript、API、およびMarkupの略です。 Jamstackサイトの重要な側面は、Webサーバーに依存しないことです。 JavaScriptフレームワークで構築された静的サイトはJamstackですが、.NET、PHP、およびその他のプラットフォームを使用して生成された静的サイトも同様です。スタック名のJavaScriptは、デプロイされた静的サイトの動的機能を指します。

JavaScriptは、その使いやすさから、Jamstackで最も人気のあるプラットフォームです。あなたは数時間でウェブサイトを立ち上げて稼働させることができます。そして、ほとんどの人がJavaScriptを少し知っているので、初心者の参入障壁は低くなります。

ReactまたはVue.js

React、Vue.js、およびAngularは、最も人気のあるJavaScriptフレームワークの大きなトリオを形成します。この記事では、Angularの学習曲線が急であり、TypeScriptとオブジェクト指向プログラミングを好む大規模なプロジェクトやチームに適しているため、ReactとVue.jsに焦点を当てています。

ReactがVue.jsとどのように比較され、これらの各カテゴリで獲得できるポイント数を見てみましょう。

学習曲線

Reactを開始するには、JSXを理解し、システムを構築し、JavaScriptに関する予備知識を持っている必要があります。 Vue.jsはこれらのいずれも必要とせず、構文を理解するためにJavaScriptの知識を少しだけ必要とします。

勝者： Vue.js

ドキュメンテーション

Vue.jsのドキュメントは、Reactのドキュメントよりもシンプルで明確です。

勝者： Vue.js

パフォーマンス

ReactとVue.jsはどちらも同様のパフォーマンスを発揮します。 Vue.jsは約半分のサイズです。ただし、他のWebサイトのリソースと比較すると、この事実だけが決定的な要因になることはありません。

勝者：ネクタイ

コミュニティの規模

ReactとVue.jsはどちらも、GitHubリポジトリのスター、寄稿者、ウォッチャーの数が同程度の大規模なコミュニティを持っています。

勝者：ネクタイ

スケーリング

どちらもスケールアップする準備ができています。 Vue.jsはスケールダウンに適しています。

勝者：ネクタイ

雇用主からの関心

両方に多くの求人がありますが、Reactは世界的に雇用主からの関心が高まっています。

勝者： React

明確な勝者はいないことがわかります。Vue.jsを支持するのは5：4ですが、非常に近いので、これを同点と呼びます。開発者はVue.jsだけでなくReactにも情熱を注いでいます。多くの人が両方を好み、使用しています。それは車のようなものです。アウディを運転する方法を学べば、メルセデスも運転できるようになります。

ギャツビー対グリッドサムマッチ

GatsbyとGridsomeはどちらも、それぞれReactとVue.jsの静的サイトジェネレーターです。いつかどこかで最初のものを聞いたことがあると思います。 Gatsbyは、長い間存在し、React開発者をターゲットにしているため、SSGの王者になりました。

Vue.jsはReactよりも若いため、GridsomeもGatsbyよりも若いです。ギャツビーの有利なスタートは、グリッドサムとのフィーチャーバトルで決定的なアドバンテージを与えました。しかし、それらを使用して同じWebサイトを構築し始めたとき、それらはどのように比較されますか？

これは、HTML5UP.netから入手した無料のHTMLWebテンプレートであるPhantomです。メインページには記事のリストがあり、それぞれに専用のページがあります。静的サイトの完璧なシンプルなユースケース。

使用するコンテンツは、個人用サイトで使用しているヘッドレスCMS KenticoKontentからのものです。ただし、最近はブログの投稿のほとんどを外部に公開しているので、古い記事がいくつか表示されても驚かないでください。

空白のサイトを初期化する

静的サイトジェネレーターを使用して新しいサイトを構築するための最初のステップは、スターターサイトを取得することです。通常、選択できるスターターは多数あります。最善の策は、コンテンツを取得するための好みの方法を備えたスターターから始めることです。私の場合、コンテンツのソースはヘッドレスCMSです。

ギャツビー

「GatsbyKontentstarter」をGoogleで少し検索すると、スターターのGitHubリポジトリに移動します。このリポジトリのクローンを作成してパッケージをインストールする必要があります。

 git clone https://github.com/Kentico/gatsby-starter-kontentcd gatsby-starter-kontentnpm i

gatsby develop実行することで、Webブラウザでサイトにアクセスできます。

グリッドサム

Gatsbyと同様に、Kontent固有のサンプルサイトもありますが、フル機能を備えています。私はむしろ空のGridsomeインストールを使用したいと思います：

 npm i --global @gridsome/cligridsome create gridsome-starter-kontentcd gridsome-starter-kontent

gridsome develop実行することで、素敵なHello、world！サイトが表示されます。

ソースプラグインの追加

RESTAPIによって提供されるヘッドレスCMSからのデータを使用しています。静的サイトジェネレーターには、データをダウンロードしてローカルのGraphQLノードに変換するプラグインが必要です。

ギャツビー

KenticoKontentソースプラグインがすでに含まれているスターターサイトをインストールしました。 gatsby-config.js projectIdを変更するだけです：

918ba95f-885b-0045-a463-650b22e1196a

gatsby developを使用してサイトを実行しようとすると、いくつかのGraphQLエラーで失敗します。それは予想通り、 projectIdを変更したところ、サイトはページが必要とするものとはまったく異なるデータセットを受け取ります。後で変更します。

グリッドサム

空のGridsomeプロジェクトをインストールしたので、npmを使用してKontentプラグインをインストールする必要があります。

 npm install @meeg/gridsome-source-kentico-kontent

私はまたに私のPROJECTIDなどのプラグインを追加する必要がありgridsome.config.js ：

 plugins: [{use: '@meeg/gridsome-source-kentico-kontent',options: {deliveryClientConfig: {projectId: process.env.KENTICO_KONTENT_PROJECT_ID}}}]

インデックスページがどのデータソースにもバインドされていないため、サイトは引き続き同じように機能します。

スタイルと画像の追加

元のWebテンプレートであるPhantomには、いくつかのスタイルシートと画像が含まれています。それらを追加する方法を見てみましょう。

ギャツビー

フロントエンドアセットの場合、プロジェクトのルートで、フォルダーを作成してstaticという名前を付けることができます。 Gatsbyは、そのフォルダーのすべてのコンテンツを最終ビルドにコピーするだけです。

スタイルシートの場合、コンポーネントとページに直接インポートするのが最善です。したがって、Phantomテンプレートのcssフォルダーの内容はsrc / cssに移動します。

すべてのスタイルシートを配置したら、Gatsbyサイトのレイアウトにインポートするスタイルを変更する必要があります。 src/components/layout.js定義されており、削除する必要のある次の行が含まれています。

 import './layout.css';

代わりに、次の行を追加する必要があります。

 import '../css/fontawesome-all.min.css';import '../css/main.css';

最後のステップは、CSSファイル内の参照されるアセットのパスを調整することです。これらは通常、フォントと背景画像です。私の場合、それはフォント素晴らしいです：

 ...src:url(../webfonts/fa-brands-400.eot);...

フォントファイルは自動的に最終ビルドにコピーされるため、それに応じてパスが変更されます。

 ...src:url(/assets/webfonts/fa-brands-400.eot);...

すべての「../webfonts/」を「/ assets / webfonts /」に置き換えます。

グリッドサム

静的アセットの静的フォルダーは既にプロジェクトルートにあるので、アセットを直接コピーして貼り付けることができます。

Gridsomeがスタイルをレイアウトに追加することを確認するには、次のコードを特別なファイルmain.jsに追加する必要があります。

 head.link.push({ rel: 'stylesheet', href: '/assets/css/fontawesome-all.min.css' })head.link.push({rel: 'stylesheet',href: '/assets/css/main.css'})

スタイルとフォントの両方が同じ静的フォルダーに配置されるため、フォントファイルへのパスを更新する必要はありません。

レイアウトの調整

スタイルを配置したら、レイアウトページとコンテンツページのHTMLを調整する必要があります。レイアウトは、すべてのページで同じであるページの一部です。

私は通常のレイアウトを作成する方法は、間のHTMLコードをコピーして貼り付けることですとテンプレートからタグ。次に、各ページがコンテンツをレンダリングする場所のコードを削除します。

ギャツビー

デフォルトのレイアウトはsrc/components/layout.jsます。 CSSをインポートするときに、すでにこのファイルに出くわしました。

StaticQueryのレンダリング部分内のすべてのコードをテンプレートのHTMLに置き換えます。

  (*HTML code from the template*)}>

GatsbyにはJSXが必要ですが、HTMLを貼り付けたので、変更を加える必要があります。最も重要なのは、すべてのclass='*'属性をclassName='*'です。 HTMLコメントも削除する必要があります。

Phantomテンプレートには、