PageSourceSearch

https://nosuke-blog.site/blog/react-deploy

html nosuke-blog.site collected 2026-10-05 22:53:45 UTC 105,549 bytes, 6 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@s_iino_dev"/><meta name="twitter:creator" content="@s_iino_dev"/><meta property="og:type" content="article"/><meta property="og:image" content="https://uma-event-search.com/apple-touch-icon.png"/><meta property="og:locale" content="ja_JP"/><meta property="dc:creator" content="Shinnonsuke Iino"/><meta name="application-name" content="のすけしん.dev"/><title>create-react-appで作ったReactアプリをVercelにデプロイ  | のすけしん.dev</title><meta name="robots" content="index,follow"/><meta name="description" content="Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。"/><meta property="og:title" content="create-react-appで作ったReactアプリをVercelにデプロイ  | のすけしん.dev"/><meta property="og:description" content="Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。"/><meta property="og:url" content="https://app.notion.com/p/create-react-app-React-Vercel-1e623b1fcc1548978f17040b415ccffe"/><meta property="og:site_name" content="create-react-appで作ったReactアプリをVercelにデプロイ "/><link rel="canonical" href="https://app.notion.com/p/create-react-app-React-Vercel-1e623b1fcc1548978f17040b415ccffe/"/><meta name="next-head-count" content="24"/><link rel="preload" href="/_next/static/css/85a5c151f92605bd.css" as="style"/><link rel="stylesheet" href="/_next/static/css/85a5c151f92605bd.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
1<script src="/_next/static/chunks/webpack-5752944655d749a0.js" defer=""></script>
1<script src="/_next/static/chunks/framework-bb5c596eafb42b22.js" defer=""></script>
1<script src="/_next/static/chunks/main-415d53f2cdfcabd0.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-a096c03d6bdaf84a.js" defer=""></script>
1<script src="/_next/static/chunks/d7eeaac4-f8f47e42f8a3defa.js" defer=""></script>
1<script src="/_next/static/chunks/31664189-f9ba5ab672ba06fc.js" defer=""></script>
1<script src="/_next/static/chunks/95b64a6e-5f619813941aaa0d.js" defer=""></script>
1<script src="/_next/static/chunks/1a48c3c1-9dc5da58216cae92.js" defer=""></script>
1<script src="/_next/static/chunks/626-27a0b83439ed9cfe.js" defer=""></script>
1<script src="/_next/static/chunks/721-0cf8a5d22c7355ab.js" defer=""></script>
1<script src="/_next/static/chunks/871-582b69bed6b0bb74.js" defer=""></script>
1<script src="/_next/static/chunks/pages/blog/%5Bslug%5D-6d2ea5236ef612d1.js" defer=""></script>
1<script src="/_next/static/_jiSLatgBGB5-0SDZnBQh/_buildManifest.js" defer=""></script>
1<script src="/_next/static/_jiSLatgBGB5-0SDZnBQh/_ssgManifest.js" defer=""></script>
1<script src="/_next/static/_jiSLatgBGB5-0SDZnBQh/_middlewareManifest.js" defer=""></script>
1</head><body><div id="__next" data-reactroot=""><header class="sticky top-0 z-50 flex flex-col items-center justify-center bg-primary p-2 text-white shadow-md text-shadow-xl"><div class="flex w-full max-w-screen-lg justify-between"><h1 class="cursor-pointer text-4xl font-bold"><a href="/">Nosuke Blog</a></h1><div class="hidden items-center justify-end sm:flex"><p class="link link-hover ml-5 text-xl"><a href="/"><a>Top</a></a></p><p class="link link-hover ml-5 text-xl"><a href="/blog"><a>Articles</a></a></p><p class="link link-hover ml-5 text-xl"><a href="/about-this-site"><a>About this site</a></a></p><p class="link link-hover ml-5 text-xl"><a href="/contact"><a>Contact</a></a></p></div><div class="flex items-center justify-end sm:hidden"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg></div></div><div class="hidden sm:hidden flex-col items-center justify-center"><p class="link link-hover text-xl sm:hidden"><a href="/"><a>Top</a></a></p><p class="link link-hover text-xl sm:hidden"><a href="/blog"><a>Articles</a></a></p><p class="link link-hover text-xl sm:hidden"><a href="/about-this-site"><a>About this site</a></a></p><p class="link link-hover text-xl sm:hidden"><a class="tooltip tooltip-bottom tooltip-info cursor-default text-gray-500" data-tip="近日公開予定">Contact</a></p></div></header><main class="my-0 mx-auto max-w-screen-lg pt-10"><div class="flex"><article class="w-full lg:max-w-3xl"><h1 class="text-5xl font-semibold">create-react-appで作ったReactアプリをVercelにデプロイ </h1><div><p class="mb-7 inline-block w-fit rounded-lg text-gray-100" style="background-color:orange"> <!-- -->React<!-- --> </p><p class="mb-7 inline-block w-fit rounded-lg text-gray-100" style="background-color:pink"> <!-- -->Frontend<!-- --> </p><p class="mb-7 inline-block w-fit rounded-lg text-gray-100" style="background-color:yellow"> <!-- -->Vercel<!-- --> </p></div><div>作成日:<!-- -->2022/04/03<!-- -->  最終更新日:<!-- -->2024/04/27</div><div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1651494766691774" data-ad-slot="9029806423" data-ad-format="auto" data-full-width-responsive="true"></ins></div><br/><div class="card card-compact overflow-hidden bg-base-200 shadow-md"><div class="card-body"><h1 class="mt-6 mb-2 text-4xl font-semibold" id="初めに">初めに</h1><p class="text-base"><span class="" style="color:default">React を初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。 作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。 デプロイの仕方は、色々あるのですが、特にデプロイが簡単な Vercel についてまとめました。</span></p><p class="text-base"><span class="" style="color:default">注意 : Node.js と npm は使える前提で進めます</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="前置き">前置き</h1><h2 class="mt-4 mb-2 text-3xl font-medium" id="CRA">CRA</h2><p class="text-base"><span class="" style="color:default">React は、フロントエンド開発において世界中でもっとも利用されている JavaScript ライブラリです。</span></p><p class="text-base"><span class="" style="color:default">そんな React の環境構築を簡単にできるものがあります。</span></p><p class="text-base"><span class="" style="color:default">それが CRA(create-react-app)です。</span></p><p class="text-base"><span class="" style="color:default">余計なものも少々インストールされますが、コマンド一発で環境構築できるのは本当にすごいです。</span></p><p class="text-base"><span class="" style="color:default">0 から自分で環境構築したい方は、</span><span class="" style="color:default"><a class="link" target="_blank" rel="noopener noreferrer" href="https://nosuke-blog.site/blog/webpack-babel-react">こちら</a></span><span class="" style="color:default">をご覧ください。ただし、今回紹介する方法ではデプロイできないので気をつけて下さいね。</span></p><h2 class="mt-4 mb-2 text-3xl font-medium" id="Vercel">Vercel</h2><p class="text-base"><span class="" style="color:default">Vercel とは、ZEIT 社の提供するフロントエンド向けのホスティングサービスです。AWS のフロントエンド版とも言われています。</span></p><p class="text-base"><span class="" style="color:default">CDN やサーバレスアーキテクチャを新たに勉強することなく、Vercel に連携した GitHub に Push するだけで世界中の CDN でキャッシュされ、高パフォーマンスを期待できます。</span></p><p class="text-base"><span class="" style="color:default">当ブログは Next.js でできていますが、Vercel でデプロイしています。</span></p><p class="text-base"><span class="" style="color:default">というのも、Next.js の開発は、Vercel を提供する ZEIT 社が中心になって行われています。そのため、Next.js と相性が抜群です。</span></p><p class="text-base"><span class="" style="color:default">個人利用のホビープランなら無料で使えるので、初めてデプロイするには最適だと思います。</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="React プロジェクトの作成">React プロジェクトの作成</h1><p class="text-base"><span class="" style="color:default">この章では、CRA で React プロジェクトの作成の仕方を紹介します。</span></p><p class="text-base"><span class="" style="color:default">すでに、作成済みだったり、知ってる人は</span><span class="" style="color:default"><a class="link" target="_blank" rel="noopener noreferrer" href="https://nosuke-blog.site/blog/react-deploy#GitHub%E3%81%AE%E8%A8%AD%E5%AE%9A">こちら</a></span><span class="" style="color:default">へスキップしてください。</span></p><h2 class="mt-4 mb-2 text-3xl font-medium" id="CRA で作成">CRA で作成</h2><p class="text-base"><span class="" style="color:default">まずは、以下の環境があることを確認してください。</span></p><p class="ml-4 list-item">Node &gt;= v10.16</p><p class="ml-4 list-item">npm &gt;= v5.6</p><p class="text-base"><span class="" style="color:default">確認できたら、以下のコマンドで React アプリの作成が始まります。</span></p><pre style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#2b2b2b"><code class="language-bash" style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>npx create-react-app deploytest</span></code></pre><p class="text-base"><span class="" style="color:default">そして、</span><span class="whitespace-pre-wrap bg-black text-orange-300 " style="color:default"> <!-- -->Happy hacking!<!-- --> </span><span class="" style="color:default">と表示されたら完了です。簡単すぎ!</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="GitHub の設定">GitHub の設定</h1><p class="text-base"><span class="" style="color:default">GitHub の設定をします。まずは、ディレクトリの移動をしてください。</span></p><pre style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#2b2b2b"><code class="language-bash" style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class-name" style="color:#e8bf6a">cd</span><span> deploytest</span></code></pre><p class="text-base"><span class="" style="color:default">続いて、</span><span class="" style="color:default"><a class="link" target="_blank" rel="noopener noreferrer" href="https://github.com/">GitHub</a></span><span class="" style="color:default">の方でリポジトリを作成しておいてください。ここでは、</span><span class="whitespace-pre-wrap bg-black text-orange-300 " style="color:default"> <!-- -->https://github.com/user/deploytest.git<!-- --> </span><span class="" style="color:default">とします。</span></p><p class="text-base"><span class="" style="color:default">そして、以下のコマンドで Git の設定をしてください。</span></p><pre style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#2b2b2b"><code class="language-bash" style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#ffc66d">git</span><span> init
2</span><span></span><span class="token" style="color:#ffc66d">git</span><span> </span><span class="token" style="color:#ffc66d">add</span><span> </span><span class="token class-name" style="color:#e8bf6a">
2.</span><span>
3</span><span></span><span class="token" style="color:#ffc66d">git</span><span> commit -m </span><span class="token" style="color:#6a8759">&quot;First Commit&quot;</span><span>
4</span><span></span><span class="token" style="color:#ffc66d">git</span><span> remote </span><span class="token" style="color:#ffc66d">add</span><span> origin https://github.com/user/deploytest.git
5</span><span></span><span class="token" style="color:#ffc66d">git</span><span> push -u origin master</span></code></pre><p class="text-base"><span class="" style="color:default">これで、Push できました!</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="Vercel の設定">Vercel の設定</h1><p class="text-base"><span class="" style="color:default"><a class="link" target="_blank" rel="noopener noreferrer" href="https://vercel.com/">Vercel</a></span><span class="" style="color:default">にログインしてください。初めての方は、新規登録してください。</span></p><p class="text-base"><span class="" style="color:default">ダッシュボードの画面に来たら、「New Project」をクリックしてください。</span></p><p class="text-base"><span class="" style="color:default">次に、「Import Git Repository」から、</span><span class="whitespace-pre-wrap bg-black text-orange-300 " style="color:default"> <!-- -->https://github.com/user/deploytest.git<!-- --> </span><span class="" style="color:default">を入力します。</span></p><p class="text-base"><span class="" style="color:default">そしたら、GitHub と Vercel の連携について聞かれるので、承認します。</span></p><p class="text-base"><span class="" style="color:default">すると、「FRAMEWORK PRESET」の項目が表示されると思うので、「Create React App」を選択して「Deploy」をクリック。</span></p><p class="text-base"><span class="" style="color:default">これで、時間を待てばデプロイ完了です。以上です。これだけで、React アプリを世界中に公開できました。</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="コードを更新した場合">コードを更新した場合</h1><p class="text-base"><span class="" style="color:default">コードを更新した場合は、以下のコマンドを打つことを忘れないでください。</span></p><pre style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#2b2b2b"><code class="language-bash" style="color:#a9b7c6;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#ffc66d">npm</span><span> run build</span></code></pre><p class="text-base"><span class="" style="color:default">そして、GitHub の master(もしくは main)に push するだけで、更新が反映されたものがデプロイされます。</span></p><p class="text-base"><span class="" style="color:default">いつも通り Git を使うだけで、デプロイも勝手にやってくれるので、非常に便利ですね!</span></p><h1 class="mt-6 mb-2 text-4xl font-semibold" id="まとめ">まとめ</h1><p class="text-base"><span class="" style="color:default">いかがですが? とても簡単ですよね!!</span></p><p class="text-base"><span class="" style="color:default">お名前.com や </span><span class="" style="color:default"><a class="link" target="_blank" rel="noopener noreferrer" href="https://px.a8.net/svt/ejp?a8mat=3Z57JF%20AQZRZM%20348%201BNBJM">ムームードメイン</a></span><span class="" style="color:default"> などで取得したドメインも設定できるので、ぜひやってみてください! </span></p><div class="h-fit"><img src="https://www17.a8.net/0.gif?a8mat=3Z57JF+AQZRZM+348+1BNBJM" width="100%"/></div><br/><a href="https://px.a8.net/svt/ejp?a8mat=3Z57JF+AQZRZM+348+1C71F5" rel="nofollow"><img border="0" width="728" height="90" alt="" src="https://www28.a8.net/svt/bgt?aid=240428139650&amp;wid=001&amp;eno=01&amp;mid=s00000000404008095000&amp;
5mc=1"/></a><img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=3Z57JF+AQZRZM+348+1C71F5" alt=""/></div></div></article><div class="hidden h-fit lg:ml-3 lg:block lg:max-w-lg"><div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1651494766691774" data-ad-slot="7665689649" data-ad-format="auto" data-full-width-responsive="true"></ins></div><div class="sticky top-14 overflow-auto" style="max-height:80vh"><div class="shadow-m card bg-base-200"><div class="card-body"><p class="card-title"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 2h2v20H3zm7 4h7v2h-7zm0 4h7v2h-7z"></path><path d="M19 2H6v20h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 18H8V4h11v16z"></path></svg>目次</p><a class="text-gray-500 link inline-block break-all font-semibold">初めに</a><a class="text-gray-500 link inline-block break-all font-semibold">前置き</a><a class="text-gray-500 inline-block break-all hover:cursor-pointer">CRA</a><a class="text-gray-500 inline-block break-all hover:cursor-pointer">Vercel</a><a class="text-gray-500 link inline-block break-all font-semibold">React プロジェクトの作成</a><a class="text-gray-500 inline-block break-all hover:cursor-pointer">CRA で作成</a><a class="text-gray-500 link inline-block break-all font-semibold">GitHub の設定</a><a class="text-gray-500 link inline-block break-all font-semibold">Vercel の設定</a><a class="text-gray-500 link inline-block break-all font-semibold">コードを更新した場合</a><a class="text-gray-500 link inline-block break-all font-semibold">まとめ</a></div></div></div></div></div><br/><div class="w-full"><h1 class="border-b-2 border-primary text-3xl font-bold">最近の投稿</h1><div class="flex w-full flex-wrap justify-between"><div class="w-full px-2 md:w-1/2"><div class="card h-full overflow-visible shadow-md"><div class="card-body items-start justify-start"><div class="tooltip tooltip-left tooltip-info absolute right-3 top-3 z-10 h-fit w-fit overflow-visible text-left" data-tip="Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M256 48C141.2 48 48 141.2 48 256s93.2 208 208 208 208-93.2 208-208S370.8 48 256 48zm21 312h-42V235h42v125zm0-166h-42v-42h42v42z"></path></svg></div><div class=" cursor-pointer text-center text-5xl"><a href="/blog/react-deploy">🎄</a></div><h2 class="link-hover card-title"><a href="/blog/react-deploy"><a>create-react-appで作ったReactアプリをVercelにデプロイ </a></a></h2><span class="text-gray-500">2024/04/27</span><div class="text-left"><p class="mx-px mb-1 inline-block w-fit rounded-lg text-gray-100 text-shadow-xl" style="background-color:orange"> <!-- -->React<!-- --> </p><p class="mx-px mb-1 inline-block w-fit rounded-lg text-gray-100 text-shadow-xl" style="background-color:pink"> <!-- -->Frontend<!-- --> </p><p class="mx-px mb-1 inline-block w-fit rounded-lg text-gray-100 text-shadow-xl" style="background-color:yellow"> <!-- -->Vercel<!-- --> </p></div></div></div></div><div class="w-full px-2 md:w-1/2"><div class="card h-full overflow-visible shadow-md"><div class="card-body items-start justify-start"><div class="tooltip tooltip-left tooltip-info absolute right-3 top-3 z-10 h-fit w-fit overflow-visible text-left" data-tip="今回の記事では、ゲーミングPCで使うためのキーボードとしてなぜメカニカルキーボードがおすすめなのか、そして購入時の注意点をまとめてます。
6最後に、amazonで購入できる予算ごとのキーボードをまとめてます"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M256 48C141.2 48 48 141.2 48 256s93.2 208 208 208 208-93.2 208-208S370.8 48 256 48zm21 312h-42V235h42v125zm0-166h-42v-42h42v42z"></path></svg></div><div class=" cursor-pointer text-center text-5xl"><a href="/blog/gameing-keyboards">⌨️</a></div><h2 class="link-hover card-title"><a href="/blog/gameing-keyboards"><a>「初心者へ送る、ゲーミングキーボードを知る」の
6巻</a></a></h2><span class="text-gray-500">2024/04/26</span><div class="text-left"><p class="mx-px mb-1 inline-block w-fit rounded-lg text-gray-100 text-shadow-xl" style="background-color:blue"> <!-- -->game<!-- --> </p><p class="mx-px mb-1 inline-block w-fit rounded-lg text-gray-100 text-shadow-xl" style="background-color:purple"> <!-- -->キーボード<!-- --> </p></div></div></div></div></div></div><br/><div class="relative h-fit w-full"><img src="/wordcloud.png" width="100%" alt="当ブログのテキストマイニング結果"/></div><br/></main><footer class="flex w-full flex-col items-center justify-center bg-primary text-white text-shadow-lg"><div><a href="/policy"><a class="underline">プライバシーポリシー</a></a></div><div><p>©︎ 2022 Nosuke Blog</p></div></footer></div>
6<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"blocksWithChildren":[{"object":"block","id":"3fa473bf-2cf0-4e9d-ad0e-93a07642ab6a","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"初めに","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"初めに","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"2d9ea418-0bb4-42f9-992d-b498e2659700","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"React を初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。 作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。 デプロイの仕方は、色々あるのですが、特にデプロイが簡単な Vercel についてまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"React を初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。 作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。 デプロイの仕方は、色々あるのですが、特にデプロイが簡単な Vercel についてまとめました。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"bf8fa7d5-af4b-411a-8db6-5dfa2f0f9817","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"注意 : Node.js と npm は使える前提で進めます","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"注意 : Node.js と npm は使える前提で進めます","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"9a1491c1-85b1-4145-9ad9-88ca8a301cea","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"前置き","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"前置き","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"416fe074-2f11-4f72-81bd-1971686ac0a6","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_2","heading_2":{"rich_text":[{"type":"text","text":{"content":"CRA","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"CRA","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"40f6e958-8041-48ac-9976-32e96649eaa3","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"React は、フロントエンド開発において世界中でもっとも利用されている JavaScript ライブラリです。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"React は、フロントエンド開発において世界中でもっとも利用されている JavaScript ライブラリです。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"1ae58ea5-073b-4548-ae18-267f57f3a8de","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"そんな React の環境構築ã
6‚’簡単にできるものがあります。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"そんな React の環境構築を簡単にできるものがあります。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"9195b93e-c94e-4287-a654-c37ee340ead9","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"それが CRA(create-react-app)です。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"それが CRA(create-react-app)です。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"bbe8bfe4-eaba-47d0-b358-0285e2210657","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"余計なものも少々インストールされますが、コマンド一発で環境構築できるのは本当にすごいです。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"余計なものも少々インストールされますが、コマンド一発で環境構築できるのは本当にすごいです。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"829ea912-0019-46f5-97d8-8155462f4417","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"0 から自分で環境構築したい方は、","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"0 から自分で環境構築したい方は、","href":null},{"type":"text","text":{"content":"こちら","link":{"url":"https://nosuke-blog.site/blog/webpack-babel-react"}},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"こちら","href":"https://nosuke-blog.site/blog/webpack-babel-react"},{"type":"text","text":{"content":"をご覧ください。ただし、今回紹介する方法ではデプロイできないので気をつけて下さいね。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"をご覧ください。ただし、今回紹介する方法ではデプロイできないので気をつけて下さいね。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"0123a9cd-0575-4405-9a6c-f55777b8ecaf","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_2","heading_2":{"rich_text":[{"type":"text","text":{"content":"Vercel","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Vercel","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"5212ddf2-6563-45ad-8959-013432b185ae","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"Vercel とは、ZEIT 社の提供するフロントエンド向けのホスティングサービスです。AWS のフロントエンド版とも言われています。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Vercel とは、ZEIT 社の提供するフロントエンド向けのホスティングサービスです。AWS のフロントエンド版とも言われています。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"f92fa55e-315e-4ded-a564-2a21e1fdc5aa","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"CDN やサーバレスアーキテクチャを新たに勉強することなく、Vercel に連携した GitHub に Push するだけで世界中の CDN でキャッシュされ、高パフォーマンスを期待できます。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"CDN やサーバレスアーキテクチャを新たに勉強することなく、Vercel に連携した GitHub に Push するだけで世界中の CDN でキャッシュされ、高パフォーマンスを期待できます。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"93c5f3b2-a0c2-4a8c-aaee-a1cb19c9c38a","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"当ブログは Next.js でできていますが、Vercel でデプロイしています。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"当ブログは Next.js でできていますが、Vercel でデプロイしています。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"1b443067-87f0-4241-80cb-d025aa44d333","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"というのも、Next.js の開発は、Vercel を提供する ZEIT 社が中心になって行われています。そのため、Next.js と相性が抜群です。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"というのも、Next.js の開発は、Vercel を提供する ZEIT 社が中心になって行われています。そのため、Next.js と相性が抜群です。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"ba08ce3e-e346-4f61-8d0f-fa1182cc9e59","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"個人利用のホビープランなら無料で使えるので、初めてデプロイするには最適だと思います。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"個人利用のホビープランなら無料で使えるので、初めてデプロイするには最適だと思います。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"1dc9664a-00fd-4509-99af-7381e7501c30","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"React プロジェクトの作成","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"React プロジェクトの作成","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"284b2506-55ba-4164-b56b-289cb2f2f4ef","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"この章では、CRA で React プロジェクトの作成の仕方を紹介します。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"この章では、CRA で React プロジェクトの作成の仕方を紹介します。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"e56da269-0c40-4fd9-8337-7324ca8a1122","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"すã
6§ã«ã€ä½œæˆæ¸ˆã¿ã ã£ãŸã‚Šã€çŸ¥ã£ã¦ã‚‹äººã¯","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"すでに、作成済みだったり、知ってる人は","href":null},{"type":"text","text":{"content":"こちら","link":{"url":"https://nosuke-blog.site/blog/react-deploy#GitHub%E3%81%AE%E8%A8%AD%E5%AE%9A"}},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"こちら","href":"https://nosuke-blog.site/blog/react-deploy#GitHub%E3%81%AE%E8%A8%AD%E5%AE%9A"},{"type":"text","text":{"content":"へスキップしてください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"へスキップしてください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"f0522f7b-d2c3-4721-a350-9567db3f0ef2","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_2","heading_2":{"rich_text":[{"type":"text","text":{"content":"CRA で作成","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"CRA で作成","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"448b45fe-bbbc-4d41-b0d8-522ac2b5cb0f","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"まずは、以下の環境があることを確認してください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"まずは、以下の環境があることを確認してください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"ddbd74c5-51cd-4a7b-8e86-b75e4c6d9d97","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"bulleted_list_item","bulleted_list_item":{"rich_text":[{"type":"text","text":{"content":"Node \u003e= v10.16","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Node \u003e= v10.16","href":null}],"color":"default"},"archived":false},{"object":"block","id":"683e2657-b36d-4438-b99f-f056a6a42ce7","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"bulleted_list_item","bulleted_list_item":{"rich_text":[{"type":"text","text":{"content":"npm \u003e= v5.6","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"npm \u003e= v5.6","href":null}],"color":"default"},"archived":false},{"object":"block","id":"9d5e9d51-68af-4c73-99c9-90da4f8dbb14","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"確認できたら、以下のコマンドで React アプリの作成が始まります。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"確認できたら、以下のコマンドで React アプリの作成が始まります。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"f0dbc9d9-d851-4aec-b64e-195c5ebfdc89","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:13:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"code","code":{"caption":[],"rich_text":[{"type":"text","text":{"content":"npx create-react-app deploytest","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"npx create-react-app deploytest","href":null}],"language":"bash"},"archived":false},{"object":"block","id":"f76095e9-39db-4ece-86e6-3776127da2f4","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"そして、","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"そして、","href":null},{"type":"text","text":{"content":"Happy hacking!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":true,"color":"default"},"plain_text":"Happy hacking!","href":null},{"type":"text","text":{"content":"と表示されたら完了です。簡単すぎ!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"と表示されたら完了です。簡単すぎ!","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"a46f0781-8579-4dae-a9df-ef8c79ad3bde","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"GitHub の設定","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"GitHub の設定","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"d4b570d3-7386-454a-8e91-e942d754c041","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"GitHub の設定をします。まずは、ディレクトリの移動をしてください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"GitHub の設定をします。まずは、ディレクトリの移動をしてください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"e53d494a-6827-4c1f-bed0-68fa1e1e4ec0","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:13:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"code","code":{"caption":[],"rich_text":[{"type":"text","text":{"content":"c
6d deploytest","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"cd deploytest","href":null}],"language":"bash"},"archived":false},{"object":"block","id":"ac12ffed-c5f0-438f-9de4-5b318c4fcd6c","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"続いて、","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"続いて、","href":null},{"type":"text","text":{"content":"GitHub","link":{"url":"https://github.com/"}},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"GitHub","href":"https://github.com/"},{"type":"text","text":{"content":"の方でリポジトリを作成しておいてください。ここでは、","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"の方でリポジトリを作成しておいてください。ここでは、","href":null},{"type":"text","text":{"content":"https://github.com/user/deploytest.git","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":true,"color":"default"},"plain_text":"https://github.com/user/deploytest.git","href":null},{"type":"text","text":{"content":"とします。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"とします。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"ce665f0b-8069-4a27-b0d0-bb9c32c17f63","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"そして、以下のコマンドで Git の設定をしてください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"そして、以下のコマンドで Git の設定をしてください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"11cb7f9f-d1bb-4c73-894d-2489bd3f78e1","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:13:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"code","code":{"caption":[],"rich_text":[{"type":"text","text":{"content":"git init\ngit add .\ngit commit -m \"First Commit\"\ngit remote add origin https://github.com/user/deploytest.git\ngit push -u origin master","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"git init\ngit add .\ngit commit -m \"First Commit\"\ngit remote add origin https://github.com/user/deploytest.git\ngit push -u origin master","href":null}],"language":"bash"},"archived":false},{"object":"block","id":"c1cd07ba-40df-43fa-9aba-a25d625e34c8","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"これで、Push できました!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"これで、Push できました!","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"3be3791b-0ca3-4ffe-9de3-a779546e223b","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"Vercel の設定","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Vercel の設定","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"905594ac-c7cb-4b0c-b5ba-5b0999135444","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"Vercel","link":{"url":"https://vercel.com/"}},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Vercel","href":"https://vercel.com/"},{"type":"text","text":{"content":"にログインしてください。初めての方は、新規登録してください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"にログインしてください。初めての方は、新規登録してください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"64100502-1768-4dc5-95ff-3dc2b70ef8b9","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"ダッシュボードの画面に来たら、「New Project」をクリックしてください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"ダッシュボードの画面に来たら、「New Project」をクリックしてください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"2ebb0ce1-020f-4d86-a0c1-d2c5ee052f43","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"次に、「Import Git Repository」から、","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"次に、「Import Git Repository」から、","href":null},{"type":"text","text":{"content":"https://github.com/user/deploytest.git","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":true,"color":"default"},"plain_text":"https://github.com/user/deploytest.git","href":null},{"type":"text","text":{"content":"を入力します。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"を入力します。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"6979b49a-8a43-406a-a8eb-e74e978ae4ae","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"そしたら、GitHub と Vercel の連携について聞かれるので、承認します。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"そしたら、GitHub と Vercel の連携について聞かれるので、承認します。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"7931d7c7-f31d-4d6f-82ad-c2d6691b124f","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"すると、「FRAMEWORK PRESET」の項目が表示されると思うので、「Create React App」を選択して「Deploy」をクリック。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"すると、「FRAMEWORK PRESET」の項目が表示されると思うので、「Create React App」を選択して「Deploy」をクリック。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"9abc49f2-3876-45f9-93fe-1c63ddc5f36b","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"これで、時間を待てばデプロイ完了です。以上です。これだけで、React アプリを世界中に公開できました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"これで、時間を待てばデプロイ完了です。以上です。これだけで、React アプリを世界中に公開できました。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"32b16ce9-8d81-4aef-b1c3-83015eff818f","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"コードを更新した場合","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"コードを更新した場合","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"64a55ad2-dea3-4956-94c6-1d35796829ee","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"コードを更新した場合は、以下のコマンドを打つことを忘れないでください。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"コードを更新した場合は、以下のコマンドを打つことを忘れないでください。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"c6b92781-db55-43de-97e2-48abe48efa29","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:13:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"code","code":{"caption":[],"rich_text":[{"type":"text","text":{"content":"npm run build","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"npm run build","href":null}],"language":"bash"},"archived":false},{"object":"block","id":"5bee1402-79ff-4b12-8bd0-1356ec88ab68","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"そして、GitHub の master(もしくは main)に push するだけで、更新が反映されたものがデプロイされます。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"そして、GitHub の master(もしくは main)に push するだけで、更新が反映されたものがデプロイされます。","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"a7a2d43b-9de0-4a90-9548-28ef4535e965","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"いつも通り Git を使うだけで、デプロイも勝手にやってくれるので、非常に便利ですね!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"いつも通り Git を使うだけで、デプロイも勝手にやってくれるので、非常に便利ですね!","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"8801cc8d-10c4-494b-9b93-46ccc9922de1","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"t
6ype":"heading_1","heading_1":{"rich_text":[{"type":"text","text":{"content":"まとめ","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"まとめ","href":null}],"is_toggleable":false,"color":"default"},"archived":false},{"object":"block","id":"107912fa-710d-45d7-9d72-f88739e9d1d2","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2022-04-03T11:11:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"いかがですが? とても簡単ですよね!!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"いかがですが? とても簡単ですよね!!","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"9c419e99-bef8-4cba-b898-b9ef91f69e90","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2024-04-27T15:57:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"お名前.com や ","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"お名前.com や ","href":null},{"type":"text","text":{"content":"ムームードメイン","link":{"url":"https://px.a8.net/svt/ejp?a8mat=3Z57JF%20AQZRZM%20348%201BNBJM"}},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"ムームードメイン","href":"https://px.a8.net/svt/ejp?a8mat=3Z57JF%20AQZRZM%20348%201BNBJM"},{"type":"text","text":{"content":" などで取得したドメインも設定できるので、ぜひやってみてください! ","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":" などで取得したドメインも設定できるので、ぜひやってみてください! ","href":null}],"icon":null,"color":"default"},"archived":false},{"object":"block","id":"09a8e447-3bb8-4932-87ef-c2c5ce6257c0","parent":{"type":"page_id","page_id":"1e623b1f-cc15-4897-8f17-040b415ccffe"},"created_time":"2024-04-27T15:57:00.000Z","last_edited_time":"2024-04-27T15:57:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"has_children":false,"in_trash":false,"type":"image","image":{"caption":[],"type":"external","external":{"url":"https://www17.a8.net/0.gif?a8mat=3Z57JF+AQZRZM+348+1BNBJM"}},"archived":false}],"pageDatabase":{"object":"page","id":"1e623b1f-cc15-4897-8f17-040b415ccffe","created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2024-04-27T15:57:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🎄"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"react-deploy","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"react-deploy","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-04-03T11:11:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-4
668c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"df97c187-3293-418a-ac12-4558bd3283ce","name":"Frontend","color":"pink"},{"id":"3501a850-543b-423f-ba71-d72e5015ee6a","name":"Vercel","color":"yellow"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2024-04-27T15:57:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"create-react-appで作ったReactアプリをVercelにデプロイ ","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"create-react-appで作ったReactアプリをVercelにデプロイ ","href":null}]}},"url":"https://app.notion.com/p/create-react-app-React-Vercel-1e623b1fcc1548978f17040b415ccffe","public_url":null,"archived":false},"pagesDatabase":[{"object":"page","id":"1e623b1f-cc15-4897-8f17-040b415ccffe","created_time":"2022-04-03T11:11:00.000Z","last_edited_time":"2024-04-27T15:57:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🎄"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"react-deploy","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"react-deploy","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-04-03T11:11:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-468c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"df97c187-3293-418a-ac12-4558bd3283ce","name":"Frontend","color":"pink"},{"id":"3501a850-543b-423f-ba71-d72e5015ee6a","name":"Vercel","color":"yellow"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactを初めて触る人は、CRA(create-react-app)でプロジェクトを作ると思います。作ったものは、どうせなら公開して世界中の人にみてもらいたいですよね。デプロイの仕方は、色々あるのですが、特にデプロイが簡単なVercelについてまとめました。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2024-04-27T15:57:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"create-react-appで作ったReactアプリをVercelにデプロイ ","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"create-react-appで作ったReactアプリをVercelにデプロイ ","href":null}]}},"url":"https://app.notion.com/p/create-react-app-React-Vercel-1e623b1fcc1548978f17040b415ccffe","public_url":null,"archived":false},{"object":"page","id":"d0dab0b7-86a9-4e94-9a8a-938eef8412da","created_time":"2024-04-26T14:29:00.000Z","last_edited_time":"2024-04-26T16:31:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"⌨️"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"gameing-keyboards","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"gameing-keyboards","href":null}]}
6,"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2024-04-26T14:29:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"80540bca-10c0-4d94-844e-84f1c711c1ca","name":"game","color":"blue"},{"id":"9bd53570-64d3-4037-a3df-7db1c2dd1c30","name":"キーボード","color":"purple"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"今回の記事では、ゲーミングPCで使うためのキーボードとしてなぜメカニカルキーボードがおすすめなのか、そして購入時の注意点をまとめてます。\n最後に、amazonで購入できる予算ごとのキーボードをまとめてます","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"今回の記事では、ゲーミングPCで使うためのキーボードとしてなぜメカニカルキーボードがおすすめなのか、そして購入時の注意点をまとめてます。\n最後に、amazonで購入できる予算ごとのキーボードをまとめてます","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2024-04-26T16:31:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"「初心者へ送る、ゲーミングキーボードを知る」の巻","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"「初心者へ送る、ゲーミングキーボードを知る」の巻","href":null}]}},"url":"https://app.notion.com/p/d0dab0b786a94e949a8a938eef8412da","public_url":null,"archived":false},{"object":"page","id":"a83172ae-aecb-47fc-a778-193b72925f5d","created_time":"2023-03-16T11:33:00.000Z","last_edited_time":"2023-03-16T12:40:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🛁"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"prisma-multiple-project","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"prisma-multiple-project","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2023-03-16T11:33:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"256113f1-c221-49b3-9027-98aa84264fcb","name":"Backend","color":"brown"},{"id":"de9ab31b-6126-4c1e-aa50-1b48991d3a25","name":"Prisma","color":"default"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Prismaを複数プロジェクトで使用する方法について説明しています。2つの方法を示し、git submoduleを使用する方法を推奨しています。また、PrismaClientの生成とimportの方法についても説明しています。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Prismaを複数プロジェクトで使用する方法について説明しています。2つの方法を示し、git submoduleを使用する方法を推奨しています。また、PrismaClientの生成とimportの方法についても説明しています。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2023-03-16T12:40:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"Prismaを複数プロジェクトで使用する方法","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Prismaを複数プロジェクトで使用する方法","href":null}]}},"url":"https://app.notion.com/p/Prisma-a83172aeaecb47fca778193b72925f5d","public_url":null,"archived":false},{"object":"page","id":"54b0c9d4-dae6-4c41-be1b-54a0a6aeef79","created_time":"2022-08-06T09:54:00.000Z","last_edited_time":"2022-08-25T13:22:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🍎"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"utm-centos7","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"utm-centos7","href":null}]}
6,"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-08-06T09:54:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"19c76c5d-7d47-4b26-be1b-c2a13e82ed58","name":"CentOS","color":"purple"},{"id":"30a6d4cf-c021-444a-a9cc-60a60cf63e1f","name":"Development","color":"blue"},{"id":"a856a5ba-30cb-426f-bcff-8f51921d2c4f","name":"VM","color":"purple"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"M1 Macでも無料で使える仮想化ソフト「UTM」でCentOS 7のVMを構築する手順をまとめました!UTMのVMにssh接続するまでの手順を載せています。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"M1 Macでも無料で使える仮想化ソフト「UTM」でCentOS 7のVMを構築する手順をまとめました!UTMのVMにssh接続するまでの手順を載せています。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-08-25T13:22:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"【UTM】M1 MacでCentOS 7の仮想マシン構築","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"【UTM】M1 MacでCentOS 7の仮想マシン構築","href":null}]}},"url":"https://app.notion.com/p/UTM-M1-Mac-CentOS-7-54b0c9d4dae64c41be1b54a0a6aeef79","public_url":null,"archived":false},{"object":"page","id":"4ad889aa-eab2-4afc-89f3-b9682bb09ffa","created_time":"2022-05-22T14:04:00.000Z","last_edited_time":"2022-05-22T14:39:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🧦"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"react-study","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"react-study","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-05-22T14:04:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-468c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"df97c187-3293-418a-ac12-4558bd3283ce","name":"Frontend","color":"pink"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactは最初の勉強の仕方がわからずに苦労しました。これからReactを勉強しようとしている方向けに、勉強の仕方をまとめましたので、参考にして頂ければ幸いです。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactは最初の勉強の仕方がわからずに苦労しました。これからReactを勉強しようとしている方向けに、勉強の仕方をまとめましたので、参考にして頂ければ幸いです。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-05-22T14:39:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"フロントエンド初心者にすすめるReactの勉強方法","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"フロントエンド初心者にすすめるReactの勉強方法","href":null}]}},"url":"https://app.notion.com/p/React-4ad889aaeab24afc89f3b9682bb09ffa","public_url":null,"archived":false},{"object":"page","id":"28057b99-2c8d-4c21-a7cf-fc88a9989cf5","created_time":"2022-05-21T13:38:00.000Z","last_edited_time":"2022-05-21T13:58:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🪜"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"kotlin-springboot-easy-api","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"kotlin-springboot-easy-api","href":null}]}
6,"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-05-21T13:38:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"322b1f9c-4a6e-4fe2-81c6-fcfff5b1d99a","name":"Java","color":"yellow"},{"id":"604a3d01-896b-4db3-a227-0516d8bdba1b","name":"Kotkin","color":"purple"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"バックエンド初心者がKotlin + Spring Bootで簡単なAPIを作ったので、その記録をまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"バックエンド初心者がKotlin + Spring Bootで簡単なAPIを作ったので、その記録をまとめました。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-05-21T13:58:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"Kotlin + Spring Bootで簡単なAPIを作ってみた","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Kotlin + Spring Bootで簡単なAPIを作ってみた","href":null}]}},"url":"https://app.notion.com/p/Kotlin-Spring-Boot-API-28057b992c8d4c21a7cffc88a9989cf5","public_url":null,"archived":false},{"object":"page","id":"1ab0c03c-64c5-4895-881d-27ca9529862d","created_time":"2022-05-15T11:19:00.000Z","last_edited_time":"2022-05-15T12:09:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🗒️"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"c-implicit-declaration-function","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"c-implicit-declaration-function","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-05-15T11:19:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"4ef054b9-2984-4f22-b048-4ad581dd1d78","name":"C言語","color":"green"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"ライブラリで用意された関数が、インポートしているはずなのに「","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"ライブラリで用意された関数が、インポートしているはずなのに「","href":null},{"type":"text","text":{"content":"implicit declaration of function","link":null},"annotations":{"bold":true,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"implicit declaration of function","href":null},{"type":"text","text":{"content":"」の警告が出てしまった時の対処法です。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"」の警告が出てしまった時の対処法です。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-05-15T12:09:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"【C言語】ライブラリの関数なのに「implicit declaration of function」になってしまう","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"【C言語】ライブラリの関数なのに「implicit declaration of function」になってしまう","href":null}]}},"url":"https://app.notion.com/p/C-implicit-declaration-of-function-1ab0c03c64c54895881d27ca9529862d","public_url":null,"archived":false},{"object":"page","id":"a2b96983-6799-499f-8bb9-8117f57c48ad","created_time":"2022-05-15T08:53:00.000Z","last_edited_time":"2022-05-15T08:56:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🥎"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"associative-array-grouping","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"associative-array-grouping","href":null}]}
6,"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-05-15T08:53:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"33acd64e-e1d8-430e-b4e5-7157ecc6bc99","name":"PHP","color":"pink"},{"id":"256113f1-c221-49b3-9027-98aa84264fcb","name":"Backend","color":"brown"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"PHPの連想配列の各要素を、とあるkeyでグルーピングする方法をまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"PHPの連想配列の各要素を、とあるkeyでグルーピングする方法をまとめました。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-05-15T08:56:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"PHPの連想配列をグルーピングする方法","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"PHPの連想配列をグルーピングする方法","href":null}]}},"url":"https://app.notion.com/p/PHP-a2b969836799499f8bb98117f57c48ad","public_url":null,"archived":false},{"object":"page","id":"09cad4db-df5d-4900-aff4-8b62adffe2fb","created_time":"2022-04-03T11:14:00.000Z","last_edited_time":"2022-04-03T11:19:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🎸"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"react-get-method-library","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"react-get-method-library","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-04-03T11:14:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-468c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"0af3f726-1fff-4db0-b514-2fec41deb005","name":"SWR","color":"green"},{"id":"32191811-23e8-4be3-9d93-7b9dc4502219","name":"Fetch","color":"purple"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactで外部APIから情報を取得する方法は、Fetch APIやaxiosが有名ですが、データ取得のためのReact HooksであるSWR(stale-while-revalidate)を紹介します。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactで外部APIから情報を取得する方法は、Fetch APIやaxiosが有名ですが、データ取得のためのReact HooksであるSWR(stale-while-revalidate)を紹介します。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-04-03T11:19:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"Reactでデータ取得するおすすめの方法はSWRだ!","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactでデータ取得するおすすめの方法はSWRだ!","href":null}]}},"url":"https://app.notion.com/p/React-SWR-09cad4dbdf5d4900aff48b62adffe2fb","public_url":null,"archived":false},{"object":"page","id":"dd16652a-965a-4477-9fa7-6d4e70d6f435","created_time":"2022-04-03T10:25:00.000Z","last_edited_time":"2022-04-03T11:09:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🗼"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"use-key","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"use-key","href":null}]}
6,"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-04-03T10:25:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-468c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"df97c187-3293-418a-ac12-4558bd3283ce","name":"Frontend","color":"pink"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactアプリでキーボードが押されたときに処理させたい場合は、様々なHooksを用意してくれるライブラリー「Rooks」のuseKeyがおすすめです。useKeyの基本的な使い方をまとめています。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactアプリでキーボードが押されたときに処理させたい場合は、様々なHooksを用意してくれるライブラリー「Rooks」のuseKeyがおすすめです。useKeyの基本的な使い方をまとめています。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-04-03T11:09:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"ReactでkeyDownイベントを簡単に扱えるHooks「useKey | Rooks」","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"ReactでkeyDownイベントを簡単に扱えるHooks「useKey | Rooks」","href":null}]}}
6,"url":"https://app.notion.com/p/React-keyDown-Hooks-useKey-Rooks-dd16652a965a44779fa76d4e70d6f435","public_url":null,"archived":false},{"object":"page","id":"7a243978-8366-4630-b47c-07467722c5d5","created_time":"2022-04-03T10:05:00.000Z","last_edited_time":"2022-04-03T10:09:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🌂"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"laravel-api","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"laravel-api","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-04-03T10:05:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"33acd64e-e1d8-430e-b4e5-7157ecc6bc99","name":"PHP","color":"pink"},{"id":"256113f1-c221-49b3-9027-98aa84264fcb","name":"Backend","color":"brown"},{"id":"0c030dff-306e-49da-8533-c565b2f8e321","name":"Laravel","color":"green"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"PHPのフレームワークとして代表的なLaravelでは、APIを簡単に作成できます。今回は、CORS対策も考慮したAPIの開発方法をまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"PHPのフレームワークとして代表的なLaravelでは、APIを簡単に作成できます。今回は、CORS対策も考慮したAPIの開発方法をまとめました。","href":null},{"type":"text","text":{"content":"","link":null},"annotations":{"bold":true,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-04-03T10:09:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"Laravelで(CORS対策付き)APIを簡単に作る方法","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Laravelで(CORS対策付き)APIを簡単に作る方法","href":null}]}},"url":"https://app.notion.com/p/Laravel-CORS-API-7a24397883664630b47c07467722c5d5","public_url":null,"archived":false},{"object":"page","id":"b744d92a-797d-4ce1-a55f-0ac4ff235b52","created_time":"2022-03-30T13:43:00.000Z","last_edited_time":"2022-03-30T15:04:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"📽️"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"lumen-nginx-mysql","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"lumen-nginx-mysql","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-03-30T13:43:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"33acd64e-e1d8-430e-b4e5-7157ecc6bc99","name":"PHP","color":"pink"},{"id":"6aa986ec-dfb6-48b4-80ec-3af7e9d3650c","name":"Lumen","color":"blue"},{"id":"256113f1-c221-49b3-9027-98aa84264fcb","name":"Backend","color":"brown"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"掲示板APIを、Lumen(Laravel)+Nginx+MySQLで作成したので、それぞれポイントやDocker-composeの設定などをまとめました。万能で機能がたくさんあるLaravelとは違い、軽量版であるLumenはハマりポイントがいくつもあって大変でした。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"掲示板APIを、Lumen(Laravel)+Nginx+MySQLで作成したので、それぞれポイントやDocker-composeの設定などをまとめました。万能で機能がたくさんあるLaravelとは違い、軽量版であるLumenはハマりポイントがいくつもあって大変でした。","href":null}]}
6,"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-03-30T15:04:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"Lumen + Nginx + MySQLで簡単なAPIを作成してみた","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Lumen + Nginx + MySQLで簡単なAPIを作成してみた","href":null}]}},"url":"https://app.notion.com/p/Lumen-Nginx-MySQL-API-b744d92a797d4ce1a55f0ac4ff235b52","public_url":null,"archived":false},{"object":"page","id":"161c3976-aa52-44be-8e0e-4a204cbafcbb","created_time":"2022-03-14T08:04:00.000Z","last_edited_time":"2022-03-30T14:05:00.000Z","created_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"last_edited_by":{"object":"user","id":"b8223481-9ab7-4855-9db5-327b14081b86"},"cover":null,"icon":{"type":"emoji","emoji":"🕔"},"parent":{"type":"database_id","database_id":"8631beb9-02a0-40ab-b3c7-c7e717563a67"},"in_trash":false,"is_archived":false,"is_locked":false,"properties":{"slug":{"id":"%3FON%3D","type":"rich_text","rich_text":[{"type":"text","text":{"content":"axios-cookie","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"axios-cookie","href":null}]},"created_at":{"id":"Q%40mB","type":"created_time","created_time":"2022-03-14T08:04:00.000Z"},"tags":{"id":"lAs%60","type":"multi_select","multi_select":[{"id":"88a631d0-ea36-468c-a5df-fc55f7a91186","name":"React","color":"orange"},{"id":"c56d745f-6564-44af-b8a2-39b8357a7be0","name":"Cookie","color":"purple"},{"id":"df97c187-3293-418a-ac12-4558bd3283ce","name":"Frontend","color":"pink"}]},"description":{"id":"smsW","type":"rich_text","rich_text":[{"type":"text","text":{"content":"Reactで非同期通信(Ajax)をしたいとき、Axiosを使うことが多いと思います。そのPOST通信でCookieを操作したい時には、少し手間がかかるので、その説明をまとめました。","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Reactで非同期通信(Ajax)をしたいとき、Axiosを使うことが多いと思います。そのPOST通信でCookieを操作したい時には、少し手間がかかるので、その説明をまとめました。","href":null}]},"updated_at":{"id":"zukq","type":"last_edited_time","last_edited_time":"2022-03-30T14:05:00.000Z"},"Title":{"id":"title","type":"title","title":[{"type":"text","text":{"content":"AxiosのPOST通信でCookieをいじりたい","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"AxiosのPOST通信でCookieをいじりたい","href":null}]}},"url":"https://app.notion.com/p/Axios-POST-Cookie-161c3976aa5244be8e0e4a204cbafcbb","public_url":null,"archived":false}]},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"react-deploy"},"buildId":"_jiSLatgBGB5-0SDZnBQh","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
6</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.