<h1 id="h403db39dd4">パフォーマンス向上が主な目的</h1><p>新しい環境にまだなれず、改修に少し時間がかかってしまった🔥<br>今までの個人サイトは静的ページになっているにも関わらずパフォーマンスが効率的ではなかったためこの度Next.jsから乗り越えた。</p><h2 id="h9e2347a657">個人サイト</h2><p><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">こちら</a>から見れます！</p><h2 id="hc69c85bcf9">背景</h2><h3 id="hda2b9457a6">静的ページだけですむ</h3><p>Next.jsは様々なレンダリング方法があるため無難な選択になりうるが、Astroのような不要なJavascriptを削除してくれるようなものはない。主に前までのパフォーマンスの低下は不要な部分が大きく反映されていることが原因になりつつあったのでそこの部分を修正することが必要だと思っていた。</p><h3 id="hfcc9cfe63d">シンプルに他のフレームワークでもコード書きたい</h3><p>最近ずっとNext.jsしか使っていなかったため、新しいフレームワークを利用してみたくなった背景がある。<br>そこの部分からTypescriptを使用することができる他のフレームワークを模索しつつ、パフォーマンスの改善にも役立ちそうなのがAstroということもあり前回までで興味本位で触っていたためこの度個人ページでも利用することにした。</p><h2 id="ha31bd80de1">要件</h2><h3 id="hb5f92ffea0">よりシンプルに</h3><p>前までの部分はかなりいらない項目なども多数あり、確かに機能という面ではよかったが、その分必要ないこともたくさんあったなと考えている。<br>そこの改善からダークモードはOSに依存させて実装し、このブログのように自分で変更することはあまりないのかなとユーザー目線で考えてみるとそう思った。</p><h3 id="hb07ec5987e">ハイパフォーマンス</h3><p>これに尽きる。<br>ただの静的ジェネレータとして個人ページは機能してくれればいいので無駄な機能はある意味いらないなと思った。<br>今までは確実なものを利用していたが、個人的に新しいものを試してみたくなった背景がある。</p><h2 id="hb6509f48bf">結果</h2><h3 id="h054fab72d6">モバイル</h3><p>変更前<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/37589e4efbd64dcdba0a050ddfad9b67/%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-04-06%2021.21.05.webp" alt=""><br>変更後<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9599107d2d604bfd8c56a7982b50baec/%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-04-06%2021.20.17.webp" alt=""></p><h3 id="h7c5031374b">パソコン</h3><p>変更前<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/afcf30ac37044a0cac6094a339292b06/%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-04-06%2021.20.49.webp" alt=""><br>変更後<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/31752167b9b748e7995787f579fa926e/%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-04-06%2021.19.56.webp" alt=""><br>個人的にはかなり満足だと思う。<br>画像周りは改善の余地があるがここの部分はしっかりと強調したいプライドがあるのでこのまま👤</p><h2 id="h3bcda3e6b0">最後に</h2><p>何度も話しているが、自分の目指しているものはプロダクトを成長させることができるエンジニアだ。<br>そのために少しでもパフォーマンスが良くなるのならば勉強する価値はあると思っている。<br>最近フロントエンドの記事ばかり書いているので少しずつバックエンドも書いていきたい</p>

