<p>Web制作の世界は常に進化しており、新しい技術が次々と登場しています。その中でもJamstackは、より高速でセキュア、そしてスケーラブルなウェブサイトを実現するための革新的なアプローチとして注目を集めています。しかし、新技術の導入は不安や挑戦を伴うもの。そんな時、ブラキオがパートナーとして、皆さんのJamstackにおける挑戦を全力でサポートします。</p><h2 id="h79f76d2a79">こんなお悩みはありませんか？</h2><ul><li>Jamstackの導入に興味はあるけれど、どこから手を付けていいかわからない</li><li>必要なノウハウや自信がなく、一歩を踏み出せないでいる</li><li>日々の業務に忙殺され、新たな技術を学ぶ余裕がない</li><li>技術的な課題を乗り越えるため、信頼できるフロントエンドのパートナーを探している</li></ul><h2 id="h93d087dce8">ブラキオにお任せください！</h2><p>ブラキオは、フロントエンド開発における豊富な実績を持ち、Jamstack開発においても皆さんをテックリードとして支援できます。コーポレートサイトからwebサービスまで、あらゆるフロントエンド開発のお手伝いをします。また、コーディングだけのお仕事も大歓迎です。</p><h2 id="h2e4fdc2256">私たちのポリシー</h2><ul><li>進捗報告: 定期的な報連相を通じて、プロジェクトの進捗を透明に共有します。</li><li>納期厳守: 設定したマイルストーンに沿って、余裕をもって納品します。お客様の期待を裏切ることはありません。</li></ul><h2 id="h7291455f5b">ご興味があれば、まずはお気軽にご連絡ください</h2><p>プロジェクトの成功は、良いコミュニケーションから始まります。ZoomでのオンラインMTGや、Slackなどのチャットツールを通じて、いつでも柔軟に対応させていただきます。まずはお問合せいただければ、お見積もりを含め、具体的なご提案をさせていただきます。<br>Jamstackでのウェブサイト制作は、多くの可能性を秘めています。ブラキオと一緒に、新たな挑戦に踏み出しませんか？あなたのビジョンを現実のものとするために、全力でサポートさせていただきます。</p>

Jamstack開発の下請けをお探しですか？ブラキオがあなたの強力なパートナーに

<p>Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/25a11da6c11344aa872928013293c13e/image.png" alt=""><br>まずは、実際に試してみて、その振る舞いを体験してみましょう。</p><h2 id="h77a16da6bb">react-scrollライブラリを活用しよう</h2><p>このような機能を簡単に実装するためには、<code>react-scroll</code>というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。</p><pre><code>npm i --save react-scroll</code></pre><p>そして、以下のように呼び出して使用します。</p><pre><code>import { Link as Scroll } from 'react-scroll'

export const Nav: FC&lt;Props&gt; = () =&gt; { 
  return (
    &lt;ul&gt;
      &lt;li&gt;
        &lt;Scroll to={'/#about'} smooth&gt; About &lt;/Scroll&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  ) 
}</code></pre><p><br></p><h3 id="hee335831b4">注意しておきたいポイント</h3><p>ここでのimport文では、<code>Link as Scroll</code>という形でエイリアスを設定しています。これは、<code>Link</code>という名前がNext.jsの <code>Link</code>と名前が重複してしまい、混乱を避けるためです。<br>そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素に<code>id="about"</code>のようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。<br>以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。</p>

Next.jsにおけるページ内スクロールの実装ガイド

