HarioNote

<p>タイトルの通り、<a href="https://nextjs.org/docs">Next.jsの公式Doc</a>を読みながらデプロイ方法、デプロイ先について公式Docではどのようなものが提案・紹介されているのか確認しながら考えてみようと思います。</p>
<p>本記事の内容は公式Docの内容に則っていますが私の意訳なので正しいことを保証するものではありません。正確な情報を知りたい場合は<a href="https://nextjs.org/docs">公式Doc</a>を参照してください。</p>
<h2>公式Docを読む際の注意点</h2>
<p>まずNext.jsの公式Docを読む際の注意点ですが、Next.jsはPages RouterとApp Routerがあり、DocもPages RouterとApp Routerで分かれているので注意してくだい。<br>
なお本記事はApp Routerを前提としています。</p>
<p><img src="https://storage.googleapis.com/newt-files/e1bde5b2-7579-43ff-bed9-fcea7deccb15/%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%882023-07-045.39.34.png" alt="スクリーンショット2023-07-045.39.34.png"><br>
PagesRouterに関するドキュメントかAppRouterに関するドキュメントかは左サイドのナビの一番上に表示されている。</p>
<p><img src="https://storage.googleapis.com/newt-files/b369f933-f244-4578-ba15-e56cee615b4c/%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%882023-07-045.41.35.png" alt="スクリーンショット2023-07-045.41.35.png"><br>
表示するドキュメントはここで切り替えることができます。</p>
<p><img src="https://storage.googleapis.com/newt-files/6c478c55-d184-42c2-a6f0-1cd8cf43b2eb/%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%882023-07-045.42.13.png" alt="スクリーンショット2023-07-045.42.13.png"><br>
ちなみにドキュメントを検索する場合もApp(AppRouter)かPages(PagesRouter)かターゲットを選択できます。</p>
<h2>公式Docのデプロイに関する章を確認してみる</h2>
<p>デプロイに関する内容は<a href="https://nextjs.org/docs/app/building-your-application/deploying">こちら</a>に記載されています。</p>
<h3>ビルドで生成されるもの</h3>
<p>デプロイ先を考えるうえでまず、ビルドによって生成されるものを確認しましょう。<br>
Next.jsでビルドすると</p>
<ul>
<li><a href="https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization">Automatic Static Optimization</a>されたページか(Pages Routerで)getStaticPropsを使ったページのHTMLファイル</li>
<li>CSSファイル</li>
<li>Next.jsサーバーで動的なコンテンツをプリレンダリングするためのJavaScript</li>
<li>クライアントサイドでインタラクティブなUIなどを提供するためのJavaScript</li>
</ul>
<p>といったものが生成されるようです。（生成物は.nextフォルダに出力されるとのこと。）</p>
<p>※ Next.jsには静的エクスポート機能(Static Exports)もあるため、それを利用する場合はまた違ってくるようです。<br>
※ ビルドコマンドに関するDocは<a href="https://nextjs.org/docs/app/api-reference/next-cli#build">こちら</a>です。</p>
<h3>Vercelかセルフホスト</h3>
<p>ホスティング先を考える場合、まず最初の分かれ道としてVercelを使うかそれ以外にするか、だと思います。<br>
VercelはNext.jsの開発元なだけあり、設定作業等は最小限でいいみたいです。ただVercelは開発元提供のスタンダードな方法なので本記事ではとくに掘り下げて触れることはしません。</p>
<h3>セルフホストをする場合</h3>
<h4>Node.js</h4>
<p>セルフホストするホスティング先(デプロイ先)の環境としては、Node.jsをサポートしているホスティングプロバイダーであればどれでもデプロイ可能なようです。（例えば、awsのEC2やDigitalOcean Dropletなど。）</p>
<h4>Docker Image</h4>
<p>また、Dockerコンテナをサポートしているホスティングプロバイダでもデプロイ可能とのことです。コンテナでNode.js環境を用意してあげるので、ホスティングプロバイダ自体がNode.jsをサポートする必要はないということですね。（手順の例も<a href="https://nextjs.org/docs/app/building-your-application/deploying#docker-image">こちら</a>に載っています。）</p>
<h4>StaticなHTMLのエクスポート</h4>
<p>Next.jsの静的エクスポート機能(Static Exports)を使用する場合は、Node.js環境やDockerコンテナサポートがないホスティング先にもデプロイできるようです。<br>
ただ、Static Exportsには使用できる条件などがあるので注意が必要です。（Static ExportsについてのDocは<a href="https://nextjs.org/docs/app/building-your-application/deploying/static-exports">こちら</a>）</p>
<h3>その他のサービスを利用したホスティング</h3>
<p>Vercelやセルフホスト以外にマネージドなサーバーを提供しているサービスを利用する方法もある。今時はこれも多いのではないだろうか。<br>
以下のサービスがNext.jsのデプロイ方法を紹介していたりする。</p>
<ul>
<li><a href="https://aws.github.io/copilot-cli/">AWS Copilot</a></li>
<li><a href="https://docs.digitalocean.com/tutorials/app-nextjs-deploy/">Digital Ocean App Platform</a></li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-docker">Google Cloud Run</a></li>
<li><a href="https://elements.heroku.com/buildpacks/mars/heroku-nextjs">Heroku</a></li>
<li><a href="https://docs.railway.app/getting-started">Railway</a></li>
<li><a href="https://render.com/docs/deploy-nextjs-app">Render</a></li>
</ul>
<h4>静的エクスポート(Static Exports)で、その他サービスを利用してホスティング</h4>
<p>Static Exportsを利用するNext.jsアプリであっても、その他サービスを利用する方法という選択肢がある。<br>
Static Exportsであれば静的ホスティングプロバイダを利用してホスティングができる。</p>
<p>GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure PipelinesなどのCI/CDパイプラインを通してデプロイすることも可能とのこと。</p>
<p>以下のホスティングプロバイダのサービスがNext.jsの静的ホスティングの方法を紹介したりしている。</p>
<ul>
<li><a href="https://aws.amazon.com/blogs/mobile/amplify-next-js-13/">AWS Amplify</a></li>
<li><a href="https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs">Azure Static Web Apps</a></li>
<li><a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/">Cloudflare Pages</a></li>
<li><a href="https://firebase.google.com/docs/hosting/nextjs">Firebase</a></li>
<li><a href="https://docs.netlify.com/integrations/frameworks/next-js">Netlify</a></li>
<li><a href="https://github.com/milliHQ/terraform-aws-next-js">Terraform</a></li>
<li><a href="https://docs.sst.dev/start/nextjs">SST</a></li>
</ul>
<h2>所感</h2>
<p>デプロイ方法ホスティング先としてはかなり多様な選択肢があるようですね。<br>
Static Exportsであれば、ちょっとしたレンタルサーバーへのデプロイも可能で、シンプルなウェブサイト的なものであればそれもありかと思いました。</p>
<p>選択のポイントとしては、Static Exportsをするかどうかに大きく左右されそうですね。（Static ExportsだとNode.js環境が不要というのは大きいですね）</p>
<p>Next.jsで何かを作る際は、最初にStatic Exportsするかどうかを検討するのが良さそうです。</p>
<p>以上。</p>


Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

