HarioNote

<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>


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

<p>私は現在楽天モバイルを使用しているのですが最近他のキャリアに乗り換えようかなーと検討中…<br>
料金に不満は無いがたまに電波が入りづらいのが理由です。</p>
<p>そんなわけでプラチナバンドが使えるブランドにしたいわけです。</p>
<h2>個人的比較</h2>
<p>調べて比較してみました。（※間違いがあるかもしれないので参考にする際は公式も確認してください。）</p>
<table>
<thead>
<tr>
<th>ブランド</th>
<th>プラン</th>
<th>月額基本料金(税込)</th>
<th>データ量</th>
<th>データ量超過後の通信速度</th>
<th>国内通話</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://www.linemo.jp/plan/">LINEMO</a></td>
<td>ミニプラン</td>
<td>990円</td>
<td>3GB</td>
<td>300kbps</td>
<td>22円/30秒</td>
</tr>
<tr>
<td></td>
<td>スマホプラン</td>
<td>2,728円</td>
<td>20GB</td>
<td>1Mbps</td>
<td>22円/30秒</td>
</tr>
<tr>
<td><a href="https://ahamo.com/plan/#with-phone">ahamo</a></td>
<td>ahamo</td>
<td>2,970円</td>
<td>20GB</td>
<td>1Mbps</td>
<td>5分無料(超過後 22円/30秒)</td>
</tr>
<tr>
<td></td>
<td>ahamo大盛り</td>
<td>4,950円</td>
<td>100GB</td>
<td>1Mbps</td>
<td>5分無料(超過後 22円/30秒)</td>
</tr>
<tr>
<td><a href="https://povo.jp/spec/?gid=povo-spec-head-002">povo (povo2.0)</a></td>
<td>-</td>
<td>0円</td>
<td>トッピングによる(都度購入)<br>例<br>・3GB(30日間)：税込990円<br>・20GB(30日間)：税込2,700円</td>
<td>128kbps</td>
<td>22円/30秒</td>
</tr>
</tbody>
</table>
<h2>その他個人的に気になる特徴、比較ポイント</h2>
<h3>LINEMO</h3>
<ul>
<li>LINEギガフリー</li>
</ul>
<h3>ahamo</h3>
<ul>
<li>デフォルトで5分無料通話が付いてる</li>
<li>海外データ通信20GBまで無料</li>
</ul>
<h3>povo</h3>
<ul>
<li>トッピングという仕様
<ul>
<li>「5分以内通話かけ放題：550円（税込）/月」といったものもあるようだ</li>
</ul>
</li>
</ul>
<h2>現時点での所感</h2>
<p>プライベートと仕事用があるので、プライベートはLINEMOのスマホプランで仕事はpovoかなぁ。</p>


【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

<p>親要素の高さはウィンドウいっぱいに、そして複数の子要素のうち1つだけをウィンドウの余った高さ領域いっぱいにします。<br>
そしてその子要素は、孫要素に高さに関わらずウィンドウの高さが縮んだら縮んでスクロールバーが表示されるようにします。</p>
<p>説明が少し分かりづらいので画像を使って説明します。</p>
<p>以下のように各要素をレイアウトして、「data1~」がある領域はウィンドウ(ブラウザ)の高さに合わせて広がるようにしつつ、<br>
<img src="https://storage.googleapis.com/newt-files/453b040f-8482-4ee5-b87d-8cb8d08e62a6%2F2023-03-29_1.png" alt="2023-03-29_1.png"></p>
<p>ウインドウを縦に縮めた場合に↓のようになるのではなく、<br>
<img src="https://storage.googleapis.com/newt-files/e189dbb5-a77a-4493-b0cd-e1cc4a1ef045%2F2023-03-29_3.png" alt="2023-03-29_3.png"></p>
<p>↓の様になるようにします。<br>
<img src="https://storage.googleapis.com/newt-files/3795359b-955a-412e-877f-0fc10416b349%2F2023-03-29_2.png" alt="2023-03-29_2.png"></p>
<h2>ポイント</h2>
<ul>
<li>flexboxを使う</li>
<li>flex: 1を使う</li>
<li>overflow: autoを使う</li>
<li>うまくいかない場合はmin-height: 0を試してみる</li>
</ul>
<h2>実装例</h2>
<p>以下は最初に添付した画像の内容を実装したReactのコードです。<br>
Reactのコードといっても、「Root」や「FlexBox1」等はReactとemotionでstyleをあてているだけで、divにCSSを設定するのと同様です。</p>
<p>下部に記載されている「…= styled.div`…」あたりのコードと同等の記述をCSSで行えば、純粋なHTML+CSSで同じレイアウトを再現できるはずです。</p>
<pre><code>import styled from &quot;@emotion/styled&quot;;
import { FunctionComponent } from &quot;react&quot;;

const LayoutWithFlexboxPage: FunctionComponent = () =&gt; {
  return (
    &lt;Root&gt;
      &lt;FlexBox1&gt;
        Top
      &lt;/FlexBox1&gt;
      &lt;FlexBox2&gt;
        &lt;ul&gt;
          &lt;li&gt;data1&lt;/li&gt;
          &lt;li&gt;data2&lt;/li&gt;
          &lt;li&gt;data3&lt;/li&gt;
          &lt;li&gt;data4&lt;/li&gt;
          &lt;li&gt;data5&lt;/li&gt;
          &lt;li&gt;data6&lt;/li&gt;
          &lt;li&gt;data7&lt;/li&gt;
          &lt;li&gt;data8&lt;/li&gt;
          &lt;li&gt;data9&lt;/li&gt;
          &lt;li&gt;data10&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/FlexBox2&gt;
      &lt;FlexBox1&gt;
        Bottom
      &lt;/FlexBox1&gt;
    &lt;/Root&gt;
  );
};

const Root = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px;
  background-color: lightblue;
`;