<h1 id="h982746be86">Performance improvement is the main goal</h1><p>I am still getting used to the new environment and the modifications have taken a bit of time.🔥<br>The performance of my previous personal website was not efficient despite the fact that it was a static page, so I have now overcome this issue from Next.js.</p><h2 id="h5b54dd3286">Personal Site</h2><p>You can see it <a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">here!</a></p><h2 id="h8c1a16f7ea">Background</h2><h3 id="hf465372398">Static pages are all that's needed</h3><p>Next.js could be a safe choice because of the various rendering methods, but there is nothing like Astro that removes unnecessary Javascript. I thought it was necessary to fix that part of the code, mainly because the previous performance degradation was becoming largely a reflection of the unnecessary parts.</p><h3 id="h8cf0f1cb56">I want to simply write code in other frameworks.</h3><p>I have been using only Next.js for a long time recently, so I wanted to try a new framework.<br>I was curious about Astro and decided to use it for my personal page.</p><h2 id="he118b7a776">Requirements</h2><h3 id="h48d4455dee">Simpler</h3><p>The previous version had many items that were not needed, and although it was good in terms of functionality, there were many things that were not needed.<br>From the user's point of view, I thought that the dark mode should be implemented by depending on the OS, and that there is not much that can be changed by the user, as in this blog.</p><h3 id="h7791140879">High Performance</h3><p>It comes down to this.<br>I thought I don't need useless functions in a sense because I just want my personal page to function as a static generator.<br>I had been using a reliable one, but I had a background of wanting to try something new for personal use.</p><h2 id="he66d18a133">Result</h2><h3 id="h7d54717b53">Mobile</h3><p>Before change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/37589e4efbd64dcdba0a050ddfad9b67/%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-04-06%2021.21.05.webp" alt=""><br>After change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9599107d2d604bfd8c56a7982b50baec/%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-04-06%2021.20.17.webp" alt=""></p><h3 id="h86670169d0">PC</h3><p>Before change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/afcf30ac37044a0cac6094a339292b06/%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-04-06%2021.20.49.webp" alt=""><br>After change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/31752167b9b748e7995787f579fa926e/%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-04-06%2021.19.56.webp" alt=""><br>Personally, I think I am quite satisfied.<br>There is room for improvement around the image, but I have a lot of pride in this area that I want to emphasize well. so I'll keep it as is.👤</p><h2 id="h52c5acc8db">Finally.</h2><p>As I have said many times, my goal is to be an engineer who can grow the product.<br>If I can improve performance even a little for that purpose, I think it is worth studying.<br>I've been writing only front-end articles lately, so I'd like to write back-end articles little by little.</p>

ようやく時間が取れた

astroで個人サイトを改修した

Personal website renovated with astro.

<h1 id="hd68729b043">色々学べた4年間</h1><p>先日大学を卒業した🎓<br>その後の数日間は体調を崩してしまったので寝込んだ日々が続いて辛かった。<br>改めて振り返ってみるとほんとにたくさんあった四年間だと思っている。</p><h2 id="h3bdc5e7525">総評</h2><p>辛いことはたくさんあり、初めての環境や挑戦の毎日であったがその分成長できたしほんとにいい経験ができたと今では思っている。</p><h3 id="h21d9b1010a">1年生</h3><p>プログラミングを始めた。唯一大学に登校できた時期だったのでサッカーとかしてた。</p><h3 id="h90a4bcaf08">2年生</h3><p>バックエンドのインターンと個人でのフロントエンド開発が中心だった。</p><h3 id="h84ef37775a">3年生</h3><p>就職活動とインターンで新サービス開発の毎日。</p><h3 id="h72013d015e">4年生</h3><p>TOEIC漬けの日々。</p><h2 id="hc7c993c65a">これから</h2><p>ChatGPTなどが出てきてデータベース設計などで触ったことがあるが設計ができる上に対話することができるというプロンプトエンジニアリングなどという言葉が最近出てきていると聞いて、これからエンジニアのツールとして新たに大きく進化していくと思う。<br>その中でこれからどうなっていくかどうかはわからないが、今できることを精一杯取り組んでやりたいことを後悔しないように取り組んでいきたい🔥<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/92163a20cc764dfeb0fd63befca82faf/IMG_1624.webp" alt=""></p>

<h1 id="hd363ffadd1">Four years of learning a lot</h1><p>I recently graduated from college. 🎓<br>The next few days were hard because I got sick and spent a lot of time in bed.<br>Looking back on it again, I think it was really a lot of four years.</p><h2 id="h87beb01661">General comments</h2><p>There were a lot of hardships, new environments, and challenges every day, but I believe now that I was able to grow because of it and that it was a really good experience for me.</p><h3 id="h65ac2600e6">First year student</h3><p>I started programming. It was the only time I could go to school, so I played soccer.</p><h3 id="hb83b92c216">Sophomore year</h3><p>Focused on back-end internships and individual front-end development.</p><h3 id="h06d7d36f49">Junior year</h3><p>I spent my days job hunting and developing new services as an intern.</p><h3 id="h0083a80153">Senior year</h3><p>Spent my days immersed in TOEIC.</p><h2 id="hd7ebabd47c">From now on</h2><p>I have heard that words such as "prompt engineering," which means that you can design and interact with the system, have recently emerged, and I think it will evolve greatly as a new tool for engineers.<br>I am not sure what will happen in the future, but I want to do what I can do now to the best of my ability so that I will not regret what I want to do. 🔥<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/92163a20cc764dfeb0fd63befca82faf/IMG_1624.webp" alt=""></p>

