noriyu.devのダークモード対応をした。 iOSとAndroid、ともに2019年からダークモード（Androidではダークテーマと呼ばれる）が実装されており、近年のwebサイトやモバイルアプリでは実装されてないとレガシー（？）と呼ばれているような気がする。 当サイトではTailWind CSSを利用しているのでダークモード対応はかなり簡単に実装できた。 私用のiPhoneは常にダークモードで運用しているため、ダークモード対応できていないアプリに遭遇すると「ウッ」となってしまう気がする。他の人はどういう運用をしているのか気になる・・・。

ダークモード対応

このサイトは成長途中なので日々アップデートを重ねる予定です。 例えばcssでダークモードの実装はなるはやでやりたいです。 そこで、<ul><li>何を修正したいか</li><li>どんな機能を追加したいか</li></ul>を何かしらの方法で管理したいと思います。 ソースコードをgithubで管理しているのでissueで管理するのが常套手段でしょうか？🤔 個人のサイトなので完璧に管理する必要はないのですが、その成長過程を表示するもの面白いと思います。 そこで、issueを使いつつ、そのissueを<a href="https://noriyu.dev/" target="_blank" rel="noopener noreferrer">noriyu.dev</a>に表示して今後何を改善していくのか見せようと思いました。 issueはpublicなものですし、このリポジトリはpublicなのでissueは簡単に取得できます。 <a href="https://github.com/y0303noki/noriyu-nextjs-app/issues/9" target="_blank" rel="noopener noreferrer">https://github.com/y0303noki/noriyu-nextjs-app/issues/9</a><pre><code>https://api.github.com/repos/$USER_NAME/$REPO_NAME/issues</code></pre> そこで、こんなふうにissueを取得してみました。<pre><code>export const getServerSideProps: GetStaticProps = async (context) =&gt; {
 const res = await fetch("https://api.github.com/repos/y0303noki/noriyu-nextjs-app/issues");
 const datas = await res.json();
 const issues = datas.map((data: any) =&gt; ({ title: data.title, body: data.body }));
 
 return { props: { issues: issues } };
};</code></pre> これでissue一覧を取得できました。<blockquote>&gt;&gt; [ { title: 'テスト', body: 'テストissueです' } ]</blockquote> 最初の改善機能として、この改善画面を作ることにしました。 <a href="https://noriyu.dev/kaizen" target="_blank" rel="noopener noreferrer">https://noriyu.dev/kaizen</a> <img src="https://images.microcms-assets.io/assets/a6ff5915fc864b40b1223678f4e2d2c9/e7c048036bb54a0bb5a04cbd8037e7b4/%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%202022-01-25%2023.06.57.png" alt=""> この画面を作り込むことを第一に取り組みます。 当プロジェクトはpublicなのでバグに気付いたり些細なひとことでも、 「ポートフォリオなのに○○ないの？」 みたいなのでもどんどん言ってくれると助かります。 <a href="https://github.com/y0303noki/noriyu-nextjs-app" target="_blank" rel="noopener noreferrer">https://github.com/y0303noki/noriyu-nextjs-app</a>

noriyu.devの改善管理

このサイトを作るために学んだこと、経緯などを書き記します。何を使って作ったか、フレームワークやサービスの話をします。 <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に手を出してしまってごちゃごちゃしてしまい。。。 情報収集にあたって何度も同じページを見てたりするので集約することが本目的です。 これは初投稿なのであまり技術の話をしないようにしておきます。 でもこのサイトを作りにあたって色々学んだので、それは別投稿にします。