<h1 id="he7a8e9e3f5">あっという間</h1><p>もう5月も終了して6月に入ってしまった。<br>本当に充実した1ヶ月だと思う。<br>もちろん楽ではない毎日だったけど、その分さまざまな経験ができたと感じたので良かった。<br>また、真剣に引越しをしてからやることが増えつつありプライベートでもバタバタしていた。</p><h2 id="hb3c1d6b8b4">キャッチアップの日々</h2><p>一番印象深いことは覚えることがたくさんあった。<br>また、少しずつ技術書が貯まっているので読み進めていたりもした。<br>プロジェクトの開発をしていたが、<br>どのように自分のやりたいことを言語化することが出来るようにするかやせっかく学んだ英語をどのように表現することが出来るのかなど、どうやってという疑問がたくさんあった気がする。<br>また、日々の経験を通して少しずつ自分なりの解決方法を模索することが出来た時は達成感が半端ないということも肌で感じることができた。<br>今後さまざまな経験や新しい経験がさらに増えていくと思うのがどんどん吸収して新しい価値観や考え方などを知ることができればと思っている。</p><h2 id="hc095e460be">体調壊した</h2><p>以前もブログで書いたがかなり免疫力が落ちてしまっていると感じている。<br>こないだも朝起きているだけど前日の疲れが溜まっていたりしているのでかなりの運動不足やだらけすぎなのかもしれない。<br>最初は無理しなくていいのでジムで筋トレや近所の公園で散歩などを再度再開できればと思っている。<br>そして早く以前のように痩せた容姿になりたい。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2ea8ea3d4d9493ab7b1e6b01e1109ef/IMG_4541.webp?w=800&amp;h=600" alt=""></p><h2 id="h2edb22eb4d">趣味の開発</h2><p>これといった趣味がないというのが最近の悩みだった。<br>大学の頃はプログラミングや英語学習でやらなければいけないような環境だったので特に何も考えず没頭していたが、<br>せっかくの20代の時間を有意義に過ごそうと思った時に、何か新しいことをやってみたいと考えるようになった。<br>そこで今までにない新しい趣味の模索をした。</p><h3 id="h840422ffd8">筋トレは安定でいい</h3><p>自分の中で趣味として有意義なのは運動と筋トレ、などの自己投資をやった時が一番罪悪感がない。<br>その中でも筋トレは特に自分の体として実際に効果を実感することが出来て、それだけの結果や達成感を味わうことが出来るので本当にいい暇つぶしだと思ったと同時にジムに行く費用はもちろんバカにならないがそれ以上にやって良かったと改めて思っている。</p><h3 id="h92d9ea20c0">新しい趣味のブログを開発中</h3><p>最近思っていることとしてうまく整理することが出来ていないような状態になっていると思っている。<br>何もプログラミングなどの話ではなく自分の学んだ情報や技術などを正しい引き出しに収納することが出来ていないような感覚がある。<br>実際にこのブログに関しても最初は技術専門の発信するブログにしようと思っていたがちょうど英語学習と重なり逆にプログラミングやコンピューターサイエンスを学ばなくなってしまったので結局プライベートにも関わるようなブログなどのなってしまっている。<br>そこら辺を最近学びたい技術や深めたい事柄が増えてきたいので新しい技術を学んだら実際にアウトプットできればと思っている。</p><h2 id="ha214098e44">まとめ</h2><p>驚くべき出来事の毎日だが、今が人生でも結構の正念場だと思うで後悔するくらいならやるだけやっていこうというメンタルで引き続きやっていこうと思う。<br>また、最近雨なり無性に暑かったりなどここ数年なかったような現象も起きているので体調管理はしっかりしていこうと思う。<br>結局はやりたいことをやって後悔しない20代にしていきたい。</p>

<h1 id="h2d059bd004">It's been a blink of an eye</h1><p>May is already over and we're into June.<br>I think it has been a really fulfilling month.<br>Of course, every day was not easy, but I am glad that I was able to experience so many things.<br>Also, I was getting more things to do since I seriously moved out, and my personal life was also a flurry of activity.</p><h2 id="h10830b156c">Catching up days</h2><p>The most impressive thing was that I had a lot to learn.<br>I also had a little bit of technical books stored up that I was reading.<br>I was developing projects,<br>I think I had a lot of questions about how I could verbalize what I wanted to do and how I could express myself in English, which I had learned a lot.<br>I also felt a sense of accomplishment when I was able to find my own solutions little by little through daily experiences.<br>I am sure that I will have many more experiences and new ones in the future, and I hope to absorb more and more of them and learn new values and ways of thinking.</p><h2 id="hd1cac664ef">I got sick.</h2><p>As I have written in my blog before, I feel that my immune system has been weakened considerably.<br>The other day, I woke up in the morning and was still tired from the previous day, so I may have been lacking in exercise or just being around too much.<br>I'm hoping to resume muscle training at the gym and taking walks in the neighborhood park, etc. again.<br>And I hope to look as thin as I used to be soon.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2ea8ea3d4d9493ab7b1e6b01e1109ef/IMG_4541.webp?w=800&amp;h=600" alt=""></p><h2 id="ha4c879e293">Developing a Hobby</h2><p>I have been suffering from a lack of hobbies lately.<br>When I was in college, I was immersed in programming and learning English without thinking about anything in particular because I was in an environment where I had to do it,<br>When I decided to spend my spare time in my 20s in a meaningful way, I began to think about trying something new.<br>So I explored new hobbies that I had never tried before.</p><h3 id="h1b7733be6f">Muscle training is good for stability.</h3><p>I feel the least guilty when I do self-investment, such as exercise and muscle training, which are the most meaningful hobbies for me.<br>Among them, I thought that muscle training is a really good way to pass the time, especially since I can actually feel the effects as my body and experience the results and sense of accomplishment of it. At the same time, I am again glad that I did it, even though the cost of going to the gym is of course not ridiculous, but more than that.</p><h3 id="h829c28eccc">Developing a new hobby blog</h3><p>I've been thinking lately that I'm in a state where I can't seem to organize well.<br>I am not talking about programming, but I feel as if I am not able to store the information and techniques I have learned in the right drawers.<br>In fact, I had intended this blog to be a technical blog at first, but I have been learning English and not programming or computer science anymore, so it has ended up being a blog about my personal life.<br>Recently, I would like to learn more about the technologies and matters that I want to deepen, so I hope to actually output when I learn new technologies.</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>Everyday is an amazing event, but I think this is a critical point in my life, so I will continue to do it with the mentality that I would rather do it than regret it.<br>Also, I will try to take good care of my physical condition since we are experiencing phenomena that we haven't seen in the past few years, such as the rain and the uncontrollable hot weather.<br>In the end, I want to do what I want to do and not regret it in my 20s.</p>

