<p><br>2024年は私にとって意識的に成長を求めた1年でした。<br>さまざまな挑戦を通じて、身の回りに起こった変化の記録を共有したいと思います。</p><h1 id="h5a65201648">🏋️筋トレとの出会い - 心と身体の変化</h1><p>4月、メンタルの不調や己の不甲斐なさを克服するために始めたジム通いが、心身に変化をもたらしました。<br>週1〜2回、汗を流す時間を作り出すことから始まったこの習慣は、単なる運動以上の価値があることに気づかされます。 半年かけて2kgという超スローペースでの減量は、一見地味な成果に思えるかもしれません。<br>悩み事を抱えてジムに向かい、帰り道には疲労と共にその悩みが霧散するような体験。<br>まるでRPGのキャラクターのように、日々の生活での「攻撃力」と「防御力」が1レベル上がったような──そんな心身の変化を実感しています。<br><strong>次なる目標：</strong><br>体重57kgで腹筋露出！（筋肉量との相談ですが...）<br>週2回のジム通いを継続することで、理想の体づくりを目指します。</p><h1 id="heba0d632d8">📚 英語との新しい関係 - 学習の先にあるもの</h1><p>TOEIC L&amp;Rの対策を通じて英語学習に取り組みました。<br>目標としていた600点には届かず、555点という結果に。 しかし、この学習は価値があるものでした。</p><ul><li>スマートフォンの言語設定を英語に変更</li><li>目に入る英語を意識的に読む習慣の確立</li><li>AWS認定試験での英語文章参照がスムーズに</li></ul><p>数字では表せない、日常的な英語との付き合い方が大きく変わったことが、今年の本当の成果かもしれません。</p><h1 id="h2480f5a7f4">🏆 AWS資格挑戦 - 知識の幅を広げる</h1><p>AWS Certified SysOps Administrator - Associate合格のために約1ヶ月間対策勉強を行った。<br>819点取り少し余裕を持って合格することができた。<br>会社が試験的に資格報奨制度を始めたことで1万円のギフトカードが棚ぼたでついてきた。<br>業務では全く使用していない便利サービスを知るきっかけにもなり、これからの仕事で良い知識のフックになることを期待している。<br>次はDevOps Engineer Professionalに興味があり、来年中には合格できるよう知識を深めていきたい。<br>SysOps Administrator - Associate試験に819点で合格。 約1ヶ月の集中的な学習が実を結び、会社の資格報奨制度から棚ぼたでギフトカードも獲得。<br><strong>しかし、最大の収穫は別のところにありました：</strong></p><ul><li>業務では使用していない便利なAWSサービスとの出会い</li><li>将来の業務に活かせる知識の獲得</li><li>DevOps Engineer Professional挑戦への意欲</li></ul><h1 id="h20fcd6a00a">💡 コスト削減プロジェクト - 主体性がもたらした達成感</h1><p>仕事で数十テラバイト規模のS3ストレージの最適化に取り組んだ経験は、 技術的なチャレンジだけでなく、ビジネス視点での考察も必要とされる貴重な機会となりました。<br><strong>取り組みのポイント：</strong></p><ul><li>サービスへの影響分析</li><li>運用部門との調整</li><li>移行コストの試算</li><li>AWSソリューションアーキテクトとの協議</li></ul><p>誰かに指示されたわけではない、自発的なプロジェクトだったからこそ、 達成時の満足感はひとしおでした。</p><h2 id="h9be0c3393d">おわりに</h2><p>2024年を振り返ると、「継続」と「挑戦」がキーワードとなった1年でした。 完璧な結果を出せなかったこともありますが、それぞれの経験が確実に私の成長につながっていることを実感しています。<br>2025年も、新たな目標に向かって歩み続けていきたいと思います。</p>

2024年に頑張ったこと - 成長の軌跡

