はてなブックマーク

ReactのuseEffectを利用したときに無限ループが発生してしまうことがあります。 特に注意したいのが、ESLintのreact-hooks/exhaustive-depsで表示された警告をUpdate the dependencies array to be :[...のコマンドで修正するケースです。 以下は初期表示時にユーザーの一覧をAPIなどで取得して、stateに設定しています。 コンポーネントの処理が実行された後、useEffectの第２引数が変更されている場合のみ、第１引数のファンクションが実行されますが、ここで指定しているsetUsersは変更されることがないため、結果的に初期表示時のみ処理が行われます。（無限ループは発生しない） import { VFC } from 'react'; import { getUsers } from './api'; const M

create-react-appで作成したプロジェクトに import の alias（エイリアス）を設定する方法を紹介します。 webpack の設定create-react-appで作成したプロジェクトはwebpackの設定をする項目がないので、cracoというパッケージをインストールして、webpackの設定をできるようにします。 （cracoとは「Create React App Configuration Override」という意味のようです） プロジェクトルート（package.jsonと同じ場所）にcraco.config.jsというファイル名でファイルを作成します。 ここではsrcフォルダまでのパスを@として定義しています。 （require('path')の箇所で「Require statement not part of import statement」のエラーが出

React+react-router-dom+TypeScriptでログイン認証の仕組みを実装する方法を紹介します。 以下の仕様で実装します。 未ログイン時 ログインページにアクセス可能以外のページにアクセス時はログインページに遷移（アクセスしようとしたページの情報は保持しておく）ログイン後はトップページまたはアクセスしようとしたページに遷移ログイン時 ログインページ以外にアクセス可能ログインページにアクセス時はトップページに遷移ログアウト後はログインページ遷移ルーティング設定まずはログインページとトップページのルーティング設定を行います。 詳しくはReact react-router-domの基本的な使い方で紹介しています。 ログイン時のみ表示したいページ（「認証ルート」と呼ぶことにします）は別ファイルとして管理しています。 route.tsximport { Route, Switch

DockerのコンテナをVSCodeで開いて、コンテナ内の環境を使ってVSCodeで開発を行う方法を紹介します。 VSCodeでコンテナを開く利点例えば、JavaScriptのeslintを使ったVSCode上での構文チェックは、ホストOSにNode.jsを入れる必要があります。 そのため、Node.jsの入ったDockerコンテナでビルドなどは行えても、開発環境としてホストOSにもNode.jsをインストールする必要がありました。 VSCode上でコンテナを開いてしまえば、VSCode内でのターミナルもコンテナ内の環境になり、eslintなどもコンテナ内の環境で動作するようになるため、ホストOSに開発環境をインストールする必要がなくなります。 VSCodeでコンテナを開く手順前提条件として、DockerとDocker Composeはインストール済みとします。 拡張機能のインストールまず

Dockerのコンテナ内のGUIのアプリを起動してホスト側に表示する方法を紹介します。ホスト側のOSはLinux Mintで確認しました。ベースイメージはUbuntuで動作確認用のアプリはシンプルなメモ帳のleafpadとします。また、Docker コンテナ内に一般ユーザーを作成するで紹介した方法で、ホスト側の現在のユーザーと同じユーザーID（UID）のユーザーを作成し、そのユーザーでGUIアプリを実行するようにします。

PARTITION BYを使った分析関数を使いこなせれば複雑な集計でもシンプルなSQLで実装できます。employeeテーブルの各レコードのデータと、レコードを集計したデータは集計単位が違うので、普通のGROUP BYを使うやり方ではうまくいきません。分析関数を使用するにはOVER句を使います。ROW_NUMBER（行番号）など、集計に並び替えが必要な場合は指定します。COUNTやSUMのような集計は並び替えが不要なので省略できます。

JavaScriptで文字列の長さを取得します。 lengthstr.legnthで文字列の長さを取得できます。 var str = 'abcde'; console.log(str.legnth); // 5 var str2 = 'あいうえお'; console.log(str2.legnth); // 5 String.prototype.bytes = function () { return(encodeURIComponent(this).replace(/%../g,"x").length); } var str = 'abcde'; console.log(str.bytes()); // 5 var str2 = 'あいうえお'; console.log(str2.bytes()); // 15 String.prototype.bytes = function () {

JavaScriptのオブジェクト配列（jsonも同様）をSQLのGROUP BYのように集計します。 具体的には以下のようなことができるようになります。 var arr = [ { name: 'バナナ', category: 'フルーツ', price: 100 }, { name: 'りんご', category: 'フルーツ', price: 120 }, { name: 'みかん', category: 'フルーツ', price: 30 }, { name: 'トマト', category: '野菜', price: 200 }, { name: 'キャベツ', category: '野菜', price: 150 } ]; // 集計後 // カテゴリーごとの個数（要素数）と金額を集計 [ { category: 'フルーツ', count: 3, price: 150 },

SELECT句での副問合せをうまく利用すれば、集計単位の異なる値を同時に取得できます。取得した結果に対してもう一度SQLを実行するようなイメージで値を取得できます。開発時のテストデータではたまたま１行で取得できていたためエラーにならなかったが、本番環境で実行するとエラーになってしまうということがないように、１件のみ返すことが保証できるSQLにする必要があります。

SQLのJOINの結合条件とWHERE句での条件の違いを整理します。絞り込みという観点で見ればJOINではなくWHEREで条件を指定したほうがSQL文の意図は伝わりやすいとは思いますが、JOINでもWHEREでも結果は同じになります。外部結合（LEFT JOIN,LEFT OUTER JOIN）の場合は結果が異なるので注意が必要です。

async,awaitを使った非同期処理（特にajax処理）の実装でエラー時の処理をどのように実装したらいいか、いろいろと調べてみました。 try-catchを使う方法最初は以下のように、awaitの処理をtry-catchで囲う方法で実装しました。 let response; try { response = await ajax(); } catch (e) { console.log('エラー発生'); return; } console.log(response); この方法だと、tryの中に複数のawaitの処理があった場合、catchに入った時にどのawait処理でエラーになったのかというのがわからないです。（サーバー処理でエラー時のレスポンスデータに工夫が必要になる） 個々のawait処理をtry-catchで囲うのならPromiseで実装したほうがスッキリする気もするので、

actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします。コンポーネントでloadingがtrueのときだけロード中のメッセージを表示するようにします。action`の最初でloadingをtrueにするmutationを実行し、最後でloadingをfalseにするmutationを実行します。

Vuex mutationでstateの値を変更するでVuexでmutationを実装するまで行いました。 次はVuexのactionについて説明したいところですが、そのためにはajaxのライブラリを導入していたほうが、わかりやすいとので、ajaxライブラリのaxiosの導入方法を紹介します。 Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。 vue-resourceというライブラリが公式ライブラリとされていましたが、現在ではaxiosを使うように推奨されています。 私も最初はvue-resourceを使用していて、途中でaxiosに変更しましたが、ajax処理の記載方法はほとんど同じでしたので、コードの書き換えも少なくスムーズに移行できました。 パッケージのインストールaxiosのパッケージをインストールします。

.vueファイル（単一ファイルコンポーネント）をwebpackでビルドする手順を紹介します。 バージョンは、Vue.jsは2.x、webpackは2.xです。 わかりやすくするため、空のプロジェクトから出来る限り最小構成で作成していきます。（nodejsとnpmはインストール済みとします） package.jsonの作成最初にpackage.jsonを作成します。いろいろと質問されますが、すべて何も入力せずに全てEnterキーをクリックしていけば問題ありません。 babelのインストールbabelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。 babel-core babel-loader babel-preset-es2015 babel-preset-stage-0の４つのパッケージをインスト

vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。 ページごとにファイルを分割し、そのページがアクセスされたタイミングでそのjsファイルを読み込むようにすれば最初のロード時間を短縮できます。 一見実装が難しそうですが、vue-routerとwebpackを使えば簡単に実現できます。 以下の説明の開発環境やフォルダ構成はvue-routerを導入してSPAを作成するで扱ったものと同様とします。 router.jsの修正コンポーネントの読み込み方法を以下のように設定します。 router.jsimport Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { pa

Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション（spa）を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビゲーションのリンクでrouter-viewに表示しているページに応じたコンポーネントが表示されます。