<h1 id="h860058ed7f">個人的にもさすがに納得</h1><p>3月もついに上旬に差し掛かり最近季節の変わり目かなとすごく感じる。<br>天気も晴れの日がここ毎日のように続いているしこれからも継続してほしいなと思っている！<br>早咲きの桜の方が咲き始め、実際に近くで見てみるととても綺麗だった🌸<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/5c5c4979c4f341969d705bb22b6760ca/69492AE5-1DB0-4352-8BD7-66FD4636E954_1_105_c.jpeg" alt=""></p><h2 id="hc69c85bcf9">背景</h2><p>まず、前回でさらにわかりやすくなってはいたがまだまだ改善の余地があると思ったのが理由になる。<br>さらに他のテックブログなども見てみると均等にわかりやすくなっているレイアウトも多々あったため、自分なりに修正して新しく利用しなおしたいと思った。<br>さらに、自分自身もこのレイアウトでブログを書いていると修正したくてたまらないのでやれる時にもう一度自分の納得するようなものに変更することができればいいなと思った。</p><h2 id="h01cb3c76e3">主な変更点</h2><ol><li>カテゴリーリストの追加</li><li>ルートページの大幅刷新</li><li>APIからのデータ取得周りの調整</li></ol><h3 id="hf739948d85">カテゴリーリストの追加</h3><p>これは最初の課題であり、前回も進めていこうと思っていた事項の一つ。<br>カテゴリー部分のデザイン周りもどのようにするべきかどうかが本当に悩んでいたが、改修する前までにカテゴリーページ自体は存在していたのでその時の機能を継承しつつ、新しく追加することができるようになったのでこれは個人的に大きな変更点とすることができたと思っている。</p><h3 id="h515379d375">ルートページの大幅刷新</h3><p>これも実際に見てもらえればわかるようなことになっている。<br>今まではカード型のデザインになっていたのに対して今度からはリスト型もミックスしてよりシンプルにわかりやすく自分が考えるデザインへ変更した。<br>またここのページがこのブログの顔となる部分になるのでここのところはさらにこだわっていきたいなと考えている</p><h3 id="h2598933a1b">APIからのデータ取得周りの調整</h3><p>これは次の記事などで記述させてもらおうと考えているが現在もかなり悩んでいる。<br>引き続きブログ継続のためにどのようなデータ取得が自分のブログには適しているかどうかを模索していきたい。<br>最近こういう部分も考えることができればよりユーザー経験が向上することができるように感じる。<br>気持ちいいしたまらない...</p><h2 id="h077e137261">残りの課題</h2><p>全てのページのデザイン周りが完璧でないのとまだまだ細かい部分に関しては全然できていないと思っている。<br>さらに１番の課題としては詳細ページの部分のデザインがかなり悪く目立ってきてしまっていると感じている。<br>今までは気になっていなかったが応急処置のようなデザインになっているのでそこの部分も修正することができるようになっている。</p><h2 id="h8d78e14043">感想</h2><p>最近、コンピューターサイエンスの部分をしっかりと学んでいきたいと思っているのにも関わらずあまり挑戦することができていないような気がする。ブログの改修ばかりをやっておりかなり凝ってしまうタイプなので自分の納得いく部分まで切り詰めたい<br>長く使っていくものでもあるので....<br>また、残りの期間も少しずつタイムリミットになっているのでそこの部分もしっかりと念頭にいれて1日1日を有意義な時間となるように後悔しないような期間を過ごしたい</p>

<h1 id="hb667bdd32f">Personally, I am indeed convinced.</h1><p>As we finally approach the beginning of March, I'm really feeling the change of seasons lately.<br>The weather has been sunny every day here, and I'm hoping it continues to be so!<br>The early blooming cherry trees have started to bloom, and it was actually quite beautiful to see them up close🌸.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/5c5c4979c4f341969d705bb22b6760ca/69492AE5-1DB0-4352-8BD7-66FD4636E954_1_105_c.jpeg" alt=""></p><h2 id="h8c1a16f7ea">Background</h2><p>First of all, the reason is that I thought there was still room for improvement, although it was even easier to understand last time.<br>Furthermore, when I looked at other tech blogs, I found many layouts that were equally easy to understand, so I wanted to modify the layout in my own way and use it anew.<br>Furthermore, when I was writing my own blog using this layout, I was eager to modify it, so I thought it would be good if I could change it again to something I would be satisfied with.</p><h2 id="h4c77cf6b37">Major changes</h2><ol><li>Addition of category listings</li><li>Major revamp of the root page</li><li>Adjustments around data acquisition from API</li></ol><h3 id="h56fa701bc5">Addition of category listings</h3><p>This was the first task, and one of the items we were planning to proceed with last time.<br>I was really struggling with how the design of the category section should be done, but since the category page itself existed before the renovation, I was able to inherit the functionality of that page and add a new one, so I think this could be a major change for me personally.</p><h3 id="h37574298c7">Major revamp of the root page</h3><p>This is another thing that you can actually see.<br>The design of the route page has been changed from a card-type design to what I consider a simpler and easier-to-understand design with a list-type design mixed in.<br>Also, this page will be the face of this blog, so I would like to pay more attention to this part.</p><h3 id="h0c7530f5a1">Adjustment of data acquisition from API</h3><p>I am still struggling with this issue, which I will describe in my next post.<br>I would like to continue to explore what kind of data acquisition would be suitable for my blog to continue.<br>I feel like I can improve the user experience if I can think about these aspects lately.<br>It feels good and irresistible...</p><h2 id="h9a5912e57d">Remaining issues</h2><p>The design of all the pages is not perfect, and I don't think I've done much in the way of detail yet.<br>The most important issue is that the design of the detail pages is becoming noticeably worse.<br>This was not a concern before, but it is now a first aid measure so that we can fix that part as well.</p><h2 id="h458e0d0ba6">Impressions</h2><p>Lately, I feel like I have been wanting to learn more about the computer science part of the project, but I haven't been able to challenge myself much. I'm all about blog modifications and I'm the type of person who gets pretty elaborate, so I'd like to cut down to the parts I'm comfortable with.<br>It's also something I'll be using for a long time: ....<br>Also, I want to spend the rest of the year with no regrets so that I can make the most of each and every day.</p>

結局自分が納得できるのが落ち着く

本当に最後のデザイン改修

Truly the last design renovation

