<h1 id="h204fe1f81d">新機能続々</h1><p>最近ようやくひと段落した。<br>最近結構忙しい毎日を送っていたのであまり、キャッチアップする時間がなかった。<br>友達にちょろっとApp directoryという単語のみ聞いたのでどんな内容になったのか気になっていたのでちょうどよかった。<br>最近どんどんフロントエンドがすごくなっている。<br>だが、それと同時に今回のNextjsのバージョンもReactの最新版についていけなければ意味がわからない部分が多い。<br>いずれにしてもReactに大きく依存していることを忘れてはいけない。<br>とても使いやすくなりつつあると感じることができるようになっている。</p><h2 id="h3de35099b3">参考</h2><p>ここもogpを実装しようか迷っている....<br><a href="https://nextjs.org/blog/next-13" target="_blank" rel="noopener noreferrer">Next.js version13</a><br><a href="https://beta.nextjs.org/docs/upgrade-guide" target="_blank" rel="noopener noreferrer">Upgrade guide</a></p><h2 id="he6c083c2bc">このブログについて</h2><p>結論としてこのブログについてはしばらくは様子見にしていこうと思う。<br>過去の記事でも挙げているがこのブログはNext.jsのバージョン12によって作成されており、おそらくバージョンアップすること自体は容易ではあるが公式でもあるようにまだ本番環境は非推奨となっているので実際に使ってみるとはまだだが、概念としてキャッチアップしていきたいと思っていた。<br>もしかして、これも他の技術で作り直してくるかもしれない。Astroが静的サイトを作成するためのフレームワークや拡張子ということは理解することが出来たので、これからは大きな違いなどもキャッチアップしていきたい。<br>けれど、ImageやText、Link周りやOGPの作成機能はとても斬新なので利用することができるならしてみたい</p><h2 id="h060e4fce14">新機能</h2><h3 id="hb0f56b6ca0">App directory</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/526e536e345140caa6f4f21d15edfb24/app%20directory%20(1).webp" alt=""><br>こんな感じに変更されている。<br>今まではpagesディレクトリを利用していて、パスの作成をしていたが今度からはappディレクトリの配下に置くことになる。<br>個人的にはpage.tsxがrootページになるという部分は大賛成でindex.tsxだと少し違和感があったのでこの問題が解決しそうになるのはとてもいいがディレクトリ名としての違和感は少しあるように感じる。<br>公式でもしばらくの間はpagesディレクトリはサポートを続けていうと言っているので問題はないと思う。</p><h3 id="hfbfbfd78f8">Layouts</h3><p><a href="https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts" target="_blank" rel="noopener noreferrer">詳しくはこちらから</a><br>複数のページで利用することができるようなファイルになっている。<br>状態を保持しており、状態を保持しており、再レンダリングをしないといった特徴がある。<br>また、それぞれのページのディレクトリでも共通のレイアウトを作成することが出来、もちろんrootページでも作成可能になっている。<br>ヘッダーやフッターなどの共通部分の利用の時にすごく便利になっている。</p><h4 id="h56e19dfbc5">app/hoge/layout.tsx</h4><pre><code>const  HogeLayout = ({ children, }: { children: React.ReactNode, }) =&gt; {
  return (
    &lt;section&gt;
      &lt;nav&gt;&lt;/nav&gt;
      {/* Childrenを利用することでページディレクトリ全体に反映することができる*/}
      {children}
    &lt;/section&gt;
  );
}
export default HogeLayout</code></pre><h3 id="hd31ec101ef">Server components</h3><p><a href="https://beta.nextjs.org/docs/rendering/server-and-client-components" target="_blank" rel="noopener noreferrer">詳しくはこちら</a><br>これは新しくNextではなくReactの方に追加された機能である。<br>正直、フロントエンドがどんどん進化していっているのでまた次のバージョンなどでは消えているような可能性がなくはないが...<br>どんなことかというと従来はクライアントでJavaScriptバンドルのサイズに影響を及ぼしていた大規模な依存関係を、サーバに完全に残すことができ、パフォーマンスの向上につなげることができるようになっている。<br>このブログなどでもそうだが、page speed insightsなどといったサイトの評価ツールなどで測定してみると大抵の場合はJavascriptの部分でパフォーマンスが減少してしまっていることがわかる。<br>そこの部分に着目して初期の非同期でのロードを行い、パフォーマンスが向上しているということになる。<br>また、書き方自体もPHPやRuby on Railsに近い感覚で作成でき、Reactのパワーと柔軟性を使ってUIをテンプレート化させることが可能になっている。<br>今後Reactの書き方自体がどのようになっていくのかがとても興味深い。少なくてもレンダリング方法にも大きく影響していくことが増えていくような感じはある。</p><h3 id="he628df0e51">Client components</h3><p><a href="https://beta.nextjs.org/docs/rendering/server-and-client-components" target="_blank" rel="noopener noreferrer">詳しくはこちら</a><br>クライアントコンポーネントの利用方法について、ファイルに「use client」が定義されると、子コンポーネントを含め、そのファイルにインポートされた他のすべてのモジュールは、クライアントバンドルに含まれるとみなされる。<br>しかし、基本的にはReactはサーバーサイドコンポーネントが標準であり、従来の様々なデータフェッチの方式などはプロダクションでまだ利用していないのでなんとも言えないが、おそらく消えているという話をよく聞く。</p><pre><code>// クライアントコンポーネントで
'use client';

