こんにちは、株式会社MG-DXでフロントエンドエンジニアをしています、小林です。 MG-DXでは、医療や薬局におけるDXの支援を目的として「薬急便（やっきゅうびん）」というサービスを提供しています。薬急便とは、薬局でのお薬の受け取りをオンラインで予約・受付できる「処方せん事前送信」の機能や、オンライン服薬指導などの機能を提供するサービスです。 私たちは、2023年秋頃より薬急便のアクセシビリティ改善への取り組みを強化しています。 この記事では、これまでに対応してきた改善内容の一部について、スクリーンリーダーとキーボード操作に対する改善に焦点を当ててご紹介します。 なぜやるのか 改善内容を述べる前に、まずはなぜ薬急便でアクセシビリティを強化していくことになったのかについてお話しします。 薬急便のユーザー層は、サービスの性質上、年配の方や身体に障害のある方などが比較的多くなっていると考えられま

vue3-migration-improve-frontend はじめまして！　BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> ElementPlus 巨大PRによるレビュー負荷 チーム体制 マイグレーションビルドと他ライブラリの相性 よかったこと 課題感 これから 2024/04/03 編集部追記 やったこと Vue2を卒業し、Vue3を

まだ Twitter の一斉解雇をめぐる混乱は続いているようですが、この解雇を通じて見えてくる Elon Musk の意図を考えてみたいと思います。これは公開されている情報に基づく長山個人の推測に基づいた分析であって、正しさはいっさい保証されていません。 個人的な所感としては以下です。 まず第一に、Musk は、Twitter をメディア企業からエンジニアリング企業へと変質させようとしているんじゃないかと考えています。これは、「どの部署がレイオフ対象になったか」から見えてくることです。TechCrunch の記事によれば、米国でレイオフ対象になった主要なチームは、アクセシビリティ、機械学習倫理 (META: ML Ethics, Transparency & Accountability)、人権、キュレーション、PR (Comms)、SRE (Site Reliability Eng) な

はじめに 少し癖のあるReact DnDを古いバージョンで使わなければならない案件を対応しました 3 つくらい古いメジャーバージョンだったので、公式ドキュメントの Examples が動かず、かつ、ネット上にドキュメントが少なかったので、一応実装をこの記事に残しておきます この記事の React DnD のバージョンは以下です "react-dnd": "11.1.3", "react-dnd-html5-backend": "11.1.3", ちなみに現在の最新は v14 です v11 でも hooks に対応されていた分、まだ楽な方だったかなと思います 実装内容は以下の Example のような D&D（ドラッグ＆ドロップ）による要素の入れ替えです https://react-dnd.github.io/react-dnd/examples/sortable/simple Exampl

はじめに ユニオン型（|）とインターセクション型（&）の違いを簡単な例でおさらいしておこうと思います 以下の型定義を利用して、実装します type A = { a: string } type B = { b: number } type U = A | B type I = A & B すべてのプロパティを実装する const u: U = { a: '', b: 0 } const i: I = { a: '', b: 0 } 上記は当然ですが、uとiのどちらも TS エラーは起きません 存在しないプロパティを実装する cというAとBのどちらにも存在しないプロパティを設定する const u: U = { a: '', b: 0, c: false } const i: I = { a: '', b: 0, c: false } 上記はuとiどちらもエラーになる （そりゃそうだ） ユニ

はじめに 画像は記事に全く関係ないカニのフィギュアです👋 近年、善良なパッケージを騙ったマルウェアが配布されているケースが増えてきています。 これらのマルウェアはパッケージマネージャ上で配布され、開発者端末やそれをビルトインしたシステムを利用するユーザー端末で悪事を働きます。 これは俗にいうサプライチェーン型攻撃で、 これらの関連ニュースを目にする機会が増えてきていることを、多くの開発者が体感されていると思います。 ただ、これらのサプライチェーン型攻撃の記事は、 どうしてもエンドユーザー（パッケージを利用する開発者側・それらを組み込んだアプリを実行するユーザー側）の対策に焦点が当てられたものが殆どのように感じています。 そこで本記事では、このエンドユーザー側の対策だけではなく、 パッケージマネージャメンテナーたちがどう対策しているのかも含めて、 「パッケージマネージャ上で行われるマルウェ

はじめに Svelte+SvelteKit の環境がコマンド 1 つで構築できるので、その構成を軽く見てみようと思います Web フレームワークのSvelteKitはSapperの後継で将来的にこちらに置き換わります この記事の@sveltejs/kitのバージョンは1.0.0-next.151です まだ β 版です セットアップ npm init svelte@next Project-name インタラクティブに環境をセットアップできる 以下を選択 Which Svelte app template? SvelteKit demo app Use TypeScript? Yes Add ESLint for code linting? Yes Add Prettier for code formatting? Yes 設定周りで気になった点 .prettierrcは最初に自分用の設定に

