UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

2021-01-01から1ヶ月間の記事一覧

【JavaScript】複数のPromiseをまとめて処理したい - Promise.allSettled

複数のPromiseをまとめて処理をしたくてPromise.allを使っていたが、allは複数のPromiseのうち一つでも Reject すると全体が Reject してしまう どれかが失敗しようが全て実行して成功と失敗の配列で結果が欲しい場合Promise.allSettled()を使うとよいことが…

文字数を数える

システムで扱う文字数の数え方についての話し合いの場があった 個人的には過去の@kawasimaさんの記事を思い出した qiita.com 読み返すと物凄い情報量だったのと、今回いろいろ情報をいただいてアップデートできたので、文字数を数える ということについて改…

【Gulp】Node v12にアップデートでエラー

Nodeのバージョンをv10系からv12系にあげてからしばらくして、とあるgulpタスクを実行したらタスクが失敗した エラーの内容は次のもので > gulp sometask fs.js:36 } = primordials; ^ fs.jsで ReferenceError: primordials is not defined というエラーが発…

【ESlint】hasOwnPropertyの使い方でエラーがでた

ESlintを導入したらhasOwnPropertyを使っている箇所でエラーがでた hasOwnPropertyはObject.prototypesにビルトインされている関数で、オブジェクトに引数で指定したキーがあるかを判別する関数 エラーがでた使い方は以下 var hasBarProperty = foo.hasOwnPr…

【Jotai】状態管理ライブラリ

Jotaiという状態管理ライブラリを知ったのでまとめる github.com 作者自身(@dai-shi)の記事があるのでこれを読めば大体わかる qiita.com Zustandという別の状態管理ライブラリから派生してつくられたライブラリ Zustandは状態管理ライブラリのうち2020年の…

【Twemoji】Twemojiとは

Twemojiというオープンソースライブラリを知ったので調べた Twemoji とは、Twitter社が公開したオープンソースのTwitter絵文字ライブラリ twemoji.twitter.com UTF-8で記述された絵文字を画像に変換してくれるライブラリ Emojiは異なる環境であっても意味が…

【IntelliJ IDEA】Multi module maven projectの依存解決

Mavenビルド時に以下のエラーが発生した Could not find artifact com.inhouse:sample:pom:0.0.0-SNAPSHOT in ojo.libs-snapshot (https://oss.jfrog.org/libs-snapshot) マルチモジュールのMavenプロジェクトで、com.inhouse:sampleという自作ライブラリの…

【date-fns】moment.jsから移行する

moment.jsが今後の変更はセキュリティサポートとバグ修正に留まることを公式に発表している https://momentjs.com/docs/#/-project-status/ なので、今まで使用していた箇所を他のライブラリで置き換えたい moment.jsが推奨する代替案のうちdate-fnsを試して…

【Maven】duplicate-finder-maven-plugin でclassの重複を検知

Mavenプラグインのduplicate-finder-maven-pluginを導入していて、そのプラグインがビルド時に予期せぬclassの重複を検知した mvnrepository.com 実際吐かれたエラーはこのような感じ Failed to execute goal org.basepom.maven:duplicate-finder-maven-plug…

【Alpine.js】Alpine.jsとは

State of JS 2020 をみていて、「Alpine.js」がフロントエンドフレームワークの満足度ランキングに4位になっていたので調べた State of JS 2020より Alpine.js READMEによると、Alpine.jsはVueやReactなどの宣言的にUIを記述できるライブラリだが、より低コ…

【Svelte】Svelteとは

State of JS 2020 をみていて、「Svelte」がフロントエンドフレームワークの満足度ランキングトップになっていたので調べた State of JS 2020より Svelteとは svelte.dev ReactやVueのようなUIを宣言的に記述してWebアプリケーションを作るライブラリ ドキュ…

【Next.js】window scroll event を使いたい

スクルロール量に応じてフローティングヘッダーの表示制御を行いたい github.com 上のissueの中で次の実装例がある const handleScroll = () => {}; useEffect(() => { if (typeof window !== "undefined") { window.addEventListener("scroll", handleScrol…

【Next.js】eslintの導入

前回isFallbackの位置を間違え、Reactフックの呼ばれる回数が変わりエラーが発生した uga-box.hatenablog.com ドキュメントを読んでいると、lintのルールで検知できることがわかったので設定する 使うライブラリは以下だが、そもそもeslint類を導入していな…

【Next.js】isFallbackの位置の注意

Reactのフックを使っていたら以下のエラーが発生した Error: Rendered more hooks than during the previous render. ブラウザのコンソールには直前に以下のログがでていて Warning: React has detected a change in the order of Hooks called by SamplePag…

【GCP】Cloud Deployment Managerでインスタンステンプレート作成時に環境変数を設定する

GCEのContainer Optimized OS上で、コンテナを実行してバッチ処理をすることを考える そして、このコンテナ起動時にアプリに変数を渡したい これまで、Jibでイメージを作成していて、作成する際に実行時のオプションを指定するようにしていたが、Jibを使わず…

【Next.js】Dynamic Importを使ってlocalStorageから値を取得する

前回useEffectを使ってlocalStorageから値を取得することができた uga-box.hatenablog.com 他に調べているとNext.jsではDynamic Importをサポートしているため、Dynamic Importを使ってもlocalStorageから値を取得することができそうということに気づいた ne…

【Next.js】localStorageを使う

Next.jsのSSGで事前に生成された静的ページでlocalStorageオブジェクトを使いたい SSGのビルド時ではユーザーのブラウザなど知りようがないので、非同期で参照するようにしないとビルド時にエラーが発生していしまう そこで、useEffectを使って非同期にlocal…

【Next.js】next-translateでJSON arrayは使えるのか

以前にnext-translateを使ってNext.jsアプリの翻訳を行った 【Next.js】next-translateでNext.jsページを翻訳する - UGA Boxxx 【Next.js】next-translateのbuild step以外でNext.jsページを翻訳する - UGA Boxxx このnext-translateで用意するnamespaces fi…