import { useState } from 'react';

const Counter = () =&gt; {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}
export default  Counter;</code></pre><p>上記の例などはStateと簡単なクリック時の参考例だけで完結していると思うので、この子部分などの表現方法もしっかりと再度理解しておきたい。</p><h3 id="h3f634b9461">使い分け</h3><p>本当にざっくりと説明するとサーバーコンポーネントとクライアントコンポーネントの使い分けについて、必要性が出てくるまではServer componentsを使用し、イベントアクションの利用やステートとライフサイクルの利用にはClient componentsを使用というのがいいのではないかと個人的に思っている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/c2b23cd6aa024e25a7b1be8fef9d7db5/%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-25%2023.05.27.webp" alt=""><br>おそらくブログとして利用することになったら以下のようになるだろう。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/b904dfcc551741409420ed51d2851595/app%20directory%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.webp" alt=""></p><h2 id="he207bf2d41">ストリーミング</h2><p>Next.JSのサーバーコンポーネントを使用することで、ネストされたレイアウトに必要ない部分を先にレンダリングし、ロード表示と分けることができるようになっている。また、Lazy遅延表示のように、ページ全体を読み込む必要がない場合でも、一部のコンポーネントを先に表示することができるようになっており、これにより待たずに表示できる部分は先に表示されるようになっている。<br>個人的には今までも出来たようなという勘違いをしているのか本当にできたかどうかは定かではないがパフォーマンスの向上により最初のページの表示スピードが上がったのは間違いないのでとてもいい</p><h2 id="h0733387e72">データの取得</h2><p>Reactの新しい仕様であるRFCにより、SSR、SSG、ISRの全ての利点が一つのAPIで利用可能になった。この新しいAPIを用いることで、Server componentsは自動的にフェッチ要求を行い、コンポーネントレベルでデータをフェッチ、キャッシュ、再検証することができるようになり、今後さらに改善されることが期待されている。<br>改めて、以前の記事でデータフェッチの考えを示したがそれさえもいらなくなるとは...<br>どんどんフロントエンド自体も変化しておりこれからどうなるかわからないがしっかりとやって行かなければと改めて思う事件。</p><h2 id="hd90567ea6b">軽微な大改良</h2><p>個人的にここの部分は大きな刷新につながっていない分、改善する余地がたくさんあると考えることができるようになっているような部分。特にNext独自の技術の部分も多いのでしっかりと新バージョンで利用することができればパフォーマンスの向上に大いに役立つと思う。</p><h3 id="hf3a5416cc9">Turbopackの導入</h3><p>今までのWebpackはおそらくJSにて限界性能となったので、バージョン12からRustコンパイラのものに刷新され飛躍的にパフォーマンスが向上しており、公式でもしっかりとバージョンが上がるごとに速くなっていることがわかる。<br>勘違いかもしれないが自分自身がバージョン12の時からRust版に乗り換えていることもあってあまり驚きもない。<br>もちろんまだAlpha版なので修正はいくらでも入ると思う。</p><h3 id="h6dbff0f054">Imageタグ</h3><p>Next.jsの画像最適化機能であるnext/imageが改良され、Altタグの指定が必須になった。また、クライアントのJavascriptも削減されて、既存の画像コンポーネントはレガシー版として扱われ、新しいコンポーネントにアップグレードするには、<br> <code>$ npx @next/codemod next-image-to-legacy-image ./pages</code> <br>のコマンドを使用する必要がある。<br>個人的に画像周りの修正は大賛成で少しでもこの思い画像の最適化が行われるならどんどん改良してもらいたい。</p><h3 id="h807e1fde79">Fontタグ</h3><p>Next.jsでは、フォントの最適化が行われ、外部からのネットワーク要求を削減し、プライバシーとパフォーマンスの向上を実現している。ブラウザからGoogleにリクエストが送信されることはなく、大枠のタグに利用することができるため、利便性が向上している。<br>大枠のタグに利用することができればアプリケーション全体をラップすることができると思うので今までフォントに関して考慮することはなかったが最適化されたフォントが利用できる安心感はとても大きいものである。</p><h3 id="hd58ff5c6a0">Linkタグ</h3><p>Next.jsの新しいリンクコンポーネントも登場し、従来のaタグを置き換えることができるようになった。アップグレードには、<br> <code>$ npx @next/codemod new-link ./pages</code> <br>のコマンドを使用する必要があり、Aタグは本当に必要ない邪魔者でなんの意味があるかわからなかったのでこれも嬉しい変更である<br>どれに関しても今までのものを利用しているだけでよりパフォーマンス向上につながっているのが楽でいい。</p><h2 id="ha739b3b8f6">その他</h2><p>後の変更としてOGP周りの設定をVercelでできることとミドルウェア部分の改良だが、自分の場合はNextSEOを使っている点やJamstackな構成で構築しているのでこの二つは当面の間は利用しない方向で大丈夫だなと思っているのでここでは特に考慮はしない。<br>しかし、大きくアーキテクチャを変更し利用する機会があればぜひ使っていこうと思うしその時にまたブログにしたい。</p><h2 id="hcbec2bf0d9">終わりに</h2><p>フロントエンドは本当に流れが早いと最近感じる。<br>自分はReact自体はクラスコンポーネントから書いておりそこからHooksの登場やフレームワークの登場などどんどん進化しているが根本的に変化しているのかどうかと言われればそんなことなくて、あくまで無駄を減らしているという範囲で止まっていると考えている。<br>また最近はDenoなどのNode.jsへの対抗勢力なども次々登場しつつあるのでさらにフロントエンドの技術は複雑化していくことになるとも思いつつ、Figmaなどのツールも一通りは利用しなければいけなそうという雰囲気がある。<br>バージョン13のキャッチアップもこれほど遅れてしまっているが、少しでも時間がある時などにしっかりと新しい技術を学んでプロダクトをより良くしていきたい。そして楽しみたい。</p>

