コンポーネントの分類について考えたことをまとめた
どのようにコンポーネントを分類していくか 個々のコンポーネントがが単一の責任のみ負っている状態であれば、コードの見通しも良くなる上、後々のメンテナンスも容易です。 まずは「複数の関心ごとを１つにまとめない」という原則（単一責任の原則）から分類の指針を考えていきます。 フロントエンドにおける関心ごとですが、大別すると APIとの接続 View（表示とイベント実行） 状態管理 以上３つに集約されるのではないでしょうか。 では、これらの関心ごとをどの様に切り分けていけば良いのか考えていきます。 APIとの接続 まずはAPIとの通信ですが、こちらはコンポーネントの外で管理した方が良いと考えています。 各コンポーネントに通信に関わる処理がベタ書きされている状態だと、エンドポイントの変更等に弱くなり、通信処理の再利用も面倒です。 それに、「フロントの状態管理 / 表示」と「外部との接続」はそれぞれ別種
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
Deno v1.15で導入されたNode.js互換モードについて
2021/10/12にDeno v1.15がリリースされました。 この記事では、Deno v1.15で新しく導入されたNode.jsの互換モードについて解説します。 Node.jsの互換モードとは？ まず、以下のようなJavaScriptファイルがあったとします。 import { EventEmitter } from "events"; const emitter = new EventEmitter(); emitter.on("foo", () => console.log("foo")); emitter.emit("foo"); $ deno run main.mjs error: Relative import path "events" not prefixed with / or ./ or ../ from "file:///home/uki00a/ghq/github
画面キャプチャを仮想カメラとして扱えるようにするChrome拡張を作ってみる
この記事について 先日、@catnoseさんがカメラ映像の代わりに絵文字(Emoji)を配信するためのサービスを公開されました。凄く完成度が高くて良いサービスだと思ったので、さっそく使ってみたのですが、仮想カメラとして使用するためには OBS Studio が必要でした。[1] サービスを使うには全然申し分無いのですが、「 もっと簡単にできたらなぁ～ 」と思ってしまうのが私の悪い所で、すぐさまブラウザのみでどうにかできないかと調べてみると、色々な制約はありますが、Chrome 拡張を使うことで OBS Studio を使わずとも仮想カメラを使用できることが分かりました。 実装も簡単にできるので、 今回は Google Meet で、画面キャプチャを仮想カメラとして表示する Chrome 拡張を作って行こうと思います 💪 今回作るモノについて 今回この記事で作る Chrome 拡張は、上記
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
HTMLコーディングでもReact+TypeScriptの開発体験を得る
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
TypeScriptで空でない配列を型で表現する
// コンパイルエラー const numbers: NonEmptyArray<number> = []; // これはコンパイルが通る const numbers: NonEmptyArray<number> = [1]; const needNonEmpty = (arr: NonEmptyArray<number>) => arr.length const a: number[] = [1,2,3]; const b: NonEmptyArray<number> = [1,2,3]; const isNonEmptyArray = <T>(arr: T[]): arr is NonEmptyArray<T> => arr.length > 0; // コンパイルエラー needNonEmpty(a); // これはコンパイルが通る needNonEmpty(b); // これはコン
Deno 1.12 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
皆さんこんにちは、暑い中ですがお元気ですか？おっくんです。 去る 2021 年 7 月 13 日に Deno 1.12 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介したいと思います。 実行環境 macOS Catalina 10.15.7 Docker イメージ denoland/deno:centos(確認時点では Deno 1.12.0 でした) Deno 1.12 Deno 1.12 での変更事項をDeno 1.12 リリースノートを元に確認します。 deno.com Web Crypto API の対応メソッドが増えました Deno 1.12 では、 以下のWeb Crypto APIの 3 つの実装が追加されました。 crypto.subtle.generateKey キー生成 crypto.subtle.sign 署名 crypto.s
Sorting colors in JavaScript
Sorting colors in JavaScriptJune 22, 2021How to sort colors in JavaScript? Let me tell you a story first. In the project I'm working on right now we used to have 134 colors in use! WTF?! you say. Once I discovered that I thought I'm going to show that to my colleagues, and we will address the problem. Unfortunately, I'm a very visual person (so to say) and I couldn't stand the very random order of
DesignOps推進の一環としてFigma上のコンポーネントを自動でnpmにpublishしてみる
DesignOpsとは DesignOpsとは質の高いデザインのアウトプットの維持を支えるための仕組みづくりのことです。 この仕組みを整えることでデザイナーもエンジニアもお互いストレスなくそれぞれの仕事に専念できます。 今回は、デザイナーがデザインツールのFigma上で作成したアイコンをReactコンポーネントに変換してnpmに定期的にpublishするところまでを自動化しました。この自動化により、わざわざFigmaにみに行って、デザインされたsvgを切り出しReactコンポーネントに変換して利用するという作業が不要になりました。Figama上でアイコンが更新されたら、新たにnpm installするだけでアイコンを取り込んで使うことができるようになります。 js側では、以下のような雰囲気でnpmからアイコンコンポーネントを利用可能です。 import { MenuClose } from
GitHub Actions で Dependabot のプルリクエストの滞留を防ぐ仕組みづくり
自動的にライブラリのアップデートのプルリクエストを作ってくれるDependabotはとても便利です。ただ、何かと通常の開発タスクに追われライブラリアップデートのプルリクエストは滞留しがちです。それを解決するための仕組みはないかなと思い、試行錯誤してみたので書きます。 静的アセットのビルド差分からレビューの必要性を判断 今のチームのプロダクトでは静的アセット（JS, CSS, Image）のビルドにのみ Node.js を利用しています。 そのため、npm モジュールのライブラリアップデート時にプルリクエストのブランチでビルドされた静的アセットが、master ブランチでビルドされた静的アセットと差分がなければプロダクトの動きは変わららないはずです。 なので、そのビルド差分の有無をみれば詳細なレビューが必要かどうか判断できます。差分もなく CI も通っていればほぼ動作確認は不要で、Chang
Reactでオーディオプラグインを作れる時代になったという話
はじめに この記事では、VST（オーディオプラグインの形式の一つ）開発に突如現れた、 React-JUCEという黒船について紹介します VSTとは DAW(Digital Audio Workstation)と呼ばれる音楽制作ソフトウェアでは、VSTと呼ばれるプラグインの仕組みが標準的に用いられています。 VST形式で開発すると、CubaseやロジックといったDAW上でMIDIやオーディオを処理するプラグインを動作させることができます。 VSTの開発においては、JUCE と呼ばれるフレームワークを用いてC++で開発されることが多いようです。 今までのVST開発のツライところ 音楽家でありエンジニアである筆者は、 ずっと興味がありつつも、VST開発からこれまで一定の距離をおいてきました。 その理由としては、 C++こわい 信号処理こわい UIを命令的に記述したくない（※後述します） という理
nextjsのISRを使うときのfallback指定について理解するまでの話
next.jsのISRを使おうとして「なんか全然うまく行かない」ってなってたのがやっと理解出来たのでメモ 問題編 とりあえず見様見真似でISRはrevalidateとfallbackつければ良いんだな？とやってみたところ、どうもpropsが空Objectになってしまうようで悩んでいた。 例えば下記のような場合、エラーが起きる // pages/greeting/[name].js const Page = (props) => { // ↓ここでエラー return <div>Hello {props.name.toUpperCase()}</div> } export const getStaticProps = async (req) => { return { props: { name: req.params.name }, revalidate: 100 } } export c
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
リーダブルテストコード - Qiita
はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ
node modules なし blog を作っている話 | maxmellon's blog
node modules なし blog を作っている話今年の9月頃から，no dependencies で blog を作っています．(devDependencies には，jest と TypeScript を入れています) 正直，フレームワークを使えば blog くらいならすぐ作れるだろうと思っていたのと， フレームワークの使い方を覚えることが自分の成長に大きくつながるとは感じることができず， やっていて楽しい + 学習する余地がありそうな no dependencies で blog を作ることにしました． リポジトリはこちらです maxmellon/kajitsu 機能要件を考えるざっくり，自分がほしいなと思った要件を整理すると， markdown で記事を書きたいblog だけじゃなくて cookie や Cache-Controll header などを検証できる sandb
React + Material-UIで管理画面を作成してみた | DevelopersIO
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - 5alidz/tiny-schema-validator: JSON schema validator
Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう | fwywd（フュード）powered by キカガク
ゲーム開発者のための C++11～C++20, 将来の C++ の展望 - CEDEC2020 - Speaker Deck
