<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="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>

結局はスケーラビリティによる

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

Consider data acquisition

<h1 id="h104724ab2d">Day6</h1><p>本日も記事を見てくださりありがとうございます！<br>最近桜がきれいに咲いているだけあって季節が春になったとしみじみ感じますね🌸<br>自分の家の近くでも今朝桜が満開になっていてとてもきれいだなと感じました。<br>一年中咲いているというわけではないと思うので今の季節を楽しみたいです。<br>人生一度きりですから。<br><a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html" target="_blank" rel="noopener noreferrer">参考サイトはこちらから。</a></p><h2 id="h9543da437c">React Ver18</h2><p>さて、ここからが本日の本題になると思います。<br>Reactの公式ブログに記事が投稿されているのですが(2022年4月6日　現在)やはり英語版だけになっています。<br><strong>こういう時に英語ができると最新のトレンドを逐一キャッチアップできると思うのでやはり英語できると恩恵すごいです。。。</strong><br><strong>※</strong><u>この記事に関して自分の英語への未熟度合いの影響もあり間違った内容になっているかもしれません。もし何か問題がありそうでしたら教えていただけると幸いです。</u></p><h3 id="h875035df4a">インストールについて</h3><p>以下のコマンドでできるそうです！<br>どうやらインストール時に<span style="color:#cf3e51">@rc</span>タグが必要そうです！</p><pre><code>npm $ npm install react@rc react-dom@rc
or
yarn $ yarn add react@rc react-dom@rc</code></pre><h3 id="ha7d0adb2c5">APIの刷新(クライアント側)</h3><p>大前提としてReactDOM.renderがサポートされが終了しました。<br>その代わりに新しく<strong>createRoot</strong>というAPIが提供されるようになりました！！<br>その関係で他のAPIでも影響を与えている部分があり、</p><pre><code>// Before
unmountComponentAtNode(container);

