<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>今回から新たに運営として参加してくださったTaigaさん主催のイベントとなります！<br><a style="background-color:#ffffff" href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taigaさん</a><br>今回もLTのレベルが高く学びの多い会となりました！<br>LT登壇者の皆さま本当にありがとうございました！<br>下記に登壇者の資料をまとめているので是非ご覧ください！<br>(どんどんハードルが上がってやりづらくなってきたのも確かなので、次回以降はネタ枠も設けるつもりです。笑)</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="h0befa3b07a">Sumiren「Next.js 13 App Directory推し機能と仕組み」</h3><p><a href="https://twitter.com/sumiren_t" target="_blank" rel="noopener noreferrer">sumiren</a><br><a href="https://docs.google.com/presentation/d/1JZKbj-I5OCRGIix9RdUdeFQuIJbyelH_3eC7ofnNnwk/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1JZKbj-I5OCRGIix9RdUdeFQuIJbyelH_3eC7ofnNnwk/edit#slide=id.p</a></p><h3 id="h5a6b2b4fc2">nozomi_iida0106「Hasuraを使った新しい開発体験」</h3><p><a href="https://twitter.com/nozo_i0106" target="_blank" rel="noopener noreferrer">nozomi</a><br><a href="https://docs.google.com/presentation/d/14cCu_rIrpYCzTlAq2kSi6lsD2L9_3k4t52D3yjafabg/mobilepresent?slide=id.g1fc078525d7_0_202" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/14cCu_rIrpYCzTlAq2kSi6lsD2L9_3k4t52D3yjafabg/mobilepresent?slide=id.g1fc078525d7_0_202</a></p><h3 id="h21f5514297">ユウト「フロントエンドのSEOについてのきほん」</h3><p><a href="https://twitter.com/codeyy_dev" target="_blank" rel="noopener noreferrer">ユウト</a><br><a href="https://www.icloud.com/keynote/064qoYUtHqZDXKs9xkxRZX9iA" target="_blank" rel="noopener noreferrer">https://www.icloud.com/keynote/064qoYUtHqZDXKs9xkxRZX9iA</a></p><h3 id="h15db6d441f">Taiga「トランクベース開発のすすめ」</h3><p><a href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taiga</a><br><a href="https://speakerdeck.com/taigaskg/torankubesukai-fa-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/taigaskg/torankubesukai-fa-nosusume</a></p><h3 id="hef2065a804">renren0825「Webアプリにおけるパフォーマンスチューニング」</h3><p><a href="https://twitter.com/renrenlqqz" target="_blank" rel="noopener noreferrer">れんれん</a><br><a href="https://docs.google.com/presentation/d/1wLYrmVljzwAAOEHXcP_60G9CbemQBiFDjxKxzILysdA/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1wLYrmVljzwAAOEHXcP_60G9CbemQBiFDjxKxzILysdA/edit#slide=id.p</a></p><h3 id="h2f1cb09a88">masa「社内SEがアプリを企画した話」</h3><p><a href="https://twitter.com/Masa_Xedge" target="_blank" rel="noopener noreferrer">Masahiro Nishiguchi@よみとくアプリ</a><br><a href="https://www.canva.com/design/DAFYqhsFeYQ/dlStmXzv6aIKBcNmyxtZkQ/edit?utm_content=DAFYqhsFeYQ&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton" target="_blank" rel="noopener noreferrer">https://www.canva.com/design/DAFYqhsFeYQ/dlStmXzv6aIKBcNmyxtZkQ/edit?utm_content=DAFYqhsFeYQ&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton</a></p><h2 id="h751ccae4f7">参加者の声</h2><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の勉強会もとても良い刺激を頂いた。<br><br>技術的なお話以上に、２次会で交流会させて頂いて色々な話しが出来るのがとても楽しい！<br><br>皆様々なバックグラウンドがあり、目指すべき所も色々あるけれど、互いに刺激しあいながら進めるってすごくいい。<br><br>本日もありがとうございました！ <a href="https://t.co/xaFoZw5C23">https://t.co/xaFoZw5C23</a></p>&mdash; TAKE_CC6 (@TAKE_CC6) <a href="https://twitter.com/TAKE_CC6/status/1619284417868107776?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LT&amp;交流会楽しかったー！！<br>LTやって良かった😊</p>&mdash; nozomi (@nozo_i0106) <a href="https://twitter.com/nozo_i0106/status/1619280004134899712?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="hd2cb4029dc">次回イベント</h2><p>次回はRyoCaさんの初主催イベント「個人開発アイディア交換&amp;交流会」を3月に開催します！<br><a style="background-color:#ffffff" href="https://twitter.com/ryocacode" target="_blank" rel="noopener noreferrer">RyoCaさん</a><br><a href="https://devguil.connpass.com/event/273629/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/273629/</a><br>下記に当てはまる方は是非ご参加ください！！！</p><ul><li>「これから個人開発を始めてみたい！」</li><li>「作ったサービス・アプリを紹介したい！」</li><li>「周りの人がどんなものを作っているのか知りたい！」</li><li>「情報交換したいけど周りに話せる人がいない？」</li></ul><p>また、運営メンバーも絶賛大募集中ですので【勉強会の運営をしてみたい】と思った方は是非お声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

私が運営しているDevelopers Guildの2023年一発目のイベントまとめ記事となります。

LT＆交流会【1月28日(土)@渋谷】イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営しているTSLabでは、定期的にTypeScriptやReactの勉強会を実施しております。<br>今回から新たにGraphQLを取り扱っていくことになったので、簡単なログとしてまとめていこうと思います。<br>このGraphQL勉強会も例の如く公式のドキュメントを元にディスカッション。<br>まずは初回ということで、GraphQLの基礎を学習していきました。</p><h2 id="hefb7c37635">実施内容</h2><h3 id="h6d5cff9ff1">Introduction to GraphQL</h3><p>まずばGraphQLの概要。<br>本当に基礎的な内容になるのでサクッと流しつつGraphQLの特徴だけを学習<br><a href="https://graphql.org/learn/" target="_blank" rel="noopener noreferrer">https://graphql.org/learn/</a></p><h3 id="hbbd599d224">Queries and Mutations</h3><p>ここからが本題。<br>GraphQLのメインとなるQueryとMutationの使い方について学習。<br><a href="https://graphql.org/learn/queries/" target="_blank" rel="noopener noreferrer">https://graphql.org/learn/queries/</a><br>具体的には下記の内容について軽くディスカッションをしつつ、概要や使い方をインプット。</p><ul><li>Fields</li><li> Arguments</li><li> Aliases</li><li> Fragments</li><li> Operation name</li><li> Variables</li><li> Directives</li><li> Mutations</li><li> Inline Fragments</li></ul><p>ドキュメント内のプレイグラウンドでクエリを変更すると結果に反映されるので学習教材としてとても良いですね。<br>ポケモンのデータを検索できるサービスを叩いて遊んでる方も数名いらっしゃったのですが、こちらも学習には良さそうなので気になる方は下記のリンクから触ってみてください。<br><a href="https://graphql-pokemon2.vercel.app/" target="_blank" rel="noopener noreferrer">https://graphql-pokemon2.vercel.app/</a></p><h2 id="hbc4d84d553">学習内容</h2><h3 id="h26ec5b198b">オーバーフェッチ、アンダーフェッチを回避できる</h3><p>RESTは決められたフィールドを返すのに対し、GraphQLはクライアント側で必要なフィールドを明示的に要求するため、オーバーフェッチやアンダーフェッチが起こらないのが最大の特徴。<br>データ取得後にクライアント側で不要なフィールドを破棄したり、必要なデータが増えたためにバックエンド側の反映を待つ必要が無いのは良いですね。<br>上記の理由によりクライアント側の事情に引きづられ辛くなるので、バックエンド側の実装においてもメリットが大きいのではないかと思います。</p><h3 id="h1e0ca01b1e">N+1問題について</h3><p>GraphQLを触ってみるとすぐN+1問題にぶち当たるのが想像できると思います。<br>実際どのグループでも議題に上がっていましたしね。<br>問題として話題には上がりましたが解決方法まで議論は進んでいなかったので次回以降の議題に上げても良さそうですね。<br>Prismaを使うことである程度回避できる(?)的な情報もあったので今後触れてみても良いかも。<br><a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">https://www.prisma.io/</a></p><h3 id="hdf3ba3ba10">REST から GraphQLに変えることで全てが良くなるという訳でもない</h3><p>当たり前の話になりますが技術には長所と短所があります。<br>どのグループもRESTと比較して話をしていましたが、根本的に考え方が異なるので学習コスト/導入コストは少々高いのかなと感じました。<br>特に「複数箇所から呼ばれたりユーザーの検索クエリによってフィールド構造が大きく変化する場合を除いてはRESTで良くね？」みたいな話も上がっていたので、どういったケースで導入すると良さそうかなどは今後の議題に上げても良さそうですね。</p><h2 id="h8d78e14043">感想</h2><h3 id="h5d25774fc1">触らんとイメージ出来ん</h3><p>当たり前っちゃ当たり前のことですが、ドキュメントだけ読んでも「で？それが何？」になっちゃいますね。笑<br>今回の参加者の内、実際に環境を構築してきた人は30%程。<br>この方々の方が深い議論になるので言うまでもないですね。<br>今回の反省を踏まえつつ、次回の勉強会では実際にGraphQLを触れる環境で遊んでみようかなと考えています。<br>(構築してくれるイケメンさん頼んだ!!)</p><h3 id="h9cd3a7ade5">ツールやライブラリの話に飛びがち</h3><p>今回の主目的は「GraphQLの基礎を一から学習する」としていたのですが、やはりApolloの話に飛んだりが多かったかなといった印象。<br>これはちょっと運営の仕方が良くなかった。ごめんちゃい。</p><h3 id="hc83f6b7cb1">フルスタック寄りの人の方がメリットを感じやすかったかも</h3><p>フロントエンド寄りの参加者が多かったからか「使うイメージが湧かない」といった声がちらほら...<br>ただし、フルスタックに開発している人は導入のメリットやデメリットまで踏み込めていた印象です。<br>GraphQLはクエリ言語かつランタイムの話だから当たり前といえば当たり前ですかね。笑</p><h2 id="h1afe451c43">さいごに</h2><p>初回から色んな疑問が飛び交っていたので会としてはまずまず良かったのかなと思います。<br>事前に触ってきた人はある程度深い議論をされてましたが、ドキュメントを読んだだけの人は割とフワッとしか捉えられていなさそうだなといった印象でした。<br>(私は今の現場で使っているのである程度イメージ出来ますが、最初はよくわからなかったなぁ。)<br>次回は実際の環境を構築して触りながら学習する場にシフトしようと思います！<br>以上。最後までご覧いただきありがとうございます！</p>

