【TypeScript】型ガード(Type Guard)の概要、typeofとinstanceofの利用例
型ガード（Type Guard）について 型ガード（Type Guard）とはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。 型ガードを利用するとブロック…
JavaScriptJavaScriptJavaScript
JavaScript
JavaScriptTypeScriptのas(型アサーション)の概要と使いどころ
今回はTypeScriptの型アサーション（Type Assertion）について紹介します。利用するTypeScriptのバージョンは4.3.5です。 型アサーション（Type Assertion）とは TypeScr…
JavaScript【TypeScript】アンビエント宣言(declare)と型定義ファイル(d.ts)の概要
アンビエント宣言について アンビエント宣言(Ambient Declarations)とはJavaScriptで記述されたライブラリに型情報を付加するための機能です。 JavaScriptのコードはJavaScript環…
JavaScript具体例で理解するuseMemoとuseCallbackの使い方。Reactパフォーマンスチューニング
コンポーネントや関数のメモ化を行うことで、不要な計算やレンダリングを抑えられるためパフォーマンス向上が期待できます。 useMemoやuseCallbackはメモ化の機能を提供するフックです。 関数コンポーネントにおいて…
JavaScriptパフォーマンス改善やバグ防止に理解必須。useEffect第2引数の利用パターン集
useEffectはReact Hooks APIの中でも使用頻度の高いフックです。 レンダリングのタイミングで副作用を実行したい場合はuseEffectを活用します。 useEffectには依存配列と呼ばれる第2引数を…
JavaScript【JavaScript】axiosインスタンスとAPI連携クラスを作って非同期処理をいい感じで書く
axiosはフロントエンドでAPI連携を実装する際の定番HTTPクライアントです。axiosの戻り値はPromiseオブジェクトを返します。 API連携が必要な箇所でaxios.get(…)という感じで愚直にコードを…
JavaScript即時関数をアロー関数やfunctionを利用して色々なパターンで書いてみる
即時関数（MDNでいうIIFE (即時実行関数式)）とは定義した直後に実行される関数のことをいいます。 今回は即時関数の書き方について紹介します。 引数がない場合の即時関数の書き方 引数がない場合、即時関数は(関数式)(…
JavaScriptJavaScriptアロー関数入門。functionからの書き換えや、省略記法について理解する
functionの代わりにアロー関数を利用することで関数式がより簡潔に記述できます。 アロー関数の書き方にはいくつかルールが存在します。特にアロー関数の省略記法はアロー関数に慣れていないとパッとみて理解しにくいです。 そ…
JavaScriptCreate React AppでTypeScriptやReduxやコードフォーマットの環境を整える
Create React Appを利用したReactアプリケーションの作成方法についてまとめます。 アプリケーションの作成方法 アプリケーションの作成は以下の通りです。1 ### npx $ npx create-rea…
JavaScriptRedux ToolkitのcreateAsyncThunkで非同期処理を実装する方法
createAsyncThunkはRedux Toolkit 1.3.0から利用できる非同期処理用の機能です。 前回、Todoアプリで理解するRedux Thunkによる非同期処理の実装方法でRedux Thunk(Th…
JavaScriptTodoアプリで理解するRedux Thunkによる非同期処理の実装方法
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux Saga、Redux Observableがあります。 Redux ThunkはRedux Toolkitにデフォルトでインストールされている…
JavaScriptJavaScriptの非同期処理の定番！async/await概要・挙動まとめ
async/awaitを利用することでPromiseの操作を簡潔に記述できます。JavaScriptで非同期処理を実装する際はasync/awaitを利用するケースがほとんどです。 今回はasync/awaitの概要につ…
JavaScriptJavaScriptの非同期処理で理解必須！Promiseの概要・挙動まとめ
JavaScriptで非同期処理を実装するにあたりPromiseの理解は重要です。 今回はPromiseの挙動についてまとめたので紹介をします。 Promiseについて Promiseとは『状態』を持つオブジェクトです。…
JavaScript【Redux不要】React ReduxチュートリアルのRedux部分をReact Hooksに書き換えてみた
「React Hooks APIを活用することでReduxが不要になる」という話を聞いたことがある方もいるかもしれません。 今回は、Reduxの機能をReactのみで実装する検証として、React ReduxのBasic…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をRedux Toolkitで書き換えてみた
Redux ToolkitとはReduxの記述を簡潔にするためのツールです。 Redux Toolkitを利用することで、以下のようなReduxの問題点が解決できます。1 Redux Tookitで提供されているAPIは…
JavaScriptReact Reduxのチュートリアル(Todoアプリ)をReact Redux Hooksで書き換えてみた
React Redux hooksはconnect()の代わりとなるAPIです。 React Redux hooks APIを利用することでReduxのStateやActionの実行（dispatch）がconnect(…
JavaScriptJavaScriptの浅い比較・浅い（深い）コピーの挙動まとめ
プログラミング言語において『浅い比較(shallow equal)』や『浅いコピー(shallow copy)』といった言葉をよく聞きます。 今回はJavaScriptにおける、比較やコピーで表現されることのある『浅い（…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をTypeScriptで書き換えてみた
2020年2月現在、React ReduxのBasic Tutorialで紹介されているサンプルアプリケーション（Todoアプリ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScri…
JavaScriptReactチュートリアルを関数コンポーネントとTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントとJavaScriptで書かれています。 前回、サンプルアプリケーションを関数コン…
JavaScriptReactチュートリアルをTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScript版を作成し…
JavaScriptReactチュートリアルを関数コンポーネントで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントで作られています。 今回、サンプルアプリケーションの関数コンポーネント版を作成した…
JavaScript【Nuxt】SSGとSPAの『nuxt generate』やアプリケーションの挙動の違いについて比較してみる
こんにちは。Enjoy IT Life管理人の@nishina555です。 前回、『【Nuxt】SSR・SSG・SPAにおける『nuxt build』と『nuxt generate』の実行結果の違いまとめ』で、Nuxtで…
JavaScript【Nuxt】SSR・SSG・SPAにおける『nuxt build』と『nuxt generate』の実行結果の違いまとめ
こんにちは。Enjoy IT Life管理人の@nishina555です。 NuxtにはSSR（Server Side Rendering）、SSG（Static Site Generator）1、SPA（Single …
