Google Tag Managerのタグとトリガーについてメモ

概要 簡単な概念だけ記載します 、というかあまり深くまで知らない。。。 タグ: データを Google アナリティクスなどのシステムに送信するコードです。 ↑公式から引用 タグは実行されるJavaScriptコードという理解です Google公式のタグもあれば、完全にカス…

主キーには自動でインデックスが付与される

Primary keyを作成時、インデックスは自動で付与される 主キーを作成時、大抵のDBは自動でインデックスが主キーに付与される そのため、主キーにインデックスがあることを意識してインデックスを付与することや、複合主キー主キーを作成時には、複合インデッ…

FirestoreとNoSQLについて

Firestoreについて FirestoreはNoSQLモデルのデータベースです。 公式サイトは以下です。 https://firebase.google.com/docs/firestore?hl=ja FirestoreってRDBと何が違うの?というとデータを保持する構造が全く異なります。 RDBに詳しい人ほど取っ付きにく…

awaitとthenの挙動と使い分け、awaitを使わないほうが良い場合とPromise.all()について

awaitの使用例 まずdeveloper.mozillaの説明を引用しますと await 演算子は、async function によって Promise が返されるのを待機するために使用します。 下の例ではawait processA()でprocessAの解決を待ったあとに以下の処理が走ります。 processA()の実…

DB設計~第一正規化から第三正規化

はじめに 商品の注文履歴テーブルを作成する、という題材でDB設計(第一正規化から第三正規化まで)を考えていきます。 カラムは簡潔にするためにシンプルにしています。 第一正規化 これは単に一つのカラムに一つの値が入っている状態で、以下のような形で…

Error: Value for argument "data" is not a valid Firestore document. Cannot use "undefined" as a Firestore value (found in field "fieldName")の原因と対処法

エラーの原因 undefinedをFirestoreがサポートしていないためエラーが出ます。 なお、nullはサポートしているためエラーは出ません 参考 firebase.google.com 対策 undefinedではなくnullなどサポートされている型を入れる firebase.firestore.Settingsでign…

HTTP レスポンスステータスコードについてメモ

レスポンスの5つのクラス 100台 情報レスポンス 200台 成功レスポンス 200 OKや201 Createdなど 300台 リダイレクト系 301 Moved Permanentlyなど 400台 クライアント側エラー 400 Bad Requestや404 Not Foundなど 404 Not Foundでリュックを背負った金髪の…

アジャイル・スクラム開発を経験して考えたこと・感じたこと

はじめに この記事はスクラム開発の解説ではなく、私がスクラム開発チームやっていたときの備忘録です。 こんなんだったなぁとか大変だったなぁみたいなことを書きたいと思います。 内容も私の経験を元に書いているので、それはスクラムじゃないみたいなこと…

tsconfig.json/compilerOptionsのtypes指定についてメモ

概要 デフォルトでは@typesパッケージのすべて(node_modules/@types)がコンパイル時にincludeされる。 typesを利用すると、指定したパッケージのみincludeされる。 { "compilerOptions": { "types": ["node", "lodash", "express"] } } ↑三つの指定したパ…

computedの中でdataを書き換えるとエラーになる: vue/no-side-effects-in-computed-properties

Vue

事例 computedの中でdataを書き換えると vue/no-side-effects-in-computed-properties というエラーが出る 公式によると、computedがこのような副作用を持つと、可読性が悪くなりかつ予測不可能になりやすいため たしかにcomputedが動いたときに毎回値自体が…

Next.jsの動的ルーティングについてメモ

詳しい動作はコメントに記載しました Next.jsのversionは10.0.7です UserList.tsx import * as React from 'react' import UserListItem from './UserListItem' import { User } from '../interfaces' // Propsで親コンポーネントからUserのリストを取得 typ…

Firestoreのセキュリティルールのメモ

Firestoreのセキュリティ ルールについて Firestoreの読み書きに対してセキュリティルールを設定できる。 これを設定せずに公式のすべて許可の例 https://firebase.google.com/docs/firestore/security/get-started?hl=ja#allow-all のようにして運用すると…

ファイルサイズの境界値テストは任意のファイルサイズを作成できるfsutilが便利

環境:Windows10 例えば1GBバイト以下のファイルのみアップロードできる、という仕様の場合 fsutil file createnew 1gbfile 1048576000 といった形でファイルサイズを指定してファイルを作成することが出来ます。 参考:https://docs.microsoft.com/ja-jp/wi…

Entity Repository Service の役割について

記事中の経験談は、Spring Frameworkの実務経験によるものです。 Entityの役割 任意にテーブルデータを組み合わせたカスタムエンティティ(ユーザー定義エンティティ)を作成することも可能しかし、自分の経験上、カスタムエンティティを簡単に認めると、好…

Reactで条件付きレンダリング

Reactで条件付きレンダリング 私は普段Vue.jsを書いているのですが、Vueでいうv-ifが、Reactだとどうなるのか調べました。 方法1 JSXに{}で式を埋め込む 中括弧{}で式を埋め込む return ( <div> <h1>Hello!</h1> {name && <h2> {name}があれば表示される </h2> } </div> ); この場合、左辺…