<h1 id="hea91cee78d">ブログとしての使用感を上げるため</h1><p>今回もご覧いただきありがとうございます！<br>最近ようやく春って感じで来ているのでかなり充実した日々になっていますね〜！<br>しかも最近快晴と来ています。もう最高です🌞</p><h2 id="hd92040d0df">きっかけ</h2><p>昨日、本当に一年ぶりくらいにプログラミングを再開しました。<br>この期間は記事でも散々投稿させていただいていますがTOEIC学習を行っていたため、一切のコンピュータ関連の学習および開発を忘れて取り組んでいた背景があります。<br>そして昨日再開したのですが、久しぶりに軽いことからやっていこうと思ったのでその矢先にずっと修正課題だと考えていたブログの使用感やデザイン周りの調整をしようと思いました！</p><h2 id="h9eccdedcb0">デザインの振り返り</h2><p>まず今までのデザインを振り返ってみると<br><strong>初代</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/746dadbe73204d138a9f94c1e6563779/%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-03%2014.07.58.webp" alt=""><br><strong>2代目</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9a5fc8bb00104719a04a565a80be0d8b/%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-03%2014.08.48.webp" alt=""><br><strong>現在</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d5a9c75f0e4d4892912383de5b8aabb4/%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-03%2014.23.25.webp" alt=""><br>となっており、どのようなデザイン部分がより見やすいかを模索しつつ、バグなどは極力減らしつつ進めています。</p><h2 id="h81fe8ce460">主にやったこと</h2><ol><li>ダークモードの追加</li><li>遷移先構成の統合</li><li>全体的なUXの向上</li></ol><h3 id="h09b07b24be">ダークモードの追加</h3><p>多分これが一番目に見えてわかりやすい変化になっていると思います。<br>自分のブログはtailwindCSSとSCSSを使っているので、かなり柔軟に色の変化なども出しやすかったです！<br>これは元々自分が必要で自分の使うツールは全てダークモード化されているので自分のブログもしたいと思いました。<br>さらに、reduxにでダークモードの有無の状態管理を使っているのであまり難しくなくスムーズに実装することができました</p><h3 id="h868da12fc9">遷移先構成の統合</h3><p>これも前のブログを見ていただいていた方ならわかるかもしれませんが、メニューバーは削除しました！<br>理由としては自分もそうですが見る立場で考えたらメニューバーを通さず流動的に記事を見ていくと思ったからです。<br>さらに翻訳とダークモードのみを残すことによってさらに使いやすくなっていると思います。<br>そして他のページの遷移は極力減らしてかつ、パフォーマンスはなるべく落とさないということを重視しました。<br>なので検索などもホーム画面でできるように統合しました。（ここの部分が多分一番大変だった...）</p><h3 id="hfabbc0eaa7">全体的なUXの向上</h3><p>これは完全に自分の肌感です。<br>以前と比べて、かなりやりたいことを直感的に行うことができるようになったなと個人的には感じています。<br>さらに遷移画面も極力減らしたのでやりたいことをより簡単にできるようになったと思います！<br>ページが無題に多い総合的なことはこのブログには合わないですね....</p><h2 id="ha214098e44">まとめ</h2><p>しかし、まだ課題があって以前あったカテゴリー部分は取り除いてあります。<br>これに関しては実装課題ということにしておいて今の状態でデプロイしてしまいました！<br>時間があるときに取り組んでいこうと思っています。<br>実装に関してはあまり難しくないように頭の中の想定ではあるので思い立ったら多分やります。</p>

<h1 id="ha8846b99d8">To improve its use as a blog</h1><p>Thanks again for taking a look at this one!<br>It's finally starting to feel like spring these days, so my days have been pretty full~!<br>And it's been sunny and sunny lately. It's already the best 🌞.</p><h2 id="hee8bc9bed6">Trigger</h2><p>Yesterday, I resumed programming for the first time in about a year.<br>As I have posted many times in my articles, I had been studying for the TOEIC during this period, so I had forgotten about any computer-related learning and development.<br>I decided to start with something light for the first time in a while, so I decided to make some adjustments to the feel and design of the blog, which I've been thinking of fixing for a long time!</p><h2 id="h9baf8654dd">Design Reflection</h2><p>First, let's look back at the designs to date<br><strong>1st generation</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/746dadbe73204d138a9f94c1e6563779/%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-03%2014.07.58.webp" alt=""><br><strong>Second generation</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9a5fc8bb00104719a04a565a80be0d8b/%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-03%2014.08.48.webp" alt=""><br><strong>Current</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d5a9c75f0e4d4892912383de5b8aabb4/%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-03%2014.23.25.webp" alt=""><br>We have been seeking for the best design parts to make it easier to see, while reducing bugs as much as possible.</p><h2 id="h55ad71e7ed">Main things we did</h2><ol><li>Addition of dark mode</li><li>Integrated transition destination configurations</li><li>Improved overall UX</li></ol><h3 id="he88b47ab41">Add dark mode</h3><p>This is probably the most visible and obvious change.<br>My blog uses tailwindCSS and SCSS, so it was pretty easy to be flexible and add color changes!<br>I originally wanted to do this for my own blog as well since I needed it and all the tools I use are dark mode enabled.<br>In addition, I used redux to manage the state of the dark mode, so it was not too difficult to implement smoothly.</p><h3 id="ha2d9254463">Integration of destination configurations</h3><p>If you've been following my previous blog, you might know that I removed the menu bar!<br>The reason for this is that I, as well as the viewer, thought that I would be able to view articles fluidly without going through the menu bar.<br>Furthermore, by leaving only the translation and dark mode, I think it has become even easier to use.<br>I also focused on minimizing the number of transitions to other pages, while keeping the performance as low as possible.<br>We also integrated search and other functions on the home page. (This part was probably the hardest part...)</p><h3 id="haae052060c">Improvement of overall UX</h3><p>This is completely out of my own skin.<br>Compared to the previous version, I personally feel that it is now possible to do what I want to do quite intuitively.<br>Plus, I've reduced the number of transition screens as much as possible, which I think makes it easier to do what I want to do!<br>Comprehensive with a lot of untitled pages is not a good fit for this blog. ....</p><h2 id="he26af36bce">Summary</h2><p>However, there are still some issues and the category section that was there before has been removed.<br>I've left this one as an implementation issue and deployed it in its current state!<br>I will work on it when I have time.<br>I have an assumption in my head that it shouldn't be too difficult to implement, so I'll probably do it when I think of it.</p>

あとでご報告させていただきますが、これからは少しズクブログの更新頻度が高くなっていくと思うのでご了承いただけると幸いです🙇‍♂️
最近ブログの構築について改めて見直していたのですが思ったより酷いものになっているなと思い、昨日の夜中に頭ガンガンで構築し直しました！
やっぱり自分が納得構成の方がテンション上がりますね〜！！

よりブログっぽく構築し直した

Restructured to look more like a blog.