<h1 id="hc942634f96">New features one after another</h1><p>Recently, I finally got a break.<br>I've been pretty busy lately, so I haven't had much time to catch up on things.<br>I only heard a little bit about the App directory from a friend, and I was wondering what kind of content it had become, so it was a good thing I did.<br>Recently, the front end has been getting more and more advanced.<br>But at the same time, there are many parts of this Nextjs version that are meaningless if you can't keep up with the latest version of React.<br>In any case, don't forget that it relies heavily on React.<br>We can feel that it is becoming very easy to use.</p><h2 id="hb3a0a2415f">Reference</h2><p>I'm wondering if I should implement ogp here too: ....<br><a href="https://nextjs.org/blog/next-13" target="_blank" rel="noopener noreferrer">Next.js version13</a><br><a href="https://beta.nextjs.org/docs/upgrade-guide" target="_blank" rel="noopener noreferrer">Upgrade guide</a></p><h2 id="h8cb8f3908a">About this blog</h2><p>In conclusion, I would like to take a wait-and-see approach to this blog.<br>As mentioned in past articles, this blog was created using Next.js version 12, and although it is probably easy to upgrade the version itself, as the official version says, it is still deprecated for production environments, so I have not actually tried using it yet, but I wanted to catch up with it as a concept. I wanted to catch up with it as a concept.<br>Now that I understand that Astro is a framework and extension for creating static sites, I would like to catch up on the major differences.<br>However, I would like to take advantage of the new features around Image, Text, Link, and OGP creation if I can!</p><h2 id="he52f20fbfd">New features</h2><h3 id="hb0f56b6ca0">App directory</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/526e536e345140caa6f4f21d15edfb24/app%20directory%20(1).webp" alt=""><br>This is what the change looks like.<br>The path was previously created in the pages directory, but from now on it will be placed under the app directory.<br>Personally, I'm all for page.tx being the root page, and index.tx was a little uncomfortable, so it's great that this problem is about to be solved, but I feel that it's a little uncomfortable as a directory name.<br>However, I feel that the name of the directory is a bit strange. The official announcement says that the pages directory will continue to be supported for a while, so I don't think it will be a problem.</p><h3 id="hfbfbfd78f8">Layouts</h3><p><a href="https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts" target="_blank" rel="noopener noreferrer">For more details, click here.</a><br>This file can be used for multiple pages.<br>It has features such as state retention, state retention, and no re-rendering.<br>Also, a common layout can be created in the directory of each page, and of course, it can be created on the root page.<br>This is very useful when using common areas such as headers and footers.</p><h4 id="h56e19dfbc5">app/hoge/layout.tsx</h4><pre><code>const  HogeLayout = ({ children, }: { children: React.ReactNode, }) =&gt; {
  return (
    &lt;section&gt;
      &lt;nav&gt;&lt;/nav&gt;
      {/* Children can be used to reflect the entire page directory*/}
      {children}
    &lt;/section&gt;
  );
}
export default HogeLayout</code></pre><h3 id="hd31ec101ef">Server components</h3><p><a href="https://beta.nextjs.org/docs/rendering/server-and-client-components" target="_blank" rel="noopener noreferrer">For more information, click here.</a><br>This is a new feature added to React, not Next.<br>To be honest, it is not impossible that it will disappear in the next version of React, since the front end is evolving rapidly...<br>What this means is that large dependencies that used to affect the size of JavaScript bundles on the client can now be left entirely on the server, leading to improved performance.<br>As is the case with this blog and others, site evaluation tools such as page speed insights usually show a decrease in performance in the Javascript portion of the site.<br>By focusing on this area, the initial asynchronous loading is performed, and the performance is improved.<br>In addition, the writing style itself can be created with a feeling similar to that of PHP or Ruby on Rails, and the power and flexibility of React can be used to template the UI.<br>It will be very interesting to see how React itself will be written in the future. There is a sense that it will have a growing impact on the way it is rendered, at the very least.</p><h3 id="he628df0e51">Client components</h3><p><a href="https://beta.nextjs.org/docs/rendering/server-and-client-components" target="_blank" rel="noopener noreferrer">For more information</a><br>Regarding the use of client components, once "use client" is defined in a file, all other modules imported into that file, including child components, are considered part of the client bundle.<br>However, basically, server-side components are the standard in React, and I've heard a lot of talk that the various traditional data fetching schemes and such are probably gone, although I can't say for sure since I haven't used them in production yet.</p><pre><code>// in client component
'use client';

