teto tech blog

Reactは独学では難しすぎる？実務レベルに届くオススメ学習方法

【2022年10月最新】初心者でも分かりやすいReactの始め方

【初心者の方へ】難しすぎるReactを挫折しない学習方法3選

【失敗させない】React初心者が選ぶUdemyおすすめ教材5選+1

 【3ヶ月で実務レベル】初心者が本当に知りたかったReact入門

<p>Reactでとあるサービスを作るのに、GoogleスプレッドシートをCMSにできたらすごいな？と思い検索をかけると、<a href="https://qiita.com/sin164/items/2addcf88dda4844d5219?utm_source=pocket_mylist">こんな記事</a>が出てきました。</p>
<p>手順通りに進めるとちゃんとReactで取得ができ感動したのを覚えています。その節は本当にありがとうございました（？）</p>
<p>ちゃんと想定した挙動となって助かったのですが実務で活用する際に、以下のようなデメリットがありました…</p>
<ul>
<li>Google API の登録がめちゃくちゃ手間</li>
<li>なぜかレンダリングが遅い</li>
<li>コードが複雑になる</li>
</ul>
<p>とにかくお金をかけたくなかったので、上記の記事はありがたかったのですが、特にレンダリングが遅い件がどうやっても解決ができず、メンターサービスのMentaでも相談をさせていただきました。それでも解決に至らず、途方にくれていました。</p>
<p>レンダリングが遅いということは、サービスを使ってくれる方々の負担になってしまう…苦渋の決断で<a href="https://sssapi.app/">SSSAPI</a>を使用することにしました。</p>
<p>結果、もっと早く使っておけばよかったと後悔したほど、よいサービスでした。</p>
<h2>スプレッドシートをCMSにするなら『SSSAPI』</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/ab3f56a7-4b3c-4058-bc42-87f835202b7c%2Fsssapi-1.jpg" alt="sssapi-1.jpg"><br>
<a href="https://sssapi.app/">SSSAPI</a>：<a href="https://sssapi.app/">https://sssapi.app/</a><br>
実は『スプレッドシート CMS』等で検索すると上位に表示がされるため、存在は知っていました。すぐに飛びつかなかったのは、『自分でやる方がプログラミングの勉強になる』と思ったのと、『お金をかけたくなかった』からです。</p>
<p>今後Reactでスプレッドシートからデータを持ってきたい場合は、私は絶対SSSAPIを使います。</p>
<h2>SSSAPIの良いところ</h2>
<ul>
<li><strong>速い</strong> ... スプレッドシートのURLだけでJSON APIを作成することができ、導入に手間がかからず『早い』、またレスポンスも速く、GASの4倍高速（公式ページより）だそうです。</li>
<li><strong>安い</strong> ... 無料プランもあり、有料プランも月額300円、900円などとにかく安い。</li>
<li><strong>安心</strong> ... 最低限の権限で済むのでセキュリティも安心。</li>
</ul>
<p>データベースの専門知識が必要ないので、駆け出しのフロントエンド</p>
<p>エンジニアが開発に集中ができるようになるところが、個人的に良かったポイントです。<br>
<br></p>
<h2>SSSAPIに登録する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/926ee03b-9685-4ac7-ab15-4482e1d030f2%2Fsssapi-2.jpg" alt="sssapi-2.jpg"><br>
スプレッドシートを使うのでGoogleアカウントで登録&amp;ログインをします。<br>
<br></p>
<h2>スプレッドシートと連携してAPIを作成する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/01782749-c13e-4c04-afe1-4e68e4a10db1%2Fsssapi-3.jpg" alt="sssapi-3.jpg"><br>
右上の『Add API』からAPIを登録していきます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/261bc4d4-5e71-469e-b03c-4c0a1fa963c5%2Fsssapi-4.jpg" alt="sssapi-4.jpg"></p>
<ul>
<li>API名... お好きな名前でOK</li>
<li>スプレッドシートのURL...連携したいスプレッドシートのURLをコピペします。</li>
<li>フォルダ... APIを管理しておくフォルダを選択します。あとからの移動も可能です。</li>
<li>閲覧権限... コピペしておき、スプレッドシート上で権限を追加します。<br>
<br></li>
</ul>
<h2>Googleスプレッドシートでの設定</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/cfd68ffb-cf7e-4481-9f40-bce515273f78%2Fsssapi-5.jpg" alt="sssapi-5.jpg"><br>
今回はこちらのシートをAPIとして呼び出したいと思います。右上の『共有』ボタンをクリックしましょう。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/bf7f1aba-be3b-4e7e-8289-8d06935fd073%2Fsssapi-6.jpg" alt="sssapi-6.jpg"><br>
先程コピーした閲覧権限のアカウントをここに貼り付けて『完了』をクリック。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/f1dd763b-4e8d-4d90-86d8-6516bac80e25%2Fsssapi-7.jpg" alt="sssapi-7.jpg"><br>
右側のプルダウンを閲覧書に変更して『送信』ボタンをクリック。ここまで終わったらSSSAPIに戻りましょう。<br>
<br></p>
<h2>SSSAPIで連携を確認する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/ae00b4d9-29b9-4cae-a02e-811cb0ef5b33%2Fsssapi-8.jpg" alt="sssapi-8.jpg"><br>
API追加の画面に戻り『OK』ボタンを押すとAPIが呼び出せる状態になります。クリックして詳細設定を行いましょう。<br>
<br></p>
<h2>APIの取得と設定を行う</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/582310f0-704c-44bd-bb9d-e413682ce483%2Fsssapi-9.jpg" alt="sssapi-9.jpg"><br>
APIが取得できるのは『API URL』からコピーができます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/3a89f4ca-cca7-4d3d-aa42-3abc73064d78%2Fsssapi-10.jpg" alt="sssapi-10.jpg"><br>
お好みで構いませんが『自動更新』『行数をIDとして追加』をオンにしておくのをオススメします。<br>
<br></p>
<h2>実際の環境で確認をしてみる</h2>
<p>それではReactで確認していきましょう。スプレッドシートの初期設定をミスって見出しを日本語にしてしまっていましたが、本来は英数字が良いです。一応このままでも動きます。</p>
<pre><code class="language-jsx">
import { useState, useEffect } from &quot;react&quot;;