<p>私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。<br><br>また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。<br><br>特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。<br><br>そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。<br><br>なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。<br></p><h2 id="hb293e863f7">開発体験最高だよ</h2><p><br>フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。<br><br>ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。<br></p><h2 id="haae249dfe1">ホスティングは迷うならNetlify一択</h2><p><br>firebase, Amplifyなどがあるけど迷うならNetlifyで良い。<br><br>デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。<br><br>ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな？？やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。<br><br>ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。<br><br>これはゆくゆくは解決されるのではと思っているけど・・・。<br></p><h3 id="h29fce8b3b3">webhookでSlackに通知は怠るな</h3><p><br>デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし<br><br><a href="https://ja.unflf.com/tech/netlify/slack/" target="_blank" rel="noopener noreferrer">NetlifyへのデプロイをSlackに通知する | Unselfish Meme</a><br><br><a href="https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53" target="_blank" rel="noopener noreferrer">【Netlify】Forms機能を利用して問い合わせフォームを作成する - Qiita</a><br><br>2021/01/14 追記<br>どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。<br><br>アカウント持っている方はホスティングしたサイトを選択 &gt; Site settings &gt; Build &amp; Deploy &gt; ページ下部のDeploy notifications &gt; Add notification で確認した方が良い。<br>notificationができるのであれば下記のように選べるようになっている。<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/3bf7e3668fb04beea810003e9473c975/https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47844_940462ac-67be-940c-1a11-3147c3503a29.avif" alt=""><br><br><br>もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。<br><br><a href="https://www.netlify.com/pricing?_ga=2.186381993.183739533.1610513213-658925115.1582597672#features" target="_blank" rel="noopener noreferrer">Netlify Pricing and Plans</a><br></p><h2 id="hadc4170e23">microCMSを選ぶべし</h2><p><br>microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い<br><br>日本語だし、UIも日本人にわかりやすく受け入れられやすい<br><br><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS | APIベースの日本製ヘッドレスCMS</a><br></p><h3 id="h4a83b95bc2">プレビュー機能は絶対入れとけ</h3><p><br>どのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか？」<br><br>そんなに難しいことをせずに実装できるので絶対に入れるべし<br><br>`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&amp;draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。<br><br><a href="https://microcms.io/blog/nuxt-jamstack-preview/" target="_blank" rel="noopener noreferrer">microCMSとNuxtでプレビュー画面を作成する</a><br></p><h3 id="h34951ed23c">記事更新などでデプロイが走るようにするのを忘れるべからず</h3><p><br>APIのエンドポイントごとの設定なので注意すべし<br><br>これやっておかないと「記事更新したのにサイトに反映されてないんですけど！」と連絡来てしまう。<br><br><a href="https://microcms.io/blog/webhook-multiple-settings/" target="_blank" rel="noopener noreferrer">Webhook機能がパワーアップしました</a><br></p><h2 id="had7aa69075">lighthouseで満点狙うべし</h2><p><br>私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/60c512310b0942f99b430402a855125a/https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47844_65e92705-f171-b1bc-91d7-0ad0e1c08cab.avif" alt=""><br>基本的にはlighthouseで採点 &gt; 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。<br><br><a href="https://github.com/hanford/next-offline" target="_blank" rel="noopener noreferrer">hanford/next-offline: make your Next.js application work offline using service workers via Google's workbox</a><br><br>あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。<br><br>画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。<br></p><h2 id="hb29156e8f7">Jamstackの泣きどころ</h2><p>これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。<br>graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い！！！)<br><br><a href="https://graphcms.com/docs/environments#environment-endpoints" target="_blank" rel="noopener noreferrer">https://graphcms.com/docs/environments#environment-endpoints</a><br><br>## 個人的に今後やっていきたいこと<br><br>今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。<br></p><ul><li>storybookを入れて別ドメインにデプロイして共有するようにしたい</li><li><a href="https://github.com/reviewdog/reviewdog" target="_blank" rel="noopener noreferrer">reviewdog</a> の導入（TSのチェックをPR作成時などでチェックするようにしたい）</li><li>ガイドラインなどのドキュメント作成</li></ul><p><br></p>

なぜJamstackでWEB制作の仕事を受けようと思ったのか

【それでもCSSは破綻する】 CSSの設計手法と書き方を考える