import { useState } from 'react';

const Counter = () =&gt; {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}
export default  Counter;</code></pre><p>I think the above example and others are complete with only State and simple click reference examples, so I want to make sure I understand again how to express this child part and others.</p><h3 id="h802c79ee8f">Differentiation of Usage</h3><p>To give a really rough explanation of the distinction between server and client components, I think it would be better to use Server components until the need arises, and use Client components for event actions and for the use of states and lifecycles. I personally think it is a good idea to use the Server component until the need arises.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/c2b23cd6aa024e25a7b1be8fef9d7db5/%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-25%2023.05.27.webp" alt=""><br>Perhaps if it were to be used as a blog, it would look something like this<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/b904dfcc551741409420ed51d2851595/app%20directory%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.webp" alt=""></p><h2 id="h01c3f1a9f0">Streaming</h2><p>The server component of Next.JS allows parts of the page that are not needed for the nested layout to be rendered first and separated from the loading display. It also allows some components to be displayed first, even when the entire page does not need to be loaded, such as in lazy lazy display, so that the parts of the page that can be displayed without waiting are displayed first.<br>Personally, I am not sure if I am mistaken that this was ever possible, or if it really was, but the performance improvement has definitely speeded up the display of the first page, which is very nice!</p><h2 id="h8c4131d5a7">Fetching Data</h2><p>With React's new RFC specification, all the benefits of SSR, SSG, and ISR are now available in one API. With this new API, Server components can now automatically make fetch requests and fetch, cache, and revalidate data at the component level, which is expected to be further improved in the future.<br>Once again, I presented the idea of data fetching in a previous article, but even that will no longer be necessary...<br>The front end itself is changing rapidly, and I don't know what will happen in the future, but this is an incident that reminds me once again that we must do our best to keep up.</p><h2 id="hfc591eca3c">Minor major improvements</h2><p>Personally, I feel that this section is such that there is a lot of room for improvement, even though it has not led to a major revamp. In particular, there are many parts of Next's unique technology that will greatly help improve performance if it is used properly in the new version.</p><h3 id="hc6a7f99da6">Introduction of Turbopack</h3><p>Since the performance of Webpack up to now was probably limited by JS, it was renewed to the one of Rust compiler from version 12, and the performance has been dramatically improved.<br>I may be mistaken, but I am not surprised because I myself have switched to the Rust version since version 12.<br>Of course, it is still an Alpha version, so I'm sure there will be plenty of fixes.</p><h3 id="h4a79fa9797">Image tag</h3><p>Next.js' image optimization function, next/image, has been improved and now requires the specification of an Alt tag. Also, client Javascript has been reduced and existing image components are treated as legacy versions, to upgrade to the new components,<br><code>&nbsp;$ npx @next/codemod next-image-to-legacy-image . /pages&nbsp;</code><br>command.<br>Personally, I'm all for modifications around images, and I'd like to see more and more improvements if this thought image optimization is done, even if only a little.</p><h3 id="hfa0379db6f">Font tag</h3><p>Next.js has optimized fonts to reduce external network requests and improve privacy and performance. The browser does not send a request to Google and can be used for large frame tags, which improves convenience.<br>The ability to use this for large frame tags allows us to wrap the entire application, so we have not had to consider fonts, but the peace of mind of having optimized fonts is great.</p><h3 id="h6da87523f8">Link tag</h3><p>Next.js has also introduced a new link component that replaces the traditional a tag. To upgrade,<br><code>&nbsp;$ npx @next/codemod new-link . /pages&nbsp;</code><br>command, which is also a nice change since the A tag was a distraction that was not really needed and did not make any sense!<br>It's nice and easy to use the existing ones for all of them, which leads to better performance.</p><h2 id="ha23ad0e638">Other</h2><p>I think that I can use NextSEO and Jamstack configuration, so I don't consider these two changes here because I don't think I need to use them for the time being.<br>However, if I have a chance to use them after a major architectural change, I will definitely use them, and I will blog about it again at that time.</p><h2 id="h2b0c1613ea">In closing</h2><p>I feel that the front-end is really moving fast these days.<br>I have been writing React from the class component, and it has been evolving rapidly with the appearance of Hooks and frameworks, but if you ask me if it has fundamentally changed, I don't think so, and I think it has stopped at the extent of reducing waste.<br>Recently, Deno and other competitors to Node.js are appearing one after another, so I think that front-end technology will become even more complex, and there is an atmosphere in which it is necessary to use tools such as Figma in one way or another.<br>I am so far behind in catching up with version 13, but I would like to learn new technologies and improve the product whenever I have a little time. And I want to enjoy it.</p>