色々あったけど楽しい四年間だった

大学を卒業しました！

I graduated from college!

<h1 id="hae9d5bc103">少しずつAstroを知っていく</h1><h3 id="h94d1ee905a">ナビゲーションを共通化のためのコンポーネントを作成</h3><p>aboutページで作成していたヘッダー部分をコンポーネント化する<br>componentsフォルダを作成してNavigation.astroを作る<br>書き方がしっかりとコードフェンスに慣れていればめちゃ描きやすい！</p><h4 id="hbea8922093">src/components/Navigation.astro</h4><pre><code>---
---
&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;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>import Navigation from '../components/Navigation.astro';
---
&lt;Navigation /&gt;</code></pre><p>と記述するだけで簡単に利用することができるようになる。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d793565c5d10430096e867db7979c41d/%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-29%2017.22.54.webp" alt=""></p><h2 id="h1ef52cac59">フッターを作っていく</h2><h4 id="h4b111c0bbe">components/Footer.astro</h4><pre><code>---
const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
&lt;footer&gt;
  &lt;p&gt;
    My creation Project by: &lt;a
      href={`"https://www.${platform}.com/${username}/${projectName}"`}
      &gt;{projectName}&lt;/a&gt;
  &lt;/p&gt;
&lt;/footer&gt;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>import Footer from '../components/Footer.astro';
---
&lt;Footer /&gt;</code></pre><h3 id="hd92f14f50f">Propsを加える</h3><p>これもcomponents同様にすごく簡単に実装することができる。<br>ソーシャルメディアの部分をpropsのあるコンポーネントとして利用する</p><h4 id="h2ffc5a47a0">components/Social.astro</h4><pre><code>---
interface SocialProps {
  [key: string]: string;
}
const { platform, link }: SocialProps = Astro.props;
---
&lt;a href={`${link}`}&gt;{platform}&lt;/a&gt;</code></pre><p>全体像だとこんな感じ。<br>全てpropsで統一していないけど参考として記述しておく</p><h4 id="h4b111c0bbe">components/Footer.astro</h4><pre><code>---
import Social from './Social.astro';


const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
&lt;footer&gt;
  &lt;p&gt;
    My creation Project by: &lt;a
      href={`"https://www.${platform}.com/${username}/${projectName}"`}
      &gt;{projectName}&lt;/a
    &gt;
  &lt;/p&gt;
  &lt;Social platform="instagram" link="https://www.instagram.com/" /&gt;
&lt;/footer&gt;</code></pre><h2 id="h7deb7398ee">レイアウト編</h2><h3 id="h7f7c32b920">ベース部分の作成をする</h3><p>layoutsファイルを作成<br>slot ... ここの部分を記述することでBaseLayout内のelementを反映することができるようになっている</p><h4 id="hc4289c9737">src/layouts/BaseLayout.astro</h4><pre><code>---
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = 'Home Page';
---
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/favicon.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;
    &lt;meta name="generator" content={Astro.generator} /&gt;
    &lt;title&gt;{pageTitle}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;{pageTitle}&lt;/h1&gt;
    &lt;slot /&gt;
    &lt;Footer /&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>---
import BaseLayout from '../Layouts/BaseLayout.astro';
const pageTitle = 'Home Page';
---
&lt;BaseLayout&gt;
  &lt;h2&gt;My awesome blog subtitle&lt;/h2&gt;
&lt;/BaseLayout&gt;</code></pre><h2 id="h3b50093360">これ以降の部分について</h2><p>個人的にこれ以上キャッチアップすることは現段階ではないということを判断することができたのでやりません。<br>現在、かなり忙しい状態でありあまり時間もないため、とりあえず今後のastroの再会めどは立っていない状況です。<br>また時間ができた時に残りのAPIの取得部分やデザイン周りにも注力していきたいと思っていますがここまででastroの大まかの雰囲気は掴めたと思います。<br>このプロジェクト自体はドキュメントと少し違いtypescript中心に開発していきましたが、今後さらにしっかり記述していきたいです。<br>また、今回のプロジェクトを通してかいつまんで機能を実装したりコードを記述しなければ後からしんどくなるということを学んだので今後はしっかりと重要な部分をみき分けて記述していきます。<br>このような形になって申し訳ありませんが、今後この記事の更新やプロジェクトの続編などもあるかもしれないので注目してもらえると嬉しいです。<br>ご迷惑をおかけします🙇‍♂️</p>

