<h1 id="h6352b64240">Astroの本領発揮</h1><p>実際に公式ドキュメントを参考にしつつ作っていく<br>お手本の部分と大き違うところは今回のアプリはデフォルトで用意されているtypescriptを利用している<br><span style="color:#c7243a">全体像としては少し長くなりそうになるため何回かに分けて投稿してく</span><br><a href="https://developer-souta.com/blog/s6fnyzy8x" target="_blank" rel="noopener noreferrer">前回のAstroの記事について</a><br><a href="https://docs.astro.build/ja/tutorial/1-setup/3/" target="_blank" rel="noopener noreferrer">参考サイト</a></p><h2 id="h5f4f2073a0">完成予定コード</h2><p>何かわからないところがあればここをみてほしい<br><a href="https://github.com/sasaki-sota/astro-handson" target="_blank" rel="noopener noreferrer">Github</a></p><h2 id="hf24d525c73">開発環境の構築</h2><p>エディターはVScodeを利用します。<br>※ nodeのバージョンについては<strong>v16.12.0</strong>以上を利用してください</p><pre><code>$ node -v
v19.8.0</code></pre><h3 id="hed376fc2a2">雛形の作成</h3><p>ここでは</p><ol><li>作成するディレクトリを指定</li><li>どうやってプロジェクトを始めるか</li><li>依存するパッケージをインストールするか</li><li>TSを使う予定はあるか</li><li>使う場合の型の厳しさを指定</li></ol><p>今回では以下のようにしています。</p><pre><code>$ npm create astro@latest
------------
╭─────╮&nbsp; Houston:
│ ◠ ◡ ◠&nbsp; Let's build something awesome!
╰─────╯
&nbsp;astro&nbsp; &nbsp;v2.1.3 Launch sequence initiated.
------------
&nbsp; &nbsp;dir&nbsp; &nbsp;Where should we create your new project?
astro-handson
------------
&nbsp; &nbsp;tmpl&nbsp; &nbsp;How would you like to start your new project?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Include sample files&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Use blog template&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Empty&nbsp;
------------
&nbsp; deps&nbsp; &nbsp;Install dependencies? (recommended)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
&nbsp; &nbsp; ts&nbsp; &nbsp;Do you plan to write TypeScript?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
&nbsp;use&nbsp; &nbsp;How strict should TypeScript be?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Strict (recommended)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Strictest&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Relaxed&nbsp;
------------
&nbsp;git&nbsp; &nbsp;Initialize a new git repository? (optional)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
$ cd astro-handson
------------
$ npm run dev</code></pre><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/48455a76c13747a0add45f2531faa867/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.02.25.webp" alt=""></p><h3 id="h596a998ee7">aboutページを作成</h3><p>前回をの述べたようにダイナミックルーティングの仕様になっているため、pageフォルダ内でabout.astroファイルを作成することで自動でルーティングしてくれる<br>astroファイルではNextjsのようなLinkタグは必要ない</p><h4 id="h3e5371a52e">about.astro</h4><pre><code>&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;h1&gt;About Page&lt;/h1&gt;
&lt;/body&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/05b1540fdc3648ce881842165f7e74fe/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.23.27.webp" alt=""></p><h3 id="hf3dc359cbe">マークダウン周りの作成</h3><p>pagesフォルダの中に<strong>postsフォルダ</strong>を作成する<br>さらに作成したフォルダ内で<strong>post-1.mdファイル</strong>を作成する<br><a href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noopener noreferrer">マークダウンのチートシート</a></p><h4 id="h1421f0e3c0">pages/posts/post-1.md</h4><pre><code>---
title: 'Dev sota tech blog'
pubDate: 2023-03-16
description: 'Sample hands-on new blog article'
author: 'sota'
tags: ['programming', 'hands-on', 'astro']
---
# Dev sota tech blog
最初の俺のブログの記事となる
もちろんハンズオンということをお忘れなく
---
This will be my first blog post.
Don't forget, of course, that it's hands-on.
## Profile me
今日はラーメンをしっかりといただいた
好きな食べ物はホタテ
---
I had a good bowl of ramen today.
My favorite food is scallops.</code></pre><h3 id="hc6ca66c392">blogファイルの作成</h3><p>pagesフォルダにblogファイルを作成する。</p><h4 id="h3bdbc9f74a">blog.astro</h4><pre><code>&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="/blog"&gt;Blog&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="/posts/post-1"&gt;Post - 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2355d6af223a434d8f12c195bca620f6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.47.23.webp" alt=""></p><h3 id="h23f2d26cd4">追加でmdファイルを追加</h3><p>md .... markdownのこと<br>内容は適当で大丈夫</p><h4 id="h3bdbc9f74a">blog.astro</h4><pre><code>&lt;!-- 追加 --&gt;
    &lt;li&gt;&lt;a href="/posts/post-2"&gt;Post - 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/posts/post-3"&gt;Post - 3&lt;/a&gt;&lt;/li&gt;
&lt;!-- --------- --&gt;</code></pre><h3 id="hd467963d3f">定数を利用</h3><p>以前記述したコードフェンスという概念に基づいて作成する<br>肌間だが慣れるとしっかりと分割してあってかなり記述しやすくなっているような感じがする<br>JSXとほんとにそっくり</p><h4 id="h3e5371a52e">about.astro</h4><pre><code>---
const pageTitle: string = 'About page';
interface Personal {
  firstName: string;
  lastName: string;
  country: string;
  hobbies: string[];
}
const personal: Personal = {
  firstName: 'sample',
  lastName: 'taro',
  country: 'japan',
  hobbies: ['soccer', 'react'],
};
const one: number = 1;
const flag: boolean = false;
---
&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="blog"&gt;Blog&lt;/a&gt;
  &lt;h1&gt;{pageTitle}&lt;/h1&gt;
  &lt;p&gt;{personal.firstName}&lt;/p&gt;
  &lt;p&gt;{personal.lastName}&lt;/p&gt;
  &lt;p&gt;{personal.country}&lt;/p&gt;
  &lt;ol&gt;
    {personal.hobbies.map((hobby) =&gt; &lt;li&gt;{hobby}&lt;/li&gt;)}
  &lt;/ol&gt;
  {one === 1 ? &lt;p&gt;Yes&lt;/p&gt; : &lt;p&gt;No&lt;/p&gt;}
  {flag &amp;&amp; &lt;p&gt;true&lt;/p&gt;}