少し忙しかったけど有意義な日々だった

5月の振り返り

May Review

<h1 id="h19006e7e21">最近の体調の変化</h1><p>最近体調を崩すことがとても多いような気がする。<br>今年に入ってインフルエンザにもかかり、去年の夏にもコロナウイルスにかかり最近体調がすこぶるよろしくない。<br>今まではしっかりと運度する習慣があった関係なのか、ほぼ体調を崩すこともあまりなかったのでそこの部分は致命的だと感じる。<br>現在も風邪をひいており、病気が治るのも少し前に比べ明らかに遅くなっており、当日のコンディションに大きく反映されているので少し危機を感じている。</p><h2 id="h5c7f3bd5dc">環境の変化の速さ</h2><p>最近関西に引っ越した。<br>今までは関東圏にいたが初の関西圏だったので最初は不安だったが最近慣れることがようやく出来つつある今日この頃である。<br>時系列で振り返ってみると</p><ol><li>今年の3月上旬まで ... 大学のあった神奈川に在住</li><li>3月末まで ... 実家のある北関東に在住</li><li>4月末まで ... 東京に在住</li><li>今月から ... 大阪に在住</li></ol><p>とここ2ヶ月で4都道府県を跨って生活していたことになる。<br>そのため、それぞれでの地域の土地勘の把握や一番大変だったのが引越しに伴う引越しの荷造りや手続きの多さに疲れ果てた。<br>さらに、契約することがたくさんあるので料金面を含めて改めて大変だと感じる。<br>逆に捉えると短期間でさまざまな一人で生きていく耐性がさらについた気がするのでどこでも生きていけるような気分😌<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/7717978cab1e423bafba4801c294e257/IMG_4477.webp?w=800&amp;h=600" alt=""></p><h3 id="h4c0642e141">プライベートの環境構築</h3><p>今までも一人暮らしだったので経験していたが、改めて引っ越してからの最初に物を揃えることが一番大変だと思う。<br>洗濯機やWIFI、布団やごみのルールなど覚えなければいけないことややらなければいけないことがとても多い。<br>それに加えて後で市役所に行って住民票の変更などやらなければいけないことはたくさんあるなと感じる。</p><h2 id="h187d3f60b7">予防策</h2><p>再度運動を始めようと思っている。<br>具体的に言うと筋トレをまた始める。<br>理由は手軽に始めることが出来るし、やらなければいけないことなども習慣化しやすくダイエットにもなるので自分にとってさまざまなメリットがあるように感じる。<br>ちなみに近くのジムに通おうと思っているが、とても綺麗でタオルも無料で借りることが出来そうなので気に入っている。</p><h2 id="ha214098e44">まとめ</h2><p>現在も絶賛体調を崩しているのでまずはそちらを優先して直していきたい。<br>また、やりたいことを最近できずにいるので興味のある分野などのキャッチアップなどもさらにこなすことが出来るようにしたい。<br>また引越しに伴い友達などもほとんど関東圏にいることもあって一人の時間が多いので新しい趣味などを見つけることができればいいなと思っている。<br>時間と体力が欲しいです。<br></p>

<h1 id="h24fb340e51">Recent changes in my physical condition</h1><p>I seem to be getting sick very often these days.<br>This year I had the flu, and last summer I had the coronavirus, and my health has been very poor lately.<br>I have been in the habit of taking good care of myself, and I have not been sick very often, so I feel that this is fatal.<br>I am still suffering from a cold, and my recovery is clearly slower than it was a little while ago, which is reflected in my condition on the day of the event, so I am feeling a little threatened.</p><h2 id="h17e9feefc7">Rapid Change of Environment</h2><p>I recently moved to the Kansai region.<br>I had been in the Kanto area, but this was my first time in the Kansai area, so I was worried at first, but recently I am finally getting used to it.<br>Let's look back in chronological order.</p><ol><li>Until early March of this year ... Living in Kanagawa, where the university was located.</li><li>Until the end of March ... Living in northern Kanto, where my parents live.</li><li>Until the end of April ... Lives in Tokyo</li><li>From this month ... Living in Osaka</li></ol><p>In the past two months, I have lived in four different prefectures.<br>Therefore, I was exhausted by the amount of packing and procedures involved in moving to a new place and understanding the local area in each of them.<br>In addition, there are many contracts to sign, so I once again felt that it was very difficult, including in terms of fees.<br>On the other hand, I feel that in a short period of time I have become more tolerant of living on my own, and I feel like I can live anywhere 😌.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/7717978cab1e423bafba4801c294e257/IMG_4477.webp?w=800&amp;h=600" alt=""></p><h3 id="h5a15e6bb42">Building a private environment</h3><p>I have lived alone before, but once again, I think the hardest part is getting things in order at the beginning after moving in.<br>There are so many things you have to remember and do such as washing machine, WIFI, bedding, garbage rules, etc.<br>In addition to that, I feel that there are many things I have to do later, such as going to the city hall to change my resident registration card.</p><h2 id="hac4408c94a">Preventive measures</h2><p>I am going to start exercising again.<br>To be more specific, I am going to start muscle training again.<br>The reason is that it is easy to start, and I feel that it has various advantages for me because it is easy to make a habit of what I have to do, etc. and also to lose weight.<br>By the way, I am thinking of going to a nearby gym, but I like it because it is very clean and I will be able to borrow towels for free.</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>I am still in a bad shape, so I want to fix that first and foremost.<br>Also, I have not been able to do the things I want to do recently, so I want to be able to catch up on the things I am interested in.<br>Also, since most of my friends are in the Kanto area due to the move, I spend a lot of time alone, so I would like to find new hobbies and interests.<br>I would like to have more time and energy.</p>

ようやくそろそろ安定するはず

環境の変化と免疫の低下

Environmental changes and reduced immunity