<h1 id="h58d51c6909">いつも本当にありがとうございます！</h1><p>おかげさまで無事に１周年を迎えることができました！<br>ちょうど一年前に技術をキャッチアップすることが好きだと実感することができるようになってからどのようにアウトプットできるかと模索して思いついたのがこのブログでした。<br>その日に思い立ってから16時間ぐらいぶっ通しでコードを書き続けた記憶しかありません🧑‍💻<br>まだまだブログとしての完成度は低いと思いますが、長い目で目でいただけると幸いです。</p><h2 id="hf62b1e9823">今年の目標</h2><ol><li>運動をしっかりと行う</li><li>さらに色々な知見を深めていきたい</li><li>英語学習</li><li>プライベート部分で全力で楽しむ</li></ol><h3 id="h2f57fa0e3f">運動をしっかり行う</h3><p>ここ一年くらいはほとんど毎日椅子に座っていて、ろくに運動していない日々が続いていたので少し太ってしまっている部分があります。<br>このような部分は将来的な生活の健康習慣にも結びついているのでそこの部分はしっかりと徹底していこうと思います。<br>元々運動が大好きでずっと高校まで運動一筋だったので今でも時々とても色々なことをしたくなったりするので、友達とサッカーしたりジムでの筋トレを再開したりなど少しでも健康的な生活をします。</p><h3 id="h33186c6f93">さらに色々な知見を深めていきたい</h3><p>たくさんのことを学んでいきたいと思っています。特に深めたいのはコンピューターサイエンスの部分です。一概に分野が広すぎるのですが体系的に学んでいこうと思っています。元々個々の分野をしっかりと学習せずにやっている部分があって、コンピュータという本質の部分が少し疎かになっている気がします。何かと本質的なので応用することもできるのではないかなと思っています！</p><h3 id="h7baea18a51">英語学習</h3><p>これは一年間のTOEICを通じて思ったことです。正直英語って自分は難しく感じてしまっている部分がまだまだあって、なんでこの単語でこんな意味なんだ？みたいなことは全然あるのですが、役立つこともあってそれは英語が結論から述べるような言語だと思っているので自分自身も日頃から何を伝えたいのかを明確化することができるようになったと感じています！<br>完全思い過ごしかもしれませんが、リスニングとかは洋楽を浴びるように毎日聞いているのでもっと聞き取れたらさらに楽しくなるんだろうなと思います。</p><h3 id="h7d1b829326">プライベートを全力で楽しむ</h3><p>本当に色々とやりたいことがあります。特にやりたいのはスカイダイビングです🌥<br>結構旅行などの非日常的なことも楽しんでいければさらに面白いと思います。<br>そのためにもやるべきことはしっかりとこなしてその上でなんの不安もなく楽しめることがベストだと思うのでしっかりと徹底することができればさらに楽しいかもしれません〜！<br>とりあえず、今やることを淡々とこなして休日は全力で遊びます。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4837c128c75c4c44a4d48e72183c16da/IMG_2421.JPG" alt=""></p><h2 id="h3bcda3e6b0">最後に</h2><p>このブログを通じてまだまだ伝えたいことはたくさんあるのですが、自分の中で整理しきっていない部分が多いのでそこの部分をより追求することができるようになれば、人間的にもより言語化の部分も上手くなるのかなとつくづく実感しています。<br>そういう部分も踏まえても色々な経験をしてアウトプットできればと思います！</p>

<h1 id="h2b72e27af1">Thank you so much for everything!</h1><p>Thanks to all of you, we have successfully celebrated our first anniversary!<br>I came up with the idea of this blog exactly one year ago when I was looking for a way to output what I had learned to love catching up on technology.<br>I can only remember writing code for about 16 hours straight after I came up with the idea that day. 🧑‍💻<br>I know it is not yet a complete blog, but I hope you will take a long look at it.</p><h2 id="h2e81fc4a39">Goals for this year</h2><ol><li>Exercise well</li><li>I want to further my knowledge</li><li>Learn English</li><li>Enjoy the private life to the fullest</li></ol><h3 id="h67749168f6">Exercise well</h3><p>For the past year or so, I have been sitting in a chair almost every day and have not been exercising much, so I have gained some weight.<br>This is a part of my life that is tied to my future health habits, so I will make sure to be thorough in that area.<br>I have always loved exercise and have been an athlete all the way through high school, so even now I sometimes feel like doing a lot of different things, like playing soccer with friends or resuming strength training at the gym.</p><h3 id="hf97166d1b9">I want to further my knowledge.</h3><p>I would like to learn many things. In particular, I would like to deepen my knowledge in the area of computer science. It is too broad a field to cover in general, but I would like to study it systematically. I have been working in this field for a long time without really learning the individual fields, and I feel that I have neglected the essential aspects of computer science. I'm hoping that something so essential that I can apply it!</p><h3 id="hd79bb98fbc">Learning English</h3><p>This is what I thought through TOEIC during the year. To be honest, there are still parts of English that I find difficult, and there are things like "Why does this word mean this? But there are some things that are useful, and that is because I think English is a language where you have to start from the conclusion, so I feel that I am now able to clarify what I want to say on a daily basis!<br>It may be a complete oversimplification, but I listen to Western music every day, so I think it would be even more enjoyable if I could hear more.</p><h3 id="h9e593e393b">Enjoy my private life to the fullest</h3><p>There are so many things I really want to do. What I especially want to do is skydiving 🌥.<br>I think it would be even more interesting if I could enjoy extraordinary things like traveling quite a bit.<br>I think it would be best if I can do what I need to do and enjoy it without any worries, so if I can be thorough, it might be even more fun!<br>For now, I will do what I have to do now and play as much as I can on my days off.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4837c128c75c4c44a4d48e72183c16da/IMG_2421.JPG" alt=""></p><h2 id="h2b0c1613ea">In closing</h2><p>There are still many things I want to convey through this blog, but there are many areas that I have yet to fully organize. I really feel that if I can pursue these areas more, I will be able to become better at verbalization as a human being.<br>I hope to have many more experiences and outputs in this area as well!</p>

おかげで１周年経ちました！
もう過ぎてしまっていたりしますが💦
いつも記事を見てくださってありがとうございます。
今年もたくさんのことをインプットしてこのブログを通じてアウトプットできればと思っています！

開設してから１周年！

One year since we opened!