&lt;/body&gt;</code></pre><h3 id="h7c9acaa7f6">デザインまわり</h3><p>スコープ内の適用と全体への適用の二つがある<br>普段はtailwindを利用しているので少し久しぶりな感じがした</p><h4 id="h992607104d">スコープ内<br>about.astro</h4><pre><code>const countryColor: string = 'navy';
---
&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="blog"&gt;Blog&lt;/a&gt;
  &lt;h1&gt;{pageTitle}&lt;/h1&gt;
  &lt;style define:vars={{ countryColor }}&gt;
    h1 {
      color: aquamarine;
      font-size: 4rem;
    }
    .list {
      /* 直接 - direct */
      /* color: cadetblue; */
      /* 定数 - const */
      color: var(--countryColor);
      font-weight: bold;
    }
  &lt;/style&gt;
  &lt;p&gt;{personal.firstName}&lt;/p&gt;
  &lt;p&gt;{personal.lastName}&lt;/p&gt;
  &lt;p&gt;{personal.country}&lt;/p&gt;
  &lt;ol&gt;
    {personal.hobbies.map((hobby) =&gt; &lt;li class="list"&gt;{hobby}&lt;/li&gt;)}
  &lt;/ol&gt;
  {one === 1 ? &lt;p&gt;Yes&lt;/p&gt; : &lt;p&gt;No&lt;/p&gt;}
  {flag &amp;&amp; &lt;p&gt;true&lt;/p&gt;}
&lt;/body&gt;</code></pre><h4 id="h2972eff632">グローバル</h4><p>srcファイルの中にstyles/global.cssファイルを作成</p><h4 id="h1df2467f46">src/styles/global.css</h4><pre><code>html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}


body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}


* {
  box-sizing: border-box;
}


h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}</code></pre><h4 id="h3e5371a52e">about.astro</h4><pre><code>import '../styles/global.css';</code></pre>

<h1 id="hac04a2c73a">Astro in its element</h1><p>Actually making it while referring to the official documentation<br>The big difference from the example section is that this time the application uses typescript, which is provided by default.<br><span style="color:#c7243a">The whole thing is going to be a bit long, so I'll post it in several parts.</span><br><a href="https://developer-souta.com/blog/s6fnyzy8x" target="_blank" rel="noopener noreferrer">About the previous Astro article</a><br><a href="https://docs.astro.build/ja/tutorial/1-setup/3/" target="_blank" rel="noopener noreferrer">Reference site</a></p><h2 id="hf6a6f7516e">Code to be completed</h2><p>If you have any questions, please look here.<br><a href="https://github.com/sasaki-sota/astro-handson" target="_blank" rel="noopener noreferrer">Github</a></p><h2 id="h38d8efd827">Building the development environment</h2><p>Use VScode as an editor.<br>※ Please use node version <strong>v16.12.0</strong> or higher.</p><pre><code>$ node -v
v19.8.0</code></pre><h3 id="haa7802ceaf">Creating a template</h3><p>This section describes how to</p><ol><li>Specify the directory to create</li><li>How to start the project</li><li>Do you want to install dependent packages</li><li>whether you plan to use TS</li><li>Specify the type severity if you use it</li></ol><p>In this case, we do the following</p><pre><code>$ npm create astro@latest
------------
╭─────╮&nbsp; Houston:
│ ◠ ◡ ◠&nbsp; Let's build something awesome!
╰─────╯
&nbsp;astro&nbsp; &nbsp;v2.1.3 Launch sequence initiated.
------------
&nbsp; &nbsp;dir&nbsp; &nbsp;Where should we create your new project?
astro-handson
------------
&nbsp; &nbsp;tmpl&nbsp; &nbsp;How would you like to start your new project?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Include sample files&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Use blog template&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Empty&nbsp;
------------
&nbsp; deps&nbsp; &nbsp;Install dependencies? (recommended)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
&nbsp; &nbsp; ts&nbsp; &nbsp;Do you plan to write TypeScript?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
&nbsp;use&nbsp; &nbsp;How strict should TypeScript be?
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Strict (recommended)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Strictest&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;○ Relaxed&nbsp;
------------
&nbsp;git&nbsp; &nbsp;Initialize a new git repository? (optional)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;● Yes&nbsp; ○ No&nbsp;
------------
$ cd astro-handson
------------
$ npm run dev</code></pre><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/48455a76c13747a0add45f2531faa867/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.02.25.webp" alt=""></p><h3 id="h0860875559">Creating the about page</h3><p>As mentioned in the previous article, the dynamic routing specification allows for automatic routing by creating an about.astro file in the page folder.<br>The astro file does not need a Link tag like Nextjs.</p><h4 id="h3e5371a52e">about.astro</h4><pre><code>&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;h1&gt;About Page&lt;/h1&gt;
&lt;/body&gt;</code></pre><p><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/05b1540fdc3648ce881842165f7e74fe/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.23.27.webp" alt=""></p><h3 id="hec18a90213">Creating Markdown Perimeter</h3><p>Create a <strong>posts folder</strong> inside the pages folder<br>In addition, create the <strong>post-1.md</strong> file in the created folder.<br><a href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noopener noreferrer">Markdown cheat sheet</a></p><h4 id="h1421f0e3c0">pages/posts/post-1.md</h4><pre><code>---
title: 'Dev sota tech blog'
pubDate: 2023-03-16
description: 'Sample hands-on new blog article'
author: 'sota'
tags: ['programming', 'hands-on', 'astro']
---
# Dev sota tech blog
最初の俺のブログの記事となる
もちろんハンズオンということをお忘れなく
---
This will be my first blog post.
Don't forget, of course, that it's hands-on.
## Profile me
今日はラーメンをしっかりといただいた
好きな食べ物はホタテ
---
I had a good bowl of ramen today.
My favorite food is scallops.</code></pre><h3 id="heb049cc773">Create blog file</h3><p>Create a blog file in the pages folder.</p><h4 id="h3bdbc9f74a">blog.astro</h4><pre><code>&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="/blog"&gt;Blog&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="/posts/post-1"&gt;Post - 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2355d6af223a434d8f12c195bca620f6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%2021.47.23.webp" alt=""><br></p><h3 id="h2de15a7fac">Add additional md files</h3><p>md .... markdown.<br>Content can be appropriate.</p><h4 id="h3bdbc9f74a">blog.astro</h4><pre><code>&lt;!-- 追加 - add --&gt;
    &lt;li&gt;&lt;a href="/posts/post-2"&gt;Post - 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/posts/post-3"&gt;Post - 3&lt;/a&gt;&lt;/li&gt;