<h1 id="h2728e97741">第一回</h1><p>※何かあれば一番下のコメント欄からコメントしてほしい。バグ、説明不足、知見不足なんでも大丈夫！！<br>今日Firebase functionsってなんだ？ってなった。ということで、Firebaseを学んでいきたい。<br>せっかくなので前回作ったJestの学習用を利用したい。<br>前回の記事のリンクかこちらの<a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">リンク</a>をクリックしてもらえれば使用することができる。<br>前回の記事を参照してもらえたらわかるがJestを追加しただけなのでそれ以外は一切いじっていない状態である。</p><h2 id="hb00339748d">完成リポジトリ</h2><p>この<a href="https://github.com/sasaki-sota/try-nextjs-firebase" target="_blank" rel="noopener noreferrer">リンク</a>から確認できる</p><h2 id="h0ef859a5d4">環境構築</h2><pre><code>$ cd ~/Desktop/ &amp;&amp; mkdir learning &amp;&amp; cd learning &amp;&amp; git clone https://github.com/sasaki-sota/try-nextjs-jest.git &amp;&amp; mv try-nextjs-jest/ try-nextjs-firebase &amp;&amp; cd try-nextjs-firebase &amp;&amp; npm i &amp;&amp; npm run dev</code></pre><p>もちろん個別に分けてコマンド実行しても大丈夫！<br>ただ、Nodeの実行環境がインストールされていることとMac PCが対象ということはご容赦いただきたい。<br>この長ったらしいコマンドは学習用のフォルダを作って前回の自分のGItのリポジトリをクローンしてFirebase用に命名変更してパッケージをインストールして開発サーバーを立ち上げている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%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-05-07%2011.42.46.webp" alt=""><br>この<a href="http://localhost:3000/" target="_blank" rel="noopener noreferrer">リンク</a>で昨日と同じこの画面が立ち上がるはず。</p><h2 id="hdae96c1772">Firebaseの導入</h2><h3 id="hbe10bea12e">プロジェクトの作成</h3><p><a href="https://console.firebase.google.com/u/0/" target="_blank" rel="noopener noreferrer">Firebaseの公式ページ</a><br>このリンクからFirebaseのプロジェクトを作成していく</p><h4 id="h64217aad77">プロジェクト名の作成</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f82390d3d3be41f8b386acf2c76783eb/%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-05-08%2020.31.19.webp" alt=""><br>ここのプロジェクト名はなんでも大丈夫だけど、リポジトリ名と被らせたほうがわかりやすいと思う！</p><h4 id="h968a201e7e">アナリティクスの設定</h4><p>長期的に利用していくなら有効にして、今回のハンズオンのような場合だったら無効が最適だと個人的には考えている。<br>ちなみに自分は無効にする。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/dd588bfac6084d0892bf0c840fadf6ce/%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-05-08%2020.34.55.webp" alt=""><br>作成されるとこんな感じで表示される。</p><h3 id="hbd67f5c1b9">Next.jsでFirebaseを利用できるように準備する</h3><p>今回はフロントエンドで利用するのでWeb版を選択する。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/46de10bd877045d3a92446d26f8bc35c/%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-05-08%2020.37.42.webp" alt=""></p><h4 id="h147e6b163c">アプリ名の登録</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/337fa469fafe483687b44501d18fa110/%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-05-08%2020.40.06.webp" alt=""><br>ここのニックネームの部分に関してもどういう名前でもいいが自分は今回はリポジトリ名と同じにする。<br>またHostingの設定に関しては、デプロイする予定があるなら有効にすればいいと思う。<br>基本的にチェック作るところは後からでも設定することが出来る部分が多いのであまり気にしなくて平気だと個人的には思う。</p><h4 id="h1fb875b41d">SDKの追加</h4><p>先ほどの名前を登録できたらSDKが発行されるのでありがたく利用させていただく。<br>ターミナルの方で</p><pre><code>$ npm install firebase　&amp;&amp; touch firebase.ts</code></pre><p>Firebaseのパッケージをイントールするが少し時間がかかると思う。</p><h4 id="h984572b3a0">.env.local</h4><pre><code>NEXT_PUBLIC_FIREBASE_API_KEY="Describe apikey here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Describe authDomain here"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Describe projectId here"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Describe storageBucket here"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Describe messagingSenderId here"
NEXT_PUBLIC_FIREBASE_APP_ID="Describe appId here"</code></pre><p>envファイルはGitignoreというファイルによってプッシュされるのが無効化されているため、APIキー防止のためにローカル環境のみとする</p><h4 id="he11b7c2001">firebase.ts</h4><pre><code>// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);</code></pre><p>これでWebアプリで使用するFirebaseの初期化が完了となる</p><h2 id="h32d9fc105e">エミュレーターの設定</h2><h3 id="h4ac9514f41">エミュレーターとは</h3><p><a href="https://firebase.google.com/docs/emulator-suite" target="_blank" rel="noopener noreferrer">公式ドキュメント</a><br>Firebaseの各それぞれのサービスが正確に再現されるように構築された開発環境のことである。<br>難しく言っているが要するに本番環境のデータに影響を与えることなく、それぞれのサービスにローカルで直接接続し、QAテストやユニットテストを実行することが出来るツールである。<br>現状では以下のプラットフォームにてサポートされている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2f549e396ae43daa7b7130bd3d251ef/%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-05-08%2023.22.57.webp" alt=""></p><h3 id="h031c8eaa2d">構築をする</h3><p>まず、最初に大事なこととしてNode.jsのバージョン14.8以上、JavaのJDKバージョン11以上が必須であり、エミュレーターはこの二つに依存して起動する。<br>また、Firebaseコマンドが必要なのでリンクからそれぞれのOSに合わせて構築してほしい。<br>ちなみに自分はNode.js18であり、Macのため</p><pre><code>$ npm install -g firebase-tools</code></pre><p>このコマンドを利用することで構築することができた。<br>また、バージョンアップなどもこのコマンドでできるので便利である。<br>おそらく全てのOSでNodeのバージョンに問題がなければ上のコマンドでインストールすることが出来ると思う。<br>コマンドがインストールすることが出来たら</p><pre><code>$ firebase login
i&nbsp; Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.


? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i&nbsp; To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:</code></pre><p><br>上のようにするとYesを選択するとFirebaseからGoogleの認証ページにリダイレクトすると思うのでそこの部分でFirebaseにログインしているアカウントを利用できれば成功できると思う。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/036cea8bcc16432287685e755d5de38c/%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-05-08%2023.39.41.webp" alt=""><br>無事に作成されていることを確認するため</p><pre><code>$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬─────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────┼────────────────┼──────────────────────┤
│ try-nextjs-firebase&nbsp; │ try-nextjs-firebase │ 8536234976&nbsp; &nbsp; &nbsp;│ [Not specified]&nbsp; &nbsp; &nbsp; │
└──────────────────────┴─────────────────────┴────────────────┴──────────────────────┘