当記事はTSLab・GraphQL勉強会のレポート記事になります。

TSLab【第1回 GraphQL勉強会】

<h2 id="h11189aff12">トピックス</h2><h4 id="h054db13ff3">1月</h4><h3 id="hec6c883aa6">TypeScript勉強会 開始</h3><p>TypeScriptを使って2年以上が経っても全然理解できていなかったので輪読会形式の勉強会を開いてみました。<br>当初は50人以上の人が参加していたのですが本気度の高い人だけが徐々に残り、最後は型パズルを披露するほどの変態さん達で熱くディスカッションする勉強会へと変わっていきました。<br>後半はReactやNestJSなどのフロントTS / バックTSのテーマに絞った会も開けるようにようになったので本当にやって良かったと思います。<br>参加してくれてる人たちとは毎週ディスカッションしていたから忘れがちですが、実はまだ会ってから1年も経っていないという。。。嘘だろ。。</p><h4 id="h924bfda0e5">1月〜5月</h4><h3 id="h13fc503823">ブロックチェーンを用いたスキル証明機能の開発</h3><p>某スクールにてカリキュラム受講者に対して発行する修了証の代替となる「Openbadge」の発行機能を開発。<br>通常の修了証と異なり、修了者情報をブロックチェーン上に保存するため、改ざんが難しく情報の透明性も担保できるのが特徴。<br>実装よりもブロックチェーンの概念理解が一番大変でしたね。。。<br>(初のブロックチェーン案件、初の実務Python、なんだかんだで最初のインプットがマジでえげつなかった。。。)<br>あまり詳しいことは話せないので概要だけ簡単にまとめておきます。</p><h4 id="h9707d3a59a">概要</h4><ol><li>アプリケーション側から修了者がオープンバッジの発行申請</li><li>PythonサーバーでBlockcertsを介してブロックチェーンネットワークに起票</li><li>この時に同時にオープンバッジデータも生成</li><li>起票された証明書を配布用に配置</li><li>アプリケーション側から修了者にオープンバッジを配布</li></ol><h4 id="h48162eced8">使用技術</h4><ul><li>Blockcerts</li><li>Openbadge</li><li>Python / Flask</li><li>Ruby / Ruby on Rails</li><li>TypeScript / React</li></ul><h4 id="h5c208a15de">Blockcerts</h4><p><a href="https://www.blockcerts.org/" target="_blank" rel="noopener noreferrer">https://www.blockcerts.org/</a></p><h4 id="hed5c62b3bb">Openbadge</h4><p><a href="https://www.openbadge.or.jp/about-ob" target="_blank" rel="noopener noreferrer">https://www.openbadge.or.jp/about-ob</a></p><h4 id="hc6e3d95856">登壇資料</h4><p><a href="https://speakerdeck.com/weberyota/hurotukutienwohuo-yong-sitasukiruzheng-ming-ji-shu" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/hurotukutienwohuo-yong-sitasukiruzheng-ming-ji-shu</a></p><h4 id="hadc792b2f6">5月</h4><h3 id="hc3ac9d5771">オフライン勉強会 再開</h3><p>2〜3年前は頻度高く開いていた勉強会/もくもく会ですが、しばらくコロナの影響で中止をしていました。<br>5月頃にようやく世間の雰囲気が変わってきたので久しぶりに再開してみたところ、2〜3年前に参加してくれてた方々がまた集まってくださいました。<br>この時までは一人で運営をしていたのですが、今では優秀な運営メンバーも集まってくれたので、2023年は毎月開催を目標に運営していこうと思います。</p><h4 id="hd817dfe282">6月</h4><h3 id="ha354732349">Storybook / Swagger 導入</h3><p>コンポーネント開発をしていると当たり前のように使うStorybook。<br>API定義で当たり前のように使うSwagger。<br>当時いた会社ではこのどちらも使用されていなく、かつ仕様書もまともに無かったので「作った本人しか分からない」状態でした。<br>流石にこりゃヤベェと感じてドキュメント整備の観点から、StorybookとSwaggerを導入してみました。</p><h4 id="he44e82f508">7〜9月</h4><h3 id="hff0add6a48">SEO施策 / 新規機能開発</h3><p>LP経由やプロダクトからのユーザー流入数を増やすための施策を頻度高く実施。<br>この案件はマーケターさんとタッグで取り組めたので、マーケターさんの知見を盗むことが出来たとても良い経験でした。<br>特にGAの見方やデータ収集方法、SEOにおいてのセオリーや改善施策など、普段とは違った視点でのタスクを行えたので少しだけ視野が広がった気がします。</p><h4 id="h5eaf20040d">10月</h4><h3 id="hacc8fc953e">フリーランスとして独立</h3><p>独立しました。以上。<br>手取りがバカみたいに増えました。<br>もっと早くすれば良かったです。</p><h4 id="h71d61d1928">10月〜12月</h4><h3 id="h0986c6b911">Electron × React デスクトップアプリ開発</h3><p>フリーランスとしての初案件でデスクトップアプリ開発案件に参画。<br>シンプルにElectronが凄い。だが癖も凄い。<br>特にIPC通信が絡む開発だと一気に複雑性を増すので今だに苦戦中です。<br>レンダラー側(React)はテストコードがゴリゴリに書かれていてカバレッジ率もめちゃくちゃ高い。<br>ここまで堅牢な設計のアプリ開発をさせてもらったのは初なので考え方が大きく変わりました。<br>Reactのテストについては今度勉強会とかでアウトプットしていこうと思います。</p><h4 id="hc6e3d95856">登壇資料</h4><p><a href="https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume</a></p><h4 id="h05cb5cb332">12月</h4><h3 id="hf5005b1f06">Astro × Svelte × Cloudflare ポートフォリオ作成</h3><p>最近いろんな方とお会いするようになり自己紹介をするシーンが増えてきたので、いっそ名刺代りのサイトを作っちゃおうということでAstro × Svelte × Cloudflareでポートフォリオを作ってみました。<br>とりあえず言えることはバカ早い。マジでパフォーマンスが良い。<br>簡単なサイトならしばらくこの構成でいい気がしてきてます。<br>今回はサクッと適当に作ったので、どこかのタイミングでデザインをしっかりしてリプレイスしようと思います。</p><h2 id="h8d78e14043">感想</h2><h3 id="h99b75dc5cb">勉強会やりすぎ</h3><p>今年だけで27回もやってる。流石にやりすぎ。<br>ただそのおかげで企画・開催・運営が安定してきましたし、安定して人が集まって頂ける状態になったのは事実です。<br>冷静に考えるとオンライン/オフライン合わせて今年だけで100人以上の方とお会いしてるのはヤバい。。。</p><h3 id="hd33fbfb67a">フリーランス転向</h3><p>正直な感想は「あまり変わらねぇ」。<br>ただ契約が違うだけで働き方は全く変わらないですね。</p><h3 id="hc52cd8ea9d">収入が増えた</h3><p>フリーランス転向したことで収入は確実に上がりました。<br>去年の抱負で書いた「エンジニア収入だけで200万アップさせる」は余裕でクリア。<br>むしろ目標が低すぎたかもしれません。<br>本気でお金の勉強をしないとマズいなと思う今日この頃です。</p><h3 id="ha69c9333be">フロントエンド寄りに</h3><p>去年まではバックエンドやインフラ構築が主戦場でしたが、今年は完全にフロント寄りになってきました。<br>全てが中途半端だったので、一旦フロント中心に力を付けちゃうのも良いかもしれないと思う今日この頃です。<br>ただフロントの技術進化が早すぎて着いていけないのも事実なので、ある程度の所まで行ったら路線変更するかもしれません。</p><h2 id="h1afe451c43">さいごに</h2><p>今年は独立したり勉強会を開きまくったりと色々あったので、そこそこまぁまぁな一年だったかなと思います。<br>勉強会を通じてTypeScriptの理解が一段深まったので、開いて本当に良かったと思います。<br>来年の勉強会は毎月Mustでやりつつも、新しい企画をぶっ込んでいく予定です。<br>来年はエンジニア事業以外にもう一つ事業を増やしたいのでそっちにパワーを割いていきつつ、プライベートではビリヤードをガチっていこうと思います！<br>以上。簡単な振り返りとなります！<br>最後までお付き合いいただきありがとうございました！</p>

