<h2 id="hed900658dc">環境</h2><ul><li>Google Chrome 126.0.6478.127 (Official Build) (arm64)</li><li>Better Touch Tool 4.403</li></ul><h2 id="he2485005d0">目的</h2>Google Chromeの「日本語に翻訳」を、英文のドキュメントを読む際などで頻繁に使用する操作であるため、キーボードショートカットから切り替えたいが、現時点(2024/07/15現在)ではどうやら存在しない＆設定できなさそうです。この記事では、macOSアプリのBetter Touch Toolを用いたショートカットで、Google Chromeの日本語と英語原文の翻訳を切り替えする方法を紹介します。<h2 id="h2a4122d658">イメージ</h2><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/b770118f5e024bcbb7461d927b2622b0/btt-translated-into-japanese-detail-2.gif" alt="" width="2668" height="1892"></figure>(Better Touch Toolを用いたショートカットで、Google Chromeの日本語と英語原文の翻訳を切り替えしている様子)<h2 style="text-align: start" id="h046876a126">手順</h2><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/36dc95b4e817421ebbbbd85ea501b2a5/btt-translated-into-japanese-detail-1.png" alt="" width="2416" height="1450"></figure>ブラウザのアドレスバーに「翻訳アイコン」が表示されているページと表示されていないページがあり、それぞれに対応した2つのショートカット設定を紹介します。<h3 id="h0289135283">設定1: 翻訳アイコンが表示されているページのみ切り替え可能な設定</h3><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/0850a2b58d284599ac360cc884f1a2c1/btt-translated-into-japanese-detail-1-1.png" alt="" width="3840" height="2110"></figure>あらかじめ、Google Chromeのみで有効なキーボードショートカットとなるように設定した状態で、「選択したトリガーに割り当てられているアクション」を以下のとおり追加およびアクション設定の値を変更する。<ol><li>現在のマウス位置を保存する</li><li>Find/Search Image on Screen &amp; Move Mouse ・・・「Treshold」: 0.8 ・・・「Search image on」: Screen with Focused Window ・・・画面から認識させるための翻訳アイコンの画像を撮影する<figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/da8006a43d4c451cae31962fb4f931dd/btt-translated-into-japanese-detail-3.gif" alt="" width="2870" height="1342"></figure>　a-1.「Choose Area Of Screen」ボタンをクリック 　a-2.赤いトリミング枠が表示されるので翻訳アイコンの位置までドラッグする 　a-3.枠の端をつかんでドラッグして、翻訳アイコンのサイズになるように調整する 　a-4.スペースキーを押して3秒待つ</li><li>Begin/Start Blocking Keyboard Input</li><li>左クリック</li><li>次のアクションの遅延: 0.01秒 (アクション名: <code>Delay Next Action (blocking)</code>)</li><li>キーボード入力: ←(左矢印) (アクション名: <code>キーボードショートカットを送信する</code>)</li><li>次のアクションの遅延: 0.01秒 (アクション名: <code>Delay Next Action (blocking)</code>)</li><li>キーボード入力: Esc (アクション名: <code>キーボードショートカットを送信する</code>)</li><li>保存したマウス位置を復元</li><li>End/Stop Blocking Keyboard Input</li></ol><h3 id="h2caf5ec326">設定2: 翻訳アイコンが表示されていないページでも切り替え可能な設定</h3><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/ca7b56f1123e49b8b95d57b862893f28/btt-translated-into-japanese-detail-1-2.png" alt="" width="3840" height="2110"></figure>あらかじめ、Google Chromeのみで有効なキーボードショートカットとなるように設定した状態で、「選択したトリガーに割り当てられているアクション」を以下のとおり追加およびアクション設定の値を変更する。<ol><li>Begin/Start Blocking Keyboard Input</li><li>コンテキストメニュー項目をトリガー ・・・「Eコンテキストメニュー項目へのコマンドパスを ; で区切って入力します。」: 日本語に翻訳</li><li>次のアクションの遅延: 0.20秒 (アクション名: <code>Delay Next Action (blocking)</code>)</li><li>キーボード入力: ←(左矢印) (アクション名: <code>キーボードショートカットを送信する</code>)</li><li>次のアクションの遅延: 0.20秒 (アクション名: <code>Delay Next Action (blocking)</code>)</li><li>キーボード入力: Esc (アクション名: <code>キーボードショートカットを送信する</code>)</li><li>End/Stop Blocking Keyboard Input</li></ol>