<h2>やりたいこと</h2>
<p>例えばコンポーネントAaa, Bbb, Cccがあったとして</p>
<pre><code>app/
┣ components/
┃  ┣ Aaa.tsx
┃  ┣ Bbb.tsx
┃  ┗ Ccc.ts
┗ page.tsx
</code></pre>
<p>のような構成でpage.tsxからそれぞれをインポートして使うと</p>
<pre><code class="language-tsx">import Aaa from './components/Aaa'
import Bbb from './components/Bbb'
import Ccc from './components/Ccc'
</code></pre>
<p>みたいな感じになると思います。</p>
<p>これを</p>
<pre><code class="language-tsx">import { Aaa, Bbb, Ccc } from './components'
</code></pre>
<p>みたいにインポートできるようするための備忘録です。</p>
<h2>ディレクトリ構成</h2>
<p>最初のやつに<code>index.ts</code>を追加して以下のようにします。</p>
<pre><code>app/
┣ components/
┃  ┣ Aaa.tsx
┃  ┣ Bbb.tsx
┃  ┣ Ccc.tsx
┃  ┗ index.ts
┗ page.tsx
</code></pre>
<h2>各コンポーネントのexport</h2>
<p>コンポーネントのexportのやり方はとくに特別なことは不要で、普通に<code>export</code>するか<code>default export</code>でokです。</p>
<pre><code class="language-tsx">/* 普通にexport */
export const Aaa: React.FC = () =&gt; {
（略）
</code></pre>
<pre><code class="language-tsx">/* default export */
const Bbb: React.FC = () =&gt; {
（略）
export default Bbb;
</code></pre>
<h2>index.tsでexportをまとめる</h2>
<p>先程のexportしたコンポーネントをまとめます。<br>
書き方は<code>export</code>したか<code>default export</code>したかで変わります。<br>
先程のAaaとBbbに加えて、Cccもdefault exportしたとした場合の例とするとindex.tsを以下のようにします。</p>
<pre><code class="language-ts"> /* exportした場合は↓のように書く */
export * from './Aaa'
/* default exportした場合は↓のように書く */
export { default as Bbb } from './Bbb'
export { default as Ccc } from './Ccc'
</code></pre>
<p>これで先程のように<code>pate.tsx</code>にて</p>
<pre><code class="language-tsx">import { Aaa, Bbb, Ccc } from './components'
</code></pre>
<p>といった感じでインポートして使えます。</p>


【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

<p>以前も個人的おすすめ作業用BGMを紹介させてもらったのですが、最近も日々あたらしいBGMを発見したり生まれたりしていて、聞く作業用BGMもどんどんアップデートされていくのでまたご紹介したいと思います！<br>
（前回の記事は<a href="https://harionote.net/article/2023-04-21">こちら</a>）</p>
<p><strong><a href="https://youtu.be/pV_uptrUo8k">コーヒーショップでの居心地の良い雨の夜-リラックスのための雨音とスムーズジャズ音楽の雰囲気</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pV_uptrUo8k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>しっとりしたジャズで音圧の上下が激しくないので作業に集中できます</li>
<li>雨の音も入っており、雨音が好きな人にはおすすめ</li>
</ul>
<p><strong><a href="https://youtu.be/bSN8PDO3CsI">【30分耐久フリーBGM】Moon Rabbit【ほのぼの / かわいい / まったり】勉強用、雑談用、作業用、 Cute Sweet Music、NCM、NCS</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/bSN8PDO3CsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>ポップでかわいくも優しいBGMで朝に作業するのに合いそうです</li>
<li>30分と短めなのでループ再生推奨</li>
</ul>
<p><strong><a href="https://youtu.be/umCDNb_u3BA">【 BGM 】CoffeeTalk2 OST 【カフェ　作業用】</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umCDNb_u3BA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>夜のおしゃれなカフェやバーで流れていそうなBGMでとても落ち着きます</li>
<li>少し疲れた時に聴きながら作業するのにもいいかもしれません</li>
</ul>
<p><strong><a href="https://youtu.be/FDUk0Kcte9A">Super Mario 🍄 Lofi HipHop |best calm and relaxing Mix | Super Mario Bros - Art: @pixeljeff_design</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/FDUk0Kcte9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>ここ最近で一番集中できる作業用BGMかもしれません</li>
<li>マリオシリーズの有名のBGMがアレンジされています</li>
<li>マリオのBGMとは思えないほど心落ち着くアレンジがされており中毒性がハンパないです</li>
<li>背景の映像もめちゃくちゃいい</li>
</ul>
<p><strong><a href="https://youtu.be/B383xnK8Xpc">RAINING IN ＴＯＫＹＯ (Lofi Hip Hop)</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/B383xnK8Xpc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>Lofiと雨の音の作業用BGMです</li>
<li>Lofiと雨の音は作業用BGMの鉄板ですがそれぞれの音のバランスがとてもよい</li>
<li>なんだかんだ作業に集中できるのはこれですね</li>
</ul>
<p><strong><a href="https://youtu.be/guan9sTiXM0">lofiの仕事の仕事💳濃度 - 濃度(チル・ロー・フィップ・ホップ・ビート)</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/guan9sTiXM0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>とにかく再生時間が長い</li>
<li>夕方の夕陽がさす時間帯に聴きたくなるようなLofiな音楽が心地いいです</li>
</ul>
<p>今回は以上です！<br>
ぜひ聴いてみてください〜</p>


オススメ作業用BGM

【YouTubeで聴ける】勉強やコーディングに集中できる個人的オススメ作業用BGM【2023年5月】

<p>表題通りHomebrewを、公式サイトに載っているコマンドをコピペして実行してインストールしたのに、「brew -v」でバージョン確認をしたら「command not found: brew」と言われてしまった場合についてです。</p>
<p>Homebrewのインストールコマンドの実行後の出力内容を見てみると、いろいろ書いてあるなかに「Next steps: ...」と書かれている部分があります。</p>
<p><img src="https://storage.googleapis.com/newt-files/80975b19-682e-44c0-b348-f369355b6399/2023-05-27_1.png" alt="2023-05-27_1.png"></p>
<p>そこには以下の2つのコマンドを実行してみてねと書かれており、その２つのコマンドは以下になります。</p>
<pre><code>echo 'eval &quot;$(/opt/homebrew/bin/brew shellenv)&quot;') &gt;&gt; /Users/[ここはユーザー名によって変わる]/.zprofile
eval &quot;$(/opt/homebrew/bin/brew shellenv)&quot;
</code></pre>
<p>各々のPC毎にパスなど若干異なる部分はあるとは思いますが、これら2つのコマンドを実行することで解消されると思います。（私の場合はこれで解消しました）</p>
<p>以上です。</p>


Homebrewインストール後に「zsh: command not found:」と言われた人はインストール後に表示される「Next steps: ...」の内容を試してみて

<p>ついにChatGPTのOpenAIによる公式のiPhoneアプリが日本でもインストール可能になりましたね。</p>
<p>ただ注意しないといけないのは、App StoreでChatGPTで検索すると類似品がたくさん出てくるので間違えて偽アプリをインストールしないようにしないといけません。</p>
<p>やはり安心なのは<a href="https://openai.com/product/chatgpt">OpenAIのChatGPTのページ(https://openai.com/product/chatgpt)</a>からAppStoreのリンクを経由してインストールすることでしょう。<br>
<img src="https://storage.googleapis.com/newt-files/ff191eda-2502-47e9-9c6d-113189a767a3/2023-05-26_1.png" alt="2023-05-26_1.png"></p>
<p>ChatGPTのAppStoreのリンクは<a href="https://apps.apple.com/jp/app/chatgpt/id6448311069">こちら(https://apps.apple.com/jp/app/chatgpt/id6448311069)</a></p>
<br>
<p>インストールする前にもちゃんと開発者情報を確認しておくとより安心です。<br>
<img src="https://storage.googleapis.com/newt-files/78beadb6-88ed-4a5f-b99e-0ee929b100e9/2023-05-26_2.png" alt="2023-05-26_2.png"></p>
<p>以上！</p>


【公式ページのリンクを使おう】iPhoneでもChatGPTのアプリが利用可能になったけど偽アプリをインストールしないように注意しよう

<p>表題にある通り、私が某フリーランスエージェントを利用してReact案件を探して、可能な限り最短でアサインできるように頑張りましたのでその記録です。</p>
<p>これからフリーランスと案件を探したいと考えている人の参考になればと思います。</p>
<h2>簡易的な私の情報と希望条件</h2>
<ul>
<li>Reactの実務経験3年以上</li>
<li>週3~4日稼働希望</li>
<li>フルリモートの業務委託</li>
</ul>
<h2>結論・全体の流れ</h2>
<p>結論から言いますと、エージェントに登録してから10日ほどで案件獲得ができました。<br>
（※アサイン自体は企業側の準備の関係でもう少し先でした）</p>
<p>全体の流れとして、私の場合は以下のような感じでした。</p>
<ol>
<li>エージェントのサイトに登録</li>
<li>エージェントとの面談予約申し込み</li>
<li>プロフィールおよびスキルシートの作成＋案件検索</li>
<li>エージェントと面談＋案件にエントリー</li>
<li>エントリーした案件の書類選考が通過したら企業と面談</li>
<li>面談の結果、企業からお声が掛かれば案件獲得</li>
</ol>
<h2>最初のポイント/気をつけた点</h2>
<ul>
<li>サイトに登録したらなるべく早くエージェントとの面談を申し込む</li>
<li>エージェントとの面談までにプロフィールおよびスキルシートを作成する</li>
</ul>
<p>やはり登録したらなるべく早くエージェントとの面談に申し込むのが重要でしょう。スケジュールが埋まってしまえば面談の日程が後にズレてしまいます。<br>
当たり前のことかもしれませんがwebカメラとヘッドセットは用意しておきましょう。<br>
面談を申し込んだらそのまま、なるべく早くスキルシートの作成や自己紹介などプロフィール欄を充実させるべきでしょう。<br>
スキルシートの雛形はググればいろいろあるので好きなものを使えばいいと思います。<br>
ここをしっかりやっておくことで、面談時にエージェントの方もこちらのやる気を汲んで親身になってくれますし、何より面談の時間を有効に活用できます。面談の時間枠は決まっているので準備を怠れば、その準備に対するアドバイスに時間をとられてしまうでしょう。<br>
私の場合、エージェントの方の手際が良かったためかもしれませんが、初回面談ですぐに案件の絞り込みとエントリーに移ることができました。</p>
<h2>書類選考について</h2>
<p>企業との面談にたどり着くためには、まず書類選考にパスする必要があります。<br>
これは正直、早くパスできるかは運次第かなと思いました。（もちろんスキルシートなどの準備はちゃんとやったうえで）<br>
レスポンスが早い企業ですとエントリーしてから数日で結果が出ます。しかし都合よくレスポンスが早い企業が募集を出しているとは限らないのでここは数を打つしかないと思いました。<br>
今回早く獲得できたのは、探している案件がまだまだ需要のあるReactであったというのも大きいと思います。<br>
エージェントの方いわく、なかなか決まらない人も結構いるそうです。</p>
<h2>企業との面談において気をつけたこと</h2>
<ul>
<li>面談相手は、応募者が共に働きたいと思える人間かを見ているという意識を持つ</li>
<li>対象の案件に参加する場合、どのようなことを意識して働くことが重要かを自分なりに考える</li>
<li>スキルシートに対応して、これまで扱って来た技術について具体的に答えられるようにしておく<br>
（扱ってきた具体的なライブラリやフレームワーク名も答えられるように）</li>
<li>自身の希望に沿った働き方ができるか確認する</li>
</ul>
<p>面談相手の企業およびプロダクトについての事前調査は当たり前のため省略します。<br>
面談相手は自分が共に働きたいと思えるかを見ているため、礼儀正しくはしますが変に固くなりすぎずありのままの自然体で臨むのがいいかと思います。<br>
緊張してしまう人は普段の2割増くらい明るくいくといいと思います。面談相手は今後一緒に働く人と考え、そのつもりで話すと相手にも「この人はちゃんとうちで働くことをイメージしているな」と伝わります。<br>
逆にそのつもりで話してみて相手の人間が合わないと感じたら面談の結果に関わらすこちらから断ることも視野に入れておくのが良いかと思います。</p>
<p>これは少しトリッキーかもしれませんが、面談の中で相手が説明してくれた内容や話し方から、面談相手がどのようなことに意識を持って働ける人材を欲しているかを理解しようしてみるといいかもしれません。<br>
もしそれが少しでも分かれば、こちらの考えを発言する場面にてそれを意識した内容にすることでより充実した面談となると思います。</p>
<p>スキルシートを提出している場合、その内容やこれまでの経験や具体的に扱ってきた技術について聞かれることがあります。その際にスムーズに答えられるように、これまで使ってきた技術やライブラリなどについて簡単にまとめておくといいでしょう。緊張すると言葉が出づらい人は用語などを書き出したチートシートを作っておくと安心かもしれません。</p>
<p>また、実際にアサインした後に困らないように変に脚色したりせず、やったことがないことはやったことないと答えればいいと私は思います。<br>
プラスαなことを言うと、ただ「やったことがない」と答えるのではなく、聞かれた技術に対して興味がある意思表示や挑戦する意欲を示せば良い印象を持ってもらえるかもしれません。（嘘をついてまでそうする必要はありませんが）</p>
<p>あとは時間の猶予次第ではありますが、働き方や働き方に関する懸念点があればしっかり聞いておくと後々安心だと思います。</p>
<p>他にも細かいことはいろいろありますが、私が主に面談において気をつけたポイントは以上になります。</p>
<h2>所感</h2>
<p>今回、私は初めてエージェントを利用して案件を探してみたのでわからないこともあったり緊張もありましたがなんとか案件獲得ができました。<br>
一通りの流れを経験しての所感としては以下のような感じでしょうか。</p>
<ul>
<li>Reactという流行りの案件を探していたため、候補となる案件自体がたくさんあったという運要素が強いと感じた</li>
<li>Reactの案件は多いが、「実務経験3年」という条件を付けていることが多いためちょっとReactかじっていれば案件を見つけられるというわけではなさそう</li>
<li>面談も数をこなすと慣れるので条件が合えば数打つ方が良さそう</li>
</ul>
<p>やはり、応募する案件の母数が多いというのが最大の強みですね。</p>
<p>以上です。</p>


Reactエンジニアがフリーランスエージェントを利用して最短で案件にアサインできるように頑張ってみた

<p>私はMIDORIのMDノートの書き心地と、目に優しく万年筆のブルーブラックの色が良く映えるクリーム色の紙が好きで以前から使用していたのですが、最近残りページが少なくなり新しいのを買おうと思いふと調べたらなんとリングタイプで立てることもできるタイプがあるではないですか！</p>
<p>開いたときになるべく紙が平らになってほしかったのと、最近次やりたいことを書いて目につくように置いておきたいと思っていたのでどんぴしゃで買いでした。</p>
<h2>ノート＜A5＞ プラススタンド クロス罫</h2>
<p>今回買ったのが「<a href="https://www.midori-store.net/SHOP/13808006.html">ノート＜A5＞ プラススタンド クロス罫</a>」です。<br>
<a href="https://www.amazon.co.jp/gp/product/B07QG6ZVFB/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&amp;th=1">Amazon</a>でも売っているようです。</p>
<p>私がクロス罫を購入しましたが無地もあるようですのでお好みで。</p>
<p>そして↓こちらが購入した実物ですー。<br>
<img src="https://storage.googleapis.com/newt-files/0020718c-4370-490f-b702-14e355dc3d6d/S__82108455.jpg" alt="S__82108455.jpg"></p>
<p>裏はこんな感じです。<br>
<img src="https://storage.googleapis.com/newt-files/66b107da-fd6a-4b5b-8db7-467285ae70eb/S__82108457.jpg" alt="S__82108457.jpg"></p>
<p>開くと中はこうなっています。（ビニールのカバーは外さなくとも開くことができます。）<br>
<img src="https://storage.googleapis.com/newt-files/00b74ee7-d793-43e6-988d-a32bfe5efa4f/S__82108459.jpg" alt="S__82108459.jpg"></p>
<p>やはりMDノートのこの紙の質感と色がいいですね。<br>
<img src="https://storage.googleapis.com/newt-files/505769df-4c84-4fcf-bda2-bdd680e306df/S__82108460.jpg" alt="S__82108460.jpg"></p>
<p>クロス罫なので各ページはこのようになっています。<br>
<img src="https://storage.googleapis.com/newt-files/1cd38546-9fb8-4bd1-95e2-16592dc0561c/S__82108462.jpg" alt="S__82108462.jpg"></p>
<p>ノートを自立させたいときはこんな感じでゴム紐を外し<br>
<img src="https://storage.googleapis.com/newt-files/940a2a91-6ac8-42d1-9096-7322ed0fa318/S__82108463.jpg" alt="S__82108463.jpg"></p>
<p>こんな感じでくぼみに引っ掛けることで開き具合をキープして立てることができます。<br>
<img src="https://storage.googleapis.com/newt-files/73b70411-3fca-4544-8c2f-45014fb363ef/S__82108465.jpg" alt="S__82108465.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/c31c0bc4-0313-43ad-92cd-79f7760987bf/S__82108464.jpg" alt="S__82108464.jpg"></p>
<p>見た目もおしゃれだし書き心地も健在で最高です。<br>
<img src="https://storage.googleapis.com/newt-files/5ddd5e61-f365-47f5-bd5e-7e6253111b56/S__82108466.jpg" alt="S__82108466.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/c15ae02f-08e3-4f54-aef7-158febb83bfa/S__82108467.jpg" alt="S__82108467.jpg"></p>
<p>以上！</p>


お気に入りのMIDORIのノートで自立できるリングタイプのノートがいつの間にか出ていたので買ってみたらかなりいい感じだった

<p>昨今世間を賑わせているChatGPTなどのAIなどは本当にすごいですよね。<br>
自分が知らなかった有益な情報をどんどん教えてくれます。</p>
<p>私もプログラムを書いているときなどにわからないことがあると自分でググりつつChatGPTに質問したりもします。<br>
もちろんChatGPTが正解を確実に導き出すAIというわけではないのでたまに間違った情報や古い情報から提案をしてくることもあります。そこには十分気をつけているつもりです。</p>
<p>しかし最近ChatGPTに問題解決を手伝ってもらっているときにふと気づいたのです。</p>
<p>それは、自分が直面している問題が簡単ではなかった場合で、かつChatGPTを頼りにしたときに、「<strong>なんとなく惜しい解決策を提案されたときに、より良い解決策をChatGPTに提案させることに躍起になって、自分で思考することを忘れがちになる</strong>」ということです。</p>
<p>「質問のこの部分をもう少しこうしてみよう」「これがだめなた次はこのアプローチで質問しよう」といった、どう質問して解決策を導きさせようかとう方向に自分の思考が支配されて、本来の自分が直面している課題に対する解決策を自分で考える方に自分の能力のリソースを割くのをついつい忘れてしまうのです。</p>
<p>私の場合、問題がすぐに解決できなかったため、一旦落ち着いて「ChatGPTこういう提案してそれのこの部分は有効だから逆にこのアプローチならどうだろう、自分で試してみよう」となり結局解決できたのですが、後でなぜあのとき行き詰まったのかを冷静に考えてみることで今回の話の内容に考えがたどり着きました。</p>
<p>そんなわけで、問題に直面した際にChatGPTのようなAIを頼るときは、より良い解決策により早くたどりつくには、ちゃんと自分も思考するのをやめない方がいいよ。というお話でした。</p>
<p>今後は私も自分で思考することもちゃんと意識しつつ、ChatGPTなどのAIも活用して開発などしていきたいなと思います。</p>
<p>以上。</p>


何かに躓いてChatGPTなどのAIに助けを求めるときは自分も思考するのをやめないの方がいいよ。という話

<p>私は負担から勉強やコーディングをする際には作業用BGMを聞きながら行うのですがみなさんはいかがでしょう？</p>
<p>私はそこまで集中力が高くない方なのでこの作業用BGMが結構重要なんです笑<br>
YouTubeには「作業用BGM」と銘打ってあっても作業の種類によっては妨げになり逆に集中力が散ってしまうものも多々ありますよね。</p>
<p>そこで、今回は最近私が聴いている、「勉強やコーディングなど集中して思考する作業中に聴きたい」作業用BGMを紹介致します。</p>
<p>以外に思われるかもしれませんが、作業用BGMとはいっても私はその作業用BGMYouTube動画を選ぶポイントとして映像も選定基準としています。それは作業中にふと画面を見たときに見える映像によっても、作業を継続できるかへの影響があるからです。（私だけかもしれませんが）</p>
<p>では紹介していきます。</p>
<h2>環境音系</h2>
<p><strong><a href="https://youtu.be/IxOsgxSNN24">📚 深夜に一緒に勉強しませんか / ２時間 / 小雨の音🌧＋焚き火の音🏕️ / ５０分のポモドーロ🍅 / Study with me / 勉強動画 / タイマーとアラームあり【作業用】</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/IxOsgxSNN24" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>小雨の音＋焚き火の音＋キーボードの作業音のみ</li>
<li>それぞれの環境音の音量バランスと音質が良く作業に没頭できる</li>
<li>動画がおしゃれ</li>
<li>動画にタイマーとアラームが組み込まれている</li>
</ul>
<h2>BGM+環境音系</h2>
<p><strong><a href="https://youtu.be/Ppy3hJ78DU4">【再up】ハトの巣 BGM ～マスターと過ごす３時間～</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ppy3hJ78DU4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>落ち着くBGMとサイフォンのコポコポ音が心地よい</li>
<li>BGMは静かめ</li>
<li>映像がかわいい（ふと見たときにリラックスできる）</li>
</ul>
<p><strong><a href="https://youtu.be/sca4VG9b0NY">📚 深夜に一緒に勉強しませんか / ２時間 / Lo-fi Hiphop + 小雨の音🌧 / ５０分のポモドーロ🍅 / Study with me / 勉強動画 / タイマーとアラームあり【作業用】</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/sca4VG9b0NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>「環境音系」のとこで挙げたやつのBGM付ver</li>
<li>BGMと投稿者の作業音の相性がとてもよく作業に集中できる</li>
</ul>
<h2>BGM系</h2>
<p><strong><a href="https://youtu.be/433xR7kzHXg">【30分耐久フリーBGM】Replay【チル / ゆったり / R&amp;B / Chill】作業用、雑談用、勉強用BGM</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/433xR7kzHXg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>晴れた気持ちいい日に合いそうな爽やかなR&amp;B、Chillな感じのBGM</li>
<li>音量小さめで聴くのが個人的に好き</li>
<li>静か系のBGMに飽きたときに聴くとリフレッシュできて集中できる</li>
</ul>
<p><a href="https://youtu.be/oFm6rbA5BD8">night at the bookstore. (lofi / chillhop / anime mix)</a></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oFm6rbA5BD8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>とても心癒されるChillhop,lofiなBGMで、多少疲れていてもこれを聞きながらだと心の疲れを癒やしながら集中できる</li>
<li>映像も曲にとてもあっておりおしゃれで落ち着く</li>
<li>一時期こればかりループ再生していた</li>
</ul>
<p><strong><a href="https://youtu.be/ZBrmNO92OTI">『深夜2時、レトロで大人な世界に迷い込む」Lofi Chill Bgm</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZBrmNO92OTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>JazzっぽいBGMは個人的に集中できないがこれに含まれている曲は集中できた</li>
<li>タイトルにある通りレトロな感じで気分も浸りながら集中できる</li>
</ul>
<h2>番外編「ちょっとぼーっとしながらコーヒーでも飲みながら聴きたいBGM」</h2>
<p><a href="https://youtu.be/Gx3wDe7xhv8">【落ち着いた音楽で午後も仕事がはかどるBGM】作業用・勉強用BGM ー集中、リモートワーク、コーヒー音楽、読書、リラクゼーション</a></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Gx3wDe7xhv8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>以上です。</p>
<p>いかがでしょうか？ぜひ聴いてみてください～</p>


勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

<p>表題にある通りWindowsの標準ブラウザのEdgeに画像生成AIが搭載されたようなので使ってみました。</p>
<h2>使い方</h2>
<ol>
<li>
<p><strong>Edgeを起動し右サイドバーの「＋」ボタンをクリック</strong><br>
<img src="https://storage.googleapis.com/newt-files/a247e74c-9bf1-43de-a7c3-a6635e0343cd%2F2023-04-09_1.png" alt="2023-04-09_1.png"></p>
</li>
<li>
<p><strong>「Image Creator」をONに</strong><br>
ONにすると右サイドバーにImage Creatorのアイコンが追加されるのでそれをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/c4de5d95-124c-46a7-943b-686ace24ccb8%2F2023-04-09_2.png" alt="2023-04-09_2.png"></p>
</li>
<li>
<p><strong>「今すぐサインイン」をクリック</strong><br>
<img src="https://storage.googleapis.com/newt-files/d20fca1e-0a5a-478e-a798-7df9de4959e0%2F2023-04-09_3.png" alt="2023-04-09_3.png"><br>
私の場合はEdgeで既にサインインしていたのでクリックしたらそのままImage Creatorが利用可能になりました。</p>
</li>
<li>
<p><strong>生成して欲しい画像についての文章を(英語で)入力して「作成」ボタンをクリック</strong><br>
今回は「スマホで電話する猫」とDeepLで英語に翻訳してそれをコピペして作成ボタンをクリックしてみます。<br>
<img src="https://storage.googleapis.com/newt-files/6dfc197d-95e4-403f-8ad9-597f77cf1724%2F2023-04-09_4.png" alt="2023-04-09_4.png"></p>
</li>
<li>
<p><strong>生成完了！</strong><br>
少し待つと画像を生成してくれます。<br>
<img src="https://storage.googleapis.com/newt-files/b07098c4-ce7f-48f6-acd6-ab54a5d5bd0f%2F2023-04-09_5.png" alt="2023-04-09_5.png"><br>
電話している猫が生成されました。</p>
</li>
</ol>
<h2>規約について</h2>
<p><a href="https://www.bing.com/new/termsofuse?FORM=GENTOShttps://www.bing.com/new/termsofuse?FORM=GENTOS">こちら</a>に記載されています。</p>
<blockquote>
<p>作成物の使用。お客様は、本契約、Microsoft サービス規約、および弊社のコンテンツ ポリシーを遵守することを条件に、オンライン サービス以外の場所で、個人の合法的な非商業的目的のために作成物を使用できます。</p>
</blockquote>
<p>とあるので作成物の使用方法には注意が必要ですね。</p>
<p>以上！</p>


ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

<p>表題の通り「can not mount /dev/loop0 on /cow」をメッセージが出てインストールが止まってしまい、対応したのでその備忘録です。</p>
<h2>結論</h2>
<p>「<a href="https://www.pendrivelinux.com/universal-usb-installer-easy-as-1-2-3/">Universal USB Installer</a>」を使うのをやめて「<a href="https://rufus.ie/ja/#google_vignette">Rufus</a>」を使ったらインストールできました。<br>
原因究明はしてないです…</p>
<p>ちなみに環境は</p>
<ul>
<li>インストールメディアを作成したPCのOS：Windows11</li>
<li>Ubuntuのバージョン：Ubuntu Desktop 22.04.2 LTS（<a href="https://jp.ubuntu.com/download">こちら</a>でダウンロード）</li>
<li>Universal USB Installerのバージョン：2.0.1.4a</li>
<li>Rufusのバージョン：3.22</li>
</ul>
<p>でした。</p>


Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

<p>自分用の備忘録です～</p>
<p>表題にあるように「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることは...」と言われるときは、以下のようにしてしまっているときではないでしょうか？</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key: DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以下のように修正すればokです。</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key in DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以上！</p>


Articles in 2023

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

【YouTubeで聴ける】勉強やコーディングに集中できる個人的オススメ作業用BGM【2023年5月】

Homebrewインストール後に「zsh: command not found:」と言われた人はインストール後に表示される「Next steps: ...」の内容を試してみて

【公式ページのリンクを使おう】iPhoneでもChatGPTのアプリが利用可能になったけど偽アプリをインストールしないように注意しよう

Reactエンジニアがフリーランスエージェントを利用して最短で案件にアサインできるように頑張ってみた

お気に入りのMIDORIのノートで自立できるリングタイプのノートがいつの間にか出ていたので買ってみたらかなりいい感じだった

何かに躓いてChatGPTなどのAIに助けを求めるときは自分も思考するのをやめないの方がいいよ。という話

勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

Articles in 2023

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

【YouTubeで聴ける】勉強やコーディングに集中できる個人的オススメ作業用BGM【2023年5月】

Homebrewインストール後に「zsh: command not found:」と言われた人はインストール後に表示される「Next steps: ...」の内容を試してみて

【公式ページのリンクを使おう】iPhoneでもChatGPTのアプリが利用可能になったけど偽アプリをインストールしないように注意しよう

Reactエンジニアがフリーランスエージェントを利用して最短で案件にアサインできるように頑張ってみた

お気に入りのMIDORIのノートで自立できるリングタイプのノートがいつの間にか出ていたので買ってみたらかなりいい感じだった

何かに躓いてChatGPTなどのAIに助けを求めるときは自分も思考するのをやめないの方がいいよ。という話

勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】