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のホバー表示」の使い所について、具体例を挙げながら紹介しています。

【TypeScript】型を調べる方法「VSCodeのホバー表示」

こんにちは！かわいちです。 皆さんは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の削除とソートで爆速開発！

<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の日本語と英語原文の翻訳を切り替えする方法を紹介しています。方法について、手順と具体的な説明付きで紹介しています。

お問い合わせ

自己紹介

かわいち

注目記事

カテゴリー

タグ