const ApiFetch = () =&gt; {
   const [data, setData] = useState([]);

   useEffect(() =&gt; {
      fetch(&quot;https://api.sssapi.app/XXXXXXXXXXXXXXXXXXXX&quot;)
         .then((response) =&gt; response.json())
         .then((json) =&gt; setData(json));
   }, []);

   return (
      &lt;&gt;
         {data.map((data) =&gt; (
            &lt;div&gt;
               &lt;h2&gt;{data.タイトル}&lt;/h2&gt;
               &lt;h3&gt;{data.著者}&lt;/h3&gt;
               &lt;p&gt;{data.本文}&lt;/p&gt;
            &lt;/div&gt;
         ))}
      &lt;/&gt;
   );
};

export default ApiFetch;

</code></pre>
<br>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/66a4f1fa-a839-483c-80be-657c9209d8be%2Fsssapi-11.jpg" alt="sssapi-11.jpg"><br>
実際の環境でも取得することでがきました！とても簡単でしたね。</p>
<p><a href="https://sssapi.app/help/api_call/">公式のドキュメント</a>には、フィルタリング機能など更に便利な使い方が載っていますので、参考にしてみてください。</p>
<h2>まとめ</h2>
<p>無料プランでも1APIにつき50行までは取得できますので、ブログのちょっとしたお知らせなどに今日からでも使えると思います。</p>
<p>データを管理するヘッドレスCMSとしてスプレッドシートを使いたいときは、ぜひ使ってみてください。<br>
<br></p>
<h3>JavaScriptでAPIを取得し、より実用的なパーツの作り方を以下の記事で説明しています。</h3>
<p><a href="https://teto-tech.com/article/sssapi2">【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】</a></p>
<p><a href="https://teto-tech.com/article/sssapi2"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/515a4f9b-04f4-405c-9924-e9a7f208ecef%2FSSSAPI2-eyecatch.jpg" alt="SSSAPI2-eyecatch.jpg"></a></p>


【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい

<p><a href="https://teto-tech.com/article/newt-blog2">前回（【Newt】スターターを活用したツラくないJamstackブログ開設）</a>はNewtでAPIの設定を行いました。今回はいよいよネット上にブログを公開していきたいと思います。<br>
ここからフロントエンド開発の前提知識が必要となってきます。この内容が難しいという方はNode.jsとGitHubが最低限分かる状態で再度挑戦してみてください。</p>
<p>それでは以下が準備するものです。フロントエンドを学んでいる方であればおなじみのものばかりです。</p>
<ul>
<li>推奨版のNode.js</li>
<li>お使いのエディタ</li>
<li>GitHubアカウント</li>
<li>Vercelアカウント（デプロイ先として使用します。）<br>
<br></li>
</ul>
<h2>Newtのスターターを自分の環境にクローンする</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fca498ae-6c30-4026-881c-324022f8e77a%2Fnewt2-12.jpg" alt="newt2-12.jpg"><br>
スターターはこちらから（BLOGのNEXT.js用です）<a href="https://github.com/Newt-Inc/newt-blog-starter-nextjs">https://github.com/Newt-Inc/newt-blog-starter-nextjs</a><br>
緑の『Code』ボタンからお好きなクローン方法を選びましょう。<br>
<br></p>
<h2>お使いのエディタでスターターテンプレートを開く</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/f0c8df22-50f1-413c-b631-f20c7bbc6734%2Fnewt3-1.jpg" alt="newt3-1.jpg"><br>
私はVSCodeを使用しています。左カラムの『.env』ファイルを開きます。<br>
<br></p>
<h2>環境変数を設定する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/68065cfa-1b79-474d-a6d9-1b0031e85cbe%2Fnewt3-2.jpg" alt="newt3-2.jpg"><br>
環境変数とは今回の件でいうと、ブログとNewtを繋ぐためのキーで、このファイルは開発環境でのみ使用します。編集するのは以下の3項目です。対応するキーを取りに行きます。</p>
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
</code></pre>
<br>
<h2>スペースUID / AppUID /  CDN APIトークンの取得</h2>
<h3>スペースUID / AppUID</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2ced078b-e86c-4e50-9327-9234c0157c6e%2Fnewt2-16.jpg" alt="newt2-16.jpg"><br>
スペースUIDは、常にメイン画面に表示がされているのでわかりやすいと思います。<br>
AppUIDは左カラムの『Blog』 &gt; 『App設定』と進みます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/44ef406b-61e5-4d8d-8007-b5b50313d89e%2Fnewt2-17.jpg" alt="newt2-17.jpg"><br>
『一般』の AppUIDに表示されているものとなります。<br>
<br></p>
<h3>CDN APIトークン</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8716fdb3-8b9e-4ddd-8899-cc853efbead3%2Fnewt2-9.jpg" alt="newt2-9.jpg"><br>
メイン画面に戻り左カラムから『スペース設定』をクリックします。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/5d31c874-0c76-40f1-aa48-2e856aaab274%2Fnewt2-13.jpg" alt="newt2-13.jpg"><br>
上の『Newt CDN API Token』の青いボタン『作成』を押します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2bb722fc-fc4c-4b50-bc64-af8c3756c015%2Fnewt2-14.jpg" alt="newt2-14.jpg"><br>
好きな名前を入力して、右下の『作成』ボタンクリックで完了です。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1de35029-d19a-4547-8272-138ec00fe102%2Fnewt2-15.jpg" alt="newt2-15.jpg"><br>
作成したAPIトークンは右側のコピー用紙のマークからコピーができます。<br>
<br><br>
したがって.envファイル内の記述は以下のようになります。</p>
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=blog
NEXT_PUBLIC_NEWT_APP_UID=blog
NEXT_PUBLIC_NEWT_API_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXX
</code></pre>
<br>
<h2>Githubにアップロード</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fbc94455-e474-40a3-b69a-9903b536a9a8%2Fnewt3-3.jpg" alt="newt3-3.jpg"><br>
私はGithub Desktopを使用していますが、いかなる方法でも構いませんので自分のGithubにアップロードしましょう。※画像は先程のスペースUID等の反映前の画像です。ご了承ください。<br>
<br></p>
<h2>Vercelにデプロイ</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/465a7fda-90f2-4866-8433-8027d5d986d5%2Fnewt3-4.jpg" alt="newt3-4.jpg"><br>
今回はVercelにデプロイをします。Next.jsをアップロードするにはVercelが一番手間がかかりません。連携さえ終われば、GitHubにアップロードするだけで、自動でビルドを行ってくれるようになります。<br>
使い方がわかる方は飛ばしてもらって結構です。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6380d031-8b10-49fb-86fe-b6fe62d7945b%2Fnewt3-5.jpg" alt="newt3-5.jpg"><br>
初めての方はGitHubでの登録・ログインがおすすめです。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/99c437b6-e661-4644-8bc7-a16709250504%2Fnewt3-6.jpg" alt="newt3-6.jpg"><br>
画面右側の『Add New...』から『Project』を選択します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8db2a050-450e-4cba-b58e-768b4e3dabb3%2Fnewt3-7.jpg" alt="newt3-7.jpg"><br>
VercelとGitHubをつなげます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/b7b57c97-3645-4b0f-a7fb-2fe44ab4e25b%2Fnewt3-8.jpg" alt="newt3-8.jpg"><br>
ログインができたら、GitHubのリポジトリが表示されます。Newtのスターターを選んで『import』<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7ff16022-c2e6-4813-9696-4412a270bc8f%2Fnewt3-9.jpg" alt="newt3-9.jpg"><br>
importが完了すると、デプロイの画面になります。フレームワークプリセット等は自動的に最適なものが選ばれていますが、環境変数だけは自分で入力をしないといけません。『Environment Variables』をクリックして入力項目を開きます。下記のように入力して『Add』。すべての環境変数を入力します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/c59cd51e-c5f7-4859-b799-8683e676af5e%2Fnewt3-11.jpg" alt="newt3-11.jpg"></p>
<pre><code>//.env

NEXT_PUBLIC_NEWT_SPACE_UID=blog
//NAME = VALUE
</code></pre>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1f424bba-4467-4476-8562-82a7a2b1f0ee%2Fnewt3-12.jpg" alt="newt3-12.jpg"><br>
すべての環境変数を入力し『Deploy』を押すことで、デプロイが始まります。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6a009efd-ecbd-4e14-8e80-d14a5a65f56a%2Fnewt3-13.jpg" alt="newt3-13.jpg"><br>
<br></p>
<h2>これでネットへの公開が完了しました！</h2>
<p>デプロイが完了すると、URLが発行されます。アクセスしてみるとブログが表示されます。お疲れさまでした。<br>
<br></p>
<h2>記事が自動反映されるよう設定にする</h2>
<p>ネット上にブログが表示されているとは思いますが、いくら記事を更新しても再度デプロイをしない限り、ブログに記事は反映されません。<br>
これは、いわゆるSSG（Static Site Generation）、静的サイトジェネレーターというもので、以下のような流れになっています。</p>
<ol>
<li>事前にサーバー上でビルドとレンダリングを行う</li>
<li>APIの情報を受け取る</li>
<li>クライアント側でリクエストをする</li>
<li>必要な情報がビルドされ、レスポンスが返ってくる</li>
</ol>
<p>事前にある程度作られたサイトに情報を流し込んでいくだけなので、とにかくスピードが速いことがメリットに挙げられます。ブログにアクセスがあるたびに、その場で記事を出力するのですが、最後にデプロイしてビルドされたものが基準となってしまいます（上のリストでいう①）。記事を書くたびにいちいちビルドを行うのは面倒ですよね。<br>
そこでWebhookというものを利用し『記事が作成/更新されるたびに自動でビルドを行う』といった設定をしていきます。</p>
<h2>VercelでHookを作成</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/4f9cf626-4375-4b68-b47e-78c1e181407c%2Fnewt3-18.jpg" alt="newt3-18.jpg"><br>
Vercelでプロジェクトを開き、<br>
①settings → ②Git → ③Deploy Hooksで入力画面を開きます。Create Hookで『hooksの名前』と『Gitのブランチ名』を入力し、④『Create Hook』ボタンを押ましょう。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/124d983b-eb5a-40d9-b992-9f84ec6bb493%2Fnewt3-19.jpg" alt="newt3-19.jpg"><br>
Hookが作成されましたので、⑤『Copy』でコピーしておきましょう。こちらをNewtに貼り付けに行きます。<br>
<br></p>
<h2>NewtにHookを貼り付け</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1092a8ae-e4b0-46b0-a361-c67261b7b6c9%2Fnewt3-15.jpg" alt="newt3-15.jpg"><br>
Newtメイン画面の左カラムから『Webhook』を選択し、右上の『Webhook』を作成ボタンをクリック。メニューが開きますので『Webhookテンプレート』を選択。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7bb373aa-0af4-4eec-927d-562384154fd9%2Fnewt3-16.jpg" alt="newt3-16.jpg"><br>
Webhookテンプレートの中から、Vercelを選択し、先程コピーしたHookを入力箇所に貼り付け。右下の『Webhookを作成』ボタンを押したら完了です。これで、Newt上で記事を更新すると、ブログ上にも自動反映されるようになりました。お疲れさまでした。<br>
<br></p>
<h2>Jamstackブログの完成！...やりたいこと全部できる？</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7a763cbc-00b0-4339-85a1-3292dbe507a7%2Fnewt3-20.jpg" alt="newt3-20.jpg"><br>
テンプレートを使用することで簡単にブログを立ち上げることができました。応用すればポートフォリオや自分の作品の展示に活用できると思います。</p>
<p>一つ注意事項がありまして、いわゆるブロガーが使う『ブログ』には使えないということです。簡単にブログを立ち上げるためにVercelを使用しましたが、VercelのHobbyプラン（無料プラン）では個人的かつ非営利な目的でのみの利用に限定されています。つまり、収益化ができません。収益化をした場合はProプランに移行するか、Vercel以外のホスティングサービスを使用するかの2択です。</p>
<p>駆け出しエンジニアでも開発の過程をすっ飛ばして、実際に使えるサービスをデプロイできるとモチベーションが上がりますし、このテンプレートを改造していくうちにどんどんスキルが上がっていくと思います。</p>
<p>今回はスターターテンプレートを使用しましたが、もっと自由にカスタマイズも可能です。国産のヘッドレスCMSはmicroCMSなどがありますが、使用感やプラン内容はどちらが抜きん出ているということはないので、ケースバイケースで使い分けていきたいですね。</p>
<p>それでは今回はこのあたりで締めたいと思います。ありがとうございました。<br>
<br></p>
<h3>ヘッドレスCMSとしてGoogleスプレッドシートを活用したい方はこちらの記事がオススメです。</h3>
<p><a href="https://teto-tech.com/article/sssapi1">【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい</a><br>
<a href="https://teto-tech.com/article/sssapi1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/a725d43f-93b1-429a-bab8-60b89dabbd2a%2FSSSAPI-eyecatch.jpg" alt="SSSAPI-eyecatch.jpg"></a><br>
<br></p>
<h3>ブログの公開後に必要になってくるキーワード選定ツールは『ラッコキーワード』一択です。</h3>
<p><a href="https://teto-tech.com/article/racco-keyword1">【実費レビュー】ラッコキーワードの有料版は使える！【エントリーで十分】</a><br>
<a href="https://teto-tech.com/article/racco-keyword1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/9e7f5390-44cf-4b88-a7ad-7e5ee11683be%2Fracco-keyword1-eyecatch.jpg" alt="racco-keyword1-eyecatch.jpg"></a></p>


#React / NEXT.js