&lt;!-- --------- --&gt;</code></pre><h3 id="h66ae4aadce">Using Constants</h3><p>Creating based on the concept of code fences previously described<br>It is skin deep, but once you get used to it, it seems to be well divided and quite easy to describe.<br>Really similar to JSX.</p><h4 id="h3e5371a52e">about.astro</h4><pre><code>---
const pageTitle: string = 'About page';
interface Personal {
  firstName: string;
  lastName: string;
  country: string;
  hobbies: string[];
}
const personal: Personal = {
  firstName: 'sample',
  lastName: 'taro',
  country: 'japan',
  hobbies: ['soccer', 'react'],
};
const one: number = 1;
const flag: boolean = false;
---
&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="blog"&gt;Blog&lt;/a&gt;
  &lt;h1&gt;{pageTitle}&lt;/h1&gt;
  &lt;p&gt;{personal.firstName}&lt;/p&gt;
  &lt;p&gt;{personal.lastName}&lt;/p&gt;
  &lt;p&gt;{personal.country}&lt;/p&gt;
  &lt;ol&gt;
    {personal.hobbies.map((hobby) =&gt; &lt;li&gt;{hobby}&lt;/li&gt;)}
  &lt;/ol&gt;
  {one === 1 ? &lt;p&gt;Yes&lt;/p&gt; : &lt;p&gt;No&lt;/p&gt;}
  {flag &amp;&amp; &lt;p&gt;true&lt;/p&gt;}
&lt;/body&gt;</code></pre><h3 id="h83d1b01aed">Around Design</h3><p>There are two types of application: in-scope and overall<br>I usually use tailwind, so it felt like a little while since I've been there.</p><h4 id="hd031d039bc">In Scope<br>about.astro</h4><pre><code>const countryColor: string = 'navy';
---
&lt;body&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="blog"&gt;Blog&lt;/a&gt;
  &lt;h1&gt;{pageTitle}&lt;/h1&gt;
  &lt;style define:vars={{ countryColor }}&gt;
    h1 {
      color: aquamarine;
      font-size: 4rem;
    }
    .list {
      /* 直接 - direct */
      /* color: cadetblue; */
      /* 定数 - const */
      color: var(--countryColor);
      font-weight: bold;
    }
  &lt;/style&gt;
  &lt;p&gt;{personal.firstName}&lt;/p&gt;
  &lt;p&gt;{personal.lastName}&lt;/p&gt;
  &lt;p&gt;{personal.country}&lt;/p&gt;
  &lt;ol&gt;
    {personal.hobbies.map((hobby) =&gt; &lt;li class="list"&gt;{hobby}&lt;/li&gt;)}
  &lt;/ol&gt;
  {one === 1 ? &lt;p&gt;Yes&lt;/p&gt; : &lt;p&gt;No&lt;/p&gt;}
  {flag &amp;&amp; &lt;p&gt;true&lt;/p&gt;}
&lt;/body&gt;</code></pre><h4 id="h8d3f5aef2c">Global</h4><p>Create styles/global.css file in src file</p><h4 id="h1df2467f46">src/styles/global.css</h4><pre><code>html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}


body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}


* {
  box-sizing: border-box;
}


h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}</code></pre><h4 id="h3e5371a52e">about.astro</h4><pre><code>import '../styles/global.css';</code></pre>

セットアップと基礎編が中心⚾️

Astroを使ってみる - Typescriptを利用したブログを作るハンズオン - Vol.1

Using Astro - Hands-on with Typescript for Blogging - Vol. 1

<h1 id="h005f3055fa">Astroの概要</h1><p>ずっと触ってみたいと思っていた。<br>今までは英語学習をやっていた関係もあってプログラミング自体は取りやめていたが最近無事に目標達成をしたので、昨日無事にブログの開発も一度完了としたことでようやく機会がやってきた。</p><h2 id="h8b49c2face">Astroとは</h2><p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer">公式サイト</a><br>簡単に紹介をするとよくページスピードインサイトなどでページを確認してみると必要ないJSコードがある場合がかなり多いがこのフレームワークを利用することで、不必要なJSを排除してHTMLとCSSで構成されるものになっている。<br>また、比較的新しいフレームワークになっており、実際にドキュメントを見てみると様々な場面でのユースケースを想定していることがわかるようになっている所感がある。</p><h3 id="h7af633134f">利用背景</h3><p>今後プロフィールサイトを刷新する際に選択肢の一つとなることになる点やReactを長く利用している自分にとってもあまり学習コストの障壁を高めることなく開発することができると考えているため。<br>また、その際の機能についての要件もAstroならより高パフォーマンスで実現することができるようになるだろうと考えたため。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/698d6d40a6dd4b28aea5e962235be1e6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-15%2023.16.12.webp" alt=""></p><h2 id="h71975b95e0">Next.jsとの比較</h2><p><a href="https://docs.astro.build/en/guides/migrate-to-astro/from-nextjs/" target="_blank" rel="noopener noreferrer">参考サイト</a><br>個人的な肌間としてNext.jsがおそらく比較対象になるだろうと考えている。</p><h3 id="h1eddf88cc1">類似点</h3><ul><li>AstroファイルはJSXと似ている部分が多い<ul><li>従来のJSXファイルを利用可能にもなっている</li></ul></li><li>レンダリング方法もSSRとSSGの両方完備</li><li>ダイナミックルーティングを利用することができる</li><li>コンポーネントベースの開発思考</li><li>多くのReactのライブラリを利用できる</li></ul><h3 id="hb9f1810d3f">相違点</h3><ul><li><a href="https://docs.astro.build/en/concepts/mpa-vs-spa/" target="_blank" rel="noopener noreferrer">MPA（従来のwebサイトの通信方式）</a><ul><li>コンテンツにフォーカスした思想に合理的であるため</li><li>サーバー言語とランタイムの部分にJSを利用することでシンプルにし開発体験を向上させている</li></ul></li><li><a href="https://docs.astro.build/en/concepts/why-astro/" target="_blank" rel="noopener noreferrer">コンテンツ中心を想定</a><ul><li>サーバー上でファイルをレンダリングを行い、webサイトの実行速度の向上に貢献</li><li>webアプリケーションの開発は想定されていない</li></ul></li><li><a href="https://docs.astro.build/en/core-concepts/astro-components/" target="_blank" rel="noopener noreferrer">Astroファイルでの記述方法</a><ul><li>スクリプトとコンポーネントの二つで構成されている</li><li>コードフェンスということを利用して分割できる</li></ul></li></ul><h4 id="hcfdfe714b0">コンポーネントスクリプト(.astro)</h4><pre><code>---
import AstroComponent from '../components/AstroComponent.astro';
import ReactComponent from '../components/ReactComponent.jsx';
import sampleData from '../data/sample.json';

// &lt;X title="Hello, World" /&gt;` のように、渡されたコンポーネントプロップにアクセスする。
const {title} = Astro.props;
// プライベートなAPIやデータベースからも、外部データを取得する。
const data = await fetch('SECRET_API_URL/users').then(r =&gt; r.json());
---
&lt;!-- Your template here! --&gt;</code></pre><h4 id="hfb8c787f5b">コンポーネントテンプレート(.astro)</h4><pre><code>&lt;!-- HTMLコメント対応! --&gt;
{JS コメント構文も有効です。*/}

&lt;Banner /&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;

&lt;!-- コンポーネントスクリプトのpropsやその他の変数を使用します。--&gt;
&lt;p&gt;{title}&lt;/p&gt;

