<h1 id="hfe82c790e9">久しぶりのバックエンド</h1><p>最近、ブログやら個人サイトやらでフロントエンドの部分しか記述していなかった。<br>それと同時にUX部分も大抵のことはフロントエンドのみで対応することが可能だと気づきつつあるのですごいスピードで進化しているのかとまだこの業界を目指して日は浅いが大学でJQueryを記述していたことが懐かしくなり、いろいろ取り巻くものが変わっているのだろうと実感した。<br>元々バックエンドは去年のインターンをしていた際に半年程度記述していたのが最後なので、基礎的なところから勉強することにした</p><h2 id="h25779186e4">主な手順</h2><p>とりあえず、公式ドキュメントを一周することにした。<br>暇な時間に少しずつ進めてGo言語の基礎的な文法や多少や規約などもあらためてキャッチアップし直した。<br>ただ、ポインタの部分だけは以前理解できていたつもりだったが、知っていたつもり状態だったので今回はしっかりと人に説明することができるレベルまで復習を進めている。<br>今までの言語ではこのような概念などはなく、特にメモリなども記述することがなかったのでほぼ2年ぶりにGo言語を書くこともなってかなり忘れているが、しっかりと復習していきたい。<br>その後、簡単なアプリのAPIを作ろうと思っている。</p><h2 id="hfbf2743935">目標</h2><p>正直、これからChatGPTなどのAIツールがどこまで進化していくのかは未知数だが、今できることを最大限やっていこうと思っている。<br>そのためとして、新たにまたサービスを作れればいいかなと思っている。<br>以前のサービスは最後の部分まで作ることができなかったので、今回は再度挑戦することができるようにしていきたい。</p><h3 id="h0b2bb79295">振り返り</h3><p>元々プログラミングを始めた時もバックエンド系の方から入って、学習を進めていたのでさまざまな知見をもう一度復習していこうと思う。自分の場合は特に手を動かしていないと理解できないことも多いのでそこの部分の徹底を図れるようにしていきたい。</p><h2 id="h0378d5c43d">今後の方針</h2><p>ある程度、Go言語を再度学ぶことができたらまたブログでアウトプットできればと思う。<br>特に2年ほど経っていればドキュメント含めさまざまなことろがアップデートされているようになっていると思うのでしっかりと学習を進めていきたい。<br>そして、何か面白いサービス作りたい🐶</p>

<h1 id="hf784980453">It's been a while since I've been on the back end</h1><p>Recently, I have been writing only about the front-end part of my blog and personal website.<br>At the same time, I am realizing that most of the UX part can be handled only by the front end, so it is evolving at a great speed. I realized that many things have changed.<br>I had last written about half a year's worth of back-end code when I was an intern last year, so I decided to start learning from the basics.</p><h2 id="ha8442e8b9c">Main steps</h2><p>For now, I decided to go around the official documentation.<br>I also re-caught up on the basic syntax and some of the conventions of the Go language in my spare time.<br>However, I thought I had understood the pointer part before, but I thought I knew it, so this time I am reviewing it to the level where I can explain it to others.<br>I have forgotten a lot since I haven't written Go language in almost 2 years, but I want to review it well.<br>After that, I am planning to create an API for a simple application.</p><h2 id="hd04948bf41">Goals</h2><p>To be honest, it is unknown how far AI tools such as ChatGPT will evolve in the future, but I am going to do the best I can now.<br>For this purpose, I hope to be able to create a new service again.<br>Since I was not able to create the last part of the previous service, I would like to be able to take up the challenge again this time.</p><h3 id="hfb055c88ba">Looking back</h3><p>When I originally started programming, I started from the backend system and proceeded to learn, so I would like to review my various knowledge again. In my case, there are many things that I cannot understand unless I am working with my hands, so I want to make sure that I am thorough in this area.</p><h2 id="h38f849a851">Future plans</h2><p>I would like to output on my blog again when I have learned Go language again to some extent.<br>Especially after 2 years, I would like to learn more about the Go language because I think that many things, including the documentation, have been updated.<br>And I want to create some interesting services.🐶</p>