エンジニア3年目となり環境も収入も大きく変化したので簡単に振り返ってみたいと思います。
※この記事は自分に向けたログでもあるので完全に自己満的な記事になります。

2022年の振り返り【Webエンジニア3年目】

<h2 id="h8d027c8ed3">はじめに</h2><p>タイトル通りとなりますが、React で select フィールドの型を縛ってみました。<br>結論から言うと<strong style="background-color:#fff8b6">Type Guard</strong>を挟むことで特定の値しか受け付けず、string型の許容を排除した内容となります。<br>なんて事のない、ただのselectフィールドがこちら<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/c5b9fb3c320e49c09c55e4cddc1e06ea/react-type-guard-1.webp" alt=""></p><pre><code>const [selectValue, setSelectValue] = useState('hoge')

&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value)}&gt;
  &lt;option value="hoge"&gt;hoge&lt;/option&gt;
  &lt;option value="fuga"&gt;fuga&lt;/option&gt;
  &lt;option value="piyo"&gt;piyo&lt;/option&gt;
&lt;/select&gt;</code></pre><p>要はこの<strong>selectValue</strong>にhoge / fuga / piyo 以外の値が入らないように型を縛ったということですね。<br>上記では分かりやすくoptionを並べましたが、一旦optionsを定数化してmapで並べる一般的な形に変換しましょう。<br>(通常この手の定数はconstants等にまとめますが、今回はわかりやすく同一ファイルに書いています。)</p><pre><code>const SELECT_OPTIONS = ['hoge', 'fuga', 'piyo'] as const

const [selectValue, setSelectValue] = useState('hoge')

&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value)}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>ではこの状態から始めましょう。</p><h2 id="h3988ee878e">第一段階: useStateの型を縛る</h2><p>まずはSELECT_OPTIONSのリストからユニオン型のTSelectFieldを生成しておきます。</p><pre><code>const SELECT_OPTIONS = ['hoge', 'fuga', 'piyo'] as const
type TSelectField = typeof SELECT_OPTIONS[number]
// -&gt; type TSelectField = "hoge" | "fuga" | "piyo"</code></pre><p>そんでもってこのTSelectFieldをuseStateに割り当ててあげます。<br>そうすると当然ですがselectValueが"hoge" | "fuga" | "piyo"に型補完されてますね。(そりゃそうじゃ)</p><pre><code>const [selectValue, setSelectValue] = useState&lt;TSelectField&gt;('hoge')
// selectValueをホバー
// -&gt; const selectValue: "hoge" | "fuga" | "piyo"</code></pre><p>ここまでは何の変哲もないuseStateの扱い方ですが、一点問題点が発生しています。<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/df7721d50875407a964e66006afb0d0c/react-type-guard-2.webp?w=800&amp;h=217" alt=""><br>はいエラってますね。<br>そうです。useState&lt;TSelectField&gt;で型を縛ったことによって、selectのonChage Eventとの型にズレが生じています。<br>こいつを解決するのが今回の主目的です。</p><h2 id="h3a5c816706">第二段階: 型アサーションで強引に割り当てる</h2><p>手取り早く、型アサーション( as )で無理やり型を割り当ててあげます。</p><pre><code>// as TSelectField 追加
&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value as TSelectField)}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>これでエラーも消えて解決！！！<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>否！そうは問屋が卸しません！！<br>asを使うとコンパイルエラーを握りつぶすことが出来ますが、実行時エラーを出すケースがあります。<br>as はコンパイラの型推論を強制的に上書いているに過ぎないので、注意しないと予期せぬバグを孕む危険性があります。<br>実際に私が現在参画している案件では as の使用を固く禁じています。<br>as の危険性については調べると山ほど記事が出てくるので是非ご自身でも調べてみてください。</p><h2 id="h1d8c748fe9">第三段階: Type Guard を仕込んでみる</h2><p>お待たせしました。ここからようやく本題です。笑<br>やることは非常にシンプルです。<br><em>e</em>.target.valueがTSelectField ("hoge" | "fuga" | "piyo")とマッチしているかを事前にチェックすることで、TSelectField以外のstring型が入る余地を無くしてあげれば良いのです。<br>実はselectのeventの型ChangeEvent&lt;HTMLSelectElement&gt;は変更が出来ないので、stringとして受け取ってType Guardでチェックする関数を定義します。</p><pre><code>const onChangeSelect = (event: ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
  // as を使わず Type Guard で 型チェックする
  setSelectValue(event.target.value as TSelectField)
}

&lt;select value={selectValue} onChange={onChangeSelect}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>ここまで出来たら後はsetSelectValueの前でType Guardしてあげるだけです。</p><pre><code>const isTSelectField = (value: string): value is TSelectField =&gt;
  Object.values(SELECT_OPTIONS)
    .map&lt;string&gt;((value) =&gt; value)
    .includes(value)

const onChangeSelect = (event: ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
  // Type Guardを追加
  if (isTSelectField(event.target.value)) setSelectValue(event.target.value)
  // 後ろのvalueをホバー: -&gt; (property) HTMLSelectElement.value: "hoge" | "fuga" | "piyo"
}</code></pre><p>おりゃ！<br>asを使っていませんがevent.target.valueの方が"hoge" | "fuga" | "piyo"に補完されてますね！<br>isTSelectFieldを分解すると</p><pre><code>// SELECT_OPTIONS から string配列型 の新たな配列を生成
// 新しい配列を生成することでエラーを回避 (型 'string' の引数を型 '"hoge" | "fuga" | "piyo"' のパラメーターに割り当てることはできません。)
Object.values(SELECT_OPTIONS)
  .map&lt;string&gt;((value) =&gt; value)