&lt;!-- hydrateに`client:`ディレクティブを持つ他のUIフレームワークのコンポーネントを含める: --&gt;。
&lt;ReactComponent client:visible /&gt;

&lt;!-- JSXと同様に、HTMLとJavaScriptの式を混ぜる: --&gt;。
&lt;ul&gt;
  {myFavorites.map((data) =&gt; &lt;li&gt;{data.name}&lt;/li&gt;)}
&lt;/ul&gt;

&lt;!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を構築する! --&gt;
&lt;p class:list={["add", "dynamic", {classNames: true}]} /&gt;</code></pre><p>ここの部分に関しては実際に参考サイトを参考してもらう方がいいかもしれない。</p><h2 id="h2cc041ca7b">環境設定</h2><pre><code>// バージョンが古いと最新版のastroを利用することができないため
// n - nodeのバージョン管理
// 参考サイト： https://github.com/tj/n
$ sudo n latest 
----
// 最新のnodeのバージョンになっているいるかどうかを確認
$ node -v
----
$ npm install -g astro
----
$ npm create astro@latest
----
... ~対話の開始 ... recommendを利用することを推奨
----
$ npm run dev
----
&gt; astro-dev@0.0.1 dev
&gt; astro dev
&nbsp; 🚀&nbsp; astro&nbsp; v2.1.3 started in 78ms
&nbsp;&nbsp;
&nbsp; ┃ Local&nbsp; &nbsp; http://localhost:3000/
&nbsp; ┃ Network&nbsp; use --host to expose</code></pre><p>と一連のコマンドを入力して欲しい。<br>もしここで説明が足りないや何か設定ができないなどあればご連絡ください🙇‍♂️<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4bf6e558e9824d748fff43592521c3ba/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.07.10.webp" alt=""><br>このようなページが表示されれば成功となる！<br>個人的にはとても簡単にプロジェクトが作成することができる上に、最近流行りの対話型シェルでのプロジェクト作成ができるためとても簡単に作成することができる。<br>TSサポートをしてくれているのも嬉しいポイント。</p><h2 id="h8d78e14043">感想</h2><p>かなり高速での説明となってしまい至らない部分がほとんどだと思うがコメント形で是非指摘してほしい。<br>またまだまだAstro入門したてなので少しずつ記述方法や概要などをしっかりと掴んでいきたい。<br>今までの馴染みある記法や技術を利用することができるのは強いのでしっかりと理解を深めていきたい<br>次はハンズオンをやります！！</p>

<h1 id="h285b9d6a4a">Overview of Astro</h1><p>I have always wanted to try my hand at programming.<br>However, I have recently achieved my goal, and now that I have successfully completed the development of my blog yesterday, I finally have an opportunity to do so.</p><h2 id="hdc3f75f61c">What is Astro?</h2><p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Official Site</a><br>To briefly introduce Astro, it is a framework that eliminates unnecessary JS code and is composed of HTML and CSS, while often there is JS code that is not necessary when you check a page on PageSpeed Insight.<br>However, by using this framework, unnecessary JS code can be eliminated, and the framework is composed of HTML and CSS.</p><h3 id="h4e64e182e5">Background of Use</h3><p>I have been using React for a long time, and I think it will be one of the options when I revamp my profile site in the future.<br>I also thought that Astro would be able to meet my requirements for functionality at a higher performance level.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/698d6d40a6dd4b28aea5e962235be1e6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-15%2023.16.12.webp" alt=""></p><h2 id="h361102c97b">Comparison with Next.js</h2><p><a href="https://docs.astro.build/en/guides/migrate-to-astro/from-nextjs/" target="_blank" rel="noopener noreferrer">Reference sites</a><br>As a personal skin in the game, I believe Next.js is probably the best comparison.</p><h3 id="ha669ae8f13">Similarities</h3><ul><li>Astro files have many similarities to JSX<ul><li>Conventional JSX files are also available</li></ul></li><li>Both SSR and SSG rendering methods are available</li><li>Can use dynamic routing</li><li>Component-based development philosophy</li><li>Many React libraries are available</li></ul><h3 id="h38e397d669">Differences</h3><ul><li><a href="https://docs.astro.build/en/concepts/mpa-vs-spa/" target="_blank" rel="noopener noreferrer">MPA (traditional website communication method)</a><ul><li>Because it is rational in its content-focused philosophy</li><li>Use of JS for server language and runtime parts simplifies and improves the development experience.</li></ul></li><li><a href="https://docs.astro.build/en/concepts/why-astro/" target="_blank" rel="noopener noreferrer">Assumed to be content-centric</a><ul><li>Rendering files on the server contributes to faster website execution</li><li>Not intended for web application development</li></ul></li><li><a href="https://docs.astro.build/en/core-concepts/astro-components/" target="_blank" rel="noopener noreferrer">How to write in Astro files</a><ul><li>Consists of scripts and components</li><li>Can be divided using a code fence</li></ul></li></ul><h4 id="h250e6f6157">Component Script(.astro)</h4><pre><code>---
import AstroComponent from '../components/AstroComponent.astro';
import ReactComponent from '../components/ReactComponent.jsx';
import sampleData from '../data/sample.json';

// Access passed-in component props, like `&lt;X title="Hello, World" /&gt;`
const {title} = Astro.props;
// Fetch external data, even from a private API or database
const data = await fetch('SECRET_API_URL/users').then(r =&gt; r.json());
---
&lt;!-- Your template here! --&gt;</code></pre><h4 id="hdd0b0f4220">Component Templete(.astro)</h4><pre><code>&lt;!-- HTML comments supported! --&gt;
{/* JS comment syntax is also valid! */}

&lt;Banner /&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;

&lt;!-- Use props and other variables from the component script: --&gt;
&lt;p&gt;{title}&lt;/p&gt;

&lt;!-- Include other UI framework components with a `client:` directive to hydrate: --&gt;
&lt;ReactComponent client:visible /&gt;

&lt;!-- Mix HTML with JavaScript expressions, similar to JSX: --&gt;
&lt;ul&gt;
  {myFavorites.map((data) =&gt; &lt;li&gt;{data.name}&lt;/li&gt;)}
&lt;/ul&gt;