<h1 id="h8e3ae66b5a">Getting to know Astro a little bit.</h1><h2 id="h73798389b3">Creating a component for common navigation</h2><p>Create a component from the header created on the about page.<br>Create components folder and make Navigation.astro<br>It is very easy to draw if you are familiar with the code fence!</p><h4 id="hbea8922093">src/components/Navigation.astro</h4><pre><code>---
---
&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;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>import Navigation from '../components/Navigation.astro';
---
&lt;Navigation /&gt;</code></pre><p>It can be easily used by simply writing<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d793565c5d10430096e867db7979c41d/%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-29%2017.22.54.webp" alt=""></p><h2 id="h1afcbf0582">Creating a footer</h2><h4 id="h4b111c0bbe">components/Footer.astro</h4><pre><code>---
const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
&lt;footer&gt;
  &lt;p&gt;
    My creation Project by: &lt;a
      href={`"https://www.${platform}.com/${username}/${projectName}"`}
      &gt;{projectName}&lt;/a&gt;
  &lt;/p&gt;
&lt;/footer&gt;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>import Footer from '../components/Footer.astro';
---
&lt;Footer /&gt;</code></pre><h3 id="hb093d67e04">Adding Props</h3><p>This can be implemented very easily as well as components.<br>Use the social media part as a component with props.</p><h4 id="h2ffc5a47a0">components/Social.astro</h4><pre><code>---
interface SocialProps {
  [key: string]: string;
}
const { platform, link }: SocialProps = Astro.props;
---
&lt;a href={`${link}`}&gt;{platform}&lt;/a&gt;</code></pre><p>The overall picture looks like this.<br>I'm not consistent with all props, but I'll describe it as a reference.</p><h4 id="h4b111c0bbe">components/Footer.astro</h4><pre><code>---
import Social from './Social.astro';


const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
&lt;footer&gt;
  &lt;p&gt;
    My creation Project by: &lt;a
      href={`"https://www.${platform}.com/${username}/${projectName}"`}
      &gt;{projectName}&lt;/a
    &gt;
  &lt;/p&gt;
  &lt;Social platform="instagram" link="https://www.instagram.com/" /&gt;
&lt;/footer&gt;</code></pre><h2 id="h236c408b74">Layout section</h2><h3 id="hc9ff862184">Creating the base section</h3><p>Create a layouts file<br>slot ... The elements in the BaseLayout can be reflected by describing this part.</p><h4 id="hc4289c9737">src/layouts/BaseLayout.astro</h4><pre><code>---
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = 'Home Page';
---
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/favicon.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;
    &lt;meta name="generator" content={Astro.generator} /&gt;
    &lt;title&gt;{pageTitle}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;{pageTitle}&lt;/h1&gt;
    &lt;slot /&gt;
    &lt;Footer /&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4 id="h979973d711">pages/index.astro</h4><pre><code>---
import BaseLayout from '../Layouts/BaseLayout.astro';
const pageTitle = 'Home Page';
---
&lt;BaseLayout&gt;
  &lt;h2&gt;My awesome blog subtitle&lt;/h2&gt;
&lt;/BaseLayout&gt;</code></pre><h2 id="h57b23bcfbe">Regarding the part after this.</h2><p>I have personally decided that there is nothing more to catch up on at this stage, so I will not be doing so.<br>I am currently quite busy and do not have much time, so I do not have a plan to meet again with astro in the future.<br>When I have more time, I would like to focus on the rest of the API acquisition and design work, but I think I have gotten a rough idea of what astro is about.<br>This project itself is a little different from the documentation, and I developed it mainly in typescript, but I would like to write it more thoroughly in the future.<br>Also, through this project, I learned that if I don't summarize the implementation of functions and code, it will be difficult later on, so I will make sure to identify and describe the important parts in the future.<br>I apologize for the way things turned out, but I hope you will keep an eye out for updates to this article and possibly a sequel to the project in the future.<br>We apologize for any inconvenience. 🙇‍♂️</p>

コンポーネント作成編からスタート

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

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

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

Sota Tech Blog.

astroで個人サイトを改修した

大学を卒業しました！

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

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

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