<ul><li>テキストを選択した状態だとショートカットキーが使用できない(メニューアイテム名が「選択範囲を日本語に翻訳」となってしまうため)</li></ul>

注意点

<h2 id="hbd9937b7b5">参考にさせていただいたサイト</h2><ul><li><a href="https://scrapbox.io/gosyujin/Google_Chrome%E3%81%AE%E3%80%8C%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AB%E7%BF%BB%E8%A8%B3%E3%80%8D%E3%81%AF%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B" target="_blank" rel="noopener noreferrer nofollow">Google Chromeの「日本語に翻訳」はキーボードショートカットで実行できないのか</a></li><li><a href="https://qiita.com/nkmr_jp/items/74c46efe00608d3e9fb2" target="_blank" rel="noopener noreferrer nofollow">Chromeで日本語と英語原文を切り替えるショートカットキー</a></li><li><a href="https://qiita.com/kyosinari/items/740cd1825a8d8c9a966d" target="_blank" rel="noopener noreferrer nofollow">【Chrome】ショートカットで日本語と英語原文を切り替える</a></li></ul>

本記事ではBetterTouchToolを用いたショートカットでChromeの日本語と英語原文の翻訳を切り替えする方法を紹介しています。方法について、手順と具体的な説明付きで紹介しています。

【Chrome】ショートカットで日本語と英語原文の翻訳を切り替え【BetterTouchTool】

<h2 id="he2485005d0">目的</h2>使い慣れていないAWSサービスをTerraformから構築するときに「そもそもどのような設定項目があるのか？」となりがちです。 また、Terraformで構築したもののリソースが思うように動作しないとき、いくつか設定をいじっては更新を繰り返して、デバッグしたいときがあります。このような場合、AWSやTerraformの公式ドキュメントを見るのがベストですが、いちいち該当するパラメータを調べるのが若干面倒なときがあります。設定項目を知るにしてもデバッグするにしても、洗練されたGUIのAWSマネジメントコンソールをさわるほうが速いです。そんなとき、<code>terraform plan</code> コマンドを使ってAWSマネジメントコンソール(クラウド上)から手動でパラメータを変更して、それをローカルでコードとして取り込むという方法を紹介します。

本来、Terraform側で管理しているリソースをマネジメントコンソールからいじることは差分ができてしまい危険であるため、本番環境などではおすすめしません。 また、変更した項目によっては、terraform planでも取得できないケースもあります。

注意事項