&lt;!-- Use a template directive to build class names from multiple strings or even objects! --&gt;
&lt;p class:list={["add", "dynamic", {classNames: true}]} /&gt;</code></pre><p>As for this part, it might be better to have the actual reference site as a reference.</p><h2 id="h466e0f7e93">Environment setting</h2><pre><code>// since the latest version of astro is not available if the version is out of date.
// n - node version control
// Reference site: https://github.com/tj/n
$ sudo n latest&nbsp;
----
// Check if you are on the latest node version
$ node -v
----
$ npm install -g astro
----
$ npm create astro@latest
... ~Starting the dialogue ... Recommend to use 
----
$ npm run dev
----
&gt; astro-dev@0.0.1 dev
&gt; astro dev
&nbsp; 🚀&nbsp; astro&nbsp; v2.1.3 started in 78ms
&nbsp;&nbsp;
&nbsp; ┃ Local&nbsp; &nbsp; http://localhost:3000/
&nbsp; ┃ Network&nbsp; use --host to expose</code></pre><p>and a series of commands.<br>If I have not explained it well enough here, or if you are having trouble setting something up, please let me know. 🙇‍♂️<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4bf6e558e9824d748fff43592521c3ba/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-16%200.07.10.webp" alt=""><br>If you see a page that looks like this, you've succeeded!<br>Personally, I find it very easy to create projects and also very easy to create projects in an interactive shell, which is very popular these days.<br>It is also great that they offer TS support.</p><h2 id="h458e0d0ba6">Impressions</h2><p>I think that most of the explanations are not very clear, but I would appreciate your comments on them.<br>I would also like to get a better grasp of how to write and outline the code, as I am still new to Astro.<br>It is strong to be able to use the notation and techniques that I am familiar with, so I want to deepen my understanding of them.<br>I'll do a hands-on next time!!</p>

やっと使ってみることができた

Astroを使ってみる - 環境設定編

Try using Astro - Environment setting section

<h1 id="hfc6b1274c1">コメント機能が欲しかった</h1><p>前にも説明させてもらったかもしれないが時々「じぶんのブログの記事や情報性は正しいのか？」と不安になることがある。<br>自分自身のキャッチアップ方法として自分の発信した意見から客観的にみたらどのような意見をいただけるのかということや他に応用することができることや素直に自分の記事がどう思われているのかが気になっていた。<br>だからどんな意見でもいいから客観的に情報発信として正しい情報なのかということや記事の方向性のアドバイスなどもいただきたいと考えている🙇‍♀️<br>勉強で比喩すると自分がインプットした意見を人に説明して間違ったことや改善することがあればアドバイスしてもらうような感覚で発信することができればと思っている。</p><h2 id="hcb9dacb773">結論</h2><p>ISRを用いたsupabaseを利用したコメント機能の実装となった。</p><h3 id="he45680f0bc">参考記事</h3><p><a href="https://app.supabase.com/sign-in" target="_blank" rel="noopener noreferrer">supabaseへのログインページ</a><br><a href="https://supabase.com/docs/reference/javascript/initializing" target="_blank" rel="noopener noreferrer">JSまたはTSを用いた機能の概要</a><br><a href="https://supabase.com/docs/guides/getting-started/quickstarts/nextjs" target="_blank" rel="noopener noreferrer">Next.jsでのクイックスタート</a><br><a href="https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs" target="_blank" rel="noopener noreferrer">Next.jsでの実装例</a><br><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">わかりやすいレンダリング方法の概要</a></p><h2 id="h87e668c139">実装要件</h2><ol><li>触れたことない技術を利用して実装</li><li>レンダリング方法を変更</li><li>匿名で投稿することができるように</li></ol><h3 id="hc679a011a0">触れたことない技術を利用して実装</h3><p>これはシンプルに触ったことがない技術を使ってみたいとプロダクトを実装する際に常々思っている。<br>バックエンドが実装することはスピード感を持って実装したかっため、想定していなかった。<br>そうなるとプラットフォームで完結しようと考えfirebaseは以前インターンをしていた際に利用したことがあったので今回は既存のデータベース知識を利用することができるsupabaseを使ってみてみたいと思っていたのと、友人や先輩が利用していた背景があり今回は使ってみることにした。</p><h3 id="he6b54f05b0">レンダリング方法を変更</h3><p>これもコメントを機能を付け加えるために必須の要件である。<br>今まではmicroCMSのみで完結していたため静的ページのみで開発することができたが、コメント機能実装となると実際に投稿されたコメントはサーバー側で処理して反映されるため、ビルド時に反映される既存のレンダリング方法では対応することができないということを想定していた。<br>そのため、現状ではSSGを利用していたがSSRかISRのどちらかに変更して実際に投稿されたコメントを次の記事の投稿にビルドされる必要もされることなく反映できればと思っていた。</p><h3 id="hbd54c61ab3">匿名で投稿することができるように</h3><p>自分は特定の視聴者さんの意見を知りたいということもあるがそれ以上に自分のブログは客観的にどのように思われているかどうかが知りたいということもあってそのようなことを考えると匿名でいいと思い。今回はそれ以外の部分は考慮しないという考えにした。また仮に名前ありで実装した場合、ログインやフォームでの名前の入力が必要になると思ってしまったため、あくまでもこれは自分のブログということで必要ないと考えた</p><h2 id="h922edff87b">実装</h2><h3 id="heb9db543a7">データベース</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2780f4ed0a934b1e92d88be1e83bd4c0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2021.23.16.png" alt=""><br>厳密にやれば色々やれるが省略させてもらう。<br>簡単に説明させていただくと、</p><ol><li>created_at ... Dateオブジェクトを利用はするが表示の際に文字型で利用する</li><li>blog_id ... ブログの方のデータはプラットフォームが違うため外部キーとしない</li></ol><p>とした。</p><h3 id="h5a8452001c">フロント側の実装</h3><p>supabaseの実装については上記の参考サイトの欄を閲覧してほしい。<br>かなりドキュメント的にもわかりやすいものになっていると思うのでしっかりと理解することができると思う。<br>以下の部分で実際のコードを抜粋して紹介する。</p><h4 id="he6195a8225">supabase.ts</h4><pre><code>import { createClient } from '@supabase/supabase-js';


interface Database {
  public: {
    Tables: {
      movies: {
        Row: {}; // The data expected to be returned from a "select" statement.
        Insert: {}; // The data expected passed to an "insert" statement.
        Update: {}; // The data expected passed to an "update" statement.
      };
    };
  };
}