const FlexBox1 = styled.div`
  background-color: lightcoral;
  display: flex;
`;

const FlexBox2 = styled.div`
  background-color: lightgreen;
  display: flex;
  flex: 1;
  overflow: auto;
`;

export default LayoutWithFlexboxPage;

</code></pre>
<p>以上です。</p>
<h3>補足</h3>
<ul>
<li>MUI等の<code>Box</code>を使用する場合、うまくいかなければ上記の例でいうところの「FlexBox2」に「min-height: 0」を指定してみてください。</li>
<li>親要素(Root)の高さは「100%」でもいいですが、さらに親の要素にも「height: 100%」が設定されていないと期待した振る舞いをしないことがあるため「height: 100dvh」を指定しています。</li>
</ul>


【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

<p>2023年の春になりましたし、新たにノートPCを購入する方も多いのかなと思います。そこで様々なメーカーのノートPCを比較しようと思ったのですが、単純にスペックを見ると、今どきはどのメーカーもウェブサイトにてカスタマイズできるのであまり比較にならないなと思いました。そこで、デザインや特徴的な機能で個人的に魅力的に感じたものをピックアップしてただ列挙してみようと思います。</p>
<p>※2023年春モデルもあればそうでないモデルもあります。独断と偏見でピックアップしてます。</p>
<h2><a href="https://dynabook.com/direct/dark-tech-blue-w6rzmw7bal.html">【dynabook】RZ/MW Webモデル ダークテックブルー</a></h2>
<ul>
<li>2023年2月発売</li>
<li>14インチ</li>
<li>940g</li>
<li><strong>バッテリー駆動時間が驚異の約20.5時間</strong></li>
<li>Rシリーズ同等のWebオリジナルモデルのRZシリーズ<br>
<img src="https://storage.googleapis.com/newt-files/4e031e78-483a-4642-a5d9-b1b565f85cc5%2F2023-03-16_1.png" alt="2023-03-16_1.png"><br>
<img src="https://storage.googleapis.com/newt-files/9f48725a-2366-49fb-b554-34f9e211bd68%2F2023-03-16_2.png" alt="2023-03-16_2.png"><br>
<img src="https://storage.googleapis.com/newt-files/bf2259ac-d9ff-4294-a1a1-86a554832fc4%2F2023-03-16_3.png" alt="2023-03-16_3.png"><br>
<img src="https://storage.googleapis.com/newt-files/48b2455c-3742-455e-a97b-7aa87f5c154f%2F2023-03-16_4.png" alt="2023-03-16_4.png"></li>
</ul>
<h3>所感</h3>
<p>・このバッテリー駆動時間は魅力的<br>
・13世代のCore iシリーズ搭載モデル</p>
<h2><strong><a href="https://jp.ext.hp.com/prod/notebooks/business/elite_dragonfly_g3/?jumpid=st_cm_p_sh_gg_bra_dsabnb-2&amp;gclid=CjwKCAjw_MqgBhAGEiwAnYOAephFGzhfPsde61nQF2NOVonVygWRKJ7T9ynhYm6Z6XssLsSoZrVLKhoCgGgQAvD_BwE&amp;gclsrc=aw.ds">【HP】HP Elite Dragonfly G3</a></strong></h2>
<ul>
<li>13.5インチ</li>
<li>約1.0kg</li>
<li>3:2の画面比で縦に広い</li>
</ul>
<p><img src="https://storage.googleapis.com/newt-files/638e4702-4d14-46ed-abe0-b7b2d23d3ada%2F2023-03-16_5.png" alt="2023-03-16_5.png"><br>
<img src="https://storage.googleapis.com/newt-files/1cd9ed6c-037c-4967-b09f-3e5c36083c04%2F2023-03-16_6.png" alt="2023-03-16_6.png"><br>
<img src="https://storage.googleapis.com/newt-files/104e3c48-639d-41cc-8c07-23d4406bd40f%2F2023-03-16_7.png" alt="2023-03-16_7.png"><br>
<img src="https://storage.googleapis.com/newt-files/d8683a0f-135a-4d28-8135-5855cb951104%2F2023-03-16_8.png" alt="2023-03-16_8.png"></p>
<h3>所感</h3>
<p>・キーボードのデザインが美しい</p>
<h2><strong><a href="https://www.dell.com/ja-jp/shop/%E3%83%87%E3%83%AB%E3%81%AE%E3%83%8E%E3%83%BC%E3%83%88%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3/xps-13-plus-%E3%83%8E%E3%83%BC%E3%83%88%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3/spd/xps-13-9320-laptop/smx1800sptas16on3ojp">【Dell】 XPS 13 Plus</a></strong></h2>
<p><img src="https://storage.googleapis.com/newt-files/d57a0c08-50aa-4122-aa09-53a913a95869%2F2023-03-16_9.png" alt="2023-03-16_9.png"><br>
<img src="https://storage.googleapis.com/newt-files/dc6dd794-6331-4da4-8889-5344530281ae%2F2023-03-16_10.png" alt="2023-03-16_10.png"><br>
<img src="https://storage.googleapis.com/newt-files/9c0b3e0d-fb57-49ae-bf4d-818564d26048%2F2023-03-16_11.png" alt="2023-03-16_11.png"><br>
<img src="https://storage.googleapis.com/newt-files/1994db0e-65a1-4946-9a04-c7bb0b885b77%2F2023-03-16_12.png" alt="2023-03-16_12.png"></p>
<h3>所感</h3>
<p>・デザインがめちゃめちゃ美しい<br>
・側面のポートはかなり削ぎ落とされている？</p>
<h2><strong><a href="https://www.microsoft.com/ja-jp/d/surface-laptop-5/8xn49v61s1bn?activetab=pivot%3aoverviewtab">【Microsoft】 Surface Laptop 5</a></strong></h2>
<ul>
<li>13.5インチ / 15インチ</li>
<li>色がいくつか選べるがどれも綺麗</li>
</ul>
<p><img src="https://storage.googleapis.com/newt-files/c473fc44-17d0-49d4-b084-f42b891e8f3c%2F2023-03-16_13.png" alt="2023-03-16_13.png"><br>
<img src="https://storage.googleapis.com/newt-files/f050ba80-2501-45f7-8d55-df11526133a3%2F2023-03-16_14.png" alt="2023-03-16_14.png"></p>
<h3>所感</h3>
<p>・キーボードが美しい<br>
・全体的に質感が良い</p>
<p>以上！</p>