<h2 id="h046876a126">手順</h2><h3 id="h6a224bce1d">１．クラウドとTerraformの状態を一致させておく</h3><ul><li>あらかじめターミナルから<code>terraform apply</code> などでクラウドとTerraformの状態を一致させておく</li><li><code>terraform plan</code> を実行し「No changes. Your infrastructure matches the configuration.」と表示されることを確認する</li></ul><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/6118d47e7efe439c9904dbd5b8bc39f5/management-console-to-terraform-detail-1.webp" alt="" width="756" height="502"></figure><h3 id="h35f7bb6b11">２．Terraform化したい設定項目を、AWSマネジメントコンソールから変更する</h3><ul><li>AWSマネジメントコンソールから様々な設定項目があることを確認しつつ、</li><li>今回の目的に合った設定項目を手動で変更し、リソースを更新する</li></ul><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/f538d44fd1c440c68533fd1cda1e0243/management-console-to-terraform-detail-2.webp" alt="" width="1024" height="800"></figure><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/0786018087b94fe29664ab6e9e33e49e/management-console-to-terraform-detail-3.webp" alt="" width="899" height="601"></figure><h3 id="hfa950eda1a">３．変更した項目をTerraform化する</h3><ul><li>ターミナルに戻り、再度<code>terraform plan</code> を実行する</li><li>変更したリソースのパラメータがコードとして表示されるので、それをコピーする</li></ul><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/e2e0751f3fee4bdf99723b396e1f5188/management-console-to-terraform-detail-4.webp" alt="" width="945" height="567"></figure><ul><li>先ほどの表示されている中の、該当するresourceやmoduleのファイルを開く</li><li>コピーしたコードを貼り付けて、フォーマットをTerraformに合わせるように修正し保存する</li></ul><figure><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/7e7df4e37a5a4267aa3f58bd2221d80b/management-console-to-terraform-detail-5.png" alt="" width="1954" height="1490"></figure><ul><li><code>terraform plan</code> を実行し、「No changes. Your infrastructure matches the configuration.」と表示されていればコード化が完了</li></ul>

本記事ではマネジメントコンソール側からパラメータを変更してそのままコード化する(terraform plan)を紹介しています。方法について、手順と具体的な説明付きで紹介しています。

【AWS×Terraform】マネジメントコンソール側からパラメータを変更してそのままコード化する(terraform plan)

<h2 id="hed900658dc">環境</h2><ul><li>Terraform v1.4.2</li></ul> <h2 id="he2485005d0">目的</h2>通常の <code>terraform plan</code> を実行すると、各リソースの詳細な設定まで表示されてしまい、コードの作成途中などでリソースの変更内容だけを確認したいときに不便です。この記事では、ワンライナーを用いて、リソースの変更内容の一覧を各リソース1行でコンパクトに表示する方法を紹介します。 <h2 id="h2af693514d">コマンド</h2>【Mac】<pre><code>terraform plan | grep -E '#|Plan:'</code></pre>【Windows(PowerShell)】<pre><code>terraform plan | Select-String -Pattern "#|Plan:"</code></pre> <h2 id="h45437cb5d5">実行結果</h2><h3 id="hc333ea7885">改善前(terraform plan)</h3><pre><code>user@xxxx sample-tf-project % terraform plan'

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following symbols:
&nbsp; + create

Terraform will perform the following actions:

&nbsp; # module.vpc.aws_subnet.private["subnet_private01"] will be created
&nbsp; + resource "aws_subnet" "private" {
&nbsp; &nbsp; &nbsp; + arn&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = (known after apply)
&nbsp; &nbsp; &nbsp; + assign_ipv6_address_on_creation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = false
&nbsp; &nbsp; &nbsp; + availability_zone&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = "ap-northeast-1a"
&nbsp; &nbsp; &nbsp; + availability_zone_id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= (known after apply)
&nbsp; &nbsp; &nbsp; + cidr_block&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= "xxx.xx.x.x/12"
&nbsp; &nbsp; &nbsp; + enable_dns64&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= false
&nbsp; &nbsp; &nbsp; + enable_resource_name_dns_a_record_on_launch&nbsp; &nbsp; = false
&nbsp; &nbsp; &nbsp; + enable_resource_name_dns_aaaa_record_on_launch = false
&nbsp; &nbsp; &nbsp; + id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= (known after apply)
&nbsp; &nbsp; &nbsp; + ipv6_cidr_block_association_id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= (known after apply)
&nbsp; &nbsp; &nbsp; + ipv6_native&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = false
&nbsp; &nbsp; &nbsp; + map_public_ip_on_launch&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = false
&nbsp; &nbsp; &nbsp; + owner_id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= (known after apply)
&nbsp; &nbsp; &nbsp; + private_dns_hostname_type_on_launch&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = (known after apply)
&nbsp; &nbsp; &nbsp; + tags&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "Name" = "sample-subnet-private-common-a1"
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; + tags_all&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "Name"&nbsp; &nbsp; &nbsp; &nbsp; = "sample-subnet-private-common-a1"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "Service"&nbsp; &nbsp; &nbsp;= "sample"
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; + vpc_id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= (known after apply)
&nbsp; &nbsp; }

 (... 以下省略)</code></pre><h3 id="hdd312073b3">改善後(terraform plan | grep -E '#|Plan:' など)</h3>【Mac】<pre><code>user@xxxx sample-tf-project % terraform plan | grep -E '#|Plan:'
