今回は、下記のようなCloudFunctionsdeNext.jsがホストされている状態を想定してメモしています‍♀️ const { join } = require('path') const { https } = require('firebase-functions') const { default: next } = require('next') const nextjsDistDir = j…

FirebaseDynamicLinksを動的に生成する方法が、予想と反して意外とシュッとできそうだったのでメモ‍♀️ 【おさらい】そもそもFirebase Dynamic Linksとは？ 以前にかる〜く触れたので、下記を参考にしてみてください。 yamato8010.hatenablog.com 要は、アプ…

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

FirebaseDynamicLinksのURLを手動で構築する際に付与できるiTunesConnectの解析パラメーターの意味がよくわからなかったので、メモ。 結論 意味は下記の通り。 parameter 意味 at Affiliate Tokenの略でアフィリエイト用のIDなどを付与する際に使用します。 …

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

JavaScriptのパッケージ管理を行う際によく登場するnpmとyarnですが、双方にどんな違いがあってどちらを使った方が良さそうなのか知らなかったので、簡単に調べて見ました npm Node.jsがリリースされた翌年に公開されたパッケージマネージャーで、Node.jsが…

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

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

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

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

縦方向へのoverflowのみを表示させようと、下記のようにcssを設定していたら、なぜかスクロールできるようになってしまいました。 .container { max-width: 100%; overflow-x: hidden; overflow-y: visible; } まさにこんな感じ。 参照: https://stackoverfl…

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

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

結論 Concurrentlyというツールを使ってサクッと並列で実行することができました。 www.npmjs.com まずはインストール。 $ npm install --save-dev concurrently あとは下記のようにconcurrentlyキーワードで複数の処理を実行できます。 "scripts": { "dev":…

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

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

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

最近Webフロントを入門したことで、JavaScriptを勉強する機会が増えたが、ECMAScriptについての理解が曖昧だったので軽くメモ‍♀️ ブラウザでのJavaScript JavaScriptのコードをプログラムとして動作させるには、JavaScriptエンジンでコードをコンパイルして…

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

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

結論 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…

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

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

結論 -u もしくは--include-untrackedオプションでuntracked filesもまとめてstashすることができます。(今までよく使わないで、ここまでやってこれたな) $ git stash -u ちなみにステージングしていないかつ、untracked filesもまとめてstashしたい時は、--…

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

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

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

JSのimportって？ import 文は、他のモジュールによってエクスポートされた読み込み専用のライブバインディングをインポートするために使用します。 ライブバンディングとは、バインディングをエクスポートしたモジュールによって値が更新されることを指すそ…

本日はAndroid StudioのTipsを紹介します‍♀️ Terminalでプロジェクトのルートにいるとき、vscodeのcode .コマンドのように、プロジェクトを開きたい時ってありますよね。 そんな時、Android Studioでは studio .コマンドが使えます。ちなみに、デフォルトで…

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