<h2 id="hb4437fcb1b">アイスブレイク🍧</h2><p>ふと目標の振り返り記事でも書くかと思い立ったので、箇条書きベースで書いていく。<br>今日は夏季休暇1日目でやんす。</p><h2 id="h94b1fa6bcc">前期の目標</h2><p>前期は5つの目標を立てていました。<br>それぞれの達成度は<s>書くのが面倒くさいので</s>書かないことにします。</p><ul><li>EC2インスタンスにパッチ当てを仕組みを構築する。</li><li>単体テストを書けるようになる。</li><li>Laravelのアップグレードを5つのアプリ/サイトで行う。</li><li>会社全体としてのセキュリティ対策の方針や立案をする。</li><li>TOEIC600点以上を取る。</li></ul><h2 id="hd46851cd3c">全体的に振り返って</h2><h3 id="ha54face28c">WILL CAN MUST大事</h3><p>「会社全体としてのセキュリティ対策の方針や立案をする。」は、会社でセキュリティのトラブルがあり、必要性を感じたので立てました。<br>ただ、WILL（したい気持ち）やCAN（できる能力）が低くて、Guard Dutyを設定するとかのミクロ面は行動できていたが、会社全体としての方針決めや立案をすることはできませんでした。<br>WILL（したいこと）をベースにMUST（するべきこと）を目標にするか、WILLをベースにCAN’T（できないこと）をCAN（できるようにする）ことが、自分にとって目標を立てる上で大事なことかもと思いました。</p><h2 id="h203366aafa">TOEICの結果と振り返って</h2><p>箇条書きでさっくりと。</p><ul><li>555点だった🥺<ul><li>英文読むのが遅い</li></ul></li><li>集中力が続かない<ul><li>模擬試験回数が足りてない</li><li>休日に模試をするべき</li><li>スキマ時間に数問解くスタイルは良かった。</li></ul></li><li>体調が悪いとまでは言わないが万全ではなかった。<ul><li>ちゃんと休息を取る。。</li></ul></li><li>今期も英語学習はがんばる💪</li></ul><p><br></p>

【ポエム】前期に会社で立てた目標の振り返り

<h1 id="h8d027c8ed3">はじめに</h1><p>あけましておめでとうございます。<br>昨年は「ChatGPTを使ってブログサイトを作成した記事」、「AWS SAAに合格した振り返り記事」の2つだけ記事を書きました。<br>全然記事を書けていませんが、心理的負荷になることなく、今後もイベントドリブンで記事を今後も書いていきたいと思います。</p><h1 id="h4d783776a0">2023年のキャリアとスキルアップの振り返り</h1><h2 id="h3197451e81">キャリアとスキルアップの振り返り</h2><h3 id="he738643b26">新しい職場での経験</h3><p>昨年は転職しました。<br>前職はプログラムの保守が多い業務でしたが、新しい職場ではAWSを使用してWebサービスの構築やセキュリティ周りも担当させていただきました。</p><h3 id="h84be2e98ee">資格取得とスキルアップ</h3><p>9月頃にAWS SAA認定試験に合格することができました。<br>また、10月頃から業務でAWSサービスを使用してことで各サービスの理解度が上がりました。<br>具体的にはVPC、EC2、AutoScaling、ALB、RDS、Route53、CodePipeline、CloudWatch、Guard Dutyなどの理解が深まりました。</p><h3 id="h3b05b0475f">チーム内外へのセキュリティ意識の向上</h3><p>完全に主観的ですが、セキュリティに関する取り組みによってチーム内外にセキュリティ意識を与えることができたと感じています。<br>とはいえ自分自身、実務上のセキュリティに関する知識やスキルは低いので、特にWebセキュリティに関しては身につけていきたいです。</p><h2 id="h0dadf97a25">職場での人間関係の振り返り</h2><h3 id="hb92cd7fbc9">チーム内コミュニケーションの改善</h3><p>先輩エンジニアや上司に質問などを行いやすくはある一方で、少し一人で考え込んで時間を浪費してしまうことがあるので改善したいと思っています。<br>具体的には15~30分ほど考えて答えが出なかったら、考えをまとめて質問をするというようにしたいと思います。</p><h2 id="hf7cdc41b14">プライベートの変化と成長：東京での新生活</h2><h3 id="habcc197fe3">東京一人暮らしの開始</h3><p>一人暮らしを始めました。<br>たまに家事や片付けをサボってしまいますが、健康的に生活することができています。<br>実家に住んでいた頃からたまに料理していたので、毎日ではないですが自炊することもできています。<br>凝った料理はしていませんが、自炊するのは楽しいです。</p><h3 id="h56c6c276bd">新しい交友関係</h3><p>実家に住んでいたときからたまに飲みに連れて行ってもらっていたオンラインゲームの友人を通じて、会ったことがなかった人とも数年越しに会うことができました。<br>誘ってもらって飲みに行くことが多かったので、自分から誘って飲みに行ったりしたいです。</p><h2 id="h44dbbbfcd2">2024年の目標と抱負</h2><h3 id="h7db1c50ef9">セキュリティ知識の深化</h3><p>実務でセキュリティに関して担当させていただいているので、セキュリティの知識を深めて行きたいです。応用情報技術者試験である程度勉強したのですが、実務と結びつけることがあまりできていないと感じています。2022年秋の試験で合格したので、高度試験で午前Ⅰ試験が免除されることもあり、情報処理安全確保支援士試験合格を目標に勉強のモチベーションを上げるのも良いかなと考えているところです。</p><h3 id="h7baea18a51">英語学習</h3><p>まず、上半期でTOEIC600点を目標にしています。<br>オンライン英会話を始めたいとも思っていますが、なるべく心理的負荷をかけすぎずに継続できるようにしたいです。</p><h3 id="h49c1fa05e3">健康とプライベートのバランス</h3><p>慢性的に運動不足なので、生活に運動を取り入れていきたいです。<br>たまに朝スクワットをすると血が巡って目が覚めたり、身体が動かしやすくなったりして気持ちが良いので、習慣にできたら良いなと考えています。</p><h1 id="h1afe451c43">さいごに</h1><p>LINEのリンクなどからサイトにきて、記事を呼んだくださった方へ<br>本年もよろしくお願いいたします！<br>この記事は一部、ChatGPTの手を借りて執筆しています。</p>