// 配列内に value が含まれているかチェックし boolean を返す
  .includes(value)

// true の場合 value は TSelectField型 であるとコンパイラに伝える
const isTSelectField = (value: string): value is TSelectField =&gt;</code></pre><p>こんな感じ。<br>as で無理やり割り当てるのではなく、<strong>is演算子(User-Defined Type Guards)</strong>でコンパイラに対して教えてあげるのが正しいやり方となります。<br>以上！解決！！！</p><h2 id="ha214098e44">まとめ</h2><p>今回はReactでselectフォームを取り扱う際のType Guardについて解説しました。<br>基本的にはasで無理やり型を割り当てるのではなく、<strong>is演算子(User-Defined Type Guards)</strong>で型安全なフォームの値を取り扱うのが良いと思います。<br>Reactを使っていると割と使う頻度が高いと思うので、この際に是非マスターしてみてください。<br>今回使った isTSelectField はジェネリクスで汎用的なType Guard関数にしても良いかもしれませんね。<br>(気が向いたら今度記事にします。)<br>以上。最後までご覧くださりありがとうございました！</p>

React × TypeScriptでselectフィールドの型制御を行なった際の備忘録として、実装方法を簡単にまとめた記事となります。

【React】string型に甘えずselectフィールドの型をType Guardで縛ってみる

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>今回は初の試みとしてフロントエンドエンジニアに特化したイベントを開催いたしました。<br>参加者の皆さま、ありがとうございました！<br>今回もLTのパートを交流会のパートに分けて実施。<br>LT発表資料は下記にまとめておりますので、気になる方は是非ご覧くださいませ。</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="hb75f9fe312">RyoCa「今日から使える ECMAScript 2023」</h3><p><a href="https://twitter.com/RyoCa_dev" target="_blank" rel="noopener noreferrer">RyoCa</a><br><a href="https://docs.google.com/presentation/d/e/2PACX-1vRleBEI8XnizcfRdgulikP6BR2R0G9YdijxZj_EBWk0znGZAeMabbuhrvlpRjilxvLmTQV-M56Wp2ws/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/e/2PACX-1vRleBEI8XnizcfRdgulikP6BR2R0G9YdijxZj_EBWk0znGZAeMabbuhrvlpRjilxvLmTQV-M56Wp2ws/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.p</a></p><h3 id="h14f9aab79e">RYOTA「Web技術でデスクトップアプリ!!? 〜 Electron のすすめ〜」</h3><p><a href="https://twitter.com/WEBERYOTA" target="_blank" rel="noopener noreferrer">RYOTA</a><br><a href="https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume</a></p><h3 id="h6ab6796965">Reactおじさん「Jotaiをプロジェクトに導入してみた」</h3><p><a href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん</a><br><a href="https://docs.google.com/presentation/d/1hzhFdF_A4th1eIyb-vMWaTehva2u92ycRxXvAe0gJZA/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1hzhFdF_A4th1eIyb-vMWaTehva2u92ycRxXvAe0gJZA/edit#slide=id.p</a></p><h3 id="h487ddaccec">sammiya「Mantine が実現するスタイル拡張に対して開かれた汎用コンポーネント」</h3><p><a href="https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento</a></p><h3 id="h09789906ff">MarkLee「react-hook-formとMUIについて」</h3><p><a href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">丸の内でパーカー</a><br><a href="https://docs.google.com/presentation/d/1Z7VhHU5iubAQNhe39Qc4an-eRUtPyivn/edit#slide=id.p1" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1Z7VhHU5iubAQNhe39Qc4an-eRUtPyivn/edit#slide=id.p1</a></p><h3 id="h4e6bce59cf">カルキチ副島「Tanstack Queryを使ってデータの取得や変更以外の情報もグローバルステートとして管理する」</h3><p><a href="https://twitter.com/karukichi_yah" target="_blank" rel="noopener noreferrer">カルキチ 副島</a><br><a href="https://speakerdeck.com/soejima0124/management-global-state-using-to-tanstack-query" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/soejima0124/management-global-state-using-to-tanstack-query</a></p><h2 id="h751ccae4f7">参加者の声</h2><p>今回も<strong>丸の内でパーカーさん</strong>が感想記事を書いてくださった！！！<br><a style="background-color:#ffffff" href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">Twitter</a><br>マジ感謝です！！！<br><a href="https://note.com/byungsoo_lee/n/n8eb50410fe17" target="_blank" rel="noopener noreferrer">https://note.com/byungsoo_lee/n/n8eb50410fe17</a><br>下記はTwitterでの反応となります♪</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日のフロントエンジニア勉強会はとても良い時間だった。<br><br>皆んな親切で優しい✨<br><br>不動産と税務と投資の事しか役立つ情報提供が出来なかった気もするけど🤣<br><br>フロントエンドの勉強頑張ります！</p>&mdash; TAKE_CC6 (@TAKE_CC6) <a href="https://twitter.com/TAKE_CC6/status/1601572144940429313?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の交流会まじですごかった。。圧巻すぎて全然ついていけなかった😇🤟<br>余韻がやばすぎて脳汁出てしまったので会社で自分のプロジェクト進めてるなう🥹<br>また行きますッ！<a href="https://t.co/4GCFVDq4sG">https://t.co/4GCFVDq4sG</a></p>&mdash; あむ🇨🇦@カナダ移住予定 (@fakeCanadianAmy) <a href="https://twitter.com/fakeCanadianAmy/status/1601535522132090880?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日はありがとうございました！🙇‍♂️<br><br>2年ぶりくらいのオフラインLTでめっちゃ緊張した🥶<br>もっと人前で話す機会を作っていきたい</p>&mdash; RyoCa | Web engineer (@ryocacode) <a href="https://twitter.com/ryocacode/status/1601578074872885249?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日勉強会楽しかったです。登壇してみるのもたまにはいいですね！<br>今日仲良く話してくださった皆様、ありがとうございました！<br>あとdisってると勘違いしてる人いて心外ですが、僕言った事全部褒め言葉です！<br>あとみんな東宝映画見ましょう！！</p>&mdash; 丸の内でパーカー🇰🇷 (@Mark_with_M) <a href="https://twitter.com/Mark_with_M/status/1601526845115027457?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">めちゃくちゃ勉強のモチベーション上がりました！☺️<br>運営の方々、ありがとうございました♪ <a href="https://t.co/suile0Gbrv">https://t.co/suile0Gbrv</a></p>&mdash; りょた.tsx@frontend (@Ryo54388667) <a href="https://twitter.com/Ryo54388667/status/1601485932124700672?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">めちゃ勉強になったし、アイスブレイクもあって話が弾みました！フロントエンドに特化した話が十分にできて、個人的にはすごく楽しかった笑<br><br>勉強会後の飲み会、次回は予定空けておいて参加したい、、！<br> <a href="https://t.co/QVRQA7szGV">https://t.co/QVRQA7szGV</a></p>&mdash; けんや (@k_e1sh1n) <a href="https://twitter.com/k_e1sh1n/status/1601556870853890053?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TanStackQueryのキャッシュを使って、グローバルステートを管理する方法についてしゃべってきました。<br><br>LTのレベルも高くとても刺激になりました！<br>企画していただいたRYOTAさん（<a href="https://twitter.com/WEBERYOTA?ref_src=twsrc%5Etfw">@WEBERYOTA</a>）とReactおじさん（<a href="https://twitter.com/react_nextjs?ref_src=twsrc%5Etfw">@react_nextjs</a>）ありがとうございました！<a href="https://t.co/oPDtrNvoiX">https://t.co/oPDtrNvoiX</a></p>&mdash; カルキチ 副島｜Karukichi Soejima (@karukichi_yah) <a href="https://twitter.com/karukichi_yah/status/1601562351534149637?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h8d78e14043">感想</h2><h3 id="hf59e088c5b">情報共有の好循環が生まれている!!</h3><p>過去の勉強会で情報共有された内容が実際に現場で導入され、さらに導入した人が情報を共有するという好循環が生まれ始めていて超感動しました!!<br>5月のイベントでReactおじさんが共有してくださったUIライブラリのMantine。<br><a href="https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12652&amp;ithint=file%2cpptx&amp;authkey=!ALnsoVf_iYEzyxw" target="_blank" rel="noopener noreferrer">https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12652&amp;ithint=file%2cpptx&amp;authkey=!ALnsoVf_iYEzyxw</a><br>sammiyaさんが現場でMantineを実際に導入し、かつ汎用性の高いコンポーネントを作成。<br>その内容を今回のLTで発表してくださるという胸熱な展開に!!<br><a href="https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento</a><br><strong><em>情報共有→実践導入→情報共有</em></strong>の流れができてとても良い!!<br>こういうケースをもっと増やしたいなと思いました!!</p><h3 id="h4c5121162e">キャッチアップ早ッ!!</h3><p>LTの発表内容を翌日には自分で試しちゃう猛者が...!!<br>このキャッチアップ速度は見習わねば!!</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨日の交流会でRYOTAさん（<a href="https://twitter.com/WEBERYOTA?ref_src=twsrc%5Etfw">@WEBERYOTA</a>）が紹介されてたElectron触ってみました☺️<br>簡単にセットアップできて驚き🤟<br>年末のいい遊び相手になってくれそう！笑<a href="https://twitter.com/hashtag/Electron?src=hash&amp;ref_src=twsrc%5Etfw">#Electron</a> <a href="https://t.co/SzfTYyMrmf">pic.twitter.com/SzfTYyMrmf</a></p>&mdash; あむ🇨🇦@カナダ移住予定 (@fakeCanadianAmy) <a href="https://twitter.com/fakeCanadianAmy/status/1601863118652551168?ref_src=twsrc%5Etfw">December 11, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h3 id="h788afc5738">ディスカッションがアツい!!</h3><p>各テーブルを回らせて頂きましたが、LT登壇者への質問や周辺技術を深ぼる会話がなされてとても良きでした!!<br>ライブラリの作成方法やpackage.jsonのプロパティといったニッチな会話もされていて、フロントエンド限定で開いた効果が一定現れていたのかなと感じました!!<br>ある程度技術スタックを揃えると会話の深みが増すと感じたので、今後はReactに絞ったりバックエンドの特定の技術に絞ったりと色々試していこうと思います。</p><h2 id="h1afe451c43">さいごに</h2><p>簡単ではございますが12月のイベントのまとめとなります。<br>今回は初のフロント特化イベントを開いてみましたが、技術を絞った方が深い会話が出来るのでまたテーマを絞って開催しようと思います！<br>2023年の一発目は初のTaigaさん主催イベント！気になる方は是非ご参加くださいませ！<br><a href="https://devguil.connpass.com/event/266910/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/266910/</a><br>また、【<strong>運営メンバーを絶賛大募集中</strong>】ですので"勉強会の運営をしてみたいなぁ"と思った方は是非私までお声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