1 project(s) total.</code></pre><p>と入力し自分が靴ったものが無事にあれば問題ない。</p><h2 id="h6a08b68088">それぞれのサービスの初期設定</h2><p>実際にFirebaseのコンソール画面に行って各種サービスの設定をする。</p><h3 id="hc3bd5f627a">Firestore</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4fee3d8d07d9476f8cd80e632070ee06/%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-05-08%2023.53.14.webp" alt=""><br>ここの部分からテストモードで開始するを選択し、日本に住んでいるならasia-northeast1または2を選んでおけば問題ないと思う。<br>設定が終了し、この画面になれば完了である。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/21a846ca33da4c6493e4d8cad603ff12/%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-05-08%2023.56.42.webp" alt=""></p><h3 id="h6c11353d22">Storage</h3><p>これも以下の部分から始めるをクリックする。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/91ef88f0ab7d4abe8bc8aac81225ebd7/%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-05-09%200.05.24.webp" alt=""><br>こちらもテスト用のモードを利用し、ロケーションはFirestoreのものが設定されていると思うので大丈夫。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/0760a77aca954df5bf1681d97a28c0a2/%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-05-09%200.06.36.webp" alt=""><br>上記の画面になれば設定完了である。</p><h3 id="hb286712a4a">初期化をする</h3><pre><code>$ firebase init</code></pre><p>そのままだが上記のコマンドで初期化する。<br>最強のGUIを表示してくれるので今回利用する範囲のものを選択してほしい。<br>自分はFirestoreのOnsnapshotを利用するのとGithubアクションはいらないと思っているのでそれ以外のところにチェックした。<br>また、後で記述するがFunctionsとHostingが現状はまだ必要なさそうなので、FirestoreとStorageを利用した際に使いたい。<br>そしてその機能の拡張サービスとしてFunctionsの方は利用していきたい。<br>スペースキーで選択、矢印キーで移動になっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1059f751703844f6bf23b97ead383b59/%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-05-09%200.15.00.webp" alt=""><br>セットアップに関しても以下のようにして既にある先ほど作ったプロジェクトを利用するのがいいと思う。<br>FirestoreとStorageのセットアップの部分はそのままエンターを押してもらって構わない。<br>もし何か躓きそうな部分があったら下の部分から連絡してほしい。<br>次にエミュレーターの方のセットアップだが現状は以下のようにする。<br>AuthenticationとFirestoreとStorageのみとする。<br>理由は上記と一緒になっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e1bc242a364c434a9b9fd6f781158881/%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-05-09%200.21.40.webp" alt=""><br>それ以降のポート周りの設定は以下のような感じになっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/06bdadd4728e4c26bd3e35e40646bed3/%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-05-09%200.23.44.webp" alt=""><br>ここまで無事に出来ていれば、エミュレーターの作成完了である。<br>本当にここまで環境構築大変だったと思いますがお疲れ様です👍</p><h3 id="h974e04af22">実際に起動させる</h3><pre><code>$ firebase emulators:start</code></pre><p>とエミュレーターを走れせると<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/a1aaf863cb804903bedb5c6ffe7e06a8/%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-05-09%200.27.21.webp" alt=""><br>とローカルのそれぞれのポートで作成されていることが確認することができる。<br>また実際にこの<a href="http://127.0.0.1:4000/" target="_blank" rel="noopener noreferrer">リンク</a>を踏んで確認してもらって<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/09073a66c70844fba4d329b3aab72d63/%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-05-09%200.29.04.webp" alt=""><br>こんな感じになっていたらもう完璧！！</p><h2 id="h9db2f8f893">ここまで</h2><p>後で追記するFunctionsやHostingなども初期化の部分で追加するだけなので簡単に進めることができる。<br>また次はFirestoreについて触れることができればと思っている。<br>散々言いますが何かあればコメントください🙇</p>

<h1 id="hf2bed6271d">Part 1</h1><p>※If you have anything to say, please comment using the comment box at the bottom. Bugs, lack of explanation, lack of knowledge, anything is okay!<br>What's Firebase functions today? I was like, "What is Firebase functions? So, I would like to learn Firebase.<br>Since I'm here, I'd like to use the Jest learning tool I created last time.<br>You can use it by clicking the <a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">link</a> in the last article or this link.<br>If you refer to the previous article, you will see that I only added Jest and did not modify it in any other way.</p><h2 id="hf55fbe7549">Completed Repository</h2><p>You can check it from this <a href="https://github.com/sasaki-sota/try-nextjs-firebase" target="_blank" rel="noopener noreferrer">link</a></p><h2 id="hae21eaed01">Build Environment</h2><pre><code>$ cd ~/Desktop/ &amp;&amp; mkdir learning &amp;&amp; cd learning &amp;&amp; git clone https://github.com/sasaki-sota/try-nextjs-jest.git &amp;&amp; mv try-nextjs-jest/ try-nextjs-firebase &amp;&amp; cd try-nextjs-firebase &amp;&amp; npm i &amp;&amp; npm run dev</code></pre><p>Of course, you can execute the commands separately!<br>However, please note that the Node runtime environment must be installed and that Mac PCs are the target.<br>This long-winded command creates a learning folder, clones my previous GIt repository, renames it for Firebase, installs the package, and starts up the development server.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%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-05-07%2011.42.46.webp" alt=""><br>This link should bring up this screen, the same as yesterday.</p><h2 id="h89d285ecd2">Introducing Firebase</h2><h3 id="h7f0818da0b">Creating a project</h3><p><a href="https://console.firebase.google.com/u/0/" target="_blank" rel="noopener noreferrer">Official Firebase page</a><br>Create a Firebase project from this link.</p><h4 id="he9cb4ffc5d">Create Project Name</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f82390d3d3be41f8b386acf2c76783eb/%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-05-08%2020.31.19.webp" alt=""><br>The project name here can be anything, but it would be easier to understand if it covers the repository name!</p><h4 id="ha1589086fb">Analytics settings</h4><p>I personally think that if you are planning to use it for a long time, it is best to enable it, and if it is a hands-on project like this one, disabling it is best.<br>By the way, I will disable it.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/dd588bfac6084d0892bf0c840fadf6ce/%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-05-08%2020.34.55.webp" alt=""><br>Once created, it will appear like this.</p><h3 id="h3816aeabf9">Prepare to use Firebase with Next.js</h3><p>This time, select the Web version since it will be used on the front end.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/46de10bd877045d3a92446d26f8bc35c/%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-05-08%2020.37.42.webp" alt=""></p><h4 id="h907ebb4414">App Name Registration</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/337fa469fafe483687b44501d18fa110/%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-05-08%2020.40.06.webp" alt=""><br>The nickname here can be any name, but I will use the same name as the repository name.<br>As for the Hosting setting, if you plan to deploy, I think you should enable it.<br>Basically, I personally don't think you need to worry too much about the checks since you can set them afterwards.</p><h4 id="h55c88408e2">Adding an SDK</h4><p>Once you have registered your name, the SDK will be issued and you can use it.<br>In the terminal</p><pre><code>$ npm install firebase　&amp;&amp; touch firebase.ts</code></pre><p>I will install the Firebase package, but I think it will take a little time.</p><h4 id="h984572b3a0">.env.local</h4><pre><code>NEXT_PUBLIC_FIREBASE_API_KEY="Describe apikey here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Describe authDomain here"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Describe projectId here"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Describe storageBucket here"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Describe messagingSenderId here"
NEXT_PUBLIC_FIREBASE_APP_ID="Describe appId here"</code></pre><p>env files are disabled to be pushed by a file called Gitignore, so only local environment is used to prevent API keys</p><h4 id="he11b7c2001">firebase.ts</h4><pre><code>// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);</code></pre><p>This completes the initialization of Firebase for use in the web application.</p><h2 id="h30565d37e7">Emulator Settings</h2><h3 id="hf49c3956e4">What is an emulator?</h3><p><a href="https://firebase.google.com/docs/emulator-suite" target="_blank" rel="noopener noreferrer">Official Documentation</a><br>A Firebase emulator is a development environment built to accurately reproduce each of the Firebase services.<br>In short, it is a tool that allows you to connect directly to each service locally and execute QA and unit tests without affecting the data in the production environment.<br>Currently, the following platforms are supported<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2f549e396ae43daa7b7130bd3d251ef/%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-05-08%2023.22.57.webp" alt=""></p><h3 id="hc43f50e056">Building.</h3><p>First of all, it is important to note that Node.js version 14.8 or higher and Java JDK version 11 or higher are required, and the emulator depends on these two to start.<br>The emulator depends on these two to start. Also, the Firebase command is required, so please follow the link to build it according to your OS.<br>By the way, I am Node.js18 and I am on a Mac.</p><pre><code>$ npm install -g firebase-tools</code></pre><p>It could be built by using this command.<br>It is also convenient to use this command to upgrade the version of the software.<br>If the version of Node is OK, the above command can be used to install Node on all operating systems.<br>Once the command has been installed</p><pre><code>$ firebase login
i&nbsp; Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.


? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i&nbsp; To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:</code></pre><p>If you do the above, you will be redirected from Firebase to Google's authentication page when you select Yes, so if you can use the account you are logged in to Firebase in that section, you will succeed.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/036cea8bcc16432287685e755d5de38c/%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-05-08%2023.39.41.webp" alt=""><br>To ensure that it has been created successfully</p><pre><code>$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬─────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────┼────────────────┼──────────────────────┤
│ try-nextjs-firebase&nbsp; │ try-nextjs-firebase │ 8536234976&nbsp; &nbsp; &nbsp;│ [Not specified]&nbsp; &nbsp; &nbsp; │
└──────────────────────┴─────────────────────┴────────────────┴──────────────────────┘


1 project(s) total.</code></pre><p>and if your shoes are safe, you are good to go.</p><h2 id="h99a74344f8">Initial settings for each service</h2><p>We will actually go to the Firebase console screen to configure the various services.</p><h3 id="hc3bd5f627a">Firestore</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4fee3d8d07d9476f8cd80e632070ee06/%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-05-08%2023.53.14.webp" alt=""><br>If you live in Japan, you can choose asia-northeast1 or asia-northeast2.<br>When the setup is complete and you see this screen, you are done.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/21a846ca33da4c6493e4d8cad603ff12/%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-05-08%2023.56.42.webp" alt=""></p><h3 id="h6c11353d22">Storage</h3><p>This also clicks on Start in the following section.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/91ef88f0ab7d4abe8bc8aac81225ebd7/%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-05-09%200.05.24.webp" alt=""><br>This one also uses the mode for testing, and I believe the location is set to Firestore's, so it's ok.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/0760a77aca954df5bf1681d97a28c0a2/%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-05-09%200.06.36.webp" alt=""><br><br><br>If the above screen is displayed, the setup is complete.</p><h3 id="hac4a24289c">Initialization</h3><pre><code>$ firebase init</code></pre><p>As is, but initialized with the above command.<br>It will show you the best GUI and you should select the scope of what you want to use this time.<br>I checked the other checkboxes because I will be using Firestore Onsnapshot and I don't think I need the Github action.<br>Also, as I will describe later, Functions and Hosting do not seem to be necessary at this time, so I would like to use them when I use Firestore and Storage.<br>I would like to use Functions as an extension service for these functions.<br>The space key is used to select, and the arrow keys are used to move.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1059f751703844f6bf23b97ead383b59/%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-05-09%200.15.00.webp" alt=""><br>For the setup, it is a good idea to use the project you have already created as follows.<br>You can just hit enter on the Firestore and Storage setup sections.<br>If you encounter any stumbling blocks, please contact us from below.<br>Next, the emulator setup is as follows.<br>Only Authentication, Firestore, and Storage will be set up.<br>The reason is the same as above.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e1bc242a364c434a9b9fd6f781158881/%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-05-09%200.21.40.webp" alt=""><br>The settings around the port since then are as follows.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/06bdadd4728e4c26bd3e35e40646bed3/%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-05-09%200.23.44.webp" alt=""><br>If you have made it this far successfully, the creation of the emulator is complete.<br>I know it was really hard work to build the environment up to this point, but thank you for your hard work. 👍</p><h3 id="h84fdc40ad8">Let's actually start it up.</h3><pre><code>$ firebase emulators:start</code></pre><p>and run the emulator.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/a1aaf863cb804903bedb5c6ffe7e06a8/%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-05-09%200.27.21.webp" alt=""><br>and local ports, respectively.<br>You can also actually step on this link and have it checked<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/09073a66c70844fba4d329b3aab72d63/%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-05-09%200.29.04.webp" alt=""><br>If it looked like this, it would be perfect already!</p><h2 id="ha06d9af35a">Up to this point</h2><p>Functions, Hosting, etc., which we will add later, can be easily proceeded since they are only added in the initialization section.<br>I hope to touch on Firestore next.<br>I know I say this a lot, but please comment if you have any questions. 🙇</p>