export const supabase = createClient&lt;Database&gt;(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);</code></pre><p>formでの部分は<a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">react-hook-form</a>と<a href="https://www.uuidgenerator.net/dev-corner/typescript" target="_blank" rel="noopener noreferrer">uuid</a>というライブラリを利用している。<br>全てのコードを紹介できなくてすいません！もし何かあればコメントください。</p><h4 id="hf73ede2440">CommentForm.tsx</h4><pre><code>import { v4 as uuidv4 } from 'uuid';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, reset } = useForm();
  const onSubmit = async (data: any) =&gt; {
    let insertData: Comment = {
      uuid: uuidv4(),
      created_at: getDate(),
      comment: data.comment,
      blog_id: blog.id,
    };
    await supabase.from('comments').insert(insertData);
    reset();
  };
        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;</code></pre><p>このように実装している。</p><h2 id="h53e5994054">Supabaseを利用して感じたこと</h2><p>実際に今までのデータベースの知識を利用することができたのはかなり大きかなと感じた。<br>Firebaseと比べしっかりとデータベースの設計などもすることができ、GUIを用いて様々な制約なども作ることができるのでかなり利用しやすいのとメソッドなどもかなり自然に利用することができるのでとてもいいなと感じることができるようなものになっている。<br>また、Firebaseに比べかなりコードが理解しやすいなと個人的に感じることができた。</p><h2 id="h545fee46b9">レンダリング関係について</h2><p>結論から話すとISRを利用することにした。<br>最初はSSRを利用していたが実際に利用してみると想像よりもリクエスト数が増えていたことと自分がコメントされたことがわかればいいこととそこまでの即時性は求めていないのでISRが最適だと感じた。<br>ただ自分もここの部分まだまだ不安に残ることも多いのでしっかりとさらに知識を深めたいと思う。</p><h2 id="h8d78e14043">感想</h2><p>まだまだ改善することができる点は多いがブログの開発は一度ここまでにしておこうと思う。<br>他にもバックエンドでキャッチアップしたいことや他にもやらなければいけないような私用の手続きがたくさんあるのでこの引越しの時期に進めなければいけないような手続きを進めていこうと思う。<br>supabaseに触れる機会が今までなかったので実際に利用することができて本当によかった。</p>

<h1 id="hfda22f8a7f">I wanted a comment function.</h1><p>I may have explained this before, but sometimes I wonder, "Are my blog posts and informational content correct?" I sometimes feel insecure about the correctness of my blog posts and information.<br>As a way to catch up with myself, I have been wondering what kind of objective opinions I can get from the opinions I have sent out, what I can apply to other things, and what people honestly think of my articles.<br>Therefore, I would like to receive any kind of opinion, including advice on whether the information is objectively correct and the direction of the article. 🙇‍♀️<br>I would like to be able to transmit my opinions as if I were explaining my input to others and asking for their advice on what I have done wrong or what I can do to improve it.</p><h2 id="hba1bda21d4">Conclusion.</h2><p>The comment function was implemented using ISR-based supabase.</p><h3 id="h9089337d1f">Reference Articles</h3><p><a href="https://app.supabase.com/sign-in" target="_blank" rel="noopener noreferrer">Login page to supabase</a><br><a href="https://supabase.com/docs/reference/javascript/initializing" target="_blank" rel="noopener noreferrer">Overview of functions with JS or TS</a><br><a href="https://supabase.com/docs/guides/getting-started/quickstarts/nextjs" target="_blank" rel="noopener noreferrer">Quick Start with Next.js</a><br><a href="https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs" target="_blank" rel="noopener noreferrer">Example implementation in Next.js</a><br><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">Overview of easy-to-understand rendering methods</a></p><h2 id="hafab0352a1">Implementation Requirements</h2><ol><li>Implemented using untouched technology</li><li>Change the rendering method</li><li>Allow anonymous submissions</li></ol><h3 id="h4cf958986d">Implemented using untouched technology</h3><p>This has always been my desire when implementing a product to simply use a technology that I have never touched.<br>We did not anticipate that the backend would be implemented because we wanted to implement it with a sense of speed.<br>I had used firebase when I was an intern before, so this time I wanted to try using supabase, which can use existing database knowledge, and my friends and seniors had used it, so I decided to use it this time. I decided to try firebase this time because I had used firebase before and I wanted to use it to use existing database knowledge.</p><h3 id="h4e4675d6c5">Change the rendering method</h3><p>This is another essential requirement for adding commenting functionality.<br>Until now, development could be done only with static pages because microCMS alone was sufficient, but when the comment function was implemented, the comments actually posted were processed and reflected on the server side, so it was assumed that the existing rendering method, which is reflected at build time, would not be able to handle this. This is the reason why SSG is currently being used.<br>Therefore, we were hoping to change from using SSG to either SSR or ISR so that comments actually posted would be reflected in the next post without the need to be built.</p><h3 id="hc7d89af693">Allow anonymous submissions</h3><p>I wanted to know the opinions of certain viewers, but more than that, I wanted to know what they thought of my blog objectively, so I thought it would be good to be anonymous. I decided not to take other aspects into consideration in this case. Also, if I had implemented it with names, I thought it would be necessary to enter names in logins and forms, so I decided it was not necessary because it is my blog only.</p><h2 id="hdd7c9dcee4">Implementation</h2><h3 id="hfc87683db0">Database</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2780f4ed0a934b1e92d88be1e83bd4c0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2021.23.16.png" alt=""><br>I could go on and on, but I will spare you the details.<br>Let me briefly explain.</p><ol><li>created_at ... Date object is used, but it is used as a character type when displaying.</li><li>blog_id ... The data on the blog is not used as a foreign key because the platform is different.</li></ol><p>The following is a simple explanation.</p><h3 id="hd2a34f98fd">Front Side Implementation</h3><p>For the implementation of Supabase, please refer to the reference site section above.<br>I think it is fairly well documented and easy to understand, so you should be able to get a good grasp of it.<br>The following is an excerpt of the actual code.</p><h4 id="he6195a8225">supabase.ts</h4><pre><code>import { createClient } from '@supabase/supabase-js';


interface Database {
  public: {
    Tables: {
      movies: {
        Row: {}; // The data expected to be returned from a "select" statement.
        Insert: {}; // The data expected passed to an "insert" statement.
        Update: {}; // The data expected passed to an "update" statement.
      };
    };
  };
}


export const supabase = createClient&lt;Database&gt;(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);</code></pre><p>The part with form uses <a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">react-hook-form</a> and a library called <a href="https://www.uuidgenerator.net/dev-corner/typescript" target="_blank" rel="noopener noreferrer">uuid</a>.<br>Sorry I can't show you all the code! If you have any questions, please comment.</p><h4 id="hf73ede2440">CommentForm.tsx</h4><pre><code>import { v4 as uuidv4 } from 'uuid';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, reset } = useForm();
  const onSubmit = async (data: any) =&gt; {
    let insertData: Comment = {
      uuid: uuidv4(),
      created_at: getDate(),
      comment: data.comment,
      blog_id: blog.id,
    };
    await supabase.from('comments').insert(insertData);
    reset();
  };
 &lt;form onSubmit={handleSubmit(onSubmit)}&gt;</code></pre><p>This is how it is implemented.</p><h2 id="h21f468c770">What I felt when using Supabase</h2><p>I felt that it was quite significant to be able to actually use the database knowledge I have accumulated so far.<br>Compared to Firebase, it is possible to design the database more firmly and create various restrictions using GUI, so it is quite easy to use and the methods can be used quite naturally.<br>In addition, I personally feel that the code is much easier to understand than Firebase.</p><h2 id="hb947706f61">Rendering</h2><p>In conclusion, we decided to use ISR.<br>At first, I used SSR, but when I actually used it, I found that the number of requests had increased more than I had imagined, and I felt that ISR was the best choice because I only needed to know that I had been commented on, and I was not looking for that much immediacy.<br>However, there are still many things that I am not sure about, so I would like to deepen my knowledge of ISR.</p><h2 id="h458e0d0ba6">Impressions</h2><p>There are still many things that can be improved, but I think I'll leave it at this point for the blog development.<br>There are many other things I want to catch up on on on the back end and other personal procedures that I need to do, so I will try to move forward with the procedures that I need to do during this time of moving.</p>