フロントエンドエンジニア限定のイベントを開催しましたので簡単なレポートとしてまとめております！

モダンフロントエンド交流会【12月10日@秋葉原】LT＆交流会・イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>コロナの影響でしばらく休止していましたが、11月12日に新宿で<strong>LT&amp;交流会</strong>を開催いたしました。<br>今回は企画から運営までを<strong>Reactおじさん</strong>が実施してくださいました！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん(@react_nextjs)</a><br>おじさん！ありがとうございました🎉<br><br>今回のイベントもいつも通りLTパートと交流会パートに分けて実施。<br>LTのレベルがどんどん上がっているので参加者の皆さんも刺激を受けたのではないでしょうか。</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="h0bf2b79d6d">m.hirasaki「redux使うのやめました」</h3><p><a href="https://twitter.com/m_hirasaki1985" target="_blank" rel="noopener noreferrer">ひらさ</a><br><a href="https://speakerdeck.com/hirasa/reduxshi-unoyamemasita" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/hirasa/reduxshi-unoyamemasita</a></p><h3 id="h9a13e79ac2">kamaji_tomoya「デザインドックから学ぶ開発手法」</h3><p><a href="https://twitter.com/tomoya_sakusaku" target="_blank" rel="noopener noreferrer">もや(釜地智也)＠SWE</a><br><a href="https://speakerdeck.com/tomoyakamaji/dezaindotukukaraxue-bukai-fa-shou-fa" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/tomoyakamaji/dezaindotukukaraxue-bukai-fa-shou-fa</a></p><h3 id="h66586e0328">Reactおじさん「激戦区東京でフリーランスとして生き残った方法3選」</h3><p><a href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん</a><br><a href="https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12727&amp;ithint=file%2cpptx&amp;authkey=!AKP-bgKBK67D2UE" target="_blank" rel="noopener noreferrer">https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12727&amp;ithint=file%2cpptx&amp;authkey=!AKP-bgKBK67D2UE</a></p><h3 id="hd2b1fc7a1d">yuta_for「オブザーバビリティを高めよう」</h3><p><a href="https://twitter.com/Y0u281" target="_blank" rel="noopener noreferrer">Yuta</a><br><a href="https://speakerdeck.com/yuhta28/obuzababiriteiwogao-meyou" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/yuhta28/obuzababiriteiwogao-meyou</a></p><h3 id="hb8c3ea2773">カルキチ副島「Rust製のクロスプラットフォームターミナル / about-wezterm」</h3><p><a href="https://twitter.com/karukichi_yah" target="_blank" rel="noopener noreferrer">カルキチ 副島</a><br><a href="https://speakerdeck.com/soejima0124/about-wezterm" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/soejima0124/about-wezterm</a></p><h3 id="h37b4cd7a21">Taiga「gRPC入門」</h3><p><a href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taiga</a><br><a href="https://speakerdeck.com/taigaskg/grpcru-men" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/taigaskg/grpcru-men</a></p><h3 id="h415158bcab">RIO「超速入門 GraphQL」</h3><p><a href="https://twitter.com/front_to_dev" target="_blank" rel="noopener noreferrer">RIO</a><br><a href="https://docs.google.com/presentation/d/15ZHjd5gijd0Oi6LHYsNmvqLvU6pinX_8L8qfHM3KxlU/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/15ZHjd5gijd0Oi6LHYsNmvqLvU6pinX_8L8qfHM3KxlU/edit#slide=id.p</a></p><h2 id="h751ccae4f7">参加者の声</h2><p>今回のイベント参加者の<strong>丸の内でパーカーさん</strong>が感想記事を書いてくださいました！！！<br><a style="background-color:#ffffff" href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">Twitter</a><br>とてもありがたいです！！！<br>これからも、よりご満足頂けるよう運営してまいります🙌<br>気になる方は下記の記事をご覧くださいませ♪<br><a href="https://note.com/byungsoo_lee/n/n5192dac06394" target="_blank" rel="noopener noreferrer">https://note.com/byungsoo_lee/n/n5192dac06394</a><br>下記はTwitterの反応となります♪</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">みんなすごいわ<br>同じ分野でもついていけない話いっぱいあったから、そういうものがあるんだっていう収穫あるだけでもオフラインイベントは大事だなって再認識した<br>あざした！</p>&mdash; おーもと@WebDev (@ohmoto2020) <a href="https://twitter.com/ohmoto2020/status/1591394300528844800?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ありがとうございました！<br>次回のイベントも楽しみにしてます👍 <a href="https://t.co/6UqtGk3EYC">https://t.co/6UqtGk3EYC</a></p>&mdash; RIO (@front_to_dev) <a href="https://twitter.com/front_to_dev/status/1591422168344453120?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">フロントの人多くて、楽しかった〜🥰<br>次も行きたいな〜 <a href="https://t.co/g00c0BGzLl">https://t.co/g00c0BGzLl</a></p>&mdash; Haruka | フロントエンドエンジニア (@sunny63374783) <a href="https://twitter.com/sunny63374783/status/1591432247374401538?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日はオフラインイベントでした。<br><br>コミュニティ系のオフラインイベントに参加するのは初めてだったのですが、レベルの高い方々のビジョンが聞けて、すごく刺激になりました。<br><br>次回が楽しみです！あと、もしLTの枠があれば、なにかしら盛り上げられればと…！</p>&mdash; sumiren (@sumiren_t) <a href="https://twitter.com/sumiren_t/status/1591437132333473794?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ヤングなエンジニアに混ざって参加。フロントエンドの話やフリーランスとしての生き残り方などLT面白かった。リアルイベントはめっちゃ刺激になる。自社オフィスでもリアルイベント開催したいお気持ち。<br><br>11/12(土)【もくもく会 @ 新宿】Developers Guild <a href="https://t.co/3LXemQRJ7F">https://t.co/3LXemQRJ7F</a></p>&mdash; 内田太志 | OSSのノーコード・ローコード開発ツール公開中 (@implem_) <a href="https://twitter.com/implem_/status/1591342587033849856?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初のオフライン勉強会めっちゃ楽しかったです！<br>普段社外のエンジニアと話す機会ないし、エンジニアリングの話ばっかで純粋に興味津々だった。笑<br>とりあえずTwitterでも積極的に呟いてこー</p>&mdash; けんや (@k_e1sh1n) <a href="https://twitter.com/k_e1sh1n/status/1591343555833757696?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日はデザインドックをテーマにして勉強会でLTしてました<br>最近、見積もりや設計の大切さを身にしみて感じてます<a href="https://t.co/TjsBVoB9rZ">https://t.co/TjsBVoB9rZ</a></p>&mdash; 釜地智也＠ソフトウェアエンジニア (@tomoya_sakusaku) <a href="https://twitter.com/tomoya_sakusaku/status/1591415212548452357?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の登壇資料です。<br>企画していただいたReactおじさん（<a href="https://twitter.com/react_nextjs?ref_src=twsrc%5Etfw">@react_nextjs</a>）ありがとうございました！<a href="https://t.co/XyyieTdSrN">https://t.co/XyyieTdSrN</a></p>&mdash; カルキチ 副島｜Karukichi Soejima (@karukichi_yah) <a href="https://twitter.com/karukichi_yah/status/1591418428484878338?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h8d78e14043">感想</h2><h3 id="h0f2d2ac90c">狭すぎた・・・</h3><p>ごめんなさい。これは99.9%私のせいです。。。<br>色々と事故りました申し訳ございません。。。<br>次回はもっと広い会場を押さえます。。。</p><h3 id="ha7ee6fba76">LTの質がどんどん上がっている!!!</h3><p>2年前に開いた勉強会ではキャリアや転職の話がメインでしたが(それはそれで面白いのだが)、最近では技術の話はもちろん設計のお話や開発手法のお話など、さまざまなテーマでお話を頂きました！<br>今回初めて「オブザーバビリティ」という単語も聞けたのでとても学びが多かったです💡</p><h3 id="h2f8e526e74">交流会中のディスカッションがアツい</h3><p>現場で使っている技術を中心に「〇〇使ったらめちゃくちゃ効率上がりましたよ！」「うち〇〇使ってるんですが超おすすめです！」みたいな情報交換がされていたのがとても良かったです！<br>話をしている中で【皆さんこんなこと気になってるんだ】という話もちらほら出てきたので、今後はそのテーマに絞った交流会も企画して行く予定です。(是非お楽しみに...!!)</p><h2 id="h1afe451c43">さいごに</h2><p>簡単ではございますが11月のイベントのまとめとなります。<br>今回はReactおじさんに主催をしてもらいましたが、これからも定期的に開催していくのでご興味ある方は是非ご参加ください！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん(@react_nextjs)</a><br><strong>12月はフロントエンドに絞った交流会</strong>を行いますので、気になる方は是非チェックをお願いします！<br>また、運営メンバーも絶賛大募集中ですので【勉強会の運営をしてみたいなぁ】と思った方は是非私までお声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