環境構築だけでも結構長いかも

Next.js + Firebaseを利用したハンズオン - 環境構築編

Next.js + Hands-on with Firebase - Building the Environment

<h1 id="hdeb56f5bbf">テストは必要</h1><p>基本的に自分の行ったものを振り返る備忘録です。<br>より細かいテストは今後ブログを通して行っていくので今回は環境構築から簡単なテストまでとする。<br>最近フロントエンドのテストの本を読んでいる。<br>自分は今までバックエンドのテストはよく書いていたがフロントエンドは書いたことなかった。<br>ブログのコードもそうだがだいぶ肥大化してきているのでしっかりとテストを用いて確認する必要があると最近思っているのでこの機会に挑戦してみようと思った。</p><h2 id="hc69c85bcf9">背景</h2><p>この記事を書いている真っ只中だが、Vercel shipが発表されエコシステム周りがさらに拡大しつつあるので今後のためにもフロントエンドのテストもしっかりと理解していればよりバグの少ない良いプロダクトの開発に繋がると思ったため。<br>また、このブログでも導入してみようかと思ったが実際にやってみると他のライブラリとの依存関連の問題やAppディレクトリの導入などですぐに変更することが難しそうなので本番環境で動作しそうになったら変更していければと思っている。<br>振り返ってみるとこのブログのコードもなかなか肥大化しきているのでリファクタリングもしていこうと思う。</p><h2 id="h335a87b5ef">参考サイト</h2><p>とりあえずappディレクトリでないものでもいいので試してみるのであればこの<a href="https://github.com/vercel/next.js/tree/canary/examples/with-jest" target="_blank" rel="noopener noreferrer">リンク</a>から試してみるのが一番早いと思う。<br>今回自分はブログでも導入という形になると思うので、一度作成したAppディレクトリのNextjsのプロダクトに導入していこうと思う。</p><h2 id="h0b6380bec5">完成サイト</h2><p>この<a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">リンク</a>から参照できる。</p><h2 id="h046876a126">手順</h2><h3 id="h040cb511dc">Nextjsのプロジェクトの作成</h3><p>以前にも記事にしたがNext.jsバージョン13の本番環境での安定版が出ればAppディレクトリがファーストチョイスになると思うのでこの際にテスト関連についても学ぶ。<br>そしてシェルが優秀すぎる...<br>そして触ってみたかったapp ディレクトリも用意されているのでとても導入しやすい。<br>本当に便利。</p><pre><code>$&nbsp;npx create-next-app@latest
Need to install the following packages:
&nbsp; create-next-app@13.4.1
Ok to proceed? (y) y
✔ What is your project named? … try-nextjs-jest
✔ Would you like to use TypeScript with this project? …  Yes
✔ Would you like to use ESLint with this project? …  Yes
✔ Would you like to use Tailwind CSS with this project? …  Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No 
Creating a new Next.js app in ~/try-nextjs-jest.

Using npm</code></pre><p>全く関係ないが実際にindex.tsxファイルがないのが新鮮すぎる。<br>また、ファイル構成に関してもとてもシンプルにまとまっている感じがしてめっちゃ好き。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%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-05-07%2011.42.46.webp" alt=""><br>こんな感じで表示できていれば成功している。</p><h3 id="h7bb48d4b93">Jestの導入</h3><p>この<a href="https://nextjs.org/docs/pages/building-your-application/optimizing/testing#jest-and-react-testing-library" target="_blank" rel="noopener noreferrer">リンク</a>から見ると手順が表示されている。<br>自分の環境はnext13でrustコンパイラであるためそのままライブラリをインストールする。</p><pre><code>$ npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom</code></pre><p>そしてJest用の設定ファイルの作成</p><h4 id="h1ae89b017a">./jest.config.mjs</h4><pre><code>import nextJest from 'next/jest.js';
&nbsp;
const createJestConfig = nextJest({
&nbsp; // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
&nbsp; dir: './',
});
&nbsp;
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
&nbsp; // Add more setup options before each test is run
&nbsp; // setupFilesAfterEnv: ['&lt;rootDir&gt;/jest.setup.js'],
&nbsp;
&nbsp; testEnvironment: 'jest-environment-jsdom',
};
&nbsp;
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);</code></pre><p>とりあえずドキュメント通りのファイルを作成してみる。<br>一通り設定してくれてるっぽいので助かっちゃう。<br><code>$  npm run test</code> でテストを実行することが出来るようにスクリプトも使いしてく。</p><h4 id="h010248e8b0">package.json</h4><pre><code>"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    // 追加
     "test": "jest --watch"
    },</code></pre><h3 id="h3e30b12c6c">テストの作成</h3><p>今回はドキュメント通りにルートディレクトリにテストファイルを作成するがappディレクトリ内でもいいのではとも思っているので要検討事項である。</p><h4 id="h34eb1116ad">./<strong>tests</strong>/page.test.tsx</h4><pre><code>import Home from '@/app/page';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';


describe('Home', () =&gt; {
  it('renders a heading', () =&gt; {
    render(&lt;Home /&gt;);

    const heading: HTMLElement = screen.getByRole('heading', {
      name: /Deploy/i,
    });

    expect(heading).toBeInTheDocument();
  });
});</code></pre><p>このように記述していく。<br>これはホームコンポーネントをレンダリングしてその中のhタグ内にDeployという文字が含まれているかどうかというテストである。<br>公式ドキュメントではwelcome to next.jsという文字が含まれているテストとなっているが最新版のNext.jsでは含まれていないためpage.tsxのh2タグの他の文字から代入している。<br>また、headingというロールがあるがこれはしっかりとhタグ関連の検知という認識がなければ解決が難しくなるのでしっかりとドキュメントを読む癖をつくなければいけない。</p><h3 id="hb6509f48bf">結果</h3><pre><code>$ npm run test
&nbsp;PASS&nbsp; __tests__/page.test.tsx
&nbsp; Home
&nbsp; &nbsp; ✓ renders a heading (141 ms)


Test Suites: 1 passed, 1 total
Tests:&nbsp; &nbsp; &nbsp; &nbsp;1 passed, 1 total
Snapshots:&nbsp; &nbsp;0 total
Time:&nbsp; &nbsp; &nbsp; &nbsp; 2.714 </code></pre><p>となっていれば成功である。</p><h2 id="ha214098e44">まとめ</h2><p>フロントエンドのテスト自体も他にも非同期の部分やスナップショットなどたくさんあると思うが少しずつ行っていければいいと思う。<br>また、最近あまりキャッチアップすることが出来ていないので無理しない程度でキャッチアップできればと思う。<br>今回の記事や前の記事でNextjs13について簡単に書かせてもらったのでもしよければ説明不足や間違いがあればぜひ指摘してほしい。<br>supabaseで作った匿名のコメント機能があまり稼働していないのでよろしくお願いします🙇</p>