とりあえずこれでブログ開発をひと段落させる

コメント機能のためのSupabaseとレンダリング方法

Supabase and rendering method for comment function

<h1 id="ha0d1f59935">素直に嬉しかった</h1><p>本格的にTOEIC学習を始めてもう少しで一年になるところで無事に自分の目標としていた点数に達成することができた。<br>今まで何度も点数が落ちてしまうことがあって意味わからないほど悔しかったけど、無事に点数を取れた時の達成感は今まで生きてきて一番気持ちいいものだった。<br>狭い部屋の中で一人で喜んでいた記憶しかない。<br>もちろん、まだまだ継続してさらに高得点を取っていかなければいけないことに加え、これからのプログラミングライフの少しでもいい影響を与えることができればと思っている。<br>今後少しずつ今までの大変だったことや勉強法やマインドのなども共有できればと思っている。<br>そのためのブログです！📗<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fc48df66fca84784b954843ed80a6eba/IMG_3996.webp" alt=""></p>

<h1 id="hb94559db2d">I was honestly happy.</h1><p>I have been studying TOEIC for almost a year now, and I was able to successfully reach my goal.<br>I was so frustrated that I didn't know what to expect, but the sense of accomplishment I felt when I successfully achieved the score was the best feeling I have ever had in my life.<br>I can only remember being happy by myself in a small room.<br>Of course, in addition to the fact that I still have to continue to get even higher scores, I hope that I can have a small positive impact on my programming life from now on.<br>I hope to gradually share the difficulties I've had so far, my study methods, and my mindset in the future.<br>That's what this blog is for! 📗<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fc48df66fca84784b954843ed80a6eba/IMG_3996.webp" alt=""></p>

ひたすら勉強してきた毎日がやっと終わった

無事に目標点数に達成しました！

We've successfully reached our target score!

<h1 id="h7871be0f8e">一括取得か分割取得か</h1><p>ここ最近、ブログの改修をしていく上でかなり悩んでいるテーマになっている。<br>現在は分割取得にしているが、改めて自分なりに調べたり考えたりした際に一括取得にすることもかなりありだと思ってきている。<br>その理由は自分の知見を改めて整理していこうと思う。<br>※繰り返しますが個人の経験上の知見です。間違いや参考文献などがあればアドバイスください🙇‍♂️</p><h2 id="h8cf98adad8">一括取得</h2><h3 id="h3ab24f6f50">メリット</h3><ol><li>取得したデータを一度に処理することができるため、途中でのデータ加工の煩わしさを軽減することができる。</li><li>処理したデータを容易に変更することができたりするので落とし所によってはどのようにデータをいじるかどうかという点ですごくコード的にも書きやすい</li><li>当然だが分割に比べてデータ取得回数が相対的に少なくなるため、ネットワークやAPIサーバーの負荷を減らすことにつながる。</li><li>データの取得という観点でだけで考えた場合にオフラインでの取得だった場合は一度に全てのデータを取得することができるため、アクセスの幅に大きく影響する。（ファイルをまとめたZIPフォルダをダウンロードしたりするのがいい例になっているかもしれない）</li></ol><h3 id="h7e4a670898">デメリット</h3><ol><li>取得するデータの量によっては、ネットワークやAPIサーバーに負荷を大幅に増加させてしまうことにつながることがあり結果的に処理時間が長くなってしまうことがある。</li><li>利用しているメモリの使用量が増加してしまうことによって、システム全体のパフォーマンスにも影響してしまう場合がある。長期的な目線で考えたときにかなりのメモリ大幅増加になりかねない。</li><li>頻繁なデータ更新を行うことになった要件な場合は、取得した時点でのデータが最新のものではない可能性になっていることがある。</li></ol><h2 id="h34e2502eb7">分割取得</h2><h3 id="h3ab24f6f50">メリット</h3><ol><li>一度にデータを取得するわけではないので、いくらデータ取得が膨大であろうと関係なしに分割してくれるのでメモリ消費量をおさせることができる</li><li>これも当然だが頻繁にデータ更新される場合でも、最新のデータを取得できる</li><li>ネットワークやAPIサーバーに負荷がかからないことが考えることができるようになり、結果的にシステム全体のパフォーマンスに影響を与えにくい。</li><li>APIサーバー側で、一度に大量のデータを処理するためのリソースやメモリなどが必要とならなくなるため、スケーラビリティに優れる。</li></ol><h3 id="h7e4a670898">デメリット</h3><ol><li>データ量によっては複数のリクエストを送ることになるため処理時間が増加する可能性がある</li><li>データの処理や取得が複雑になりがち</li><li>分割取得時の差異により、正確なデータを取得することができない可能性がある。（滅多になるとは思うが）</li></ol><h2 id="h8b500aca5a">使いどころ</h2><p>一括取得 .... データの更新が少なく、データ量が膨大ではない場合に適している。逆に条件に当てはまらない場合は取得データやシステム全体の負荷など大きくパフォーマンスの低下につながる可能性あり。<br>分割取得 .... データ更新が頻繁で、データ量は関係なし。ただしオーバースペックになりがちであり不必要にパフォーマンスを低下に繋げる。<br>結局はプロジェクトのスケーラビリティによるところが大きい。<br>おおよその必要な取得データ量を把握することができていればむしろ一括取得が優れているかもしれないが、下手にlimitで大量取得するぐらいなら分割取得することが無難であると思う。</p><pre><code>// デフォルト値...10 - limitパラメータがある場合はそれを利用なければデフォルト値
------------------------------
// 取得するデータ件数 ... 10
GET /api/data?limit=10 ... OK
GET /api/hoge ... デフォルト値が10のため - OK
GET /api/hoge?limit=100 ... 必要なデータ数は10でいいのに無駄に90件分の処理をしてしまう
------------------------------
// 取得するデータ件数 ... 100
GET /api/data?limit=10 ... 100の10件のみとなってしまうため分割取得
GET /api/hoge ... 上記と同じ理由
GET /api/hoge?limit=100 ... OK</code></pre><h2 id="ha55a8008da">迷っている理由</h2><p>一括取得は使いどころの条件を満たせばとても強力となりうる武器になっており、自分が開発しているブログなどの小規模かつ頻繁に更新頻度が高くないような要件ではぴったりな方法だと考えている。<br>また、一括取得に変更することで全てのページの最初のルートページのデータ取得時に関連のデータをすべて取得することができるので一覧ページが必要ではないことや現在のオブジェクトの総数を計算することができるといった様々なメリットや単純にコード的にも論理的に考えてとても開発しやすいものになるということは間違いない。<br>それを知った上での現在の開発についてはoffsetとlimitを利用した分割取得となっている。<br>もちろんページごとのデータ取得を行うことになるので一括取得に比べてデータの取得回数が増えることや一覧ページを作成しなければいけないことや関連テーブルのデータも一括取得することができないなどのデメリットはあるが、今後のスケーラビリティを考えると現在の規模では一括取得でも余裕でデータ量を持て余すぐらいだと思っている。<br>やがてこのブログが発展してデータ量が莫大になりパフォーマンスの低下の可能性を踏まえると最初から分割取得にしておき、少しでも現状以上のパフォーマンス低下を防ぎたいと考えている。<br>何度も言うが、もちろん現在の規模ではパフォーマンスがむしろ低下していることはわかるが長期的な目線で見れば分割取得の方へ変更すると思うので論理的に考えるなら現状のままでいいと思っている。</p><h2 id="h8d78e14043">感想</h2><p>取得時のメモリ使用量がパフォーマンスの低下につながるようだったら自動で分割取得に切り替えるみたいなことができればいいのだが、取得自体のタイミングを考えると絶対に無理。<br>現在は今後の発展も踏まえて分割取得を選択してページ数なども増やしてしまっているが、開発のフェーズに応じてまた見直す機会を作ることができればと思う。</p>