<h1 id="hf9d943c003">休止のお知らせ</h1><p>いつも見ていただきありがとうございます！<br>そして、最近記事を投稿できず本当に申し訳ありません！！</p><h2 id="h9a2a602093">TOEICの忙しさが本格化</h2><p>今までもかなり勉強していたのですが<br>最近モチベーションがすごい高いこともあり1日の大半の時間を英語学習に費やしています。<br>その勢いが切れることなく継続できている状態でありこの状態をキープし続けたいと考えているため一時的に休止させていただきます。<br>体調などに関しても至って健康で前の記事でも書かせていただきましたが、最近外で勉強する機会がとても増えたため家ではなく外での勉強生活となっているため周りの雰囲気などがモチベーションになって励むことができています💪<br>点数自体も少しづつですが右肩上がりになっており、勉強法などもようやく確立されつつあります。<br>とにかくこの流れを壊さないように頑張ります！！！<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ff355649663949ba85e698c4b632c04f/marvin-meyer-SYTO3xs06fU-unsplash.jpeg" alt=""></p><h2 id="h3cdf938d50">お礼</h2><p>正直自分は今が正念場だと思っているのでここで自分の今やるべきことを止めるわけにはいかないと思っています！<br>妥協はいつでもできますからね笑<br>英語は将来自分に何らかの形かで役に立つだろうと思っているので今自分がやるべきことを最大化することができるように努力したいと思います。<br>お互いがんばりましょう〜〜！！</p>

<h1 id="hdebae0ce81">Suspension Notice</h1><p>Thank you for always watching!<br>And I'm so sorry for not being able to post an article lately! !</p><h2 id="hf425c559e3">Busyness of TOEIC is in full swing</h2><p>I've been studying a lot so far.<br>Recently, my motivation is so high that I spend most of my time learning English every day.<br>We are in a state where we can continue without losing momentum, and we would like to continue to maintain this state, so we will temporarily suspend it.<br>Regarding my physical condition, I am very healthy and I wrote about it in the previous article, but recently I have had more opportunities to study outside, so I am studying outside instead of at home, so the atmosphere around me is my motivation. 💪<br>The scores themselves are slowly rising, and the study methods are finally being established.<br>Anyway, I will do my best not to break this flow! ! !<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ff355649663949ba85e698c4b632c04f/marvin-meyer-SYTO3xs06fU-unsplash.jpeg" alt=""></p><h2 id="hdf0ec9860b">Thanks</h2><p>To be honest, I think that now is the critical moment, so I don't think I can stop doing what I need to do now!<br>You can always compromise lol<br>I think that English will be useful to me in some way in the future, so I would like to try to maximize what I need to do now.<br>Let's do our best together~~! !</p>

本当にお久しぶりです！
そして全然投稿できずにすいません！！
自分の方は相変わらず元気です。
けれど、英語学習が少し忙しいのであまり投稿できずにいるといった状態になっています。
この勉強と学生時代ももうすぐで終わってしまうのでそれまでの辛抱だと思って頑張りたいと思っています🔥
無事に終了したらまたたくさん描きます！
テックブログとして機能するために笑

しばらく休止します。

Pause for a while.

<h1 id="hf51bcc8ff0">Day23</h1><p>本日も記事を読んでいくださりありがとうございます！<br>本日の趣旨はタイトルにもあると通り、英語の学習というよりはプログラミングの1日という感じになっています。<br>英語は完成次第にやることができると思うのでよかったら見てみてください！</p><h2 id="hcaa90397d4">作ったもの</h2><p>自分のプロフィールサイト：　<a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">こちらから！</a></p><h2 id="hc69c85bcf9">背景</h2><p>自分自身、このブログ以外にもう一つAcvationというプロダクトを開発しているのですが（矛盾しているのですが現在は英語学習のため休止中です。）今後、さらに発展していくとなるとポータルサイトのように自分自分自身を知ってもらえるようなものを作った方がいいのかも思っており、作っています。<br>また、デザイン部分のコンセプトも変更していてどのようにしたいのかどうかから考えていたのでより直感的にわかりやすいサイトになっていると思います笑<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/14aadbc5ff5f44579bf6afee6edd2e4a/logo.webp" alt=""></p><h2 id="h61c96fc883">制作背景</h2><p>どのようなデザインにするかなどは開発しながら適時変更をおこなってきました。<br>後日、テックブログとして技術的な部分のお話の記事も出したいですね！<br>作成時間はその日の夜中の2時から初めてその日の20時間ぐらいまでぶっ通しで開発して作成したので18時間ぐらいですかね。<br>英語もこのぐらい集中できれば無双できると思うんですけどね。<br>技術選定以外にもデザインが本当に重要だと最近実感しているので自分の満足したものが作れたのはでかいです。</p><h2 id="h8d78e14043">感想</h2><p>このポータルサイトを自分のサービスを結ぶ中心として配置しようと思っています。<br>ある意味マイクロサービス化されているかもしれませんね。<br>また、これでインスタグラムなどのサイトでURLを一つしか共有できないのでこのサイトを選択できるようになったのもいいです。<br>とりあえず作って後悔がないのと<br>やりたかったことを完成させたのでさらに、英語へ集中できる思います。</p>

<h1 id="hf51bcc8ff0">Day23</h1><p>Thank you for reading today's article!<br>As the title says, the purpose of today's article is a day of programming rather than learning English.<br>I think you can do the English as you complete it, so have a look if you like!</p><h2 id="h3eeb47e8d8">What I made</h2><p>My profile site: <a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">click here!</a></p><h2 id="h8c1a16f7ea">Background</h2><p>In addition to this blog, I am also developing another product called Acvation, which I am currently pausing to study English. I think that if I am going to develop further in the future, it might be better to create something like a portal site where people can get to know about myself, and I am creating it.<br>I also changed the concept of the design part of the site and thought about how I wanted the site to look like, so I think the site is now more intuitive and easy to understand.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/14aadbc5ff5f44579bf6afee6edd2e4a/logo.webp" alt=""></p><h2 id="hd272603b30">Background of the project</h2><p>We made changes to the design as we developed the site.<br>I would like to write an article about the technical aspects of the site as a tech blog at a later date!<br>I started at 2:00 a.m. that night and worked on the site until about 20 hours later that day, so I think it took me about 18 hours to create the site.<br>If I could concentrate this much on English, I think I'd be a Muso.<br>I have recently realized that design is really important in addition to technical selection, so it was great to be able to create something that I was satisfied with.</p><h2 id="h458e0d0ba6">Impressions</h2><p>I am planning to place this portal site as a center to connect my services.<br>It may be microserviced in a sense.<br>I also like that this allows me to choose this site since I can only share one URL on sites like Instagram.<br>At any rate, I have no regrets about making it and<br>I can now concentrate on my English language skills since I have completed what I wanted to do.</p>

こんにちは！
昨日は体調を崩して書くことができず本当にすいません！
ちゃんとよく寝て体調は無事に回復したので本当によかったです。
そこで思ったのは最近英語に集中できないのは学生時代にプログラミングを通してやりたいことがあったから。
といことで、自分の作りたいものを1日で完成させました。

やりたいことを完成させました。　Day23

We completed what we wanted to do Day23

