Sunday morning

#js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

s3の署名付きURLが有効期限より前に見れなくなってしまう

IAMロールではなくIAMユーザの権限でURLを生成する必要があった

AWS Lambdaでpuppeteerを動かしスクリーンショットをs3に保存する

前から気になっていたHeadless Chromeをjsから操作できるpuppeteerを使って、スクリーンショットをs3に保存するAPIを作ることにした。

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる

Nuxt.jsのserverMiddlewareがGAE上だとエラーになる

ディレクトリ位置の問題でserverMiddlewareが動かない現象が発生した

NuxtアプリにCloud Functionsを追加したらビルドエラーが発生

CIでのビルドログ抑制を無効化して、functionsディレクトリをビルド対象から外す必要があった

markdown-itでリンクを開く際にtarget="_blank" rel="noopener"を自動付与する

markdown-itを利用する際にaタグをカスタマイズする場合、renderer.rulesを書き換える。

Vuetifyのblockquoteをmarkdown-itで利用する方法

Vuetifyで引用を利用する場合classを付与する必要があるが、markdown-itの出力は<blockquote>のみになってしまう

create nuxt-appで作成したアプリでTapable.plugin is deprecatedが出る場合の対処法

yarn add @nuxtjs/pwa@v3.0.0-beta.16でPWA Moduleを更新する

NuxtアプリをGAEにデプロイする(Node.js 10)

GAEへのデプロイの際にいくつかエラーが出てハマったので対応内容をまとめておく

document.queryselectorAllでnotを使う

:not()を指定する

Dockerでnodejsサーバを立てる

docker-composeを使うと手軽に構築できる

Gridsomeで構造化マークアップに対応する

metaInfoにJSON-LD用のscript設定を追加する

async/awaitでsleep処理を書く

上から順にコードを読んでいけるので分かりやすくなる

mochaのgrepオプションを使う

特定のtestのみ実行したい場合に便利

開発環境ではSentryのエラー通知を無効化する

開発環境ではdsnを設定しないようにする

gridsome-plugin-pwaの導入

Gridsomeのアップデートと合わせてPWAプラグインを導入した

jsでObjectのkeyに変数を使いたい場合

[変数名]とすればkeyに変数を指定できる

CircleCIでFirebaseHostingに自動デプロイする

workflowsのfiltersを使ってproductionブランチの場合のみbuildとdeployを行う

RaspberryPi上でPuppeteerを動かす

Dockerを使うとすんなり動かせる

webpack + typescriptでpathsのエイリアスがModule not foundになる

tsconfig-paths-webpack-pluginを入れた

Typescript + webpackのNodejsアプリでsource-mapを有効にする

node-source-map-supportを入れる

Full Stack OpenでReactを学ぶ

最新のフロント開発について体系的に学べる

@gridsome/source-contentful利用時にTweetの埋め込みに対応させる

markdown-itのhtmlオプションを有効にする

Github ActionでfirebaseプロジェクトをS3にデプロイする

deploymentブランチにpushしたら自動でs3にデプロイできるようになった

AWS LambdaでSentryを使う

Sentry.flushを使う必要があった

CloudRunで動くexpressサーバにtimeoutを設定する

server.setTimeout OR req.setTimeoutを使う

webpackでproductionビルド時にminifyしないようにする

minimize: falseを指定する

Vuetifyのv-checkboxにaタグを設定する

v-on:click.preventでクリックイベントをキャンセルする必要があった

querySelectorAllで取得した要素をfilterでフィルタリングしたい

Array.fromで配列に変換してからfilterを使う