テスト

このサイトを作るために学んだこと、経緯などを書き記します。何を使って作ったか、フレームワークやサービスの話をします。 <ul><li>Next.js</li><li>typeScript</li><li>tailwind CSS</li><li>microCMS</li><li>vercel</li></ul> を使用しました。typeScript以外は初めて触ります。 <h2 id="h4ba3e56be3">なぜNext.jsを利用したのか</h2> Zennやqiitaなどの技術記事を見てるとよく Next.js vs Nuxt.js の比較がされています。 どちらもよく知らないし、なんなら最初は「どっちかのタイプミス？」とでも思ってました。 細かい違いは他のサイトで見て欲しいのですが、浅いレベルでの理解は「ReactとVue.jsの違いなんだろうな〜」くらいでいいと思います。 ちなみにReactもVue.jsもほとんど触ったことがないので、比較サイトを見てもわからないし正直なんでも良いと思ってNext.jsを選びました。 別のサイトを作るときは勉強のためにNuxt.jsを使うかもしれません。 実務ではAngularを扱っているのでAngularで作るのが早そうなんですが、趣味で作っているんだしやったことないものを学ぶべきだろーと思ってNext.jsにしました。あと、Angularの勢いが落ちてるのもあります。 <h2 id="hc109f7ceca">Next.jsでアプリを作り始める前に</h2> 上述したように私はReactもほとんど知らない状態です。 そんな人がいきなりNext.jsで何ができるでしょう、何もできません。 「まずはReactだ！」と思い、Reactの公式チュートリアルから始めました。 チュートリアルは<a href="https://ja.reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener noreferrer">こちら</a> 三目並べゲームを作るものです。 チュートリアルは日本語もあり、一節が短いのですごくやりやすいものでした。 これを３時間くらいかけてReactの基礎の基礎を知れたのかなと思います。 そんなこんなでNext.jsのチュートリアルも続けて行いました。 大体勉強に丸一日かかってます。 <h2 id="h20d42ebafc">ブログの仕組み</h2> ブログ機能がない、ただのポートフォリオであれば簡単に作れそうです。しかしブログ機能のために毎回ソースコードをいじるのはダルそうです。スマホでサクッと記事の更新をしたい時もあるかもしれません。 結局、<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a>を利用することにしました。 ブログを書くときはmicroCMSの管理画面で書いて、それを公開すればnoriyu.devに自動で反映される仕組みです。 スマホでログインすれば記事が書けるのでとりあえずはこの方針に落ち着きました。 <img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/ffc13b1eafc64886ab732f0cf4332c60/IMG_FFA35859672A-1.jpeg?w=400&amp;h=866" alt=""> microCMSとNext.jsの連携はめちゃくちゃ簡単です。microCMS側が紹介してくれているので、この手順通りにやるだけでした。 <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog/</a> 記事を更新したときのAPI連携もここに載っています。 自分みたいな初心者にはとっつきやすくて良いなーと思いました🙏 <h2 id="hec95416674">今後</h2> 情報を詰め込みすぎた感があるので次からは細かく切り出そうと思います。 あと、今後このサイトもアップデートを重ねていくので最初の状態を記念に魚拓残しておきます。 これがどう変わっていくのか楽しみです。 魚拓 <img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/98218f5494d54eee9a05f83b52b7c948/IMG_6DAE8A180F5F-1.jpeg?w=400&amp;h=2000" alt="">

初めてのNext.js

このサイトを作りました。 作った理由と目的はいくつかあって、表向きは<ul><li>webの人間なのでwebアプリを作りたい</li><li>React(Next.js)を勉強したい</li><li>cssもあやふやなので勉強したい</li></ul> なんだけれども、それよりも情報の一元化をしたかったことです。 例えばSNSはTwitterとInstagramがあって、技術情報は<a href="https://zenn.dev/" target="_blank" rel="noopener noreferrer">Zenn</a>のスクラップに書こうと思ってました。 でも最近流行りのNotionに手を出してしまってごちゃごちゃしてしまい。。。 情報収集にあたって何度も同じページを見てたりするので集約することが本目的です。 これは初投稿なのであまり技術の話をしないようにしておきます。 でもこのサイトを作りにあたって色々学んだので、それは別投稿にします。