<h1 id="hd2c91c24e4">経緯</h1><p>このブログサイトを作っていて、4月から本格的に英語対応も考えて作成しているのですが、とにかく表示の部分はこだわりたいと思っていました。<br>せっかくのモダンないい技術を使っているのでUX部分もこだわりたいと考え今回Reduxに置き換えようと思いました。</p><h2 id="h06d509ef43">技術選定の部分</h2><p>元々の要件として</p><ul><li>Booleanの英語かどうかを持つステートを管理するだけであり、これからもプロダクトとして発展することはない</li><li>アプリケーション全体を管理できる状態管理ライブラリを使いたい</li><li>前にRedux使ったことがあるけど、Toolkitってどうなのかな？オールインワンらしいし笑</li></ul><p>みたいな感じで今回はRedux Toolkitにしました。</p><h2 id="h4b595f28ba">実際に書いたコード</h2><p>自分は技術を使うときは公式サイトのから入る派なので公式サイトを使ってやりましたが、公式より簡単な実装？になっていると思います。<br><a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank" rel="noopener noreferrer">参考サイトはこちらから</a></p><h4 id="h3742206c9f">npmでパッケージのインストール</h4><pre><code>$ npm install @reduxjs/toolkit react-redux</code></pre><p>で必要なライブラリを入れましょう！</p><h4 id="h2babd1c053">ストアの作成</h4><p>今回は概念などについては省かさせていただきます。。。<br><strong>src/store.ts</strong></p><pre><code>import { configureStore } from '@reduxjs/toolkit';
import englishReducer from './features/english/englishSlice';


export const store = configureStore({
  reducer: {
    english: englishReducer,
  },
});


// ストアから `RootState` と `AppDispatch` の型を推論する。
export type RootState = ReturnType&lt;typeof store.getState&gt;;
export type AppDispatch = typeof store.dispatch;</code></pre><p>みたいな感じで実装します！</p><h4 id="h21a729ff58">アプリケーション全体で管理できるようにプロバイダーの読み込み</h4><p><strong>src/pages/_app.tsx</strong></p><pre><code>import { store } from '../store';
import { Provider } from 'react-redux';

// return分の中のデフォルトのコンポーネントタグを装飾してください！
&lt;Provider store={store}&gt;
        &lt;Component {...pageProps} /&gt;
&lt;/Provider&gt;</code></pre><p>みたいな感じです！</p><h4 id="hb88510e370">スライスの作成</h4><p><strong>features/english/englishSlice.ts</strong></p><pre><code>import { createSlice } from '@reduxjs/toolkit';


export interface EnglishState {
  value: boolean;
}


const initialState: EnglishState = {
  value: false,
};


export const englishSlice = createSlice({
  name: 'english',
  initialState,
  reducers: {
    changeLanguage: (state) =&gt; {
      state.value = !state.value;
    },
  },
});


// action creater = reducer functionごとに生成される
export const { changeLanguage } = englishSlice.actions;
export default englishSlice.reducer;</code></pre><p>みたいな感じです！</p><h4 id="h5e7f74556f">最後にそれぞれのページで記述するのみ！</h4><p>例：　<strong>src/components/Button.tsx</strong></p><pre><code>import { NextPage } from 'next';
import { useDispatch, useSelector } from 'react-redux';
import { changeLanguage } from '../features/english/englishSlice';
import { RootState } from '../store';


interface ButtonProps {}


const Button: NextPage&lt;Props&gt; = () =&gt; {
  const english = useSelector((state: RootState) =&gt; state.english.value);
  const dispatch = useDispatch();
// english value
console.log(english)
  return (
    &lt;button
      onClick={() =&gt; dispatch(changeLanguage())}
    &gt;
    &lt;/button&gt;
  );
};


export default Button;</code></pre><p>みたいな感じで値を確認できます！（後日しっかりとした解説ができる機会があればやらせていただきます。）</p><h2 id="h8d78e14043">感想</h2><p>英語化するのはIssueの一つでもあったので無事に解決することができて良かったです。<br>やっぱりRecoilなりReduxなりかなり使いやすくPropsバケツリレーを防げるというメリットがあって可読性を含め使いやすいのでこれからも導入していこうと思います。<br>これからも改善すべきことなどがあれば教えていただけると幸いです🍴</p><h3 id="hb8c2aee1f1">英語版ログ</h3><p>probably -&gt; <strong style="color:#19283c">たぶん</strong><span style="color:#19283c">,おそらく,十中八九は</span><br>explained -&gt; <strong style="color:#19283c">説明する</strong><span style="color:#19283c">,explainの過去形、または過去分詞</span><br>implement -&gt; <strong style="color:#19283c">道具</strong><span style="color:#19283c">,用具,器具,用具一式,手段,手先</span><br>decided -&gt; <strong style="color:#19283c">はっきりした</strong><span style="color:#19283c">,明確な,決然とした,断固とした</span><br>concepts -&gt; <strong style="color:#19283c">構想</strong><span style="color:#19283c">,発想,コンセプト,conceptの複数形</span><br>explanation -&gt; <strong>説明</strong>,解釈,釈明,弁解</p>

<h1 id="hba03327eac">How is started</h1><p>I am building this blog site and have been creating it since April with full English support in mind, I wanted to focus on the display part anyway.<br>Since we are using good modern technology, we wanted to focus on the UX part and decided to replace it with Redux this time.</p><h2 id="hd7e678d66d">Technology Selection Section</h2><p>The original requirement was that </p><ul><li>It only manages the state with Boolean or not and will never develop as a product.</li><li>I want to use a state management library that can manage the entire application.</li><li>I've used Redux before, but what about Toolkit? I hear it's all-in-one. lol</li></ul><p>I went with Redux Toolkit this time like so.</p><h2 id="h56db24d5c7">Actual code written</h2><p>I am the type of person who starts from the official site when using technology, so I did it using the official site. I think it's a good idea.<br><a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank" rel="noopener noreferrer">Click here for reference site</a></p><h4 id="hada13a5083">Installing packages with npm</h4><pre><code>$ npm install @reduxjs/toolkit react-redux</code></pre><p>to put in the libraries you need!</p><h4 id="hcd406dea14">Store Creation</h4><p>I will not go into the concepts this time...<br><strong>src/store.ts</strong></p><pre><code>import { configureStore } from '@reduxjs/toolkit';
import englishReducer from './features/english/englishSlice';


export const store = configureStore({
  reducer: {
    english: englishReducer,
  },
});


// Infer `RootState` and `AppDispatch` types from the store.
export type RootState = ReturnType&lt;typeof store.getState&gt;;
export type AppDispatch = typeof store.dispatch;</code></pre><p>I'll implement something like that!</p><h4 id="he4709a02a7">Loading providers so they can be managed throughout the application</h4><p><strong>src/pages/_app.tsx</strong></p><pre><code>import { store } from '../store';
import { Provider } from 'react-redux';