<h1 id="h954f8ede85">Testing is necessary.</h1><p>This is basically a memorandum to review what I have done.<br>More detailed testing will be done through the blog in the future, so this time it will be from building the environment to simple testing.<br>Recently, I have been reading books on front-end testing.<br>I have often written back-end tests, but I have never written front-end tests.<br>The code of my blog has become bloated, and I have been thinking recently that I need to check it with tests, so I decided to take this opportunity.</p><h2 id="h8c1a16f7ea">Background</h2><p>As I am in the middle of writing this article, Vercel ship has been announced and the ecosystem is expanding further, so I thought that a solid understanding of front-end testing would lead to the development of better products with fewer bugs.<br>I also thought about introducing it in this blog, but when I actually tried it, I found that it would be difficult to change it immediately due to dependency issues with other libraries and the introduction of the App directory, so I hope to change it when it seems to work in the production environment.<br>Looking back, the code of this blog has also become quite bloated, so I will try to refactor it as well.</p><h2 id="h74c3b6fd7d">Reference sites</h2><p>If you want to try something that is not in the app directory for now, I think the quickest way is to try this <a href="https://github.com/vercel/next.js/tree/canary/examples/with-jest" target="_blank" rel="noopener noreferrer">link</a>.<br>I think I will introduce it in my blog this time, so I will introduce it to the Nextjs product in the App directory that I created once.<br>Completed site<br>You can refer to it from this <a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">link</a>.</p><h2 id="heb8796ec1a">Steps</h2><h3 id="hcbc89f83e9">Creation of Nextjs project</h3><p>As I wrote in a previous article, I think App directory will be the first choice when the stable version of Next.js version 13 is released in the production environment, so I will learn about testing related issues at this time.<br>And the shell is too good...<br>And the app directory I wanted to touch is also available, so it's very easy to install.<br>Really useful!</p><pre><code>$&nbsp;npx create-next-app@latest
Need to install the following packages:
&nbsp; create-next-app@13.4.1
Ok to proceed? (y) y
✔ What is your project named? … try-nextjs-jest
✔ Would you like to use TypeScript with this project? …  Yes
✔ Would you like to use ESLint with this project? …  Yes
✔ Would you like to use Tailwind CSS with this project? …  Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No 
Creating a new Next.js app in ~/try-nextjs-jest.

Using npm</code></pre><p>Totally unrelated, but it is too fresh that there is no actual index.tsx file.<br>Also, I like it a lot as it seems very simple and organized in terms of file structure.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%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-05-07%2011.42.46.webp" alt=""><br>If you can display something like this, you have succeeded.</p><h3 id="hcf1e42bbc0">Installing Jest</h3><p>This <a href="https://nextjs.org/docs/pages/building-your-application/optimizing/testing#jest-and-react-testing-library" target="_blank" rel="noopener noreferrer">link</a> shows the procedure.<br>I install the library as it is because my environment is next13 with rust compiler.</p><pre><code>$ npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom</code></pre><p>And creating a configuration file for Jest</p><h4 id="hf999f5cbf4">. /jest.config.mjs</h4><pre><code>import nextJest from 'next/jest.js';
&nbsp;
const createJestConfig = nextJest({
&nbsp; // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
&nbsp; dir: './',
});
&nbsp;
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
&nbsp; // Add more setup options before each test is run
&nbsp; // setupFilesAfterEnv: ['&lt;rootDir&gt;/jest.setup.js'],
&nbsp;
&nbsp; testEnvironment: 'jest-environment-jsdom',
};
&nbsp;
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);</code></pre><p>I'll just try to create the file as documented.<br>It seems to be set up in a way that is very helpful.<br>I'll also use a script to run the test with<code> $ npm run test</code></p><h4 id="h010248e8b0">package.json</h4><pre><code>"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    // add
     "test": "jest --watch"
    },</code></pre><h3 id="hf191bf4768">Creating Tests</h3><p>This time, we will create the test file in the root directory as documented, but it is also possible to create the test file in the app directory, so this is something to consider.</p><h4 id="h061f5ec956">. /tests/page.test.tsx</h4><pre><code>import Home from '@/app/page';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';


describe('Home', () =&gt; {
  it('renders a heading', () =&gt; {
    render(&lt;Home /&gt;);

    const heading: HTMLElement = screen.getByRole('heading', {
      name: /Deploy/i,
    });

    expect(heading).toBeInTheDocument();
  });
});</code></pre><p>The description is written like this.<br>This is a test that renders the home component and checks if it contains the word "Deploy" in the h tag.<br>The official document says that the test includes the characters "welcome to next.js," but the latest version of Next.js does not include them, so they are substituted from other characters in the h2 tag of page.tsx.<br>Also, there is a role called "heading," which is difficult to resolve unless you are aware that it is an h-tag related detection, so you should make a habit of reading the documentation carefully.</p><h3 id="he66d18a133">Result</h3><pre><code>$ npm run test
&nbsp;PASS&nbsp; __tests__/page.test.tsx
&nbsp; Home
&nbsp; &nbsp; ✓ renders a heading (141 ms)


Test Suites: 1 passed, 1 total
Tests:&nbsp; &nbsp; &nbsp; &nbsp;1 passed, 1 total
Snapshots:&nbsp; &nbsp;0 total
Time:&nbsp; &nbsp; &nbsp; &nbsp; 2.714 </code></pre><p>is a success.</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>There are many other things to test on the front end, such as asynchronous parts and snapshots, but I think it would be good if we could do it little by little.<br>Also, I have not been able to catch up much recently, so I hope to catch up as much as possible without overdoing it.<br>I wrote about Nextjs13 briefly in this article and the previous one, so if there are any mistakes or lack of explanation, please feel free to point them out to me.<br>The anonymous comment function created by supabase is not working very well, so please help me out. 🙇</p>

初めてのフロントエンドテスト

Next.js(App directory) + Jestを使ったハンズオン

Hands-on with Next.js (App directory) + Jest