<p>WordPressとJamstackは、ウェブサイトやウェブアプリケーションの構築に使用される異なる技術です。それぞれの主な違いは以下の通りです。</p><h3 id="hd04cfc55ee">アーキテクチャ</h3><ul><li>WordPressは、従来型のサーバーサイドレンダリング（SSR）アーキテクチャを採用しています。これは、ウェブページがリクエストされるたびにサーバーで動的に生成され、クライアントに送信される仕組みです。WordPressはPHPとMySQLデータベースを使用し、サーバーでの処理が中心となります</li><li>Jamstackは、静的サイト生成（SSG）とクライアントサイドのJavaScriptによる動的処理を組み合わせたアーキテクチャです。ウェブページは事前に生成され、CDN（Content Delivery Network）から高速に配信されます。APIを利用してデータや機能を追加することができます。</li></ul><h3 id="hf0d815c0bb">パフォーマンス</h3><ul><li>WordPressは、ページがリクエストされるたびにサーバーで生成されるため、ページの読み込み速度が比較的遅くなることがあります。</li><li>Jamstackでは、静的に生成されたページがCDNから配信されるため、ページの読み込み速度が速く、パフォーマンスが向上します。</li></ul><h3 id="ha3055eb139">セキュリティ</h3><ul><li>WordPressは、サーバーサイドの処理が多いため、セキュリティの脆弱性が発生しやすいです。プラグインやテーマの更新が不十分だと、セキュリティリスクが高まります。</li><li>Jamstackは、静的コンテンツを利用し、APIを通じてサーバーサイドの機能を利用するため、セキュリティリスクが低くなります。</li></ul><h3 id="h441bfb016b">管理・開発のしやすさ</h3><ul><li>WordPressは、豊富なプラグインやテーマが利用でき、簡単にウェブサイトを構築・管理できます。非技術者にも扱いやすいCMS（コンテンツ管理システム）が提供されています。</li><li>Jamstackは、静的サイトジェネレーターやヘッドレスCMSを利用することで、ウェブサイトの構築・管理が可能ですが、開発者向けの技術が必要な場面が多いです。</li></ul><p><br></p><h2 id="h75b5426164">それぞれのメリット、デメリット</h2><p>それぞれの技術にはメリットとデメリットがあります。以下に、WordPressとJamstackの主なメリットとデメリットをまとめました。</p><h3 id="h6e7b40164b">WordPress</h3><h4 id="h3ab24f6f50">メリット</h4><ol><li>シンプルなセットアップ: WordPressは、簡単にインストールし、すぐにウェブサイトを構築できます。</li><li>ユーザーフレンドリーなCMS: WordPressのCMS（コンテンツ管理システム）は直感的で、非技術者でも扱いやすいです。</li><li>豊富なプラグインとテーマ: WordPressには多数のプラグインとテーマが用意されており、機能追加やデザイン変更が容易です。</li><li>大規模なコミュニティ: WordPressは広く利用されており、サポートや情報が充実しています。</li></ol><h4 id="h7e4a670898">デメリット</h4><ol><li>パフォーマンス: ページがリクエストごとに動的に生成されるため、読み込み速度が遅くなることがあります。</li><li>セキュリティ: サーバーサイドの処理が多く、プラグインやテーマの更新が不十分だとセキュリティリスクが高まります。</li><li>カスタマイズの制限: コア機能やプラグインに依存するため、高度なカスタマイズが難しい場合があります。</li></ol><h3 id="h53ba4103ca">Jamstack</h3><h4 id="h3ab24f6f50">メリット</h4><ol><li>高速なパフォーマンス: 静的コンテンツをCDNから配信するため、ウェブページの読み込み速度が向上します。</li><li>セキュリティ: サーバーサイドの脆弱性に対するリスクが軽減され、APIを通じて安全にデータや機能を利用できます。</li><li>スケーラビリティ: 静的コンテンツは容易にスケールできるため、トラフィックが急増した際も安定したパフォーマンスが維持されます。</li><li>開発の自由度: 静的サイトジェネレーターやヘッドレスCMSを組み合わせることで、柔軟な開発が可能です。</li></ol><h4 id="h7e4a670898">デメリット</h4><ol><li>学習コスト: Jamstackの開発では、静的サイトジェネレーターやヘッドレスCMSなどの新しい技術を学習する必要があります。</li><li>開発者向け: Jamstackは開発者向けの技術が多く、非技術者には扱いづらい場面があるかもしれません。</li><li>管理ツール: WordPressほど充実した管理ツールがない場合があります。ただし、ヘッドレスCMSを使用することで、状況に応じたコンテンツ管理が可能になります。</li></ol><h2 id="h22c9ed49c3">ブラキオでは</h2><p><span style="color:#374151">弊社ではお客様のご要望に応じてWordPressを用いた制作も承りますが、基本的には最新のトレンドを追求し、高パフォーマンスと高セキュリティを実現するJamstackを採用してウェブサイト制作を行っております。当社のフロントエンドエンジニアは10年近い実績があり、特にJavaScriptの知識や経験を豊富に持っています。そのため、最先端の技術を駆使して、お客様に最高品質のウェブ制作を提供できることを自負しております。弊社では、お客様に満足いただけるようJamstackを活用した効率的で安全なウェブサイト制作をお勧めしております。</span></p>