英語やってて気がついていなかった

今更ながらNext.js ver13

Next.js ver13 after all this time

<h1 id="hab9b7454bc">あらためて考えてみる</h1><p>今回は完全に自分の考えです。偏見の塊ですが許してください🙇<br>こんなことを書いているがほんとに英語は難しいとどうしても感じてしまう。<br>自分の周りにも留学生などもいなかったので関わる機会がなかったし、まともに勉強したこともなかった。<br>別に海外に旅行行きたいとかいう願望もなかったし、日常生活の上で苦労しなかった。<br>それでも大学4年から英語の勉強を始めて思ったことがたくさんあった。</p><h2 id="hae5f913c52">伝えられているかどうかが不安</h2><p>まず、英語に抵抗にあったのが、日本語のように流暢に喋ることができないのが恥だと思ってしまい挑戦しないこと。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/b4410cb12f4844debf92b608161d92bd/%E3%81%8A%E8%AA%95%E7%94%9F%E6%97%A5.webp" alt=""><br>自分はこんな感じのイメージでいつもためらっていた、これではおかしいと思われると思ったから。</p><h3 id="hdc48a3fcb5">主語と動詞がある</h3><p>しかし、個人的にはこれでいいと思う。<br>TOEICを勉強してた時に思っていたが、英語自体が結論が先に来る言語であり修飾する部分はおまけでしかないと ....<br>リスニングでもライティングでもリーディングでも英語の本質的にここさえ捉えられていれば無限に応用することができると思う。<br>なので多分これを海外の人に伝えても、<br>「多分この人はハンバーガーを食べたいからお店を探している」と連想してくれるだろうと思う。<br>文の趣旨となっているので、捉え方によって最低限の会話で言いたいことを伝えられる最短距離を攻めた会話とも思える。<br>もちろん一連の文として成立させることができるならそれに越したことはないが、まずは相手に伝えることができる挑戦が何より大切だと思う。<br>ちなみに今の自分はまさに上記の例の状態である。全然文章として完成させることはできていないが、相手が主旨を読み取ってくれるため普段からほんとに会話してくれている人に感謝であり、補助ありでコミュニケーションできる段階になれるように勉強している途中である。</p><h3 id="haa73a0d968">日本語を勉強している海外の人をイメージするとわかりやすい</h3><p>日本語で必死に伝えてくれようとしている観光客などを見てどう思うか？<br>おそらく「この人日本語下手だな...」と思うのではなく「わざわざ日本語を覚えそれをコミュニケーションとして実践しているその姿勢が尊敬しかない」と自分だったら絶対に思う。<br>日本人でもなく日本で育ったわけでもないのに、日本語を学ぶメリットがないと思うし、世界共通言語でもないのにほんとに努力しているんだと見習わなければと思ってしまう。<br>海外の人から見れば、もちろん英語が世界共通語なので大切だが、自国言語ではないのに努力している姿勢を尊重してくれると思うし、ネイティブではない国の人でも努力して英語を取得したと思うのでその大変さを知ってくれると思う。<br>いずれにしても相手は英語ができなくても挑戦していればわかってくれると思うのでやってみることから始めていきたいと思う。<br>そして挑戦し続けていればいずれ話せるようになるだろうと思っている。</p><h2 id="h7ce570e8ab">文化的な違いの面白さ</h2><p>正直今の自分が英語を学んでいる理由はここも大きく関係している。<br>自分は今まで海外も行ったことがなく、周りにも海外の友達などもいなかったため、日本という国しか知らないしそれを当たり前と思っていることもあったが、オンライン英会話などを通してさまざまな文化があることをたくさん知ることができた。<br>しかし、その文化を知るにしても実際に話して体験談なども知りたいと思った時に英語を使わなければ知ることが出来ないだろうと思うことがたくさんあったため英語勉強を始めた。<br>別に学業で必要とかそういうわけではなかったがただ色々な人のバックグラウンドを知りたいという興味と性格からだと思う。<br>今では海外旅行に行ってみたいと思えるようになった。</p><h3 id="h2ea96a38b8">シンプルにかっこいい</h3><p>自分の周りで英語を話せる人がいる。<br>もちろん自分が英語に興味を持ったから思ったことであり、興味がなければ別に自分にはいらないかなと思う。<br>世界中の人と話すことができるが何よりのメリットだと思うし、間接的にもさまざまな面白さがある。<br>そのレベルまで話すことができるのは大変だと思うが....</p><h2 id="ha214098e44">まとめ</h2><p>何度もいうが、自分も今英語を勉強しているが全然話せるようになってないし、難しいことだらけだと普段から感じる。<br>ただ自分の英語が下手でバカにしてくるような人もいないし、実際に伝えることができた時は嬉しいという気持ちがある。<br>それに英語を共用語としてくる国で生まれたわけではないので話せないのは当たり前！というマインドでやってる🧠<br>ただ、色々なことを知りたい上で英語はツールとして優秀だと思うので継続していきたい。<br>いつか流暢にアメリカのスタバでキャラメルフラペチーノを頼めるようになることが夢です。</p>