Docker for WindowsでなぜLinuxがWindows上で動くのか気になったので調べてみた

はじめに Dockerは仮想マシンと違い、ホストOSにゲストOSは載っておらず、あくまでアプリやミドルウェアがコンテナとして搭載されるもの、と理解していました。 https://knowledge.sakura.ad.jp/13265/ から引用 しかし、Docker for WindowsはWindows10 Pro…

v-ifとv-showの違いと使い方の注意について

Vue

レンダリングの違い v-ifはfalseの場合は何もレンダリングされない v-showは条件に関わらずレンダリングされて、シンプルな CSS ベースの切り替えとして保存される そのため、例えば値を取得してから描画しないとエラーになる場合などは、v-ifで値をチェック…

computedは非同期処理をサポートしていないため、watchを使用する

Vue

computedは非同期処理をサポートしていない 公式サイトより watch オプションを利用することで、非同期処理( API のアクセス)の実行や、処理をどのくらいの頻度で実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といった…

b-form-groupのlabelにhtmlを使用する

b-form-groupのlabelはXSS対策でhtmlをエスケープするため効かない。 改行や空白文字などでhtmlを効かせたいなら、slotを使用する。 <b-form-group > <template slot="label">&nbsp;Username</template> <b-form-input v-model="username" type="text"></b-form-input> </b-form-group> https://github.com/bootstrap-vue/bootstrap-vue/issues/2811

Vue.jsで親コンポーネントから子コンポーネントの要素にスタイルを適用させる方法と注意点

親コンポーネントから子コンポーネントの要素にスタイルを適用させる方法 ディープセレクタ>>>を使用する <style scoped> .a >>> .b { /* ... */ } </style>` 注意 Sassなどでは上記のディープセレクタが効かない場合がある。 その場合は/deep/か::v-deepを使う。 参考 vue-loader.…

JavaScriptのNumber() 関数で文字列やnullを数値に変換した結果

JavaScriptのNumber() 関数とは プリミティブ型オブジェクトのNumberを生成する 変換した結果 console.log(Number('123')) // 123 console.log(Number('12.3')) // 12.3 console.log(Number('12.00')) // 12 console.log(Number('123e-1')) // 12.3 console.…

php.iniのファイルパスを調べる方法

PHP

echo phpinfo(); 参考: qiita.com

Google Apps Script(GAS)のV8 runtimeでES5に対応

2020年2月5日からV8 runtimeでES5に対応したようです。 これにより、letやconst, テンプレート構文が使えるようになったようです。 2020年4月現在は、GASではテンプレート構文が使えないという古い情報ばかり検索で出ますが、現在は使えます。 developers.go…

Google Apps Script(GAS)で文字列を区切って配列に格納する

一つのセル内に、カンマ区切りや改行で複数のデータが入っているときに有用かと思います。 let array = 文字列.split(区切り文字); // 例えば改行なら区切り文字は '\n' // 文字列は取得したセルの文字列等 splitメソッドはJavaScriptのsplitメソッドです。 …

Chromeでオートコンプリートのとき、背景色を変更させない

Chromeが勝手に背景色を付与するので困った時のメモ。 そもそもオートコンプリートで勝手に背景色が付くことを知らなかった。 以下のリンクを参考にCSSを上書きした。 qiita.com オートコンプリート無効化の方法 ちなみにブラウザのオートコンプリート機能自…

insert文のvaluesで副問い合わせを使う書き方メモ

SQL

テーブル名などは適当です。 このSQLの場合、anyというカラムにvaluesにある副問い合わせの結果がinsertされます。 insert into table1( any ) values ( ( select id from table2 where id = 5 ) );

phpのemptyの仕様についてメモ

PHP

emptyとは 公式曰く、変数が空であるかどうかを検査する 空であると判断される基準 var が存在し、かつその値が空や0でなければ FALSE を返します。 それ以外の場合は TRUE を返します。 次のような値は空であるとみなされます。 "" (空文字列) 0 (整数 の 0…

JavaScriptのArray.forEachは他のfor文とbreak, continue, returnの挙動が異なる

Array.forEachの中でreturn等をして処理を完了してfor文を抜けることは基本出来ない。 break, continue, returnを使いたい場合、別のfor文を使用するのがベター。 qiita.com www.deep-rain.com

CallBackのネスト地獄をasync/await でリファクタリングするメモ

リファクタリング対象コード anyMethoid(){ this.returnPromiseMethod1().then(result1 => { if (result1.data) { // result1を取得してからしたい何かの処理... this.returnPromiseMethod2().then(result2 => { if (result2.data) { // result1とresult2を…

Google Apps ScriptでLogger.logを確認するショートカットキー

環境:Windows10 Ctrl + Enter ログについて詳しく記載いただいている参考リンク https://tanuhack.com/gas-log/#Loggerlogdata