TypeScript


<p>今回は、<strong>Reactの状態管理ライブラリ「<a href="https://recoiljs.org/">Recoil</a>」</strong>の使い方を簡単にまとめたメモです。</p>



<p>Next.jsでの使い方やTypeScrpitの型宣言の方法などもわからなかったので調べた内容をメモしています。</p>



<ul>
<li><a href="https://recoiljs.org/">https://recoiljs.org/</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">0）ライブラリをインストールする</a></li><li><a href="#1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</a></li><li><a href="#2Atom">2）Atomを作成する</a></li><li><a href="#3Atom">3）Atomを使用する</a></li><li><a href="#AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</a><ul><li><a href="#_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</a></li><li><a href="#_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</a></li></ul></li><li><a href="#AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</a></li><li><a href="#i-2">まとめ</a></li></ul></div>
<h2><span id="i">0）ライブラリをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install recoil</code></pre></div>



<h2><span id="1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="_app.js" data-lang="TSX" data-line="1,6,8"><code>import { RecoilRoot } from &#39;recoil&#39;;


function MyApp({Component, pageProps}) {
	return (
		&lt;RecoilRoot&gt;
			&lt;Component {...pageProps} /&gt;
		&lt;/RecoilRoot&gt;
	)
}

export default MyApp</code></pre></div>



<h2><span id="2Atom">2）Atomを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="atoms/atoms.js" data-lang="JavaScript"><code>import { atom } from &quot;recoil&quot;;