<h1 id="h9c12e6ec2a">Think again.</h1><p>This time it's completely my own idea. Forgive me if I'm a bit prejudiced. 🙇<br>I am writing this but I really can't help but feel that English is difficult.<br>I never had a chance to get involved with it because there were no foreign students around me, and I never studied it properly.<br>I had no desire to travel abroad, nor did I have any difficulties in my daily life.<br>Even so, when I started studying English in my fourth year of college, I had many thoughts.</p><h2 id="h0df40cfdef">I was worried about whether or not I could communicate.</h2><p>First of all, I was resistant to English because I felt ashamed of not being able to speak it as fluently as I could in Japanese, so I did not challenge myself.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/b4410cb12f4844debf92b608161d92bd/%E3%81%8A%E8%AA%95%E7%94%9F%E6%97%A5.webp" alt=""><br>I was always hesitant because I had this image of myself as this kind of person, and I thought this would make me sound strange.</p><h3 id="h55a081d87d">I have a subject and a verb.</h3><p>But personally, I think this is fine.<br>When I was studying for the TOEIC, I thought that English itself is a language where the conclusion comes first and the qualifying part is just an added bonus. ....<br>I think that whether it is listening, writing, or reading, as long as you can capture this part of the essence of English, you can apply it endlessly.<br>So maybe if I tell this to someone overseas,<br>I think they will associate it with "Maybe this person is looking for a restaurant because he/she wants to eat a hamburger".<br>Since this is the purpose of the sentence, it seems to be the shortest distance conversation that can convey what you want to say in a minimum amount of conversation, depending on how you look at it.<br>Of course, if you can make it work as a series of sentences, there is nothing better than that, but I think the most important thing is to challenge yourself to convey the message to the other person first.<br>Incidentally, I am in the above example right now. I am not able to complete sentences at all, but I am grateful to the people with whom I usually have real conversations because they are able to read the main idea, and I am in the process of studying to be able to communicate with them with assistance.</p><h3 id="hb8293606aa">It is easy to understand if you imagine a foreigner studying Japanese.</h3><p>What do you think when you see a tourist trying desperately to communicate with you in Japanese?<br>Perhaps you don't think, "This person is not very good at Japanese..." I would definitely think, "I have nothing but respect for this person who has gone to the trouble of learning Japanese and practicing it as a form of communication.<br>I don't think there is any merit in learning Japanese if you are not Japanese and did not grow up in Japan, and I would think that I should learn from your efforts even though it is not a universal language.<br>From the foreigner's point of view, of course English is important because it is the universal language, but I think they would respect my attitude of making efforts even though it is not their own language, and I think they would know how hard it is because they think that even people from non-native countries made efforts to acquire English.<br>In any case, even if they cannot speak English, I think they will understand if I try.<br>I believe that if I keep trying, I will eventually be able to speak English.</p><h2 id="h9335e39691">Interesting cultural differences</h2><p>To be honest, this is a big part of the reason why I am learning English now.<br>I have never been abroad and have no friends from overseas, so I only knew about Japan and sometimes took it for granted, but through online English conversation, I have learned about many different cultures.<br>However, there were many things that I thought I would not be able to know without using English when I wanted to actually talk to people and learn about their experiences in their culture.<br>I started studying English not because I needed it for my studies, but because of my personality and interest in learning about other people's backgrounds.<br>Now I want to travel abroad.</p><h3 id="h5ab793ca8f">It's simply cool.</h3><p>There are people around me who can speak English.<br>Of course, I thought it was because I was interested in English, and if I wasn't interested, I wouldn't need it.<br>I think the best advantage is that I can speak with people from all over the world, and indirectly, there are various interesting things.<br>I know it's hard to be able to speak to that level, but ....</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>As I have said many times, I am studying English now, but I am not able to speak it at all, and I usually feel that it is full of difficulties.<br>However, no one makes fun of me for my poor English, and I feel happy when I can actually communicate.<br>I was not born in a country where English is the lingua franca, so it's natural that I can't speak it! I do it with the mindset of. 🧠<br>However, I want to continue to learn English because I think it is an excellent tool to learn about various things.<br>My dream is to be able to fluently order a caramel Frappuccino at an American Starbucks one day.</p>