【2023年】春だし気になるノートPCピックアップしてみる

<p>久々にVisual StudioにてWPFプロジェクトのパッケージを確認したら、「NLog」と一緒にインストールしていた「NLog.Config」にて「パッケージは非推奨になりました。」との表記が…<br>
「More info」と表記されたの<a href="https://www.nuget.org/packages/NLog.Config/4.7.15?_src=template">リンク先のページ</a>を確認してみます。</p>
<p>リンク先のページを確認する限り、NLog.configはリリースをやめてしまったようです。使用すると予期せぬ動作をすることがあるようです。下の方のREADMEにはPackageReferenceを使用する場合にうまく機能しない旨の記載もあります。<br>
READMEにもあるようにNLog.configパッケージはNLogを使用するうえで必須ではないようですので、NLog.configはアンイストールして使用してみます。</p>
<h2>結論</h2>
<p>先に結論だけ言いますと、NLog.configパケージはなくとも問題なく動作しました。（ちゃんとプロジェクト内に作成したNLog.configファイル通りに動作しました。）</p>
<p>以下はNLog.configファイルの作成手順および注意点の備忘録です。</p>
<h2>NLog.configファイル作成手順と注意点</h2>
<h3>前提</h3>
<ul>
<li>NLogパッケージはNuGetで追加(インストール)済みとします。</li>
</ul>
<h3>手順</h3>
<p>以下備忘録も兼ねてNLog.configファイルの作成手順をまとめます。</p>
<ol>
<li>VisualStudioのソリューションエクスプローラーにて自身のプロジェクトを右クリック &gt; 追加 &gt;  新しい項目 をクリック<br>
<img src="https://storage.googleapis.com/newt-files/63d3869d-c4dc-4d1a-97b3-6919d1f8b2ea%2F2023-03-13_1.png" alt="2023-03-13_1.png"></li>
<li>左メニューの全般 &gt; アプリケーション構成ファイルを選択 &gt; 「NLog.config」という名前を入力して「追加」ボタンクリック<br>
<img src="https://storage.googleapis.com/newt-files/f11af998-ac24-46df-b628-c88b20a54dcf%2F2023-03-13_2.png" alt="2023-03-13_2.png"></li>
<li>プロジェクトにNLog.configファイルが追加されるのでソリューションエクスプローラーで確認</li>
<li>ソリューションエクスプローラーにて「NLog.config」ファイルを選択し、プロパティ欄に表示される情報を以下のように変更する。</li>
</ol>
<ul>
<li><strong>ビルドアクション</strong>：「コンテンツ」</li>
<li><strong>出力ディレクトリにコピー</strong>：「新しい場合はコピーする」<br>
<img src="https://storage.googleapis.com/newt-files/b31f8d47-ccc0-4e1a-9757-7a6116c8e0fe%2F2023-03-13_3.png" alt="2023-03-13_3.png"><br>
これらを設定しないと、後述のNLog.configの記述をしてもログが出力されません。</li>
</ul>
<ol start="5">
<li>NLog.configファイルを記述する<br>
NLog.configファイルの内容はNLogのGitHubの<a href="https://github.com/nlog/nlog/wiki/Tutorial">Tutorialページ</a>ある例を参考に記述すればokです（コピペでok）。</li>
</ol>
<p>今回私は以下のように記述しました。</p>
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;nlog xmlns=&quot;http://www.nlog-project.org/schemas/NLog.xsd&quot;
      xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&gt;

	&lt;targets&gt;
		&lt;target name=&quot;logfile&quot; xsi:type=&quot;File&quot; fileName=&quot;Logs/log.txt&quot;  layout=&quot;${date:format=yyyy-MM-dd HH\:mm\:ss} ${message}&quot;/&gt;
		&lt;target name=&quot;logconsole&quot; xsi:type=&quot;Console&quot;  layout=&quot;${date:format=yyyy-MM-dd HH\:mm\:ss} ${message}&quot;/&gt;
	&lt;/targets&gt;

	&lt;rules&gt;
		&lt;logger name=&quot;*&quot; minlevel=&quot;Trace&quot; writeTo=&quot;logconsole&quot; /&gt;
		&lt;logger name=&quot;*&quot; minlevel=&quot;Trace&quot; writeTo=&quot;logfile&quot; /&gt;
	&lt;/rules&gt;