【ポエム】2023年の振り返りと2024年の抱負

<h2 id="h8d027c8ed3">はじめに</h2><p>この記事は2023年9月26日現在の情報をもとに書いています。今後、学習資源や試験内容に変更が加わる可能性があります。<br>また、ChatGPTにアドバイスをもらいながら執筆しています。</p><h2 id="hb979b09d92">受験をしようと思った動機</h2><p>前職（SES）のミーティングでかわされるインフラ（AWS）用語が分からなすぎて、勉強しようと思い始めました。<br>用語的に知っているのはEC2やS3、RDSがそれぞれサーバ、ストレージ、データベースのサービスであることくらいでした。<br>また、前職の上司（プログラマ）がAWSにも明るい人で、自分もシステム開発に携わる上でこの人のようになりたいと思ったこともモチベーションになりました。</p><h2 id="he23aff7740">学習資源の紹介</h2><ul><li>Ping-t（<a href="https://mondai.ping-t.com/g" target="_blank" rel="noopener noreferrer">最強Web問題集</a>）</li><li>書籍（<a href="https://amzn.asia/d/g5RZt5S" target="_blank" rel="noopener noreferrer">AWS認定資格 ソリューションアーキテクトアソシエイトの教科書: 合格へ導く虎の巻</a>）</li><li>Udemy(<a href="https://www.udemy.com/share/101rfM3@ppcszVnpyDgjtahi-PBmSftVRL4U0PjxJoQ4f9WEAS4vCCN0SD_JdGjZVeO3WxfB/" target="_blank" rel="noopener noreferrer">【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）</a>）</li></ul><h2 id="h21948bb18f">学習資源の振り返り</h2><p>通勤電車の中でPing-tの問題集を5~8問解いて、間違えた問題は解説を読んで勉強していました。ほぼこの問題集だけで合格したと言っても過言ではないくらい質と量があります。<br>Udemyの問題集は一度しか解いていませんが、試験時間の感覚を得ることができたと思います。<br>この問題集は難易度が高く設定されているらしく、この模擬試験で8割正解出来ていれば合格は硬いと思います。<br>Kindleの「合格へ導く虎の巻」は無料公開されていています。Ping-tの解説だけでは不十分なときに参照したり、問題を解くモチベーションがないときに読んでいました。</p><h2 id="hfd6a9ec620">学習プロセスの振り返り</h2><p>振り返ってみるとAWSの勉強をしたいなと思ってから受験をするまでに1年くらい経っていたかもしれません。間に転職活動をしていたり、応用情報技術者試験に合格して試験離れしたかったりしたのですが、ちょっとサボりすぎでした。<br>前述していますが、Ping-tの問題集の反復でかなり試験に特化した学習はできたと思います。1時間とかまとまった時間がないと効率的な学習できないといったことはないと思います。その反面、あまりコンソールを使ってハンズオンで学習することはなかったので、<strong>合格しただけで技術力がついた訳では無い</strong>ということは心に留めておかないといけないと思いました。<br>余談ですが、応用情報技術者試験の午後試験対策には1時間くらいの時間がないと効率的な学習が難しかったんだなーと思いました。</p><h2 id="h8ad511336a">勉強してよかったこと</h2><p>AWSの主要なサービスと代表的なユースケースが頭のなかでインデックスとしてできたと思います。<br>今の職場でも開発やプログラム保守を主軸として仕事をしていますが、一部プロジェクトではAWSを使う機会があり、「勉強したことが多少使える + さらに学べる」という良い環境で仕事ができています。この業務はこのAWSサービスを使ったら楽にならないか、といったことが思いつくようになり、細かいところはChatGPTにアドバイス・アシストしてもらって先輩方に業務改善のフィードバックをいただいたりできています。総じて言うと今まで思いつかなかったことがアイデアとして出せるようになった、というのが勉強してよかったことです。</p><h2 id="h9be0c3393d">おわりに</h2><p>いわゆるアソシエイト3冠を目指してSOAとDVAに合格するといった目標は今のところないのですが、実務を通じて体系的に勉強したくなったら目標にするかもしれないです。<br>とりあえず今は、業務の効率化にフォーカスして構築などをしていきたいです（楽しい！）</p>

【ポエム】AWS SAAに合格したので振り返る

<h2 id="h8d027c8ed3">はじめに</h2><p>普段仕事ではLaravelを使ってバックエンドのエンジニアリングをしています。<br>フロントエンドは、jQueryのAjaxを改修する程度で、VueやReactなど最近のフロントエンドライブラリは使用したことがありません。<br>フロントエンドからバックエンド、AWSなどのインフラも自分ですべて使用できるようになり、自由自在にWebアプリケーションを作れたら楽しそうだなと思い、フロントエンドの勉強を始めました。<br>しかし、ハンズオン形式の書籍でReactの勉強を始めましたが、あまり楽しくありません。<br>そんな中、2023年2月頃からChatGPTやBing AIなどのAIチャットサービスが話題になりました。<br>ChatGPTを使ったら楽にWebサイトを作りながら、ReactやNext.jsの学習ができるのではないかと思い、ポートフォリオサイトの作成を開始しました。</p><h2 id="hb570a6676d">デザイン</h2><p>ポートフォリオサイトの見た目については、Figmaなどのデザインツールを使用せず、色々なポートフォリオサイトやTech Blogの見た目を参考にして考えました。<br>サイドメニューや全体レイアウトは<a href="https://jacekjeznach.com/" target="_blank" rel="noopener noreferrer">Jackさんのポートフォリオサイト</a>を参考にしました。<br>ブログ記事一覧ページは<a href="https://techblog.yahoo.co.jp/" target="_blank" rel="noopener noreferrer">Yahoo! JAPAN Tech Blog</a>を参考にしました。<br>他にも様々なポートフォリオサイトを参考にして実装しながらデザインを固めていきました。<br>Figmaなどのデザインツールも使用できれば良かったのですが、とりあえずChatGPTを使いながら実装したい！という思いから使用しませんでした。<br>次にWebアプリケーションを作成する際は、Figmaを使用して、Reactのコンポーネント設計に活かしたいです。</p><h2 id="h4db3ec6501">設計</h2><p>Next.js 13を使用したSSGのJamstackアーキテクチャにしています。<br>バックエンドAPIはmicroCMSを使用しています。<br>Next.jsのディレクトリ構成については、<a style="color:#0166cd" href="https://zenn.dev/mongolyy/articles/01f0a4375edb2e" target="_blank" rel="noopener noreferrer">Next.jsのディレクトリ構成を考えてみた</a>を参考にさせていただきました。<br>最近のフロントエンドは、バックエンドと同じような感じでクリーンなアーキテクチャにしているんだな～と思いました。<br>今後はこのポートフォリオサイトか別のWebアプリケーションでTypeScriptやtRPCを使用して、型安全な設計を試していきたいです。</p><h2 id="h922edff87b">実装</h2><p>ChatGPTに質問したことを一部抜粋して紹介します。</p><blockquote><span style="color:#343541">Q. 下記のコンポーネントを改良したいです。</span><br><span style="color:#343541">/aboutのページを開いているときには、Aboutのリンクの背景色が有効になるようにしたいです。</span><br><span style="color:#343541">他のページも同様です。</span></blockquote><pre><code>// components/NavItem.js
import Link from 'next/link';

const NavItem = ({ href, title }) =&gt; {
  return (
    &lt;&gt;
      &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
      &lt;Link href={href}&gt;
        &lt;a className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 
transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700
dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"&gt;
          &lt;span className="font-medium"&gt;{title}&lt;/span&gt;
        &lt;/a&gt;
      &lt;/Link&gt;
    &lt;/&gt;
  );
};

export default NavItem;</code></pre><blockquote><span style="color:#374151">A. 下記のコードでは、</span><code>NavItem</code><span style="color:#374151">コンポーネントが現在のページと一致する場合に背景色を変更するようになっています。</span><code>useRouter</code><span style="color:#374151">フックを使用して現在のページのパスを取得し、</span><code>href</code><span style="color:#374151">と一致するかどうかをチェックしています。</span></blockquote><pre><code>// components/NavItem.js
import Link from 'next/link';
import { useRouter } from 'next/router';

const NavItem = ({ href, title }) =&gt; {
  const router = useRouter();
  const isActive = router.pathname === href;

  return (
    &lt;&gt;
...</code></pre><p>また、ChatGPTにリファクタリングをしてもらいました。</p><blockquote><span style="color:#343541">Q. 下記のコードの繰り返し部分をコンポーネントにして簡潔に書き直せますか？</span></blockquote><pre><code>&lt;nav className="items-center"&gt;
            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
            &lt;Link
              href="/"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;Home&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
            &lt;Link
              href="/about"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;About&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;

            &lt;Link
              href="/skills"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;Skills&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;

            &lt;Link
              href="/work"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;Work&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;

            &lt;Link
              href="/contact"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;Contact&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;

            &lt;Link
              href="/blog"
              className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            &gt;
              &lt;span className="font-medium"&gt;Blog&lt;/span&gt;
            &lt;/Link&gt;

            &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
          &lt;/nav&gt;</code></pre><blockquote><span style="color:#374151">A. 繰り返し部分をコンポーネント化し、簡潔に書き直すことができます。まず、</span><code>NavItem</code><span style="color:#374151">というコンポーネントを作成します。</span></blockquote><pre><code>// components/NavItem.js
import Link from 'next/link';

const NavItem = ({ href, title }) =&gt; {
  return (
    &lt;&gt;
      &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
      &lt;Link href={href}&gt;
        &lt;a className="mt-5 flex transform items-center justify-center rounded-md px-4 py-2 text-gray-600 transition-colors duration-300
 hover:bg-gray-100 hover:text-gray-700
 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"&gt;
          &lt;span className="font-medium"&gt;{title}&lt;/span&gt;
        &lt;/a&gt;
      &lt;/Link&gt;
    &lt;/&gt;
  );
};

export default NavItem;</code></pre><blockquote><span style="color:#374151">次に、</span><code>NavItem</code><span style="color:#374151">コンポーネントを</span><code>nav</code><span style="color:#374151">タグ内で使用し、繰り返し部分を削除します。</span></blockquote><pre><code>// 例: components/Sidebar.js
import NavItem from './NavItem';

function Sidebar() {
  return (
    &lt;aside className="..."&gt;
      &lt;nav className="items-center"&gt;
        &lt;NavItem href="/" title="Home" /&gt;
        &lt;NavItem href="/about" title="About" /&gt;
        &lt;NavItem href="/skills" title="Skills" /&gt;
        &lt;NavItem href="/work" title="Work" /&gt;
        &lt;NavItem href="/contact" title="Contact" /&gt;
        &lt;NavItem href="/blog" title="Blog" /&gt;
        &lt;hr className="my-6 border-gray-200 dark:border-gray-600" /&gt;
      &lt;/nav&gt;
    &lt;/aside&gt;
  );
}

export default Sidebar;</code></pre><h2 id="h04c7045b97"><br>ChatGPTを使った学習</h2><p>ペアプログラミングをしてもらっているような感覚で質問ができました。</p><blockquote><span style="color:#343541">Q. routerオブジェクトにはpathnameの他にどのようなプロパティがありますか？</span><br><span style="color:#343541">よく使用されるプロパティを教えてください</span></blockquote><p><br></p><blockquote>A. <br><code>router</code>オブジェクトは、Next.jsのルーティングシステムで使用される多くのプロパティを持っています。以下は、よく使用されるプロパティの一部です<br><code>router.query</code>: 現在のページのクエリパラメータを含むオブジェクトです。例えば、URLが<code>/posts?page=2</code>の場合、<code>router.query</code>は<code>{ page: '2' }</code>を返します。<br><code>router.asPath</code>: 現在のページのパスとクエリパラメータを含む文字列です。例えば、<code>/posts?page=2</code>の場合、<code>router.asPath</code>は<code>/posts?page=2</code>を返します。<br><code>router.route</code>: 現在のページのルートパスを返します。これは、動的ルートパラメータを含むことがあります。例えば、<code>/posts/[id]</code>の場合、<code>router.route</code>は<code>/posts/[id]</code>を返します。<br><code>router.push(url, as, options)</code>: ページ遷移を実行する関数です。<code>url</code>は遷移先のページのパス、<code>as</code>は表示用のURL（オプション）、<code>options</code>は遷移オプション（オプション）です。この関数は、ブラウザの履歴スタックに新しいエントリを追加します。<br><code>router.replace(url, as, options)</code>: <code>router.push()</code>と同様にページ遷移を実行しますが、ブラウザの履歴スタックに新しいエントリを追加せず、現在のエントリを置き換えます。<br><code>router.prefetch(url)</code>: 指定されたURLのページリソースを事前にフェッチします。これにより、ページ遷移が高速化されます。<br><code>router.back()</code>: ブラウザの履歴スタックを1つ戻ります。これはブラウザの戻るボタンと同様の動作をします。<br>これらのプロパティとメソッドは、ページ遷移やURLの操作を簡単に行うためにNext.jsで提供されています。また、これらはクライアントサイドでのみ利用可能です。</blockquote><h2 id="h7934bd038c">ホスティング</h2><p>SSGのホスティングサービスは、下記のように様々あります。</p><ul><li>AWS Amplify Hosting</li><li>Netlify</li><li>Vercel</li><li>Cloudflare Pages</li><li>Github Pages</li></ul><p>AWSでインフラの勉強もしていきたいこともあり、今回はAWS Amplify Hostingを使用してホスティングを行いました。<br>ホスティングの方法についてもChatGPTに教えてもらいました。</p><h2 id="h9e71521451">ChatGPTでエンジニアリングする注意点</h2><h3 id="h5e1c5aa1bd">生成されたコードを何も考えずにコピペするとエラーや表示崩れが発生した際に困る</h3><p>これはChatGPTに限らず、ググってでてきたサイトからコードをコピペするときも同じでしょう。<br>ただし、ChatGPTはコピペしたコードを直さなくても良いくらい出来が良いコードを生成してくれることもあるので、より注意が必要かなと思いました。<br>生成されたコードを完成物ではなく、提案と捉えて、しっかり読んでから使用することが必要でしょう。</p><h3 id="hef92741d07">学習データが最新ではないので、新しいバージョンの開発ツールを使用している際には注意が必要</h3><p>ChatGPTのGPT-4モデルは、2021年の9月までの情報を元に学習されています。<br>今回、Next.jsのバージョンは13を使用していたので、ChatGPTで出力されたImageコンポーネントのコードはバージョン13では非推奨でした。<br>最新バージョンのライブラリやフレームワークを使用している際は、最新の書き方が出力されないと思った方が良いでしょう。</p><h3 id="h8a1c9f536a">出力された情報が正しいとは限らない</h3><p>学習データが最新ではないだけでなく、学習元のデータが正しいとも限らないので、出力された情報を鵜呑みにしないことが必要でしょう。<br>情報の裏取りや検証やレビューは、行う必要があるでしょう。</p><h2 id="h4706aa0328">今後実装したい機能</h2><p>ブログとしての機能が最低限なので、下記の機能を追加していきたいと考えています。</p><ul><li>記事へのコメント投稿</li><li>Zennのような目次メニュー</li><li>カテゴリ別記事一覧</li><li>Twitterへの共有ボタンとモーダルウィンドウ</li><li>記事を読むのに妨げにならない範囲での広告やアフィリエイト</li></ul><h2 id="h797b67caec">使用したツール</h2><ul><li>ChatGPT-plus（GPT-4モデル）</li><li>Tailwind CSS</li><li>Next.js13.2.4</li><li>Prettier</li><li>ESLint</li><li>microCMS</li><li>AWS Amplify Hosting</li></ul>

Tech Blog

2024年に頑張ったこと - 成長の軌跡

【ポエム】前期に会社で立てた目標の振り返り

【ポエム】2023年の振り返りと2024年の抱負

【ポエム】AWS SAAに合格したので振り返る

ChatGPTでJamstackなポートフォリオサイトを作成しました