WordPressとJamstackの違いについて

<p>API（Application Programming Interface）とは、アプリケーションやソフトウェア間でデータや機能を共有するためのインターフェースです。APIを利用することで、異なるソフトウェアやサービスが相互にやり取りを行い、一連の機能を実現できます。APIは、プログラムが他のプログラムと通信するための規則やプロトコルを定めたもので、効率的な開発が可能になります。</p><h2 id="h9a6d0c3d7b">APIの特徴</h2><ol><li>機能の再利用: APIを利用することで、すでに開発された機能を再利用することができ、開発時間やコストを削減できます。</li><li>モジュール性: APIにより、システム全体がモジュール化され、各コンポーネントが独立して開発・更新・保守できます。これにより、全体の柔軟性や拡張性が向上します。</li><li>セキュリティ: APIを通じてデータや機能にアクセスすることで、不正アクセスやデータ漏洩のリスクを軽減できます。APIはアクセス制御や認証機能を備えているため、セキュリティが強化されます。</li><li>互換性: APIは異なるプログラム間の通信を可能にするため、異なるプラットフォームや言語間でも互換性が保たれます。</li></ol><h2 id="h4d7d5f37c2">APIをもっと初心者にわかりやすく</h2><p>APIをもっと簡単に説明すると、レストランのメニューに例えることができます。レストランのメニューには、利用できる料理や飲み物が一覧で示されており、お客様が選択して注文することができます。<br>APIも同様に、利用できる機能やデータが一覧で示されており、開発者が選択してプログラムに組み込むことができます。メニューから注文することで料理が提供されるように、APIを使ってリクエストを送ることで、機能が実行されたり、データが返されたりします。これにより、開発者は簡単にプログラムに機能を追加できるようになります。<br>弊社ではWEBサイト制作時にJamstackという最新のアーキテクチャを採用しています。Jamstackは、JavaScript、API、Markupの頭文字を組み合わせた言葉で、ウェブ開発のアプローチの1つです。このアプローチにより、パフォーマンス、セキュリティ、スケーラビリティが向上し、効率的なウェブサイト制作が可能になります。</p><h2 id="h7e3736fb23">弊社の取り組み</h2><p>Jamstackでの制作では、API（Application Programming Interface）が重要な役割を果たします。APIは、アプリケーションやサービス間でデータや機能を共有するためのインターフェースで、ウェブサイトの機能を追加・拡張する際に利用されます。例えば、ウェブサイトにお問い合わせフォームやログイン機能、ソーシャルメディア連携などを実装する際にAPIが活用されます。<br>JamstackアーキテクチャにおけるAPIの利用は、セキュリティ面でもメリットがあります。従来のウェブアプリケーションでは、データベースやサーバーサイドの処理が直接ウェブサイトに組み込まれているため、セキュリティリスクが高まることがありました。しかし、JamstackではAPIを介してサーバーサイドの機能を利用するため、サーバーサイドの脆弱性に対するリスクが軽減されます。また、APIはアクセス制御や認証機能を備えているため、安全にデータや機能を利用できます。<br>弊社では、Jamstackを活用してセキュリティに優れたウェブサイト制作を行っております。お客様のビジネスニーズに合わせた機能を迅速かつ安全に実装し、高品質なウェブサイトを提供いたします。</p>

Jamstackで使われるAPIを簡単に説明すると・・・

- WEBサービスのフロントエンド開発
- ホームページ制作

株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。Next.js, React, TypeScriptなどモダンな技術でつくる高品質なソリューションを低価格でご提供します。フロントエンド開発・Jamstackで作るホームページ制作をご依頼ならブラキオにお任せください。

THANKSお問合せありがとうございます