&nbsp; # module.vpc.aws_subnet.private["subnet_private01"] will be created
&nbsp; # module.vpc.aws_subnet.private["subnet_private02"] will be created
&nbsp; # module.vpc.aws_subnet.private["subnet_private03"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public01"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public02"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public03"] will be created
&nbsp; # module.vpc.aws_vpc.default will be created
Plan: 7 to add, 0 to change, 0 to destroy.</code></pre> 【Windows(PowerShell)】<pre><code>PS C:\Users\xxxx\sample-tf-project&gt; terraform plan | Select-String -Pattern "#|Plan:"
&gt;&gt;
&nbsp; # module.vpc.aws_subnet.private["subnet_private01"] will be created
&nbsp; # module.vpc.aws_subnet.private["subnet_private02"] will be created
&nbsp; # module.vpc.aws_subnet.private["subnet_private03"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public01"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public02"] will be created
&nbsp; # module.vpc.aws_subnet.public["subnet_public03"] will be created
&nbsp; # module.vpc.aws_vpc.default will be created
Plan: 7 to add, 0 to change, 0 to destroy.</code></pre>

本記事ではterraform planの結果を各リソース1行でコンパクトに表示する方法を紹介しています。コンパクトに表示する方法について、手順と具体的な説明付きで紹介しています。

【Terraform】terraform planの結果を各リソース1行でコンパクトに表示する

こんにちは！かわいちです。 皆さんはReactとVSCodeでプログラミングするとき、スムーズにコーディング作業ができていますか？ 今回は開発の速度を上げるためのVSCodeの便利な機能、自動でimport＆未使用importの削除とソートについてまとめていきます。<h2 id="h4e06687cb6">使用しているもの</h2><ul><li>React</li><li>VisualStudioCode</li></ul><h2 id="had712a88cc">方法(全体の流れ)</h2>【手順】 1.VSCode「ファイル」→「ユーザー設定」→「設定」→アイコン「設定(JSON)を開く」→「settings.json」を開く <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/949f2d6ffa36416f9ba1f659a9b65bd2/ej-gewz8edl8_1.png" alt=""> 2.「settings.json」に以下のコードを追加し、上書き保存する。 (settings.json)<pre><code>{
 /*** ここから ***/
&nbsp; /* 保存時に実行するアクション */
&nbsp; "editor.codeActionsOnSave": {
&nbsp; &nbsp; /* import文の 自動追加 */
&nbsp; &nbsp; "source.addMissingImports": true,
&nbsp; &nbsp; /* import文の 自動未使用import削除 &amp; 自動アルファベット順ソート &amp; */
&nbsp; &nbsp; "source.organizeImports": true
&nbsp; },
 /*** ここまで ***/
 ...(省略)
}</code></pre>3.上書き保存後は、各ファイル内(.jsxや.tsxなど)で保存(Mac: ⌘+S, Windows: Ctrl+S)するたびに、自動でimport＆未使用importの削除とソートが実行されるようになる 【自動でimport&amp;未使用importの削除】 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/a679b38fd290472d937cb4d72dbcb380/ej-gewz8edl8_movie_1.gif" alt=""> 【自動でソート】 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/e4f836556f84498189d06cc49995cbe1/ej-gewz8edl8_movie_2_low.gif" alt=""> <h2 id="h860820fbb6">ソート機能の注意点</h2><ul><li>各<code>import</code> 文のあいだに空白行があるとうまくソートされません</li></ul><pre><code>/* NG× 以下のコードは空白行があるため、うまくソートされない */
import React from "react";
import { BChildComponent } from "./BChildComponent";