最近、快晴を見ていない

英語に対する向き合い方

How to deal with English

<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="ha4352a337d">思いっきり楽しんだ</h1><p>最後の学生生活だった。<br>2月いっぱいまでずっとTOEICの勉強していて、この1年間ほぼ全く遊んでいなかったので残りの1ヵ月はやり残したことを全部やろうと思っていた。<br>結果的に全てが叶ったわけではなかったけど、思い切ってやり尽くしたので後悔は無い。<br>今振り返ってみると、主に家族とのふれあいが多かった気がする。</p><h2 id="hce1bb818eb">主にやっていたこと</h2><h3 id="h8ce17a4911">引越し関連</h3><p>大学に入学した時もそうだったけど、退去する時もほんとに大変だった。<br>4年間住んだ家だったので、周りのショッピングセンターやよく行きつけだったカフェなどももう行けないとなると少し寂しい気持ちではあったが、成長したんだなと言う実感もあったので複雑な気持ちだった。<br>荷物に関しても荷造りをしている中で思い出のものもたくさんあったので整理するのが大変だった。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/267a816db35843038dcd0cb087762e9f/IMG_4022.webp" alt=""></p><h3 id="h9ee4c1f656">お世話になった人たちとご飯に行ったり</h3><p>久しぶりな顔ぶれの人たちともご飯に行くことができた。<br>この4年間の中で、自分の人生に関わる教訓を教えてくれたことや、プログラミングの面でも様々なことを考えさせてくれたこともあったので、感謝するとともに本当に自分が周りに恵まれていてお世話になったなと改めて実感することができた。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1a077450a2c7470ca4dda7598cc9d4a7/IMG_4091.webp" alt=""></p><h3 id="hccc520e548">家族との触れ合い</h3><p>今までお世話になっていたので、最後の期間は家族とふれあおうと思っていた。<br>実際に周りが社会人になっているということもあり、なかなか予定が合わないこともあったので結構家にいる時間が多く実家の車を借りてドライブなどをよくしていて楽しい日々だった。<br>また改めて洗濯やご飯なども全部やってくれていて、当たり前じゃないことをすごく実感することができた。<br>やっぱり実家のご飯はほんとにおいしい🍗</p><h3 id="hf83e1a046e">旅行</h3><p>高校時代の友達や中学時代の友達とは、TOEICが絡んでいて予約ができなかったこともあって一緒に行くことはできなかったが１回だけ日光のほうは旅行行くことができた。<br>ただ、その時も自分自身の体調が悪くいろいろ観光しようとは思っていたが体調についていけず、高熱を出してホテルで寝込むと言う相手には本当に迷惑をかけてしまったが、それでもすごい楽しい旅行だった。 感謝しかない🙇</p><h3 id="he85d002064">インフルエンザ</h3><p>本当に最後の週にかかっていた。<br>40度を超える高熱が何日も続き、お医者さんで薬をもらってもあまり良くならなかったので改めてウィルスの恐ろしさを知ったとともにもう味わいたくないなとほんとに思ってしまった。<br>それでも無事に完治することができたので、それは不幸中の幸いだったと今になって思っている！</p><h2 id="ha214098e44">まとめ</h2><p>全てできたかと言われると全然そんなこともなかったし、体調崩してしまったのでできないこともたくさんあった。<br>だけれど、これが学生と言う立場だったので最後は許されていたが社会人になったらこんなこと許されないだろうと思っているので事前にそのことを教えてよかったし、改めて体調管理には気をつけていこうと実感することができた。<br>これから少しずつどうなっていくかはまだまだわからないが、やるべき事はしっかりとやって健康的な生活を送ってきたいと実感した。</p>