// After
root.unmount();</code></pre><p>のように変更になりました。</p><h5 id="hea965824bf">UnmountComponentAtNode</h5><blockquote><span style="color:#000000">DOM からマウントされた React コンポーネントを削除し、イベントハンドラや state をクリーンアップします。コンテナにコンポーネントがマウントされていない場合、このメソッドを呼び出しても何も行いません。コンポーネントがアンマウントされた場合は&nbsp;</span><code>true</code><span style="color:#000000">&nbsp;を返し、アンマウントすべきコンポーネントが存在しなかった場合は&nbsp;</span><code>false</code><span style="color:#000000">&nbsp;を返します。</span></blockquote><p>次にSuspenseが使用されるにあたり、renderのコールバックを削除されるようになります。<br><a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">詳しくはこちらから！</a></p><pre><code>// Before
const container = document.getElementById('app');
ReactDOM.render(&lt;App tab="home" /&gt;, container, () =&gt; {
  console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
  useEffect(() =&gt; {
    console.log('rendered');
  });

  return &lt;App tab="home" /&gt;
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(&lt;AppWithCallbackAfterRender /&gt;);</code></pre><p>最後に、もし現在のアプリが、&nbsp;hydration でサーバーサイドレンダリングを使用する場合、hydrate を hydrateRoot にアップグレードしてください。<br><a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">詳しくはこちらから！</a></p><pre><code>// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(&lt;App tab="home" /&gt;, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, &lt;App tab="home" /&gt;);
// Unlike with createRoot, you don't need a separate root.render() call here.</code></pre><h3 id="ha28e4c57d8">APIの刷新(サーバー側)</h3><p><a href="https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream" target="_blank" rel="noopener noreferrer">詳しくはこちらからAPI部分に飛べます！</a><br>サーバー側ではrenderDOM/server APIが新しくなり、<strong>Suspension on the server</strong>と<strong>Streaming SSR</strong>を完全サポートされるようになりました😍<br>そして、renderToNodeStreamが非推奨となっております。</p><ul><li><a href="https://github.com/reactwg/react-18/discussions/37" target="_blank" rel="noopener noreferrer">renderToPipeableStream</a></li><li>r<a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" target="_blank" rel="noopener noreferrer">enderToReadableStream</a></li></ul><p>また、<strong style="color:#1a1a1a">renderToString</strong><span style="color:#1a1a1a">と</span><strong style="color:#1a1a1a">renderToStaticMarkup</strong><span style="color:#1a1a1a">に関しては制限があります！（詳しくはドキュメントに記載があります）</span></p><h2 id="h453dbb8b1f">Automatic Batching</h2><p>これが自分の中で一番注目してる変更になります。（あまり知らないからそう言える）<br>この機能について、<br><strong>今までより多くのバッチ処理を行うことでReactが複数のステートの更新を１回の再レンダリングにまとめ、パフォーマンスを向上させるといった機能</strong>になります。<br>今までは、Reactのイベントハンドラー内のバッチ処理をするだけで、Promiseやその他のイベントの内部の更新はデフォルトだとされない仕様になっていました。</p><pre><code>// React 18以前はReactのイベントのみがバッチ処理されていました。

function handleClick() {
  setCount(c =&gt; c + 1);
  setFlag(f =&gt; !f);
  //　最後に一度だけ再レンダリングする
}

setTimeout(() =&gt; {
  setCount(c =&gt; c + 1);
  setFlag(f =&gt; !f);
  // 状態の更新ごとに 2 回レンダリングする
}, 1000);</code></pre><p>のようになっていました。<br>18からはcreateRootから全ての更新はどこからきたかに関係なく自動的にバッチ処理が走るようになっています！<br>なお、自動バッチ処理を行わないようにするには、<strong>flushSync</strong>を使用すれば大丈夫です◎<br><a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="noopener noreferrer">詳しくはこちら！</a></p><h2 id="h8d78e14043">感想</h2><p><u>※今回ご紹介したのは、ほんの一部です。もっと知りたい方は、公式ドキュメントをお読みください🌀。</u><br>私自身、もともと英語学習の一環としてやっていたのですが、いざ翻訳するとなると、うまくできなかったり、迷ったりすることがありました。<br>また、エンジニアとして成長しても、今はいろいろと便利な翻訳サービスがあっても、英語から他の言語に翻訳するのは難しいと感じています。<br>世界中の人とつながることができるという点では、英語に勝るものはありませんし、世界には英語のサイトが相当数あると思います。<br>この考えをモチベーションに、これからも頑張っていきたいと思っています。<br>また、いつかカンファレンスで発表されたブログを読めるような人間になりたいと思います。<br>そして、いろいろな人の意見を受け入れて、面白いサービスにしていきたいと思います。</p><h3 id="hb8c2aee1f1">英語版ログ</h3><p><strong>プログラミングに使われるような英語は変な意味っていうあるある♪</strong><br>seems -&gt; <strong>(…と)見える</strong>,見える,思われる,らしい,(…が)ありそうに思える<br>looks like -&gt; <strong>…のように見える</strong>,…に似ている,look likeの三人称単数現在<br>lately -&gt; <strong>最近</strong>,近ごろ<br>guess -&gt; <strong>(当て推量で)(…を)言い当てる</strong>,解き当てる,(十分知らないで, また十分考えないで)推測する,(…を)推測する<br>brings -&gt; <strong>(ある場所へ)持ってくる</strong>,連れてくる,bringの三人称単数現在<br>Apparently -&gt; <strong>(実際はともかく)見たところでは(…らしい)</strong>,どうも,明白に<br>We've -&gt; we have の短縮形<br>affected -&gt; <strong>影響を受けた</strong>,(病気などに)冒された,(好悪などの)感情を抱いて,気取った,きざな<br>premise -&gt; <strong style="color:#19283c">(推理を行なう時の結論の基礎となる)前提</strong><span style="color:#19283c">,根拠,前提,(土地・付属物付きの)家屋</span><br>hydrate -&gt; <strong>水和物</strong>,水化物,(…を)水和させる,水酸化させる,水和する,水酸化する<br>Suspense -&gt; <strong style="color:#19283c">(精神的に)宙ぶらりんの状態</strong><span style="color:#19283c">,あやふや,どっちつかず,不安,気がかり</span><br>restrictions -&gt; <strong>制限</strong>,限定,制約,restrictionの複数形<br>regarding -&gt; <strong>…に関して(は)</strong>,…の点では<br><span style="background-color:#ffffff">combine -&gt; </span><a style="color:#534a42" href="https://ejje.weblio.jp/content/combine" target="_blank" rel="noopener noreferrer">combine</a><strong>(…を)結合する</strong>,合併させる,連合する,結びつける,合同させる<br>internals -&gt; <strong>内部詳細</strong><br>even -&gt; <strong style="color:#19283c;background-color:#ffffff">…でさえ(も)</strong><span style="color:#19283c">,…すら,(それどころか)いやまったく,いっそう,なお</span><br>convenient -&gt; <strong>手ごろな</strong>,手近で,近くて,都合がよくて,重宝で<br>significant -&gt; <strong style="color:#19283c">重要な</strong><span style="color:#19283c">,意義深い,意味ありげな,意味深長な</span><br>amount of -&gt; <strong>総計</strong>,総額,要旨,意義<br><br></p>

<h1 id="h104724ab2d">Day6</h1><p>Thanks for taking a look at my post today!<br>The cherry blossoms have been blooming beautifully lately, and I feel that the season has turned into spring.🌸<br>Even near my own house, the cherry blossoms were in full bloom this morning and I found it very beautiful.<br>I want to enjoy season because I don't think they are in bloom all year round.<br>You only live once.<br><a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html" target="_blank" rel="noopener noreferrer">Click here to visit the reference site</a></p><h2 id="h9543da437c">React Ver18</h2><p>Well, I guess this brings us to the main topic of today's discussion.<br>There is an article posted on the official React blog(as of April 6, 2022), but it is still only in English.<br><strong>I think it's a great benefit to be able to speak English so that you can keep up with the latest trends...</strong><br><strong>※</strong><strong><u> </u></strong><u>I am not sure if my inexperience with the English language is the reason for the error in this article. I would appreciate it if you could let me know if there are any problems.</u></p><h3 id="h5a197ad93a">About Installation</h3><p>They say the following command will do it!<br>Apparently you need the <span style="color:#cf3e51">@rc</span> tag when you install!</p><pre><code>npm $ npm install react@rc react-dom@rc
or
yarn $ yarn add react@rc react-dom@rc</code></pre><h3 id="h9fb6563d4c">API renewal (client side)</h3><p>The basic premise is that ReactDOM.render is no longer supported.<br>Instead, a new API called <strong>createRoot</strong> is provided!<br>Because of this, there are some other APIs that are also affected.</p><pre><code>// Before
unmountComponentAtNode(container);

// After
root.unmount();</code></pre><p>The change was made as shown in the following table.</p><h5 id="hea965824bf">UnmountComponentAtNode</h5><blockquote>Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns&nbsp;<code>true</code>&nbsp;if a component was unmounted and&nbsp;<code>false</code>&nbsp;if there was no component to unmount.</blockquote><p>The next time Suspense is used, the render callback is removed.<br><a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">For more information, click here!</a></p><pre><code>// Before
const container = document.getElementById('app');
ReactDOM.render(&lt;App tab="home" /&gt;, container, () =&gt; {
  console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
  useEffect(() =&gt; {
    console.log('rendered');
  });

  return &lt;App tab="home" /&gt;
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(&lt;AppWithCallbackAfterRender /&gt;);</code></pre><p>Finally, if your current app uses server-side rendering in hydration, upgrade hydrate to hydrateRoot.<br><a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">For more information, click here!</a></p><pre><code>// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(&lt;App tab="home" /&gt;, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, &lt;App tab="home" /&gt;);
// Unlike with createRoot, you don't need a separate root.render() call here.</code></pre><h3 id="h57ca736b30">API renewal (server side)</h3><p><a href="https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream" target="_blank" rel="noopener noreferrer">You can jump to the API section here for more details!</a><br>On the server side, the renderDOM/server API has been updated to fully support <strong>Suspension on the server</strong> and <strong>Streaming SSR</strong>.😍<br>And renderToNodeStream has been deprecated.</p><ul><li><a href="https://github.com/reactwg/react-18/discussions/37" target="_blank" rel="noopener noreferrer">renderToPipeableStream</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" target="_blank" rel="noopener noreferrer">renderToReadableStream</a></li></ul><p>Also, there are restrictions regarding <strong>renderToString</strong> and <strong>renderToStaticMarkup</strong>! (More details can be found in the documentation)</p><h2 id="h453dbb8b1f">Automatic Batching</h2><p>This will be the change I am most interested in. (I can say that because I don't know much about it)<br>As for this feature.<br>This will be a feature <strong>that will allow React to combine multiple state updates into a single re-rendering by doing more batch processing than before, thus improving performance.</strong><br>Up until now, React has only done batch processing in its event handlers, and by default does not update Promise or other event internals.</p><pre><code>// Before React 18 only React events were batched

function handleClick() {
  setCount(c =&gt; c + 1);
  setFlag(f =&gt; !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() =&gt; {
  setCount(c =&gt; c + 1);
  setFlag(f =&gt; !f);
  // React will render twice, once for each state update (no batching)
}, 1000);</code></pre><p>was like the following.<br>Starting with 18, all updates from createRoot will automatically run in batches, regardless of where they came from!<br>To prevent automatic batch processing, just use <strong>flushSync.</strong><br><a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="noopener noreferrer">For more information, click here!</a></p><h2 id="h458e0d0ba6">Impressions</h2><p><u>※This is only a small part of what we have covered. If you would like to know more, please read the official documentation.🌀</u><br>I myself originally did this as part of my English learning, but when it came time to translate, I found myself unable to do it well or feeling lost.<br>Also, even as I grow as an engineer, even with the various convenient translation services available nowadays, I still find it difficult to translate from English to other languages.<br>In terms of being able to connect with people around the world, nothing beats English, and I believe that there are a significant amount of sites in the world that are in English.<br>I will continue to work hard with this idea as motivation.<br>I also hope to one day become someone who can read blogs released at conferences.<br>And I will accept various people's opinions and make the service interesting.</p>

おはようございます！⛅
本日はいつも一日の終わりに書いているのですが本日は厳しそうなので朝に書いています。
昨日の日記通りの朝に起きて少し散歩を朝からしました。
今日のほうが若干曇ってはいますが過ごしやすいよう日になりそうですね！
本日は朝ということでまだ何もやってないので最近気になっていたトレンドについて書こうと思います。

Sota Tech Blog.

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

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

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

勉強がてらにReact ver18への乗り換え翻訳。　Day6

Sota Tech Blog.

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

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

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

勉強がてらにReact ver18への乗り換え翻訳。 Day6

勉強がてらにReact ver18への乗り換え翻訳。　Day6