桜がもう見れない

Go言語の学習を再開する

Resume learning Go language

<h1 id="hfb0ebcbccf">ようやく時間が取れた</h1><p>最近バタバタしていたこともあり、あまり時間が取れていなかった。<br>しかし今日はある程度まとまった時間が取れたので日本語の対応をした。<br>よく考えればブログは初期値は日本語なのに個人サイトの初期値は英語ってなんかおかしいなと感じた🌊</p><h2 id="h9620872e14">参照先</h2><p><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">こちら</a>から見れます！</p><h2 id="ha7fe869a7b">レンダリングについて考える</h2><p>前日の記事でもこのサイトの方は完全な静的サイトになっているのでNext.jsで作成したような状態管理を利用した言語切り替えが実装できないような仕様になっていることをまず大前提においていた。</p><h3 id="h6cfaa47bdb">ブログ</h3><p>こちらの方ではコメント機能があるため、どうしてもSSGよりの完全な静的サイトにはすることができない。また、SSRするにしても頻繁には変更があるわけではなく、特定の部分が稀に投稿される程度なので頻繁なリクエストは必要ないと考えた結果、こちらのサイトはISRによって対応することができている。<br>また、このブログの個人的な見解として、記事を見てもらいたいこととUXを高めていきたいことを優先的に考えているため、現行のままが個人的には現状においては最高の構成であると考えている</p><h3 id="h9e2347a657">個人サイト</h3><p>一方、個人サイトに関しては定期的に変更することがなく、そのことを考えるとパフォーマンスを最適化することに重きを置いたほうがいいと考えているため現行の構成とAstroを採用したことがベストだと考えている。<br>どちらかということこの記事を書いている人はどのような人だろうという疑問を解決するためのサイトという認識でいるので、できるだけ鮮明に分かりやすくするためにも最適である。<br>最悪、フレームワーク自体がなくて簡易構成でも全然いけると思うと考えている。</p><h2 id="h7b63160553">意外なメリット</h2><h3 id="h04fb6a787d">SEO対策</h3><p>もしかしたら英語版と日本語版の両方でSEO対策ができているのではと思っている。<br>URLを考えても</p><ul><li>日本語版<ul><li><a href="https://dev-sota.com" target="_blank" rel="noopener noreferrer">https://dev-sota.com/</a></li></ul></li><li>英語版<ul><li><a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">https://dev-sota.com/en</a></li></ul></li></ul><p>と分割することができているため、二つの部分から英語版と日本語版の氏名でSEOに対応できているのではないかと思っている<br>Google search consoleの方でも正常に動作しているっぽいのでこれは意外なメリットであると思う。<br>ブログの方ではStateで管理しているので、他のページには遷移しないSPAを採用されているが、これはMPAのかなりのメリット妥当いうことを開発をしながら身をもって体験することができた。<br>また、ドメインで英語版用のものを取ろうということも少し考えたが現状のもので十分に満足しているので問題にないと考えている。</p><h3 id="h1164b2e84b">ブラウザ依存のテーマ</h3><p>これも画面の色が白か黒かという点がブラウザの設定に依存している。<br>ブログの方では意図的に夜だったらナイトモードに自分だったらしたいという点からブラウザ依存せず、任意に変更することができる実装にしたが、個人サイトのような知ってもらう部分では実装が大変なだけではなく状態管理することができるツールもないのでかなりいい選択につながっていたと今になって思う。</p><h2 id="hf0d815c0bb">パフォーマンス</h2><p>これはAstroのさすがという部分になっている英語日本語ともに問題になく、前回の記事で記述させてもらったぐらいのパフォーマンスを提供してくれているので結果的に、問題なく言語対応することが出たと考えている。</p><h2 id="h3bcda3e6b0">最後に</h2><p>急務でサイトの翻訳ページを実装した背景があるので、フィードバックがあればぜひ教えてほしい<br>また機会があればフロントエンドのテストなどの部分は導入していきたいと思っている。<br>特にブログに関しては大きくなるのにつれて対応することができていないのでまとまった時間でさまざまなツールにさらに触れていきたい。<br>また、表現したいものが全て表現することができたサイトにはまだなっていないのでできることがあればさらにわかりやすい自分を理解してもらえるサイトにしていきたい！✨</p>