// Decorate the default component tag in the return minute!
&lt;Provider store={store}&gt;
        &lt;Component {...pageProps} /&gt;
&lt;/Provider&gt;</code></pre><p>I'll implement something like that!</p><h4 id="h620c18f5ab">Creating a slice</h4><p><strong>features/english/englishSlice.ts</strong></p><pre><code>import { createSlice } from '@reduxjs/toolkit';


export interface EnglishState {
  value: boolean;
}


const initialState: EnglishState = {
  value: false,
};


export const englishSlice = createSlice({
  name: 'english',
  initialState,
  reducers: {
    changeLanguage: (state) =&gt; {
      state.value = !state.value;
    },
  },
});


// action creater = generated per reducer function
export const { changeLanguage } = englishSlice.actions;
export default englishSlice.reducer;</code></pre><p>I'll implement something like that!</p><h4 id="haa5fb1af94">Only describe it on each last page!</h4><p>例：　<strong>src/components/Button.tsx</strong></p><pre><code>import { NextPage } from 'next';
import { useDispatch, useSelector } from 'react-redux';
import { changeLanguage } from '../features/english/englishSlice';
import { RootState } from '../store';


interface ButtonProps {}


const Button: NextPage&lt;Props&gt; = () =&gt; {
  const english = useSelector((state: RootState) =&gt; state.english.value);
  const dispatch = useDispatch();
// english value
console.log(english)
  return (
    &lt;button
      onClick={() =&gt; dispatch(changeLanguage())}
    &gt;
    &lt;/button&gt;
  );
};


export default Button;</code></pre><p>I can check the values like that! (I will do this when I have a chance to give a solid explanation at a later date.)</p><h2 id="h458e0d0ba6">Impressions</h2><p>It was one of the Issue to be translated into English, so I am glad we were able to solve it successfully.<br>I will continue to use Recoil and Redux because they are quite easy to use and have the advantage of preventing Props bucket relays, and are easy to use, including readability.<br>I hope you will continue to let me know if there are any improvements that need to be made!🍴</p>

本日は多分立て続けの投稿になっていると思います。🙇‍♂️
前日の投稿でもご説明させていただいた通り、昨日の睡眠時間が長すぎて全然寝れません。
そのため、英語学習の息抜きに前から実装しようと思っていたReduxでのアプリケーション全体のステートへ変更しました！

Next.js + Redux-toolkitで英語表示を完結した話

Next.js + Redux-toolkit to complete the English Display

<h1 id="h074d11aeda">改めてご挨拶</h1><p>お久しぶりです！<br>この記事から本文の部分でも英語で自分なりに考えて書いていきたいと考えております。<br>（今まではDeepL使って翻訳していたのは内緒です💭）<br></p><h2 id="h466aae930b">内容に関して</h2><p>現在どのような内容を記述していこうか検討しているのですが、<br>自分なりに考えているのは最近興味を持つことが多いトピックや自分の勉強の振り返り<br>乱暴に利用している参考書などから学ぶことができた知見などを記述していこうと考えております。<br><strong>なるべく参考書で学んだ言葉なども多発したり、勉強ノートに立ったりすると思うのでそこの部分はご容赦いただけると嬉しいです。</strong><br><br>⬇︎現在、Youtubeなどから仕入れた乏しい知識で購入した参考書たち<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ad3bd6809bbd4f989c917d809a12d472/IMG_1517.webp" alt=""><br></p><h3 id="hd264b50d46">お願い</h3><p>自分自身ご存じだと思いますが、英語に対しての抵抗が強いのと今まであまり勉強してこなかったため<br><strong>勉強法そのものを知りません</strong>☔️<br>もしこれからの日記の中でこうした方がいいのではないかやこうしたらさらに効率的などがあれば教えてほしいです！！<br></p><h2 id="h8d78e14043">感想</h2><p>また、周りに英語学習をしている人がとても少ないこともありモチベーションていう部分もまだまだ低いのが現状です。<br>（実際に3月から勉強を始めようと思っていたのにもう今月が終了していました。日が過ぎるのって早いですよね笑）<br>今後ともどうぞよろしくお願いいたします！！！！</p>

