日本向のサービスを作る時、都道府県一覧の配列を作って処理の中に組み込む事が多いと思います。 TypeScript用に簡単な一覧データを作りましたのでご共有します。 案件に合わせて変えてもらって構いません。 github.com 使用例 Reactで都道府県のドロップダ…
Javascriptは配列のように扱える型が複数あります。 ドキュメントでも基本的な型は説明されています。 www.typescriptlang.org しかし、連想配列については型としては説明されていません。 今回は連想配列を扱う方法について記述します。 連想配列の指定方法…
Laravelをインストールして最初に実行する作業の一つに、アプリケーションのロケーション設定があります。 この作業をしないと、アプリケーションで扱う時間が日本時間と異なったり、バリデーションのメッセージが日本語にできなかったりします。 今回は、La…
今回は小ネタです。 コピー＆ペースト（以下、コピペ）をする時、コピー元のフォントサイズや色、背景色まで引き継いでしまう場合があります。 Macでは、文字の装飾の事をスタイルと言います。 エディタであれば文字に装飾をつけられないので影響は受けませ…
今回は小ネタです。 jsonファイルではなく、json形式の生データをとりあえず見やすくしたい時があります。 整形してくれるwebサービスもありますが、機密情報だと警戒してしまいます。 今回は、VisualStudioCode(以降、VSCode)を使用した、json形式の整形方…
処理の中で関数の引数の総数が定まらない場合があります。 これを可変長引数と言います。 ja.wikipedia.org 可変長引数を扱いたい場合は、追加したい要素を配列にしてしまう方法もあります。 // 指定された数字の合計値を返す function sum(args) { return a…
外部データをやり取りする際、データの取得はGETメソッドで行う場面が多いと思います。 GETメソッドの場合、特定の文字や情報を検索したり、データ形式を指定したりするためにパラメータを用いる事があります。 パラメータが少なければ、一つ一つ結合しても…
Reactでコンポーネントの単体テストを試してみようと思いました。 それぞれコアとなるモジュールをインストールしただけでは動きませんでした。 調べてみると、コアのインストール以外にも他のモジュールを入れたり、設定を変えたりする必要がありました。 …
最近、Salesforceと連携していたWebサービスでAPIに連携できない問題が発生しました。 Salesforceを管理されている方からは「設定の変更をされていない」との事だったので、色々状況を調べることになりました。 解決策が見つかったので共有します。 もしかし…
プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…
Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。 今回は、初期設定されているエントリーポイントを変える方法について記載します。 環境 モジュール名 バージョン @vue/cli 4.4.6 【Tips】 Vue CLI 4系を使う場合の注…
webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…
webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…
webpackの構成を作成していた時の備忘録です。 今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。 また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。 web…
webpackの利点として、コンパイルしたスクリプトの容量を抑えてくれる機能が用意されています。 とはいえ、単純にwebpackを使うだけであれば触れる機会は少ない機能だと思います。 今回は、コードの圧縮方法について触れたいと思います。 webpackのライブラ…
フロントエンドで遷移するイベントを実装する時があります。 最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。 もちろん、全てdivでも何ら問題はありません。 しかし、何かしら遷移が発生する場合は、（好みの問題ではあ…
静的ページで構成されるページであっても、なるべくならテンプレートエンジンを使用して作りたいものです。 今回は、Pugテンプレートについて取り上げます。 pugjs.org Pugについては別の機会にするとして、webpackでコンパイルするための設定について記載し…
LaravelはフロントエンドコンパイルをするためのツールとしてLaravel Mixが導入されています。 laravel.com 初期状態でも十分使いやすいのですが、機能が多いプロジェクトの場合ではそのままでは使いづらいところがあります。 例えばページ毎に別のスタイル…
無償IDEで且つ軽いと言われているVisual Studio Code(VSCode) を触る機会がありました。 (※諸説あります。) 初期状態では英語ですので、日本語にする方法について記載します 環境 Macで使う想定ですが、Windowsでも手順は同じようです。 OS バージョン mac 1…
Laravelでテーブルに変更を加える場合、基本的にマイグレーションで指示を書きます。 マイグレーションを書く時は、必ず立ち上げ時に起動するup関数と、ロールバックやリセットで実行するdown関数を設定します。 新規のマイグレーションについては、テーブル…
Vueとバックエンドで共通の値を使いたい時があります。 シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。 しかし、設定値のためだけにAPIを使うと言うのは実装するのも…
iPhoneやiPadのようなiOSデバイスで英語文字入力をする際、先頭の小文字が大文字になってしまう事があります。 小文字しか入力しないinputタグの場合、この機能が煩わしく感じます。 今回はこの機能を止める方法です。 原因 タグに付与するautocapitalize属…
Vueでアプリケーションを実装していた時に発生したエラーについて記載します。 状況 ボタンが２個あるページを作成しました。 ボタンが１個だったときはオブジェクトでも動いていたのですが、２個にしたところ次のエラーが発生しました。 The "data" option …
LaravelにはModel Eventと言うモデルの状態変更に合わせてコールバックを実行できる機能があります。 readouble.com laravel.com 最近、この機能を知りました。 その機能を別のシステムでも使おうとした所すんなり動かなかったので備忘録として残しておきま…
Webアプリケーションを作っていて、テキストエリアを介さずに入力を送信したい場合があります。 例えば、バーコードリーダーのような外部デバイスの入力を受け付けてそのまま送信をしたい時などです。 今回は、テキスト入力を特定のテキストボックスに入力さ…
本日は小ネタです。 Bitbucketはドキュメンテーションの管理がしやすいです。 例えば、リポジトリでReadme.mdのファイルを追加していると、Bitbucketで該当のリポジトリのトップページで表示されます。 また、Wikiや課題管理も用意されています。 プロジェク…
C#で非同期処理を調べるとTaskの記事が多く見受けられます。 docs.microsoft.com Task自体理解するのが難しく、サンプルコードだけでは理解しきる事は困難です。 さらに読み進めていくと根本にはスレッドが使われている事に気づきます。 docs.microsoft.com …
今回は小ネタです。 終わりが分からない場合、無限ループで繰り返し実行しつつ内部から状態変化を取得するという方法があります。 記事を色々見ていくと無限ループの書き方も１つではありません。 今回は、よく見かける無限ループの書き方について触れます。…
Visual Studioのソース分析で発生した警告について理解し、修正をする方法について記載します。 環境 Visual Studio 2019 で開発します。 ソース分析 ソースアナライザー 設定項目 設定値 推奨されるアナライザー パッケージ Microsoft.CodeAnalysis.FxCopAn…
Visual Studioはツール作る上で最適なツールです。 しかし、便利すぎて余計な事までしてしまう事があります。 例えば、ツールのイベントを自動で追加する機能です。 コンポーネントのデザインビューからツールを追加してダブルクリックをすると、自動でイベ…