<h1 id="h877d9a76f4">I finally got some time.</h1><p>Due to the recent busy schedule, I have not been able to spend much time on this project.<br>However, today I was able to find some time to work on the Japanese language site.<br>I felt it strange that the default value of my blog is in Japanese, but the default value of my personal site is in English.</p><h2 id="hbb63dbb25e">References</h2><p>You can see it <a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">here</a>!</p><h2 id="h6065e803b6">Thinking about rendering</h2><p>In the previous day's article, I made the basic premise that this site is a completely static site, so it is not possible to implement language switching using state management like the one created with Next.js.</p><h3 id="ha5344e9c01">Blog</h3><p>Because of the commenting functionality, it is impossible to make this a completely static site rather than a SSG site. Also, even if SSR is used, there are not frequent changes, and specific parts of the site are posted only rarely, so frequent requests are not necessary.<br>In addition, my personal view of this blog is that the current configuration is personally the best configuration in the current situation, since my priority is to get people to see the articles and to enhance the UX</p><h3 id="h5b54dd3286">Personal Site</h3><p>On the other hand, the personal site will not be changed on a regular basis, and considering this, I think it is best to focus on optimizing performance, so I think the current configuration and the use of Astro are the best.<br>Since the site is intended to answer the question of who is writing this article, it is also the best way to make it as clear and easy to understand as possible.<br>Worst of all, we think that a simple structure without the framework itself would work just fine.</p><h2 id="h8625f66fcb">Unexpected Advantages</h2><h3 id="hbfda310d13">SEO measures</h3><p>We think that SEO measures could be taken for both the English and Japanese versions of the site.<br>Considering the URLs</p><ul><li>Japanese version<ul><li><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">https://dev-sota.com/</a></li></ul></li><li>English version<ul><li><a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">https://dev-sota.com/en</a></li></ul></li></ul><p>I think I can handle SEO with the English version and the Japanese version in the name from the two parts because I can divide them into two parts.<br>I think this is a surprising advantage since it seems to work fine on Google search console.<br>Since the blog is managed by State, it uses SPA, which does not move to other pages, and I was able to experience the considerable advantages of MPA while developing the site.<br>I also thought about getting an English version for the domain, but I am satisfied with the current one, so I don't think it will be a problem.</p><h3 id="h1bca541a2f">Browser-dependent theme</h3><p>This also depends on the setting of the browser in terms of whether the screen color is black or white.<br>For my blog, I intentionally chose a theme that can be changed at will without depending on the browser, because I wanted to set it to night mode if it was nighttime, but for a personal site like this, it is not only difficult to implement, but there is no tool to manage the state of the site, so it was a pretty good choice. I think now that it was a good choice.</p><h2 id="h14f31f0925">Performance</h2><p>This is a good thing for Astro, as both English and Japanese have no problems and provide the same level of performance as described in the previous article, and as a result, we believe we were able to support languages without any problems.</p><h2 id="h3d58524ea1">Finally</h2><p>We have the background of implementing the translated pages of the site on short notice, so if you have any feedback, please let us know!<br>I would also like to introduce some areas such as front-end testing if the opportunity arises.<br>In particular, we would like to further touch on various tools in a coherent time frame, as we have not been able to support the blog as it grows in size.<br>Also, I would like to make the site easier to understand myself if I can, since I have not yet been able to express everything I want to express! ✨</p>

これで個人サイトもひと段落

個人サイトの言語対応とレンダリングを考える

Consider language support and rendering for personal sites

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

Sota Tech Blog.

Go言語の学習を再開する

個人サイトの言語対応とレンダリングを考える

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

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

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