はじめに この記事の内容は、以下のサイトと同じことをやってます この記事は自分用のメモです https://colinhacks.com/essays/building-a-spa-with-nextjs https://blog.hey3.dev/posts/nextjs-spa 概要 Next.js アプリを静的ファイルにビルドし、S3 にデプロイ、CloudFront で公開していた しかし、動的ルーティングを使うことになり、これ自体は Next.js がサポートしているので問題ないが、/task/[id].htmlに対して URL から直接アクセスが来た場合に 403 エラーとなってしまう 単純にルートの/index.htmlに飛ばすだけで良いなら、CloudFront のカスタムエラーページの設定で対応できるが、今回はシステムの仕様上、それはできず、/task/[id].html

はじめに トラブルシューティングなどで、ECS Fargate のコンテナーに入ってコマンドを実行する手順です コンテナーの実行環境が EC2 であれば、普通に SSH でログインして、docker execすればよいのですが、Fargate の場合はこれが使えません ECS Exec + AWS Systems Manager(SSM)を使うと、Fargate 内のコンテナーでも exec できるようになります 事前準備 AWS CLI v2.1.31 以上 Fargate プラットフォームのバージョンが 1.3.0 以上 macOS で作業しています ECS タスクロールの作成 ロールを作成したら、ロールの信頼関係を以下に設定 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": { "S

はじめに やめろ、ではなく、やめたほうがいい。です。自分のユースケースに合ってるか今一度確認することを推奨します。基本的にはAlpineは避けたほうが良い、というのが2021年時点での私の認識です。 なんで？ libcに一般的な互換性が不足しているからです。Ruby、Python、Node.jsなどでNativeモジュールをバンドルしているアプリケーションの場合、パフォーマンスの劣化や互換性の問題にぶち当たる場合があります。 superuser.com あとは他のベースイメージの軽量化もそれなりに進んできていて、Alpineが定番軽量イメージと言う認識は2018年頃には消えつつあったかなという認識でいます。 どうすりゃええねん ※Debian Slimがあるやんってツッコミ結構もらったんですが、Slimは当たり前過ぎてもう紹介しなくていいかなっていう甘えで省略していました。よろしくおねがい

これは、個人ブログ からの転用です ROXXに入って学んだことの1つです。 概要 Vue.js で 親コンポーネントの method 実行させたい場合、$emit 使ってイベントを発火させるより、 props に method をコールバックとして登録しておいて実行させたほうが以下のメリット上げられるので「こっちのほうが良くね？」って話です props の成約をつけられる(requird, etc) $emit の文字列を管理しなくていい IDEで補完が効く 実際のコード ボタン押したらカウントアップしていくようなやつ 呼び出し側の親コンポーネント <template> <div> <div>{{ count }}</div> <child :handle-add-number="addCount" @addNumber="addCount" /> </div> </template> <

Digdag から Amazon SNS 経由で Slack にエラーを通知するやつを今までは AWS Lambda を使ってやっていたが、Lambda を使うとコード管理どうするとか色々考えると面倒なので、今年使えるようになった AWS Chatbot が使えたら、いいなーって思ったので調査した ただし、こちらにあるようにSNS -> Chatbotという経路では、使えません https://docs.aws.amazon.com/chatbot/latest/adminguide/related-services.html でも簡単に設定できるので、一応試してみた 結果、できなかったが、やったことをメモ Amazon SNS トピックの作成 トピックの作成をクリックし、以下を設定 詳細 設定項目 設定値 タイプ スタンダード 名前 任意の名前 AWS Chatbot Slack のワー

はじめに 今朝に書いたブログが思ったより反響が大きくて、「Dockerが死んだ」という勘違いをされている方も多かったので追加でエントリーを書きました。 blog.inductor.me 決してそんなことはないので、対応が必要なケースを見ていこうと思います。 はじめに 対応が必要ではないケース Kubernetesを使わない人たち 本番はKubernetesでも、開発にDocker Composeを使っているデベロッパーの開発環境 対応が必要なケース 開発環境でも手元でKubernetesを利用する人たち NVIDIA DockerをKubernetesで使っている人たち Kubernetesワークロードの中で「Docker in Docker」や「Docker APIに依存した処理」を動かしている場合 Dockerの機能を使ってこれまでやっていたことについて 対応が必要ではないケース Ku