<h1 id="h73c5a8b961">新しい始まり</h1><p>無事に今月も終了した。<br>今月が始まる前までは不安がいっぱいだったけど無事にこなすことが出来て本当に良かった！<br>また、今までと違い新しく学べる環境がたくさんあってもちろん大変だけどそれ以上にたくさんの知見を知ることができた。</p><h2 id="h715aa40308">英語</h2><p>オンライン英会話などで積極的に挑戦することが出来ている！<br>また本当に面白いのはさまざまな知見を知ることが出来ること今までにない新しい考え方や経験を知ることが出来るのは本当に醍醐味である。<br>また、英会話をしていると自分に足りていない部分や表現力の欠如などが浮き彫りになるのでこういう状況ではこんなことを話したいということが明確になっており、それを伝えることができればより人との会話を楽しむことが出来るだろうと考えることが出来るようになっている。<br>前の記事でも書いたことだが、まずは完璧に話そうとせずに自分が伝えたいことをジェスチャーなどを使って伝えようとする努力が大事だと思うしその挑戦自体ができなくても当たり前を出来るかもしれないに変化させれるかもしれない自信の付け方だと改めて実感した。</p><h3 id="hd6c88759d6">思うこと</h3><p>最近思っていることとして、どんな分野でもそうだがインプットしたことをしっかりとアウトプットすることが出来なければ定着させることが出来ないと感じる。<br>実際にどのような単語があるかを知ることより、その単語を実際にどのように利用することが出来るのかどうかがとても大切になっており、難しい表現などを覚えたとしても実際に会話の中で利用できるのかどうかは別だと思うのでしっかりと意識的にインプットとアウトプットのサイクルを繰り返してもっとたくさん話せるようになりたい！<br>また、TOIECではリスニングとリーディングをやっていたが自分から積極的に行動するには話すことと書くことも必要だと最近とても実感するのでこの4分野全てが実際に英語という観点で必要だと改めて感じることができた。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d7c479316b814a8398ea32afd053923a/IMG_4343.webp" alt=""></p><h2 id="hcbb3e1e60d">プログラミング</h2><p>これも英語学習が終わってからTILなども初めてしっかりと学習することが出来ている。<br>今はGWだが、この４日間でVerelから新しい機能なども登場する予定であり、進化の速さをすごく感じることができる。<br>最近は本当にフロントエンドとバックエンドを半分ずつ書いており、新規プロダクトの作成に取り掛かっている。</p><h3 id="hd6f2a20bcc">ChatGPT</h3><p>本当にこれすごい。<br>自分のプロダクトを作成するにおいて、実際にプロンプトエンジニアリングをしているが入力内容のわずかな違いでも正確性もだいぶ変わってくるのでしっかりと自分が実現したことをが必要なツールだと思っている。<br>また、これは個人的にだが今はどれだけChatgptを応用して面白いプロダクトが作れるかどうかが大きく求められてると考える。<br>もっというとこのツールを上手に利用することが出来てかなり面白いものが作れると思うが、どう活かすことが出来るかというアイデアはあまり思いつかないのが現状である。<br>いずれにしてもより活かし方を模索していく必要があるなと感じている。<br>これからどうなってしまうのか...</p><h2 id="ha214098e44">まとめ</h2><p>今年は去年の今頃と比べてかなり時間を持って過ごすことが出来ている。<br>TOEICの大変さを味わって思ったことはこれ以上に大変なことは今後もしかしたら起こらないかもしれないということと本当に無謀な挑戦だったけど頑張って良かったということである。<br>今はフェーズが変わって実際に利用することが出来ているかどうかというフェーズにいると思っているが、今までの勉強の方法などを応用するなりして努力していきたい</p>

<h1 id="h2e5199eaea">A New Beginning</h1><p>We have successfully completed this month.<br>Before this month started, I was full of anxiety, but I am very glad that I was able to complete it without any problems!<br>Also, unlike the past, there are many new things to learn in this new environment, and of course it's hard work, but I've learned a lot more than that.</p><h2 id="hb9fea8844b">English</h2><p>I am able to actively challenge myself through online English lessons!<br>I am also able to learn new ideas and experiences that I have never had before, which is a real pleasure.<br>Also, English conversation brings to light areas where I am lacking in my ability to express myself, so I have a clear idea of what I want to say in such situations, and I am able to think that if I can convey these ideas, I will be able to enjoy the conversation with others more.<br>As I wrote in my previous article, I think it is important to make an effort to communicate what you want to say using gestures, etc. without trying to speak perfectly, and I realized again that this challenge itself is a way to gain confidence that may change the norm into something you may be able to do even if you cannot.</p><h3 id="he85aa1c998">Thoughts</h3><p>Recently, I have been thinking that, as in any field, if you cannot output what you have inputted, you will not be able to make it stick in your mind.<br>It is more important to know how to use the words than to know what words are actually there, and even if you learn difficult expressions, whether you can actually use them in conversation is different. I would like to be able to speak more by repeating the cycle of input and output consciously!<br>In addition, I have been doing listening and reading for TOIEC, but recently I have realized that speaking and writing are also necessary for me to be proactive in my own activities.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d7c479316b814a8398ea32afd053923a/IMG_4343.webp" alt=""></p><h2 id="h82c7b9d37f">Programming</h2><p>This is also something that I have been able to learn well for the first time since I finished my English studies, including TIL.<br>It's GW now, but new features are scheduled to be introduced by Verel in these 4 days, and I can really feel how fast things are evolving.<br>Recently, I have been writing half of the front-end and half of the back-end, and I am working on creating a new product.</p><h3 id="hd6f2a20bcc">ChatGPT</h3><p>This is really great.<br>I'm actually doing prompt engineering on my own product, and even the slightest difference in input can make a big difference in accuracy, so I think it's a tool I need to make sure I've achieved what I'm looking for.<br>I also think that the demand for interesting products using Chatgpt is great nowadays.<br>In other words, I think that if we can make good use of this tool, we can create quite interesting products, but I don't have many ideas on how to make the most of it.<br>In any case, I feel that we need to explore ways to make better use of this tool.<br>I wonder what will happen now...</p><h2 id="ha99e1d1dc3">Conclusion</h2><p>Compared to this time last year, I have much more time to spend this year.<br>After experiencing the difficulty of TOEIC, I thought that something more difficult than this may not happen in the future, and I am glad that I tried my best even though it was really a reckless challenge.<br>Now I think I am in a phase where I am not sure if I can actually use the TOEIC, but I would like to make an effort by applying the study methods I have been using so far.</p>

Sota Tech Blog.

5月の振り返り

環境の変化と免疫の低下

Next.js + Firebaseを利用したハンズオン - 環境構築編

Next.js(App directory) + Jestを使ったハンズオン

4月の振り返り