30名規模のイベントを開催しましたので簡単なレポートとしてまとめております！

参加者30名！【11月12日@新宿】LT＆交流会・イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営しているTSLabの第7回・React勉強会の実施ログとなります。<br>第7回のテーマは【メモ化とパフォーマンスの最適化】<br>今回も<strong>Reactおじさん</strong>に講師をして頂きました！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer"><strong>Twitter</strong></a><br>本当にありがとうございます！</p><h2 id="hee779b4dda">勉強会内容</h2><p>今回は<strong>Reactのパフォーマンス</strong>面のお話になります。<br>レンダリングの仕組みから始まり、コンポーネントをメモ化する関数の解説をして頂きました。<br>具体的な内容は下記のドキュメントにまとまっているので気になる方はご覧ください。<br><a href="https://github.com/shogo4131/TSLab-react-study/blob/main/doc/%E7%AC%AC7%E5%9B%9E%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9(%E3%83%A1%E3%83%A2%E5%8C%96)/doc.md" target="_blank" rel="noopener noreferrer">https://github.com/shogo4131/TSLab-react-study/blob/main/doc/%E7%AC%AC7%E5%9B%9E%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9(%E3%83%A1%E3%83%A2%E5%8C%96)/doc.md</a></p><h2 id="hbeca907b4d">サマリー</h2><p>今回触れたのは下記の機能になります。</p><ul><li>React.memo</li><li>useCallback</li><li>useMemo</li></ul><p>これらはコンポーネント内の<strong>DOMや関数を無駄に再生成(再レンダリング)しない</strong>ようReactが公式に提供している機能。<br>使った場合と使わなかった場合とで実際のDOMの差分を見ながら比較して頂きました。</p><h3 id="h6ce25814b7">React.memo</h3><ul><li>propsが変更されない限り最後のレンダリング結果を再利用させる高階コンポーネント</li></ul><p><a href="https://ja.reactjs.org/docs/react-api.html#reactmemo" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/react-api.html#reactmemo</a></p><h3 id="h4886ea6007">useCallback</h3><ul><li>関数の再生成を防ぐhooks</li><li>React.memoと併用しないと効果を発揮しない</li></ul><p><a href="https://ja.reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usecallback</a></p><h3 id="h692f02ca4c">useMemo</h3><ul><li>計算結果等をメモ化して無駄な処理をスキップさせるhooks</li></ul><p><a href="https://ja.reactjs.org/docs/hooks-reference.html#usememo" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usememo</a></p><h2 id="h7cba51fa78">ディスカッション内容</h2><ul><li>それぞれのパフォーマンス最適化関数を使うタイミング</li><li>とりあえず全てのコンポーネント/関数をメモ化するか否か</li><li>初めからパフォーマンスを考慮して実装するか否か</li></ul><h2 id="h1afe451c43">さいごに</h2><p>React勉強会シリーズ第7弾終了！<br>私自身、脳死でメモ化をしていたので、実際に使うシーンや必要性について学べたのでとても良かったです！<br>参加者同士でも<strong>とりあえず全てメモ化派</strong>、<strong>遅くなってから考える派</strong>、<strong>一旦動くものを作って後で調整派</strong>でざっくり分かれていたのが印象的でした。(ここは宗教論争になるので結論は控えようと思います。)<br>こればっかりは実際に動かしてみて速度計測してみないとわからないので、場数を踏みましょう！以上！って感じですね。<br>ということで、簡単なまとめになります！<br>最後までご覧くださりありがとうございました！</p>

当記事はTSLab・React定例会のレポート記事になります！

TSLab【第7回 React勉強会】パフォーマンス最適化