&lt;/nlog&gt;
</code></pre>
<p>上記の記述だと、デバッグ時にコンソールに出力され、かつLogsディレクトリ配下にlog.txtファイルが作成され、そこにもログが出力されるようになります。<br>
要点としては</p>
<ul>
<li>Logsディレクトリ(フォルダ)が無い場合は自動で作成されます。</li>
<li>ログ出力時に既存のlog.txtファイルがあれば、ログはlog.txtファイルに追記する形で出力されます。（どんどん蓄積していく）</li>
<li>Logsフォルダはアプリケーションの.exeファイルと同ディレクトリに作成されます。</li>
</ul>
<p>といった感じになります。</p>
<p>以上です。</p>


【WPF/C#】NLog.Configパッケージが非推奨になってた。NLog.Configファイル作成時の注意点の備忘録【NLog】

<p>表題にある通り、ローカルPCで開発中のWebアプリ(localhost)に、同じWi-Fiに接続しているiPhone(実機)でアクセスして動作確認したいと思い、esetの設定を行った際の備忘録です。<br>
私の場合はReactアプリですが、Reactでなくともこの辺りの設定は変わらないと思います。実機もiPhoneでない場合も同じかと思います。(試してはいません)</p>
<h2>前提および対象者</h2>
<p>本記事の内容は以下の項目(環境等)が前提となります。</p>
<ul>
<li>localhostでWebアプリを立ち上げているPC(開発に使用しているPC)はWindowsで、かつESET(セキュリティソフト)を使用している</li>
<li>PCと実機(iPhone)は同じWi-Fiに接続されている</li>
</ul>
<h2>設定方法</h2>
<h3>iPhoneのipアドレス確認</h3>
<p>まず、iPhoneがWi-Fiに接続している際のipアドレスを確認しておきます。<br>
設定 &gt; Wi-Fi &gt; 接続しているWi-Fiをタップ &gt; 下の方にある「IPアドレス」を確認<br>
<img src="https://storage.googleapis.com/newt-files/2c95e51a-66ea-4ca2-a6ce-55fa46b1d609%2FS__81870852.jpg" alt="S__81870852.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/03adf448-7978-4006-b0f8-82de4911ea58%2FS__81870854.jpg" alt="S__81870854.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/3af06dd6-7074-4386-8bf7-a389b14383e7%2FS__81870855.jpg" alt="S__81870855.jpg"><br>
確認したらこれをメモしておきましょう。</p>
<h3>ESETの設置</h3>
<p>PCでESETを開き以下のように設定します。</p>
<ol>
<li>左メニューの「設置」を選択し「ネットワーク保護」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/ff011aaf-b056-44e7-8bc6-dfa5ec33a33c%2F2023-03-11_1.png" alt="2023-03-11_1.png"></li>
<li>「ファイアウォール」の項目の右端の歯車アイコンをクリックし「設定...」を選択<br>
<img src="https://storage.googleapis.com/newt-files/4e2e1828-41e6-4b28-a782-3defab3b14ab%2F2023-03-11_2.png" alt="2023-03-11_2.png"></li>
<li>左メニューの「ファイアウォール」の項目を選択し、「詳細」の欄を展開し中にある「編集」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/1b0bca30-e095-4d9d-8998-ebc41bfa18a3%2F2023-03-11_3.png" alt="2023-03-11_3.png"></li>
<li>「ファイアウォールルール」ウィンドウが開くので、下の方にある「追加」ボタンをクリック<br>
<img src="https://storage.googleapis.com/newt-files/8b2e6ee6-e759-49f7-bd1b-bd44894b0a4e%2F2023-03-11_4.png" alt="2023-03-11_4.png"></li>
<li>「一般」タブで以下の項目を入力</li>
</ol>
<ul>
<li>名前→何用途のルールかわかるように名前をつける</li>
<li>方向→私は「内向き」で設定しましたが、各々必要に応じで変更してください。</li>
<li>アクション→「許可」にします。</li>
<li>プロトコル→「TCPおよびUDP」でok<br>
<img src="https://storage.googleapis.com/newt-files/d30a0723-222c-43f0-8588-9e824d22065a%2F2023-03-11_5.png" alt="2023-03-11_5.png"></li>
</ul>
<ol start="6">
<li>「ローカル」タブで、「ポート」の欄に開発中にWebアプリをlocalhostで立ち上げる際に使用しているポート番号を入力<br>
<img src="https://storage.googleapis.com/newt-files/1a7c9b34-a499-4d9f-817b-f95f08f859bc%2F2023-03-11_6.png" alt="2023-03-11_6.png"></li>
<li>「リモート」タブで、「IP」の欄に先程メモしておいた実機(iPhone等)のipアドレスを入力<br>
<img src="https://storage.googleapis.com/newt-files/c7bb61a6-bd45-4f36-b3cf-e3843900a155%2F2023-03-11_7.png" alt="2023-03-11_7.png"></li>
<li>OKボタンで各ウィンドウを閉じて設定を適用する。</li>
</ol>
<p>設定は以上になります。</p>
<p>あとはiPhoneでSafari等を起動し、「PCのipアドレス:ポート番号」にアクセスすればPCで立ち上げているWebアプリにアクセスできるはずです。</p>
<p>以上！</p>


Recent Articles

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

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

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

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

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

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

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

【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【2023年】春だし気になるノートPCピックアップしてみる

【WPF/C#】NLog.Configパッケージが非推奨になってた。NLog.Configファイル作成時の注意点の備忘録【NLog】

【React/iPhone/localhost】ESETを使っているWindowsPCで、開発しているWebアプリ(localhost)にiPhoneでアクセスできるようにして動作確認をする【Wi-Fi】

Recent Articles

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

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

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

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

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

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

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

【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【2023年】春だし気になるノートPCピックアップしてみる

【WPF/C#】NLog.Configパッケージが非推奨になってた。NLog.Configファイル作成時の注意点の備忘録【NLog】

【React/iPhone/localhost】ESETを使っているWindowsPCで、開発しているWebアプリ(localhost)にiPhoneでアクセスできるようにして動作確認をする【Wi-Fi】

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