import { CChildComponent } from "./CChildComponent";

import { AChildComponent } from "./AChildComponent";</code></pre><ul><li>CSSファイルの<code>import</code> もソートしてくれますが、CSSの仕様上、あとから<code>import</code> したものが優先されるため、2つ以上のファイルで重複したスタイルがある場合、見た目が崩れる可能性があります。</li></ul><pre><code>import "./style1.css";
import "./style2.css"; // ← あとからimportしたスタイルが優先(上書き)される</code></pre><h2 id="h397e38daae">補足</h2>この機能は、named export と default export の両方に対応しています。 【named export】<pre><code>export const ChildComponent: React.FC = () =&gt; {
&nbsp; return &lt;div&gt;サンプルテキスト&lt;/div&gt;;
};</code></pre>【default export】<pre><code>const ChildComponent: React.FC = () =&gt; {
&nbsp; return &lt;div&gt;サンプルテキスト&lt;/div&gt;;
};
export default ChildComponent;</code></pre> <h2 id="h1afe451c43">さいごに</h2>コーディング中はできるだけ無駄なところに体力や頭を使いたくないですよね。 便利な機能はどんどん使って、快適なプログラミングライフを送りましょう！

本記事ではReactとVSCodeを使って「自動でimport＆未使用importの削除とソート」を紹介しています。使い方について、具体例を挙げながら紹介しています。

【React×VSCode】自動でimport＆未使用importの削除とソートで爆速開発！

JavaScriptからTypeScriptを始めようとすると「型を付けるのは分かったけど、どうやって調べるんだろう...？」と悩みますよね。 今回はTypeScriptで型を調べる方法「VSCodeのホバー表示」についてまとめていきます。<h2 id="h4e06687cb6">使用しているもの</h2><ul><li>VisualStudioCode</li></ul><h2 id="hcb9dacb773">結論</h2><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/b07da15c66584c3ab868ef7af3a089c9/yr2wzlvn2_1.png" alt=""> 【手順】 1.マウスカーソルを、型を確認したい変数の上に移動する 2.型が表示されるので、ドラッグしてショートカットキー(Windows: Ctrl+C, Mac: ⌘+C)でコピーする (表示されない場合) VSCode「設定」→「Editor › Hover: Enabled」にチェックが入っているか確認してください <h2 id="hb000edf703">この方法を使った具体例</h2>(Reactを使った例) <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/a40d1831e0d94a62b627fe076df314a0/yr2wzlvn2_movie_1.gif" alt=""> 既にコンポーネント内に定義している定数・変数を、別のコンポーネントから引数(Props)として渡してあげる形に変更したいときの"引数への型付け"をする例をもとに説明していきます。<h2 id="hd8fc274db5">具体例の説明</h2>TypeScriptなどの最近の静的型付け言語には、「ぱっと見で型が分かる定数や変数は、型を付けなくても分かるし省略しよう！」という考え方、機能があります。(型推論という機能です。TypeScriptはこれが非常に強力だと言われています。) なので、以下のコードのような場合は型を省略することが多いわけです。 Good◎：<code>const num = 100</code> Bad△：<code>const num: number = 100</code> もう少し具体的に、ここではCSS in JS(CSSをJavaScript内で使うためのもの)のライブラリのひとつである@emotion/reactを使ったコードで解説していきます。 (変更前)<pre><code>// SampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import React from "react";

const styles = css`
&nbsp; font-size: 2rem;
&nbsp; letter-spacing: 0.3rem;
&nbsp; font-weight: 700;
`;