<h2 id="h8d027c8ed3">はじめに</h2><p>Reactコンポーネントの新規開発をしていて「<strong>毎回同じ構成でファイル作ってんじゃん。めんどくさ。</strong>」と感じることが多く、「<strong>一括でボイラープレート作れんかなぁ</strong>」とずっと思っていました。</p><h3 id="h2d85270a41">これまで</h3><p>今までReactコンポーネントを新規作成する場合は下記のファイル群を新規に作成して、内容をコピペしたりスニペットでペタッと張っていたんですよね。はい、面倒。</p><pre><code>/src
  ├─ components
  │   └─ {モジュール名}
  │        └─ {コンポーネント名}
  │            └─ index.tsx
  │            └─ style.tsx
  ├─ stories
  │    └─ components
  │        └─ {モジュール名}
  │            └─ {コンポーネント名}
  │                └─ index.stories.tsx
  │                └─ mock.ts</code></pre><p>要はこれらをコマンド一発で生成しちゃおうってことです。<br>そんな中、知り合いが良いライブラリを教えてくれました。<br>その名も【<strong>scaffdog</strong>】！！！</p><h3 id="h48b56b3700">scaffdogとは</h3><p>scaffdogとは<strong>複数のボイラープレート生成を一括で</strong>行なってくれるツールです。<br><strong>マークダウンファイルにテンプレートを記述</strong>することが出来て設定がとても簡単。<br>しかも<strong>CLIで対話形式にテンプレートを選択</strong>し、<strong>変数設定も容易</strong>に出来るのでとても使い勝手が良いです。<br>使い方は下記のREADMEに載っているので実際に触ってみましょう。<br><a href="https://github.com/cats-oss/scaffdog#scaffdog-create" target="_blank" rel="noopener noreferrer">https://github.com/cats-oss/scaffdog#scaffdog-create</a></p><h2 id="hc175a453d0">scaffdogを使ってみた</h2><p>早速、公式を見ながら触っていきましょう！</p><h3 id="he139a81f1a">scaffdogセットアップ</h3><h4 id="hd8d793506b">インストール</h4><pre><code>$ yarn add --dev scaffdog</code></pre><h3 id="hadb2c8d6da">初期化</h3><p>READMEに書いてある通り<strong>scaffdog init</strong>を実行してみます。</p><pre><code>$ yarn scaffdog init</code></pre><p>ファイル名を聞かれるので今回はReactComponentと入れてみます。<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/237e29fd76cb40c481f9751ae7030c98/scaffdog-1.webp?w=800&amp;h=364" alt=""><br>完了すると<code>.scaffdog</code>ディレクトリとその配下に2つのファイルが生成されているようです。</p><pre><code>module.exports = {
  files: ['./*'],
};
---
name: 'ReactComponent'
root: '.'
output: '**/*'
ignore: []
questions:
  value: 'Please enter any text.'
---

# `{{ inputs.value }}.md`

```markdown
Let's make a document! See more detail scaffdog repository.
https://github.com/cats-oss/scaffdog/#templates
```</code></pre><h3 id="h6cfb2f4a61">テンプレート編集</h3><p>ではテンプレートとなるマークダウンファイルを修正してみましょう。<br>一つのマークダウン内に複数ファイルの定義をすることで一括生成をしてくれます。<br>今回は4つのテンプレートの記述をします。<br>引数には親ディレクトリの<strong>module</strong>とコンポーネント名の<strong>name</strong>の2つを設定します。</p><pre><code>---
name: "ReactComponent"
root: "src/"
output: "**/*"
ignore: []
questions:
  module: "ディレクトリ名を入力"
  name: "コンポーネント名を入力"
---

# `components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/index.tsx`

```tsx
import React from "react";
import type { FC } from "react";
import { Container } from "./style"

type T{{ inputs.name | pascal }} = {};

/**
 * {{ inputs.name | pascal }}コンポーネント
 * @module Components/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}
 */
const {{ inputs.name | pascal }}: FC&lt;T{{ inputs.name | pascal }}&gt; = ({}) =&gt; {
  return &lt;Container&gt;{{ inputs.name | pascal }}&lt;/Container&gt;;
};

export default {{ inputs.name | pascal }};
```

# `components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/style.tsx`

```tsx
import style from "styled-components";

export const Container = style.div`
`;
```

# `stories/components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/index.stories.tsx`

```tsx
import React from 'react'
import { ComponentMeta } from '@storybook/react'
/* components */
import {{ inputs.name | pascal }} from '../../../../components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}'
/* mocks */
import { {{ inputs.name | lower }} } from './mock'

/**
 * Stories/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}
 * @package Stories
 */
export default {
  title: 'MyApp/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}',
  component: {{ inputs.name | pascal }},
} as ComponentMeta&lt;typeof {{ inputs.name | pascal }}&gt;

const Template = () =&gt; (
  &lt;{{ inputs.name | pascal }} /&gt;
)

export const Default = Template.bind({})
Default.args = {{ inputs.name }}
```

# `stories/components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/mock.ts`

```ts
export const {{ inputs.name | lower }} = {}
```</code></pre><h3 id="h9089d6bf37">ボイラープレート生成</h3><h4 id="h730f58f2a7">scaffdog generate</h4><pre><code>$ yarn scaffdog generate</code></pre><p>上記コマンドを叩くと対話式にステップ実行してくれます。</p><h4 id="h392d888232">テンプレート選択</h4><p><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/6fa0377036f24ba3a6039a21ea0ac091/scaffdog-2.webp?w=800&amp;h=63" alt=""></p><h4 id="h99aeda3e3a">第1引数入力</h4><p><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/799e47d011df431b9ab28d9c114ea5ef/scaffdog-3.webp?w=800&amp;h=94" alt=""></p><h4 id="h1e2bef555f">第2引数入力</h4><p><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/57587bcddcf6488cb4bf7ee1bddcf75e/scaffdog-4.webp?w=800&amp;h=119" alt=""></p><h4 id="h7d8c09c225">自動生成</h4><p><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/417074813ccb417ab0efd491ba0f44ba/scaffdog-5.webp?w=800&amp;h=212" alt=""><br>作られてるっぽい！！！</p><h3 id="h5a60866e05">生成されたファイルを確認</h3><pre><code>import React from "react";
import type { FC } from "react";
import { Container } from "./style"

type TScaffdog = {};

/**
 * Scaffdogコンポーネント
 * @module Components/Tests/Scaffdog
 */
const Scaffdog: FC&lt;TScaffdog&gt; = ({}) =&gt; {
  return &lt;Container&gt;Scaffdog&lt;/Container&gt;;
};

export default Scaffdog;
import style from "styled-components";

export const Container = style.div`
`;
import React from 'react'
import { ComponentMeta } from '@storybook/react'
/* components */
import Scaffdog from '../../../../components/tests/Scaffdog'
/* mocks */
import { scaffdog } from './mock'

/**
 * Stories/Tests/Scaffdog
 * @package Stories
 */
export default {
  title: 'MyApp/Tests/Scaffdog',
  component: Scaffdog,
} as ComponentMeta&lt;typeof Scaffdog&gt;

const Template = () =&gt; (
  &lt;Scaffdog /&gt;
)

export const Default = Template.bind({})
Default.args = Scaffdog
export const scaffdog = {}</code></pre><p>完璧！！！これがやりたかった！！！</p><h2 id="h1afe451c43">さいごに</h2><p>無事にボイラープレートの一括生成が出来ましたね！<br>しかも導入、設定が簡単！<br>効率的だし楽！控えめに言ってめっちゃ良い！<br>やはり自動化って良いですね！！！<br>ということで今回はボイラープレートの一括生成を【<strong>scaffdog</strong>】を使って行なってみました！<br>簡単なまとめとなりますが、少しでも参考になれば幸いです♪<br>最後までご覧いただきありがとうございました！</p>

Reactのコンポーネント作成時に必要なファイルを一括生成してみたので、簡単にやり方をまとめていきます。

Reactボイラープレートを【scaffdog】で一括生成してみた

