iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

TypeScript

next/routerの関数メモ

本日は、next/routerの関数についての軽いメモです‍♂️ 関数たち push 任意の画面に遷移するために使用します。next/linkによる実装が不十分な時などに使用できます。 router.push(url, as, options) replace 機能的にはpushと同じですが、replaceは遷移時、…

【TypeScript】返り値を型としてあつかう

下記のような関数の、返り値の型をつくるためのメモです🏃‍♂️ const hoge profile = () => { return { name: "Yamato", age: 23 } } 結論 ReturnTypeというものを使って、返り値を型に変換することができるようでした。 type Profile = ReturnType<typeof profile> ちなみに、</typeof>…

【Next】Linkを持つbuttonってどうやって作る

結論 普通のリンクの場合は、next/linkを使用して下記のように実装できます。 import Link from 'next/link' <Link href="/"> <a>hoge</a> </Link> buttonなどのインタラクティブなコンポーネントを使って遷移したい場合は、next/routerを使いましょう。 import Router from 'next/router'…

【React】useCallbackとは?

useCallbackとは? 以前に紹介したuseMemoと同じ感じで、関数をメモ化します。 yamato8010.hatenablog.com つまり、初回時のレンダリングまたは、依存する値が変わらない限りは、前回と同じ関数インスタンスを再利用するようになるので、パフォーマンスが向…

WebStorageを調べましたよ

Webフロントを入門して、初めてWebStorage周りを触る機会があったので、WebStorageの基本について調べてみました WebStorageの種類 WebStorageには、sessionStorageとlocalStorageの二つの種類があります。 sessionStorage セッション期間中のデータを保存す…

【React】useMemoとは?

useMemoとは? useMemoは初回時に実行された関数の値を保持して、次回以降はその保持した値を再利用することでパフォーマンスを向上させる仕組みです。(Swiftでいうところのlazy varとかに近いかな) 使い方 下記のように使うことができます。 const isSoccer…

Next.jsとwebpackでのインポートを楽にする

動機 他の階層のモジュールを相対パスでインポートすると、見辛いし、パスが変更した時に書き換えが大変ですよね import Hoge from '../../../components/templates/Hoge' なので、下記のようにしたい。 import Hoge from '~/components/templates/Hoge' 結…

【TypeScript】pngをimportできるようにするぞ

やっていく src>types内に、index.d.tsというファイルを作りモジュールの型を定義します。ちなみに、d.tsは型定義ファイルと呼ばれ、JavaScriptのライブラリなどをTypeScriptなどで使う際に型情報を付与する目的で使用されます。 declare module '*.png' あ…

【React】特定のコンポーネントの外側のタップを検出する

結論 下記のようにして、全体の要素のmousedownイベントを監視して、そのイベントの中のtargetRefに関するイベントのみ除外することで、特定の要素以外の場所がタップされたことを検知することができます👀 const targetRef: React.RefObject<HTMLDivElement> = React.createRe</htmldivelement>…

Error in render: "ReferenceError: location is not defined" の対処法

SSRするような場合に、下記のように直接locationを参照したらエラーが発生していました。 const hoge = location.pathname == '/hoge' Error in render: "ReferenceError: location is not defined" 結論 下記のようにブラウザの処理時に、locationにアクセ…

【React】useEffectとはなんなのか?

useEffectとは? useEffectは、Reactのコンポーネントがレンダリングされた後にフックされる特別な関数です。 毎回呼ばれるの? 公式ドキュメントにも載っているような、下記のシンプルな例の場合では、毎回レンダリング後にuseEffectが呼ばれます。 import …

【TypeScript】配列からundefinedを取り除く

結論 undefinedを許容した配列型のまま取り除きたい場合は下記のようにシンプルに記述できます。 items .filter(item => item.documentSnapshot !== undefined) // (number | undefined)[] undefinedを許容しない配列型にしたい場合は、タイプガードを使って…

【React】props. children を簡単に使う

結論 Functional Componentを実装する際に、下記のように定義するのではなく、 const Ex = (props: Props) => { return ( <div> hoge </div> ) } React.FCを使って実装すれば、呼び出しからchildrenプロパティを参照できるようになります。 const Section: React.FC<SectionProps> = p</sectionprops>…

【TypeScript】スプレッド演算子って便利

結論 元のオブジェクトに変更を加えることなく、新しいオブジェクトを作成したい場合などに便利です。例えば、下記のようなaとbをプロパティに持つオブジェクトにcを追加する時など。 const hoge1 = {a: 1, b: 2} const hoge2 = {...hoge1, c: 3} ちなみに、…

【TypeScript】Objectの配列をスマートにDictionaryに変換したい

オブジェクトの配列をDictionaryに変換する際に、下記のようにObject.assignで変換していましたが、もっとスマートな書き方があったのでメモしておきます。 const params = [ { key: 'hoge', value: 'value' }, { key: 'hoge2', value: 'value' } ] const di…

【TypeScript】A required parameter cannot follow an optional parameter. の対処法

TypeScriptで下記のようなコードを書いていたら A required parameter cannot follow an optional parameter.というErrorに遭遇して、若干ハマったのでメモします。 function hoge(a?: string, b: string) { console.log(a) console.log(b) } 結論 結論、エ…

【TypeScript】Objectsをマージしたい

結論 Object.assignでObjectsをマージできるらしいです。 const target = { a: 1, b: 2 } const source = { b: 4, c: 5 } const returnedTarget = Object.assign(target, source) console.log(target) // expected output: Object { a: 1, b: 4, c: 5 } cons…

【React】動的にコンポーネントを追加するには

ボタンタップ時などに、動的にフォームを追加する方法がわからなかったので簡単にメモ。 結論 JSXでは{ }で囲んだコードは、JavaScriptとして認識されるので、動的にコンテンツを追加したい場合は下記のように記述することができます。 public render() { re…

【TypeScript】Dictionaryをループ処理

TypeScriptでは、インデックスシグネチャと呼ばれる機能を使って下記のように、KeyとValueの型を明示的に指定したDictionaryを作成することができます。 interface Dictionary<T> { [index: string]: T; } 今回は、このDictionaryに格納された配列をどのように</t>…

TypeScriptのunion型って便利ですね

TypeScriptのunion型に感動したので、簡単にメモ。 union型 union型とは、enumのように、型に入る値を定義できるもので、下記の例で、argに設定することができるのはa・b・cのいずれかの値になります。 function hoge(arg: 'a' | 'b' | 'c') { console.log(a…

TypeScriptで型チェックってどうやるの?

結論 typeof演算子を使って下記のように分岐を行うことができます。 if (typeof value === 'number') { return (value as number).toString() } また、下記のような場合はundefinedは判定されますが、nullは許容されるので、nullをはじきたい場合はその下の…

【TypeScript】declareキーワードってなんぞや

結論 アンビエント宣言というものらしい。 アンビエント宣言とは? JavaScriptのライブラリをTypeScriptなどから利用する場合、TypeScriptは静的型付け言語なので、型の情報が必要になります。そのような場合、JavaScriptのオブジェクトをdeclareを使って宣…

【React】Class Component と Functional Component

React勉強中なので、簡単にClass ComponentとFunctional Componentの違いをメモしておきます‍♀️ Class Component Class ComponentはStateやライフサイクルを持つことができます。実装クラスはReact.Componentを継承する必要があります。 class Summary exten…