Vuex を使うのに慣れすぎて、Vuex を使わないパターンを考えた時に色々考えたのでメモ 方針 比較的規模が小さいシステムでは、Vuex の利用をまずは避けたい Nuxt.js を使用 Composition API を使用 コンポーネント間のデータ受け渡しパターン 親から子 普通に props 経由 子から親 $emitで親の関数を呼ぶ .sync修飾子と$emit.updateで親の状態を更新する 子から子 禁止 必ず親を経由する 親から親 たとえば、pages コンポーネントから pages コンポーネントにデータを渡したい時など EventBus で親子間以外のデータ受け渡しが行えるらしい ただし、現在は非推奨（公式でも Vuex を使った方がよいという見解） Vue3 では$onが削除される Nuxt.js でも使えなくなるはず 代替手段 URL に含めて vue-router

CoffeeScript で書かれた hubot が ECS + Fargate 上で稼働中なのですが、これに Datadog の監視を入れてみます ChatWork 経由で hubot に命令しているのですが、ChatWork のメンテナンス等があるとメンテナンス後も hubot がエラーで落ちたままになったことがあったので、hubot を監視して異常があれば、Slack に通知する機能作ります コンテナーのメトリクスを取得 Datadog Agent をインストール まずは、Datadog 管理画面の Integrations から Amazon Fargate をインストール 次はホストに Datadog Agent をインストールします ECS + Fargate の場合は、Datadog Agent のコンテナーを作成し、ECS のタスク定義内で設定します 今回は AWS コンソ

自分が複数のシステムの開発を経験して得た確信として、「認証と認可と課金とコアドメインの分離がめちゃくちゃ重要である」というものがあるので、コレを整理してアウトプットしていく 分離するモチベーションとは Microservice文脈でいうと、デプロイ独立性だったり、リソースの最適配分だったり、障害の局所化だったり、開発組織とのマッピングだったりがメリットとして語られることが多い。 だが、ここで取り上げたいのは戦術的DDD的観点でのコンテキスト分離の有用性である。 ※ちなみにコンテキスト分離のみであればモジュラモノリスだけで実現可能。 戦術的DDD的観点での関心事の分離によるメリットとは コンテキストが分離されていることによって、境界をまたぐ際に「このI/Fは正しいのか？」を都度考えることを強制することができる。 境界がなければ意図しない密結合を生みやすくなってしまう。 もちろん、境界を超える

予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった

はじめに 最近金髪から黒髪に戻して更生しました藤井（フロントエンドエンジニア）でございます。久々にテックブログに貢献させて頂きます！ 今はメインの施工管理機能の改修の傍ら、新機能開発にも携わっておりまして、フロント側はSSRモードのNuxtを採用しております。さて、そんな中SREチームから「フロントエンドがメモリリークしていませんか？」との通報が入りました。 いやいや、そんなハズは・・と思いながらもDatadogを見てみると見事にメモリ消費量が右肩上がりに増えていってます。なぜじゃ・・・。 調査開始 メモリリークになるような処理を入れた覚えはないぞ！と思いつつも調査開始です。ひとまずChromeのDevtoolでPerformanceやMemoryタブを見ながら確認しますが、これと言って原因が見つかりません。 おかしい・・。なんでだろう。 あれこれ試しましたが解決せず、ほぼ1日消化しました

JS/TS のユニットテストで axios をモックするのになんとなくmoxiosを使っていたが、やめようかなという話 理由は moxios が 3 年以上更新されていない Issues の返信や Dependabot のプルリクも放置されているっぽい moxios.stubRequestした axios のリクエストがたまに返ってこない時がある ある特定の URL でmoxios.stubRequest(URL, ...だと Jest から axios を実行した際、then に入ってこない時があるので、moxios.stubRequest(new RegExp(URL), ...という謎対応で回避している この辺のコードが怪しいけど、調べてない そもそも moxios のような高機能なライブラリは必要なさそうなテストケースだった axios がPromise.resolveかPromi

時間は有限です。その合間を縫ってひねり出した可処分時間は貴重です。こういう時間は自分が楽しいと思えることにとことんつぎ込めばいいと今では思っているのですが、そうではなかった時の失敗談を紹介します。読者のみなさまの中で、好きなこと、やらなきゃいけないことしかできないという私のようなタイプの人には刺さるかもしれないです。 10年近く前の、まだわたしが若手というカテゴリに入っていたとき、当時ずっと生業にしていたLinuxカーネル以外にも、将来のために何かもう一つ引き出しの数を広げておかないといけないと思っていたことがありました。そういうときに飛びつきがちなのは流行りものです。当時のわたしにはそれがARMサーバでした。当時は何やらやらないと取り残されるのではという空気が身辺にありましたし、カーネル屋さんなのでハードウェアに近いところの知識はあればあるだけ損ではないという思いもありました。 ところが