<h1 id="hcdc8c1fbcc">Greetings again</h1><p>Long time no see!<br>I would like to write my own ideas in English in the text section from this article.<br>(Don't tell me you used to translate using DeepL.💭)<br></p><h2 id="hbe3caefaf8">Regarding contents</h2><p>I'm currently considering what kind of content to describe.<br>My own ideas are topics that I have recently become interested in and reflections on my own studies.<br>I am thinking of describing what I have learned from the reference books that I use wildly.<br><strong>I will try my best to use words I have learned from reference books, and I will stand in my study notes, so I hope you will forgive me for that.</strong><br><br>⬇︎Reference books currently purchased with the scant knowledge I have acquired from Youtube and other sources.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/ad3bd6809bbd4f989c917d809a12d472/IMG_1517.webp" alt=""><br></p><h3 id="hdfc3d01896">Request</h3><p>As you probably know yourself, I have a strong resistance to the English language and have not studied much in the past.<br><strong>I dont know how to study itself.☔️</strong><br>If you have any suggestions for future diaries that might be better or more efficient this way or that, I'd love to know!<br></p><h2 id="h176b4bb99f">Inpressions</h2><p>Also, there are very few people around me who are learning English, so my motivation is still low.<br>(In fact, I was planning to start studying in March, but this month has already ended. The days go by so fast, don't they?)<br>Thank you for your continued support!</p>

先日の記事でも投稿させていただきますが
自分自身この度英語の学習日記を始めていきたいと考えております。
主にTOEICを中心に一年間で800点取得します。
ぜひアドバイスや勉強法などがあればご連絡の程よろしくお願い申し上げます💨

英語学習の日記を始めます。

Start an English study diary.

<h1 id="hd264b50d46">お願い</h1><p>現在、記事の開発を中断しています。<br>自分自身新卒入社するにあたって必要な勉強があるため、エンジニアリングのアウトプットも<strong>中断</strong>しております。<br>しかし、勉強につかれたときはコードを書いたりトレンドをキャッチアップしていたりするのでもしかしたら再開もあるかもしれませんが頻度は落ちてしまいます😢<br>自分自身、アウトプットすることがとても好きなので今やならないけば行けない課題をなるべく早く片付けられるようにして一日でも早く再開できることができるように尽力します。<br>ぜひ応援していただけると幸いです💦<br>いつも記事を楽しみにしていただいている方及び参考にしていただいている方には大変恐縮ですがご容赦頂ければ嬉しいです。<br>何卒よろしくお願いします！<br>自分も頑張るので一日でも早く再開できるように楽しみにしていてください！！！</p>

現在、新卒で就職するにあたってエンジニアリング以外の部分で必要な勉強があるためそちらにコミットしている関係もありアウトプットを中断しております。


※Acvationの開発及びテックブログの開発を中断しています。

Development of Acvation.com and the Techblog has been suspended.

<h1 id="h3a3eee698e">複数のおかしい挙動や機能の連続</h1><h2 id="h4b2374c25c">フォードバックをいただいて気づくことができたこと</h2><p>少し自分の軸やどういうエンジニアを目指しているのかどうかをお話しさせてください。<br>自分が目指しているエンジニアは技術はもちろんなのですが、それよりもプロダクトに対して適切な技術を用いてアプローチして</p><ul><li>この機能を実装したらユーザーにとってどのような恩恵があるのか</li><li>今のニーズに応えるにはこんな機能が必要だからこの技術を用いて開発する<ul><li>実装のコストやパフォーマンスの部分も考えられたらよりいい</li></ul></li></ul><p>など今この記事を書いているときには他にももっとたくさんあるのですが<br>何が言いたいかというと<strong>ユーザー目線で考えられてプロダクトとして愛されるようなものづくりをするエンジニア</strong>を目指しています。（自分ではそう思っています）<br>そう考えたときに今回のプロダクトの技術選定として自分は当初<br><strong>最初にある程度の技術を用いてリリースした方がいい</strong>と考えていたのですが<br>知人にフィードバックをいただいたときに<br><strong>「実際に利用してもらってフィードバックをいただいた方がユーザーに求められていることを知ることができるのではないか」</strong><br>とアドバイスをいただきました。</p><h3 id="h19e02269a3">目指していた軸が少しぶれていた、、、</h3><p>自分が今回のプロダクトを通して本当にしていたいのは<br><strong>自己満のためのプロダクト</strong>　← とにかくどれだけ時間がかかってもいいから難しい技術を採用して見せつけようとする<br>みたいな方に少しズレていたような気がして振り返ったときに自分が本当に作りたいもに対して考えてみると<br><u>実際にユーザーにプラットフォームとして提供していただいてリアルに少しでも喜んで欲しい</u><br>という自分の経験をもとにそもそも作り始めているものでもあるので改めて原点回帰できてとても良かったのと<br><strong>定期的に周りの人にフィードバックしてもらって自分のアプリの軸と実際に作っているものが客観的にズレていないかどうか</strong>を確認することが必要だったと思います。<br>このことを初めの段階でフィードバックしてもらったからこそ気がつくことができた部分だと思います。</p><h2 id="h729c1e6bf9">デザインが本当に苦手</h2><p>これは少しずつ改善しようと思っているのですが<br>本当に自分がデザインする必要があるのか？　← ということがいつも頭の片隅にあり結局全然進捗しない<br>ということを最近特に思っていて<br>自分のプロダクトではtailwindCSSを用いてスタイリングをしているのですが<br>本当に基礎的な部分しかわからない部分があって<br>せっかく一つのライブラリでスタイリングを完結することができるのに<br>結局<strong>Sass</strong>を使って一部すたリングされています。<br>具体的に話させていただくとリッチエディタ部分は全てSassです。<br>理由としては二つあって</p><ol><li>自分自身が全然CSSのことをよく知らない<ol><li>元々Flexあたりから訳が分からなくなって逃げていました</li></ol></li><li>リアルタイムでWatchして適切なスタイリングに変換する必要がある<ol><li>Tailwindでもいいが分割できないということが裏目に出てしまってわかりづらいものになっている</li></ol></li></ol><p>といった理由があります。<br>そんなわけでTailwind ± Sassのような構成になっており、ベストプラクティスな構成なのかどうかが分からないのでアドバイスいただけたら幸いです🙇‍♂️<br>実際に一例としては</p><pre><code>.rich-editor
	    &amp;__header
	        background-color: rgb(204, 205, 207);
	        min-height: 5vh;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	        font-size: calc(10px + 2vmin);
	        color: white;
	        margin-bottom: 5vh;
	        text-align: center;
	        border-bottom: 2px solid rgb(86, 86, 87);
	        margin-top: 5.2rem;
	    &amp;__wrapper-class
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &amp;__editor-class
	        background-color: #f7f4f4;
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &amp;__toolbar-class</code></pre><p><br>のようにコーディングしています。リッチエディタ全体のコーディングの部分です。<br>これから実際にはここにクラスを定義しなくてもファイル側に直接コーディングするのでも良かったような気はします。<br>それか<strong>JSX</strong>ファイルとして分割する方法もあったかもしれません。。。。<br>いずれにしろ頭の中で考えてみるとたくさんの意見ができて、本当に自分の実装がこれで良かったのかと振り返ると自信がないです。<br>もし自分がフロントエンドエンジニアを目指すとして画面の部分のUXの部分をしっかりとこなすことはもちろんですが、ある程度デザインの知見や考え方がないと自分のためにもプロダクトとしてもいいものができないと改めて実感しました。</p><h3 id="hc2955fb743">実はヘッダー部分はまだまだ問題だらけなんです</h3><p>ログイン後のここの部分は現在はゴリ押しになっていて<br>理由として<strong>モーダル時の表示が画像があると隠れてしまうようになっている。</strong><br>といった仕様に現在はなっています。。。。<br><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/3753e750488641c9bac91ed6808e07c7/%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-02-14%201.57.32.png" alt=""><br>ふかぼるとまだまだ実装できていない場所などもありますが現在はこれにとどめておいて優先度高くこなしていこうと思います。</p><h2 id="ha214098e44">まとめ</h2><p>まだまだこのプロダクトはベータ版もできていないようなものにはなっていますが作りたいものの軸がぶれないことが大切だと思っています。<br><br>また本日SNSなども作ったのでよければフォローしてください！！<br></p><ol><li>インスタグラム　← <a href="https://www.instagram.com/acvation">こちらから！</a></li><li>ツイッター　← <a href="https://twitter.com/acvation" target="_blank" rel="noopener noreferrer">こちらから！</a></li><li>Slack ← <a href="https://join.slack.com/t/acvation-dev/shared_invite/zt-13iz0dhwj-tOw8PXHo1EAd~EYKqOlW2g" target="_blank" rel="noopener noreferrer">こちらから参加できます！</a><ol><li><strong>Slack</strong>に関しては入って直接アイデアやフィードバックをいただいても構いません。。。</li><li>お願いします✋</li></ol></li></ol><p><br>是非よろしくお願いします。</p>

先月までレスポンシブ対応をされていないからスマホだと操作することができない。
一部の部分がビルドしてデプロイしても途中で途切れるといったユーザーを待たせてしまう処理がある。
機能として使いずらい部分がとても多く、使っていたくはなくなる。
など、実際に周りの方に利用していただいてさまざまなフィードバックをいただきました。
今回はそれを含めて一度レスポンシブに対応できる前提でリプレイスしようと思って取り組んでいた
まとめになります📓

Acvationリプレイスしました。

Acvation replaced.

<h1 id="hc315754485">開幕</h1><p>早くも2月になってしまいました、、、、！<br>一月は何か特別なことをやったかというとなんもしてないかったと振り返って虚しくなる今日この頃です。<br>（大学の期末課題出すのを忘れて確実に単位落としていることに気づきました🎒）<br>しかも、お正月太りをしてしまいもうわけわかんないです笑<br></p><h2 id="h071ecc4617">Acvation開発したい</h2><p>自分は元々、大学在学中に一つのプロダクトを作り上げることを目処にこのプロダクトを一人で実装しています！<br>が、最近すごくサボっていて自分が以前どのようなコードを書いたのか忘れているような状況でした。<br><br>ちなみに最後にDevブランチにプッシュしたの16日前という放置をしていました。息混んでいたのに情けない、、、、<br>というわけでこの機会に元々デザイン部分がひどかったということもあり、もう一度作り直したいと思ったのがきっかけです。<br></p><h1 id="h49153b7347">ここから本題！デザインのお話👨</h1><p><br>まずみてもらいたいです。<br>元々のデザインを<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9614929ebdb749f99eb8047ea70917d4/%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-02-01%203.38.55%EF%BC%882%EF%BC%89.png" alt=""><br>これが元々のページです。<br>これだけなら自分自身は、<strong>正直あまり悪くもない、かもなく不可もない状態</strong>だと思います。（デザインセンスないからこれが精一杯です。。。これでも相当頑張っていたと思います。）<br></p><h3 id="h6b59ec7197">しかし！！！！！！！！！！！！</h3><p>レスポンシブで見てみましょう<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/49270d5c50cc49b9b75578df28e4d554/%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-02-01%203.43.34%EF%BC%882%EF%BC%89.png" alt=""><br>What???<br>これはまぁなんでしょう〜〜<br>なんと画像部分が邪魔をしていて<strong>ログインボタンさえも押せない</strong>のです！！！<br>これは大問題なのはわかっています。<br>原因の方もわかっています。<br></p><h2 id="h8f3266c02e">Next.jsのImageタグ問題</h2><p>自分自身本当にNext.jsにお世話になっており、Imageコンポーネントも同様です。<br>簡単に自分が思いつくだけでも</p><ul><li>ブラウザによってはwebpに変換して出力してくれる</li><li><span style="color:#111111">遅延読み込みは自動的に行ってくれる</span></li><li><code>objectFit="cover"</code><span style="color:#111111">とかいう使いやすいのがしっかり標準装備</span></li><li>画像のクオリティまで指定できるとかいうおもてなしっぷり</li></ul><p>改めて本当に便利なものだと実感しています！！<br>しかし<br><strong>全部画像周り自動でやってくれないかな〜</strong>とかいう魔法を信じている自分にとってはとても難しい設定となっており、<br>故に詰まることがとてもたくさんあると思っています。<br>さらに、自分の認識が正しければ<br>pxしかできない　or　<code>layout="fill"</code>しか設定できないというダブルパンチ👊<br>こりゃ自分には厳しいな〜と改めて実感してました。。。<br><br>ざっとこんなことがあったのでしっかりと作り直そうかなと思いました！<br>（自分の基準ではログインボタンが押せればいいぐらいを想定していました笑）<br></p><h2 id="he1c7a63b51">いざ実装</h2><p>自分のこのプロダクトは<strong>tailwindCSS &amp; Sass</strong>で全て書いています。<br>正直自分自身今でも上手くは使いこなせていないのですが</p><ul><li>サンプルコードがかなりある</li><li>痒いところに手が伸ばしやすい</li><li>補完の部分で実際にどのような定義がされているのか確認できるのでImageコンポーネントのwidthとheight設定の時に役立つことが多い</li></ul><p>などあってこれからもしばらくはこれを使っていこうと思います。<br>しかし、動きを出そうとすると結構難しかったりするんですよねこれが、、<br></p><h2 id="hf04a4ef95b">便利なライブラリ見つけた！？</h2><p>公式ドキュメント：　https://headlessui.dev/<br>こちらのサイトです！<br>どうもtailwindと関係深いらしくとても簡単に記述するだけではなく独自のクラス名などがなく利用できるのでとてもおおすすめです！<br>特に一部の部分は参考にするだけでCSSなどの知識などもつけることができるので学べることがとても多いものになっています。<br>自分も実際にf<strong>lex部分の知見が全くない</strong>のでこれを通して一部の部分はflex縛りで実装しました😀<br></p><h2 id="h417ee6002e">結局のところ</h2><p>1月最後の夜の時間を使い実装していました。　← こんなんやってないで課題やっておけばと後悔しています笑<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e39df46d602f4867b611f62e07a7dc0e/%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-02-01%204.07.31.png" alt=""><br>こんな感じで綺麗め系のデザインになりました。<br>正直自分はこれを作るのでも相当苦労しました。<br><strong>marginとpaddingしかわからない</strong>自分にとっていい経験になったと思います。<br>またレスポンシブについても<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/af7247281d7f422796e67c7f65e60650/%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-02-01%204.10.42.png" alt=""><br>こんな感じで作ることができるようになって、やっとログインボタンが改善されました笑<br></p><h2 id="h28b62bc2c0">今後の課題</h2><p>一つとてもでかい問題があって<br><strong>レンダリングの速度がすこぶる悪くスコアがとても低い</strong>ことです。<br>このプロジェクト自体はNext.jsで実装しているのですが<br>パソコンの方は95点以上は安定して取れるようになっていますが<br>モバイルの方が<strong>64点</strong>と意味わかんないくらい問題がたくさんあるので修正するようです。</p><blockquote>もし実装のヒントなどがあればぜひ教えてほしいです🙇‍♂️</blockquote><p>また、フロント側の知識自体もまだまだ上手くできていない部分しかなくて<br> メモ化やキャッシュなども考えればパフォーマンス的にも良くなると思います。。。！<br><br>引き続き修正します。<br>もし技術的な部分も記事などのリクエストなどがあれば書こうと思うので何卒よろしくお願い申し上げます。</p>

自分自身Acvation.comという
肌悩みに悩む人を結びつけることができるようなプラットフォームを開発しています。
その中でもちろん一人で開発することになっているので
フロントとバックエンド側は実務経験の問題もあり割と順調に開発することができるのですが
今まで逃げてきたデザイン部分が苦手な人の1月最後のお話です😭

Sota Tech Blog.

本当に最後のデザイン改修

よりブログっぽく構築し直した

開設してから１周年！

しばらく休止します。

やりたいことを完成させました。 Day23

やりたいことを完成させました。　Day23