2022年4月26日のブックマーク (5件)

  • React: Compound Componentsパターンを用いたリファクタリング|mizno

    こんにちは、株式会社POLのエンジニア・ミズノです。テックブログ推進と言いながら前回の投稿から随分時間が経ってしまいました。気合い入れ直して頑張ります。 今回は社内イベントで行われた、Reactコードのリファクタリングを紹介します。POLでは毎週のエンジニア勉強会(30分のLT会)を行なっていますが、それとは別にエンジニアラジオと称してトークイベントを始めました。しばらくはクローズドなイベントですが、近いうちに公開する可能性もあります。 お題はリファクタリングPOLのフロントエンドReactを採用しています。そこで実際によく書きがちなコードを取り上げて、その場でリファクタリングしてみました。聞き専メンバーだけでなくコメント、質問もあり、モブプロのような感じで進めました。 お題コードお題は以下のコードです。コードは要点のみ取り出した物です。実際はもっと複雑なコードをリファクタしているのでご

    React: Compound Componentsパターンを用いたリファクタリング|mizno
  • nodenvをupdateして新しいバージョンのNode.jsをインストールする - Qiita

    nodenvで欲しいバージョンのnodeが見つからない…… プロジェクトで指定されたバージョンのNode.jsをインストールしようとして とうっても、欲しいバージョンがリストに出てこないときってありませんか? どうやらnodenvはインストール時に登録されているバージョンしか表示してくれないようです。 調べてみても、nodenvを消してから再インストールするみたいな、ええっ🙄という情報が多いです。 nodenvをアップデートする一番簡単な方法 anyenvのプラグインであるanyenv-updateを使いましょう。 ※ そもそもanyenv使っていない人は、こちらなどが参考になります。anyenv、オススメです。 anyenv-updateのインストール anyenvのルートディレクトリ(デフォルトでは~/.anyenv)の下に、pluginsディレクトリを作り、リポジトリをクローンしま

    nodenvをupdateして新しいバージョンのNode.jsをインストールする - Qiita
    carolina04
    carolina04 2022/04/26
    “# インストール mkdir -p "$(nodenv root)"/plugins git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update # アップデート nodenv update”
  • AWSアーキテクチャ for beginner(Webアプリケーション・コンピューティング編)

    はじめに おはようございます、加藤です。現在AWSには223個(2022/01/05時点)のサービスがあります。コンピューティングのカテゴリだけでも10数個のサービスが存在し、WebアプリケーションをAWS上に構築するエンジニアは要件に応じて利用するサービスを選定しアーキテクチャを決定しなければなりません。 動くだけならばともかくアジリティ・スケーラビリティ・コストパフォーマンスを高水準で満たすアーキテクチャを設計するにはスペシャリストの存在が必要不可欠です。プロジェクトチーム内にスペシャルが存在しない場合は多くの会社がAWSコンサルティングサービスを提供しているので外注で解決する事ができます。(もちろん、弊社もAWSコンサルティングサービスを提供しております、お気軽にお問い合わせください!) しかし、コスト・スケジュール・組織的な都合で外注が出来ないことやまずはノウハウを蓄積するために

    AWSアーキテクチャ for beginner(Webアプリケーション・コンピューティング編)
  • フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

    皆様フロントエンドのテストを書いていらっしゃいますでしょうか? フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw )を使用する手法が注目されています。実施にどのように使用されているのか

    フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
    carolina04
    carolina04 2022/04/26
    “テストを書く時にベストプラクティスとして「できる限りモックを使用しない」という観点があります。モックを多く使用すると、テストの信頼性が損なわれるためです”
  • REST APIを型安全に呼び出し・状態管理ができるReact Hook「useAspidaCaller」を書いた

    useAspidaCallerという、REST APIを型安全に呼び出し・状態管理ができるReact Hooksライブラリを書きました。 対象ユーザーはaspidaを使ってREST APIを型安全に実行しており、かつReactを使っている方です。 インストール ※最初@texmeijin/use-aspida-callerという命名でしたがよりシンプルなものに切り替えました 特長① ローディングやエラーなどのAPI呼び出しに関連する状態管理ができる useAspidaCallerを使うと、POSTやPUTといった更新系のAPIを型安全に叩けるとともに、ローディングやエラーといった状態管理も宣言的に実装できます。 const Sample = () => { const { put, isPutting, isPutSuccessful, putError, } = useAspidaCal

    REST APIを型安全に呼び出し・状態管理ができるReact Hook「useAspidaCaller」を書いた