<h1 id="hc9b2f9a0db">Bulk acquisition or split acquisition?</h1><p>This has been a subject that I have been struggling with quite a bit recently as I have been revamping my blog.<br>Currently, I am taking a split acquisition, but upon reexamining and thinking about it in my own way, I am beginning to think that it is quite possible to take a lump-sum acquisition.<br>I will explain the reasons for this in a separate blog entry.<br>*Again, these are findings from personal experience. Please advise me of any errors or references. 🙇‍♂️</p><h2 id="hbc3c79d237">Batch acquisition</h2><h3 id="h56314cc279">Advantages</h3><ol><li>Acquired data can be processed at once, reducing the hassle of data processing in the process.</li><li>Since the processed data can be easily changed, it is very easy to write code in terms of how the data can be modified depending on the drop location.</li><li>Naturally, the number of data acquisitions is relatively smaller than in the case of splitting, which leads to a reduction in the load on the network and API server.</li><li>When considered only from the standpoint of data acquisition, if the acquisition was offline, all data can be acquired at once, which has a significant impact on the breadth of access. (Downloading a ZIP folder of files might be a good example)</li></ol><h3 id="h323d3f9d4d">Disadvantages</h3><ol><li>Depending on the amount of data to be retrieved, it may lead to a significant increase in load on the network or API server, resulting in longer processing times.</li><li>The increase in the amount of memory used may also affect the overall system performance. This can be a significant memory increase when considered from a long-term perspective.</li><li>If the requirement is to perform frequent data updates, the data may not be up-to-date at the time of acquisition.</li></ol><h2 id="h96f55236dc">Split acquisition</h2><h3 id="h56314cc279">Advantages</h3><ol><li>Since data is not acquired all at once, it does not matter how large the data acquisition is, the data is divided into segments, thus memory consumption can be reduced.</li><li>The latest data can be acquired even if the data is frequently updated, which is also a matter of course.</li><li>It is possible to consider that the network and API server will not be overloaded, and as a result, the overall system performance will be less affected.</li><li>Superior scalability, as the API server will no longer require resources, memory, etc. to process large amounts of data at a time.</li></ol><h3 id="h323d3f9d4d">Disadvantages</h3><ol><li>Processing time may increase due to the need to send multiple requests depending on data volume</li><li>Data processing and acquisition tends to be complex</li><li>May not be able to acquire accurate data due to differences during split acquisition. (although this is likely to happen infrequently)</li></ol><h2 id="hfee32a1c2b">where to use</h2><p>Batch acquisition .... Suitable when data updates are few and the data volume is not huge. Conversely, if the conditions do not apply, it may lead to significant performance degradation in terms of acquired data and overall system load.<br>Split acquisition .... Frequent data updates and data volume is irrelevant. However, it tends to be over-specified and unnecessarily degrades performance.<br>In the end, it depends largely on the scalability of the project.<br>If you know the approximate amount of data you need to acquire, batch acquisition may be superior, but if you want to acquire a large amount of data by limiting it, it is safer to acquire the data by splitting it.</p><pre><code>// default value . .10 - use limit parameter if available, otherwise default value
------------------------------
// Number of data to retrieve ... 10
GET /api/data?limit=10 ... OK
GET /api/hoge ... because the default value is 10 - OK
GET /api/hoge?limit=100 ... I wasting my time processing 90 cases when I only need 10.
------------------------------
// Number of data to retrieve ... 100
GET /api/data?limit=10 ... Split acquisition because only 10 of 100 are available.
GET /api/hoge ... Same reason as above
GET /api/hoge?limit=100 ... OK</code></pre><h2 id="h032311b394">Reasons for hesitation</h2><p>Bulk acquisition can be a very powerful weapon if the conditions for its use are met, and I think it is the perfect method for small-scale, infrequently updated requirements such as the blog I am developing.<br>In addition, changing to batch retrieval has various advantages, such as the fact that all related data can be retrieved at the time of retrieving data on the first root page of all pages, so a list page is not necessary, and the total number of current objects can be calculated, as well as the fact that it is simply very easy to develop from a code and logical point of view. There is no doubt that it will be very easy to develop.<br>Knowing this, the current development is based on the split acquisition using offset and limit.<br>Of course, there are some disadvantages compared to batch acquisition, such as the fact that the number of times data is acquired increases, a list page must be created, and data from related tables cannot be acquired in a batch. However, considering the future scalability, we believe that the amount of data is more than enough even with batch data acquisition at the current scale.<br>However, considering the future scalability of this blog, I think that even with batch data acquisition, there is more than enough data to handle the current scale of data.<br>As I have said many times before, of course I understand that the performance is rather low at the current scale, but from a long-term perspective, I think I will change to the split-acquisition method, so logically speaking, I think it is fine as it is now.</p><h2 id="h458e0d0ba6">Impressions</h2><p>It would be nice if it were possible to automatically switch to split acquisition if the amount of memory used during acquisition leads to performance degradation, but this is absolutely impossible considering the timing of acquisition itself.<br>Currently, we have chosen to use split acquisition and have increased the number of pages in consideration of future development, but we hope to have another opportunity to review it depending on the phase of development. Translated with www.DeepL.com/Translator (free version)</p>

Sota Tech Blog.

Astroを使ってみる - 環境設定編

コメント機能のためのSupabaseとレンダリング方法

無事に目標点数に達成しました！

データ取得について考えてみる

カテゴリー