<h2 id="h8d027c8ed3">はじめに</h2><p>プロジェクトでPythonを使うことになり、環境構築をしてみたので簡単にまとめていきます。<br>Pythonを初めて触ってみましたが、構築方法によっては環境依存が激しく管理がしずらかったので、今回はパッケージ管理をテーマに取り扱っていきます。<br>メジャーなPythonのパッケージ管理ツールは下記の種類があります。</p><ul><li>pip</li><li>venv</li><li>pyenv</li><li>pipenv</li><li>poetry</li></ul><p>何種類か触ってみたのですが、今回はフォロワーさんに教えていただいた<strong>Poetry</strong>を使ってみることにしました。</p><h3 id="h53367d55f6">Poetry公式</h3><p><a href="https://python-poetry.org/" target="_blank" rel="noopener noreferrer">https://python-poetry.org/</a></p><h2 id="hf0f3f41c4d">構築方法</h2><h3 id="h35376b6226">Poetryインストール</h3><p>早速Poetryをbrewでインストールします。</p><pre><code>$ brew install poetry</code></pre><p>インストール完了後にバージョンを確認できればOK！</p><pre><code>$ poetry --version
# Poetry version 1.1.14</code></pre><h3 id="h7895f4a00e">プロジェクト作成</h3><p>Poetryがインストール出来たらプロジェクトのテンプレートを作成します。<br>作業ディレクトリに移動し<strong><code>poetry new</code></strong>コマンドを実行することで作成可能です。<br>(今回はtest-python-poetryという名前で作成します。)</p><pre><code>$ poetry new test-python-poetry
# プロジェクトが作成されたらディレクトリに移動
$ cd test-python-poetry</code></pre><p>作業ディレクトリを確認すると下記の構成でファイルが作成されていますね。</p><pre><code>├ tests
│  └ __init__.py
│  └ test_test_python_poetry.py
├ test_python_poetry
│  └ __init__.py
├ poetry.lock
├ pyproject.toml
└ README.rst</code></pre><h3 id="h13b10d5777">Poetryコマンド実行</h3><p>作成したディレクトリに移動しその中で<strong><code>poetry run</code></strong> コマンドを実行すると、仮想環境上でコマンドを実行できます。<br>試しにPythonのバージョンを確認してみます。</p><pre><code>$ poetry run python -V
# Python 3.10.5</code></pre><p>今回は<strong>pyproject.toml</strong>内の<strong>[tool.poetry.dependencies]</strong>で指定されている、v3.10.5が仮想環境上に入っているPythonバージョンになります。<br>試しにpoetryを使用せずにバージョンを確認すると下記のような結果になります。</p><pre><code>$ python -V
# Python 2.7.18</code></pre><p>PCのグローバル環境にはバージョン3.10.5が入っていないので、グローバルで入っているv2.7.18が返ってきます。</p><h3 id="h0191e1adf6">Pythonのコードを実行</h3><p>では早速Pythonのコードを実行してみましょう。<br>と、その前に、邪魔なファイルを消しつつ若干修正をします。</p><ol><li>test_python_poetry ディレクトリ名前変更→test_poetry</li><li> test_poetry/__init__.py 削除</li><li> test_poetry/__main__.py 作成</li><li> test_poetry/__main__.py 修正</li></ol><pre><code>print('Hello World!')</code></pre><p>__main__.pyがモジュールとしてのエントリーポイントになってくれるので、ディレクトリ単位でモジュールとして切り出すことが可能です。<br>準備が出来たら早速poetryでPythonのコードを実行してみましょう！</p><pre><code>$ poetry run python -m test_poetry
# Hello World!</code></pre><p><strong>Hello World! </strong>が返ってきますね！OK！</p><h3 id="hfeb754a638">Numpyを使ってみる</h3><p>パッケージ管理のテストとして、数値計算ライブラリの<strong>Numpy</strong>をインストールして実行してみます。<br>Numpyとは機械学習やディープラーニングでよく使われるライブラリで、ベクトルや行列の演算などの高速な数値計算を行うことが可能です。<br><a href="https://numpy.org/" target="_blank" rel="noopener noreferrer">https://numpy.org/</a><br>ライブラリを追加する場合は<strong><code>poetry add</code></strong>コマンドを実行することで使用可能になります。</p><pre><code>$ poetry add numpy</code></pre><p>パッケージの追加が完了したら実行ファイルを作成します。<br>Numpyのテスト用に新しいディレクトリtest_numpyを作成し、その直下に__main__.pyを作成します。</p><pre><code>import numpy

x = numpy.array([1.0, 2.0, 3.0, 4.0, 5.0])
print(x)

y = numpy.arange(10)
print(y)</code></pre><p>ファイルが作成できたら<strong><code>poetry run</code></strong>コマンドで実行してみます。</p><pre><code>$ poetry run python -m test_numpy
# [1. 2. 3. 4. 5.]
# [0 1 2 3 4 5 6 7 8 9]</code></pre><p>ちゃんと使えてる！完璧！</p><h2 id="hba7b0c3491">困りポイント</h2><p>VSCodeで確認してみるとライブラリのインポートでエラーを吐いていました。<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/0c5bfbf5bfe74a4a842fd5c9d926d01a/python-poetry-1.webp?w=800&amp;h=150" alt=""><br>ただ、実際に実行してみると問題なく動くので、VSCode上でのエラーのようですね。<br>調べてみると、ローカル(グローバル)にnumpyがインストールされていないので解釈ができないようですね。<br>これは気持ち悪いので、おいおいやっつけようと思います。笑</p><h2 id="h1afe451c43">さいごに</h2><p>今回の記事では、初めてPythonを使うにあたって<strong>Poetry</strong>を導入してみました！<br>他のパッケージ管理ツールに比べて直感的で扱いやすかったのでとても良かったです！<br>以上。簡単なまとめとなりますが、少しでも参考になれば幸いです♪<br>最後までご覧いただきありがとうございました！</p>

Poetryというパッケージ管理ツールを使ってPythonの環境構築をしてみたので簡単にログを残していきます。

Pythonのパッケージ管理に【Poetry】を導入し、環境構築してみた

<h2 id="h8d027c8ed3">はじめに</h2><p>まずはじめに、今回紹介するFigについてですが、こちらはターミナル等の<span style="background-color:#fff8b6">CLIツールの拡張サービス</span>になります。<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/674bc1e6500f4e5badf8bf6c3cfb22e2/fig-1.webp?w=800&amp;h=439" alt=""><br>公式サイトを見てみると<br><strong style="background-color:#fff8b6">あなたのターミナルが生まれ変わる</strong><br>と、トップ画面に大袈裟な文字が！！！<br>しかもトップ画を見るとコマンドが自動補完されているようですね！！！<br>これは入れるっきゃ無い！！！</p><h2 id="h046afd68e1">導入方法</h2><p>早速導入してみましょう！<br>と言っても公式サイトのダウンロードボタンをポチッとするだけです！！</p><h3 id="hc6e0a610a9">公式ページ</h3><p><a href="https://fig.io/" target="_blank" rel="noopener noreferrer">https://fig.io/</a><br>インストール後はそのまま起動するだけ！<br>起動ができると自動でセットアップが始まるので、いくつか許可をしてあげると使えるようになります！</p><h2 id="he3dd70fbd3">使ってみた</h2><p>導入はものの2分ほどで完了したので早速使ってみます。<br>普段はiTerm2を使っているのでとりあえず起動。</p><h3 id="hc2813f0e41">オートコンプリート機能</h3><p><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/350943d2564f4a87b29cb61816ec614a/fig-2.webp?w=800&amp;h=203" alt=""><br>git と打ってみるとgit コマンドの一覧が出てくるゾ!!<br>普通は<code>git a</code> と打った後にタブを押すと補完をしてくれますが、Figを導入すると<strong>git </strong>を打っただけでgitコマンドの一覧が出てきます！<br>あとはセレクトしてエンターを押すだけ！ヤバい！！<br>当然、git コマンドだけでなくシェルコマンドはだいたい出てくる...ヤバい！！</p><h3 id="h27ac14a9cb">ほとんどのCLIに対応 / しかも自動</h3><p>iTerm2への導入設定をせずに自動で反映出来たので「さては...?」と思い<strong>VSCode</strong>も開いてみると...<br>使えるではありませんか...!!!<br>(公式にもしっかり載ってる)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/0f2c6ad38e7f424f80a543d281b7127a/fig-3.webp?w=800&amp;h=375" alt=""><br>インストールするだけで既存のエディタやCLIに自動反映してくれる神設計！！！</p><h3 id="hfaa5c1e35c">yarn / npm だけでなくdocker / awsコマンドにも対応</h3><p>もう一つビビったのがこれ。<br>Linuxコマンドだけでなく <strong>yarn</strong> や <strong>npm</strong> コマンドにも対応！！(これはヤバい)<br>しかもそれだけではない。<strong>docker</strong>コマンド や <strong>aws CLI</strong>にも対応しているとは！！<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/af49e2d4df6a441681ce1c41dd81069f/fig-4.webp?w=800&amp;h=484" alt=""></p><h2 id="h1afe451c43">さいごに</h2><p>実際に導入してみて思ったことは、、、<strong>神！！！</strong><br>これPCを購入したら<strong>最初にインストールすべきツール</strong>では???というくらい神がかったツールです！！！<br>開発者はほぼマストで入れておきたいですね！！！<br>以上。簡単な感想でした。<br>最後までご覧くださりありがとうございました。</p>

拡張ツール【Fig】を導入してみたのですが、想像以上に良いツールだったので簡単にご紹介いたします。