StorybookでGoogleMapを表示しているページのプレビューを行いたい ReactプロジェクトでGoogleMapを表示している uga-box.hatenablog.com <GoogleMapReact bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }} defaultCenter={this.props.center} defaultZoom={this.props.zoom} > このときの/* YOUR KEY HERE */は実際は__GOOGLE_MAP_API_KEY__という変数を使っている この変数はWebpackのDe…</googlemapreact>

よくあるコンテンツをシェアするためのURLのコピーをJavaScriptで行いたい Twitterでいうと以下の「ツイートのリンクのコピー」をクリックしてクリップボードにコピーする機能 調べてでてきた方法は４通り Document.execCommand("copy") ClipboardEvent.clip…

aggregationを使って集約した結果に重複がありそうだったので、この重複をなくしたい 重複を削除して集計する場合はcardinalityを使う www.elastic.co GET /language/_search?size=0 { "aggs": { "lang": { "terms": { "field": "language", "size": 10 }, "…

あるAPIのレスポンスの結果で、長さの単位のフィートの項目がある このフィートの値は文字列でセットされているので、のちのち計算するためBigDecimalに型変換したい すごく単純に、以下のように型変換するだけでよいと思ったがNumberFormatExceptionが発生…

overflow: scroll で横スクロースさせて読ませるコンテンツがiOS Safariだとカクカクする これをスムーズにする（慣性スクロールにする）やり方を毎回調べては忘れてしまうので記載しておく overflow: scroll; -webkit-overflow-scrolling: touch; developer…

言語のEnumクラスを以下のように定義していたとき、文字列の"EN"や"JA"からEnumに変換したくなった public enum Language { EN("en"), JA("ja"); private final String code; Language(String code) { this.code = code; } public String getCode() { return…

ESのscripted fieldsを使って、計算した結果の一つをフィールドとして定義した際、出力結果をみるとscripted fields以外の_sourceが表示されなかった GET my-index/item/_search { "script_fields": { "my_doubled_field": { "script": { "lang": "expressio…

@babel/polyfill がBabel 7.4.0で廃止されたため非推奨になっていた babeljs.io @babel/polyfill の代わりに core-js を使用することがお勧めされている https://babeljs.io/docs/en/babel-preset-env#usebuiltins core-jsを使う async/await用にregenerator…

ElasticsearchでSnapshotのキャンセルの仕方を毎回忘れるのでAPIをまとめてとく GCSにSnapshotをあげる 滅多にやらないので忘れがち 導入のしかたは以下 GCPでElasticsearchのGCS Repository Pluginがインストールされたカスタムイメージを作ってみる - Day-…

あるページ回遊中にブラウザバックをすると挙動がおかしいバグに遭遇した 調べるとどうやらキャッシュしない方が良いところでキャッシュされていたのが原因のよう ところで、キャッシュをしない設定というのはCache-Control: no-storeで制御が可能だが、Cach…

Web UI の自動テストツールいわゆるE2Eテストツールの一つにCypressというのがあることを知った Storybookを活用したテストを考えていて、StorybookとJestやPuppeteerをつかったe2eテストは聞いたことがあるが、StorybookとCypressはあまり聞いたことがなか…

FlowでObject.valuesを使った場合、mixedの配列だと認識されてしまいエラーになる 解決策 以下の記事より、 davidwalsh.name [...(Object.values(whatever): any)] にする anyの使用が悩ましいが、実際何が返るか（返らない可能性も）考えたらanyでよいのかも

PrettierをつかってコードのフォーマットをしていたがPrettierのバージョンを2.xにあげたところfunctionと括弧の間にスペースが追加されることに気付いた v1.0 const fun = function() { // ... } v2.0 const fun = function () { // ... } どちらでもよいの…

PrettierをつかってコードのフォーマットをしていたがPrettierのバージョンを2.xにあげたところArrow関数の引数が１つでも括弧がつくようになった v1.0 a => {} v2.0 (a) => {} https://github.com/prettier/prettier/pull/7430 引数が増えた時に余計な変更…

Gulpを使ってsvgスプライトを作っていたが、Gulpのバージョンを4にあげたところ以下のエラーが発生した ReferenceError: primordials is not defined 原因の一つがremove-svg-propertiesで、以下の記事によるとgulp4.0の場合はgraceful-fs@3系は使えないが上…

gulp-autoprefixerでscssからcssにトランスパイル時に自動でプレフィックスがつくようにしている github.com Gulp4にバージョンアップしたので、合わせてバージョンアップしたら次のオプションがなくなったので対応する browsers: ['last 2 versions'], brow…

フロントエンド周りのライブラリを更新しているときに、html-loaderを0.5系から1.x系にアップデートしたらvueのテンプレートがある場合に動かなくなってしまった 影響範囲は、Storybookのyarn run build-storybookを実行して出力したファイルのみ 事象はビル…

以前キャッシュが残っていたためCache-Control: no-storeをヘッダに設定する対応を行った uga-box.hatenablog.com しかし、Safariではbfcacheという訪問したページ間の戻る、進むという動作にページのロードをおこなわない機能がCache-Control: no-storeを設…

Babel7にアップデートの際に、参考にしたドキュメントがbabelの設定をbabel.config.jsに記載していた これまで.babelrcに記載したのでどう使い分けるのか調べてみた https://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading 上記のドキュメントに…

プルリクエストを出すときに差分でJavaのimportがまとめられていることに気付いた これはIntelliJ IDEAの設定で自動でまとめており、特に害はないが他の開発者と合わせないと認識してないところに差分が出てしまう 毎度この設定の変え方を調べている気がする…

HMRというワードを聞いたので調査 HMRとはHot Module Replacementの略で、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールのことだった そして、すでにwebpackで使っていた webpack.js.org webpackで使っているHMR SSRをしているの…

検索エンジンの歴史上で「display:none」が利用した悪質なサイトがあったため、不必要に「display:none」を使うとSEOを下げるといわれてきた そのため、アコーディオンとよばれるUI（見出しをクリックすると本文がしたからスライドしてでてくるやつ）はSEOの…