const textState = atom({
	key: &#39;textState&#39;, // key名（他のatomのkeyと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p>この<code>atom()</code>で作成したデータ（Atom）は、アプリケーション内で読み書きができるようになります。（コンポーネント間でも共通の状態管理ができる）</p>



<h2><span id="3Atom">3）Atomを使用する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-lang="TSX"><code>const [&#39;text&#39;, &#39;setText&#39;] = useRecoilState(textState);</code></pre></div>



<p>使いたいコンポーネント内で<code>useRecoilState(xxx)</code>を使用すると、<code>useState()</code>と同じように使えるようになります。同じように別のコンポーネントで利用するとそのデータの受け渡しもできます。</p>



<p></p>



<h2><span id="AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</span></h2>



<p>atom()をどこで記載すればいいかわからなかったので、調べてみるとこの2パターンをよく見かけました。</p>



<h3><span id="_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="2,3"><code>my-app/
├─ atoms/
│ └─ atoms.js   ← ここにatomを定義する
│
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他に、atomごとにファイルを分けて管理したり、フォルダ名が<code>states/</code>だったりしているのも見かけました。</p>



<h3><span id="_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="7"><code>my-app/
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js   ← ここにatomを定義する
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他にコンポーネント内に記載している方法も見かけました。</p>



<h2><span id="AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="atoms/atoms.ts" data-lang="TypeScript" data-line="3"><code>import { atom } from &quot;recoil&quot;;

const textState = atom&lt;string&gt;({
	key: &#39;textState&#39;, // キー名（他のatomと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p><code>atom&lt;型></code>と記載することで、データの型宣言ができます。</p>



<h2><span id="i-2">まとめ</span></h2>



<p>selector()やデータを永続化させる方法なども追記したいと思います。レンダリングの</p>



<ul class="references">
<li><a href="https://recoiljs.org/">Recoil</a></li>



<li><a href="https://maasaablog.com/development/frontend/react/3226/">Next.jsにRecoilを導入して、グローバルな状態管理を実装しつつ永続化する</a></li>
</ul>


【React】状態管理ライブラリ「Recoil」の使い方まとめ


<p>TypeScriptで<code>Parameter 'xxx' implicitly has an 'any' type.</code>というエラー文が出たのでその対処法メモです。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">エラーの原因</a><ul><li><a href="#i-2">エラーが起きるコード例</a></li></ul></li><li><a href="#i-3">まとめ</a></li></ul></div>
<h2><span id="i">エラーの原因</span></h2>



<p>これは「&#8221;xxx&#8221;という値の型が宣言されていませんよ」というエラーです。</p>



<p>TypeScriptでは<strong>型を明示的に宣言していない変数や関数は「any型」</strong>として扱います。そして<strong>「any型」はコンパイル時にエラー</strong>となってしまいます。（今回のように型が指定されていないと判断される）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>Parameter &#39;xxx&#39; implicitly has an &#39;any&#39; type.</code></pre></div>



<h3><span id="i-2">エラーが起きるコード例</span></h3>



<p><code>name</code>という変数の型が宣言されていないためany型と判断されてエラーになってしまいます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript" data-line="1"><code>function greet(name) {
	console.log(`Hello, ${name}!`);
}

// NG: Parameter &#39;name&#39; implicitly has an &#39;any&#39; type.</code></pre></div>



<p>なのでこの場合は<code>name</code>の型を宣言することでエラーを解消することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript" data-line="1"><code>function greet(name: string) {      // nameの型を宣言
	console.log(`Hello, ${name}!`);
}

// OK</code></pre></div>



<h2><span id="i-3">まとめ</span></h2>



<p>型宣言がちゃんとできているかの確認を忘れないようにしたいです。</p>


【TypeScript】エラー文「Parameter ‘xxx’ implicitly has an ‘any’ type.」の対処法


<p>TypeScriptで<code>Property 'xxx' does not exist on type 'yyy'.</code>というエラー文が出たのでその対処法メモです。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">エラーの原因</a><ul><li><a href="#i-2">エラーが起きるコード例</a></li></ul></li><li><a href="#i-3">エラーの対処法</a><ul><li><a href="#i-4">対処法⑴ 型を追加/変更する</a></li><li><a href="#i-5">対処法⑵ 参照するプロパティを変更する</a></li></ul></li><li><a href="#i-6">まとめ</a></li></ul></div>
<h2><span id="i">エラーの原因</span></h2>



<p>TypeScriptで「yyy」というオブジェクトに対して、「xxx」というプロパティが存在しないと判断された場合に出るエラーです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>Type error: Property &#39;xxx&#39; does not exist on type &#39;yyy&#39;.</code></pre></div>



<h3><span id="i-2">エラーが起きるコード例</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>Type error: Property &#39;name&#39; does not exist on type &#39;Person&#39;.</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>type Person = {
	firstName: string
	lastName: string
	age: number
}

const person: Person = {
	firstName: &#39;Taro&#39;,
	lastName: &#39;Yamada&#39;,
	age: 30,
};

console.log(person.name)

// Type error: Property &#39;name&#39; does not exist on type &#39;Person&#39;.
// ⇒ &quot;Person&quot;の型に&quot;name&quot;というプロパティがありません。</code></pre></div>



<p><code>person.name</code>を参照していますが、Personという型エイリアスに<code>name</code>プロパティが存在しないためエラーになってしまっています。</p>



<h2><span id="i-3">エラーの対処法</span></h2>



<p>対処法としては下記2つがあります。</p>



<ol>
<li><strong>型を追加/変更する</strong></li>



<li><strong>参照するプロパティを変更する</strong></li>
</ol>



<h3><span id="i-4">対処法⑴ 型を追加/変更する</span></h3>



<p>参照したいプロパティに合わせて型や値を追加して対処する方法です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>type Person = {
	firstName: string
	lastName: string
	age: number
	name: string                 // 追加
}

const person: Person = {
	firstName: &#39;Taro&#39;,
	lastName: &#39;Yamada&#39;,
	age: 30,
	name: &#39;Yamada Taro&#39;          // 追加
};

console.log(person.name)

// Yamada Taro</code></pre></div>



<h3><span id="i-5">対処法⑵ 参照するプロパティを変更する</span></h3>



<p>参照するプロパティを型に合わせて変更する方法です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>type Person = {
	firstName: string
	lastName: string
	age: number
}

const person: Person = {
	firstName: &#39;Taro&#39;,
	lastName: &#39;Yamada&#39;,
	age: 30,
};

console.log(person.firstName)  // 変更

// Taro</code></pre></div>



<h2><span id="i-6">まとめ</span></h2>



<ol>
<li><strong>「参照したいプロパティ(xxx)が存在するか」</strong>を確認しよう</li>



<li><strong>「参照したいプロパティ(xxx)の型」</strong>を確認しよう</li>



<li><strong>「型エイリアス(yyy)」</strong>を確認しよう</li>
</ol>


「TypeScript」の記事一覧