<h1 id="h5266a35385">I enjoyed myself to the fullest.</h1><p>It was my last time as a student.<br>I had been studying for TOEIC all the way until the end of February, and since I had not had any fun at all during the past year, I decided to do everything I had left to do in the remaining one month.<br>As it turned out, not everything came true, but I went all out and I have no regrets.<br>Looking back now, I think I mainly had a lot of contact with my family.</p><h2 id="h5cfdd45142">The main things we did</h2><h3 id="hb6c96746f2">Moving-related</h3><p>Like when I entered university, it was really hard to move out.<br>I had lived in this house for four years, and I felt a little sad that I could no longer go to the shopping centers and cafes that I used to frequent, but I also felt that I had grown up, so I had mixed feelings.<br>It was also difficult to organize my belongings because I had so many memories while I was packing.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/267a816db35843038dcd0cb087762e9f/IMG_4022.webp" alt=""></p><h3 id="hdf7d63b78a">I went out to dinner with people who had helped me a lot.</h3><p>I was able to have dinner with people I had not seen in a long time.<br>I am grateful for the lessons they taught me about my life and the many things they made me think about in terms of programming over the past four years, and I was able to realize once again that I am truly blessed to be surrounded by people who have taken care of me.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1a077450a2c7470ca4dda7598cc9d4a7/IMG_4091.webp" alt=""></p><h3 id="h4cb07c3c24">Contact with my family</h3><p>Since I had been taken care of up until now, I thought I would spend my last period of time getting in touch with my family.<br>In fact, I spent a lot of time at home and often borrowed my parents' car to drive around, which was fun.<br>I also realized that I could not take it for granted that my parents did all the laundry, cooked all the meals, and so on.<br>I knew that the food at my parents' house is really delicious.🍗</p><h3 id="h6e8836d46e">Traveling</h3><p>I could not go with my friends from high school and junior high school because I could not make reservations due to TOEIC, but I was able to go on a trip to Nikko one time.<br>However, I was not able to go with my friend from high school because of TOEIC and we were not able to make reservations, but I was able to go on one trip to Nikko. All I can say is thank you 🙇.</p><h3 id="hf719d3b4fd">Flu.</h3><p>I really had it in the last week of the trip.<br>I had a high fever of over 40 degrees for several days, and even though I got medicine from the doctor, it didn't get much better.<br>I was able to recover completely from the flu, which I now consider to be a blessing in disguise!</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>If you ask me if I was able to do everything, it wasn't like that at all, and there were many things I couldn't do because I got sick.<br>However, since I was a student, I was allowed to do so in the end, but I am glad that I learned about this beforehand, because I am sure that I would not be allowed to do so if I became a member of society, and I realized once again that I should take care of my health.<br>I still don't know how things will go little by little from now on, but I realized that I would like to do what I have to do and lead a healthy life.</p>

Sota Tech Blog.

今更ながらNext.js ver13

英語に対する向き合い方

Go言語の学習を再開する

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

3月の振り返り