export const SampleComponent: React.FC = () =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;div css={styles}&gt;サンプルテキスト&lt;/div&gt;
&nbsp; &nbsp; &lt;/&gt;
&nbsp; );
};</code></pre>例えば、定義した<code>styles</code> 変数を同じコンポーネント内で使用するのでしたら、<code>const styles = css`...`</code> と型付けを省略しても特に問題ないのです。 しかし、これを別のコンポーネントから引数(Props)として渡してあげる形にしたいときに型が必要となってきます。 (変更後) 【子コンポーネント側(呼び出される側)】<pre><code>// ChildSampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { SerializedStyles } from "@emotion/react";
import React from "react";

type Props = {
&nbsp; css?: SerializedStyles;
};

export const ChildSampleComponent: React.FC&lt;Props&gt; = ({ css }: Props) =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;div css={css}&gt;サンプルテキスト&lt;/div&gt;
&nbsp; &nbsp; &lt;/&gt;
&nbsp; );
};</code></pre>【親コンポーネント側(呼び出し側)】<pre><code>// ParentSampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import React from "react";
import { ChildSampleComponent } from "./component2_after_child";

const styles = css`
&nbsp; font-size: 2rem;
&nbsp; letter-spacing: 0.3rem;
&nbsp; font-weight: 700;
`;

export const ParentSampleComponent: React.FC = () =&gt; {
&nbsp; return &lt;ChildSampleComponent css={styles} /&gt;;
};</code></pre> 変更前の<code>const styles = css`...`</code> を別のコンポーネントから引数として渡したいとき、つまり<code>type Props = {css?: &lt;stylesが持つ本来の型&gt;};</code> としたいのですが、型推論を使っているため、変数 <code>styles</code> には型が記載されていないので分からないですよね。 ここで型を調べるために登場するのが「ホバー表示」です！ <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/a40d1831e0d94a62b627fe076df314a0/yr2wzlvn2_movie_1.gif" alt=""> ホバーを使って、表示された型をコピペで定義してあげることにより、<code>type Props = {css?: SerializedStyles;};</code> と型を付けることができました。 もちろん、なんでも渡すことができる<code>any</code> 型を使えばエラーは出ないですが、せっかくTypeScriptを使っているのですから極力型を付けるようにしていきましょう。 <h2 id="h397e38daae">補足</h2>マウスだけでなく、ショートカットキー(Ctrl+K→Ctrl+I)でもホバーを表示することができます。 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/2b3ea3d2cb5540d0962d5802c1f18920/yr2wzlvn2_2.png" alt=""> 【手順】 VSCode「キーボードショートカット」→「ホバーの表示」と入力し検索→コマンド「ホバーの表示」<h2 id="h1afe451c43">さいごに</h2>ここで紹介した方法以外にも、型を調べる方法はたくさんあります。 どれが正解ということはありませんので、学んでいく中で自分が使いやすいと思ったものを選びましょう！

本記事ではTypeScriptで型を調べる方法のひとつである「VSCodeのホバー表示」を紹介しています。「VSCodeのホバー表示」の使い所について、具体例を挙げながら紹介しています。

開発速度を上げるの記事一覧

【Chrome】ショートカットで日本語と英語原文の翻訳を切り替え【BetterTouchTool】

【AWS×Terraform】マネジメントコンソール側からパラメータを変更してそのままコード化する(terraform plan)

【Terraform】terraform planの結果を各リソース1行でコンパクトに表示する

【React×VSCode】自動でimport＆未使用importの削除とソートで爆速開発！

自己紹介

かわいち

注目記事

カテゴリー

タグ

開発速度を上げる の記事一覧

【Chrome】ショートカットで日本語と英語原文の翻訳を切り替え【BetterTouchTool】

【AWS×Terraform】マネジメントコンソール側からパラメータを変更してそのままコード化する(terraform plan)

【Terraform】terraform planの結果を各リソース1行でコンパクトに表示する

【React×VSCode】自動でimport＆未使用importの削除とソートで爆速開発！

自己紹介

かわいち

注目記事

カテゴリー

タグ

開発速度を上げるの記事一覧