はじめにOpenAPI の定義から OpenAPI Client を生成するツールといえば、openapi-generatorがメジャーですが、動作させるために Java または Docker が必要となるため扱いづらいと感じていました。また、Client/Server で様々な言語/FW に対応しているため必要な情報が調べにくく、またオプションや構文の対応状況に差異があり別ターゲットのナレッジが使いまわしにくい印象でした。代替として、openapi-typescript と openapi-fetch が良さそうなので、使い方を見ていこうと思います。https://open...

はじめにinput 要素の maxlength 属性は比較的よく利用される属性です。https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlengthしかし、maxlength 属性信用して、バリデーションを省略すると、特殊な方法（ブラウザの開発者ツールで maxlength 属性を削除するなど)により、不正なデータが送信されてしまうリスクがあることは周知の事実です。このような操作は一般のユーザには難しく、また意図的に操作をしないと発生しないためエッジケースだと考えていましたが、一般ユーザでも容易に ma...

Express の Request 型を拡張しようとしました、別ファイルから読み込んでくるパターンの情報が見つからなかったため、備忘録として残しておきます。 環境$ node -vv18.19.0$ npm -v10.2.3package.json (一部抜粋){ // .... "dependencies": { // .... "express": "^4.18.2", // .... }, "devDependencies": { // .... "@types/express": "^4.17.21",...

久々に個人的に目からウロコの tips があったので記事にしておこうと思います。 はじめにアコーディオンアニメーションを実装しようとして、css transition height auto などと検索すると、主にheightを数値指定する方法や、max-heightを使った方法がヒットすると思います。それらの方法は、何かしら大きな制約があり今まで避けていましたが、実装が簡単かつ制約がかなり小さい方法を知りました。 実装<div class="container open"> <div class="inner"> Lorem ipsum...

0. はじめにドメイン駆動設計(DDD : Domain Driven Design)について少し触れる機会があったので記事にまとめてみました。この記事では「アプリケーションサービス」「リポジトリ」「ファクトリ」「集約」「仕様」に関しての説明は記載していません。予めご了承ください🙇‍♀️ 1. ドメイン駆動設計とはそもそも、システムを作る目的というのは、「①ある領域（＝ドメイン）における ②特定の課題を ③解決するため」と言えます。例えば、「①保育園の業務 において ②子供の出欠状況が分かりにくいので ③パソコンやスマホで出欠状況を把握できるようにする」といったイメ...

schedule トリガーを用いた方法 👎Github Actions を定刻に実行する方法としては、schedule トリガーを利用する方法が一般的かと思います。.github/workflows/scheduled.yamlon: schedule: # * is a special character in YAML so you have to quote this string - cron: "30 5,17 * * *"https://docs.github.com/en/actions/using-workflows/events-th...

はじめにModal/Dialog は実際のプロジェクトでもよく使うと思います。有名な React UI ライブラリのChakra UI や mui にも含まれており大変便利なのですが、プロジェクト途中からこういったライブラリを導入するのはハードルが非常に高くなってしまいます。一方、もし自作する場合、普段何気なく使っている Modal/Dialog にも考慮しないといけない仕様も多くわりと大変です。今回は、自分の中での整理/知識のアップデートもかねて、Dialog を作ってみようと思います。 実装に入る前に今回ポイントとなる情報を整理します。 Dialog タグh...

Array.map で async/await を使う方法は調べるとすぐに出てきますが、Array.reduce で async/await を使う方法が調べても出てこなかったため、忘備録です。/** * 非同期処理 */const asyncFunc = (id: number): Promise<string> => { return new Promise<string>((resolve: (value: string) => void): void => { console.count("start Promise"...

onChange に useCallback を使う場合、ちゃんと useCallback が効く書き方がひとクセあったのでその備忘録です。 #1.処理フロー今回は、よくある以下のような処理について考えていきます。 #2.Codingまずは処理フローを元に show/onChange の処理を実装します。※この段階ではまだ パフォーマンスは気にしません。ParentComponent.tsximport { useState } from "react";import type { InputValue } from "~/ChildComponent";imp...

git-flow is 🤔Vincent Driessen さんがブログで公開した A successful Git branching model のこと元記事：A successful Git branching model日本語訳： A successful Git branching model を翻訳しましたまたは、A successful Git branching modelを補助するためのツールの名称git-flow cheatsheetブランチの運用ルール、命名規則を設けることで、複数人開発時も各ブランチをわかりやすい状態に保つことがで...

はじめに最近、JESTとReact Testing Libraryを使ってテストを書く機会が増えてきました。最初は愚直にテストを書いていたのですが、以下のような課題が出てきたため、コンポーネント構成を見直してみました。コンポーネント外のパラメータ(Props や store, API など) と画面表示項目の間に複雑な変換ロジックが入っていてテストを書くのが大変UI の変更などによりテストが通らなくなる Before1 コンポーネントの中に表示値への変換ロジックが入っているコンポーネントになります。変換部分が複雑化するとテストを書くのがだんだん億劫になってきます。...

display: contentsがググラビリティが低く、いつも忘れるので、使い方の例と合わせて忘備録として残しておきます 👀 今回使う CSS display プロパティの値引用は、MDN Web Docsからの引用です。 display: flex要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。Can I use (flexbox) display: grid要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。Can I use (css-grid)...

ミニマルなモーダルライブラリ(MinimalCollapse.js)を自作してみたので紹介します。 MinimalCollapse.js 🤔TypeScript で作成された、軽量かつ最小限の機能のアコーディオンライブラリです。 なんでこのライブラリ作ったの？ 🤔アコーディオンを実現するライブラリはたくさんありますが、余計なスタイルを打ち消すのが大変だったり、jQuery を使っていたりしたので、最小限の機能とスタイルで実装できるアコーディオンライブラリを作ってみました。 機能 😋aria-hidden の true/false の切り替え開閉アニメーションを CS...

今までは、SVG アイコンを Hover 時に CSS で色を変更するため、インライン方式で埋め込んでいましたが、外部から読み込んだ SVG ファイルでも CSS で色を変更する方法がありましたので、記事にしておこうと思います。 今までの方法(インライン方式)index.html<style>.link { color: #fff;}.link:hover { color: #000;}</style><a href="#" class="link"> <svg xmlns="http://www.w...

モーダル表示時などに普通にアニメーションを設定しても反映されなかったので、その対応策です。実際の動作は、ミニマルなモーダルライブラリを npm で公開しました のデモで使用していますのでご確認ください。 表示アニメーションが効かないケースhtml<input type="checkbox" class="trigger"><div class="modal"> <div class="modal__container"></div></div>css.modal { display: none;...

React の状態管理の方法で迷ったので、選択肢とその特徴をまとめようと思います。 React の状態管理の主な方法useStateuseContext :round_pushpin:Redux今回は、useContextを使った状態管理の方法についてまとめていきます。 useContext を使った状態管理のポイントReact.createContextで生成した Context を Store として管理する。Store にはReact.useReducerで生成した、StateとDispatchを格納する。Content のProvider Com...

待ちに待った Windows 10 May 2020 Update（WSL2）もリリースされ、Windows への Docker の敷居も下がってきそうです。そこで、Docker で作る使い捨てやすい Node.js の開発環境についてまとめておこうと思います。 Why NodeJS with Docker 🤔※前置きです（読み飛ばし可） 現状のバージョン管理方法Mac (メイン)anyenv 経由で nodenvWindows (サブ)漢らしくzip を解凍してパスを通すnvmがあるのは知っていましたが、~~バージョン指定するほどの開発もし...

Android 10(Q)から導入された Scoped Storage の影響で、以前のストレージの容量関連の取得ができなくなっていたため、Android 10 以降でも利用できる方法を模索したのでメモしておきます。※ ディレクトリ毎のパーミッションを取ればできますが、 容量関連の情報を取るためだけに、ユーザにパーミッション許可を求めたくなかったため、 StatFs を用いた方法にしてあります。なお、勢いで書いたので、実際には動かしてないです。。。※サンプルコードの他に外部ストレージアクセスのパーミッション取得が必要な可能性あり。 サンプルコードMainActivit...

この記事はKotlin Advent Calendar 2020の 5 日目の記事です。Android アプリ開発初心者ですが、空きがあったので勢いだけで参加してみました。(1 日ぶり 2 回目) はじめにAndroid に限らず色々なアプリを開発していて、ついつい忘れがちなボタン連打対策。。。処理の多重実行によってバグが発生することも多々あるため対処が必要です。いざ実装しようと調べて見ると、通常の連打対策の記事はよくありますが、DataBinding を利用しているプロジェクトで、簡単に導入できる方法が見つからなかったため、備忘録として記事にしようと思います。 Dat...

この記事はちょっとした工夫で効率化！02【PR】パソナテック Advent Calendar 2020の 13 日目の記事です。 はじめにマークアップをする際、最初はXAMPPで環境を作り、HTML や CSS を更新するたびに、都度更新ボタンを押して表示確認を行っていました。また、バックエンド組み込み後のスタイルを修正していて、複雑な条件でしか表示されない部品のパーツのスタイルが崩れてると修正が非常につらかった記憶があります。(スタイル修正後、再現させるところまで持ってくのがたいへん。。。。)その後、色々環境を試してみた中で、BrowserSyncが気軽に利用でき、かつかな...