Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆様こんにちは。株式会社Schoo（以下、Schoo）でフロントエンドエンジニアをしております @okuto_oyama です。 今回は、10月19日に開催されたVue Fes Japan 2024の参加レポートをお届けします。 Vue Fes Japanとは Vue Fes JapanはVue.js日本ユーザーグループが主催する日本最大級のVueエコシステムにまつわるカンファレンスです。Vue・ViteクリエイターでもあるEvan Youをはじめ、VueエコシステムのOSSメンテナやコントリビューターも参加し、各技術の最新動向を知るこ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 参加したきっかけ 開催2週間くらい前にChromeからオススメされたCodeZineの記事からVueFesを知りました。 8000円と意外と高い値段に最初は気後れしたものの、ITのイベントに憧れがあったのもあり参加を決意。参加を決意して8000円払った後は、8000円分の期待をもってワクワクしながら開催を待ちました。 印象が残ったセッション 参加したセッションのうち印象に残っているセッションの感想をまとめます。 オープニング オープニングのカウントダウンの映像と音楽がカッコよくて、クラップしたくなったけど周りがそういう雰囲気じゃなかった

はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 要件定義関連の記事も投稿してます。時間あればぜひ読んでみてください！ 今回は「機能要件」に関する内容について投稿します。 機能要件とは ※引用：IPA（独立行政法人 情報処理推進機構）図1 機能／非機能要求の相違点と課題 機能要件は、「必ず搭載すべき機能」 を指します。新規開発であっても既存のリプレイスであっても顧客としては業務内容に直結しているため、イメージしやすい機能になっています。機能要件をすり合わせすることにより、システムの動作が明確になり設計段階での誤解を防ぎます。これらの機能要件が適切に設定されていないと、後々の開発過程で手戻りが発生する可能性があるため、初期段階での詳細な定義が求められます。 どんなドキュメ

はじめに 長らくローカルテスト用のメールサーバとして MailHog (DockerHub) を使ってきたのですが、以下のような不満がありました。 今現在(2024)メンテナンスが行われていない ローカル開発用とはいえ、UXが厳しい（日本語を受け付けてくれない） アーキテクチャが amd64 しか対応していない そこで、MailHogよりベターな選択肢はないか調査してみたところ、 Mailpit (DockerHub) が以下の点で良いと感じ実際に使っているので、この記事で紹介します。 今現在(2024)メンテナンスが行われている 良いUX。ちゃんと日本語でメールを検索できる アーキテクチャとして arm にも対応している (amd64/arm64/i386) ほか好ましい点 サーバ再起動後にちゃんとデータが残る (sqlite形式で残るようです) Goで実装されていて動作が軽い Goなの

はじめに forEachでawaitを使おうとしたら、エラーになり、どうやったらループでawaitを使えるか調べたので、簡単に記載します。 await とは？ awaitは非同期処理が終わるまで処理を止めておいてくれる便利なもの jsはawaitやpromiseを使わないと、処理が終わる前に他の処理を実行してしまうので、直列に処理を実行したいときなどは利用すると良い // 非同期関数 async function asyncTask(name) { console.log(`Task ${name} started.`); await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒間スリープ console.log(`Task ${name} completed.`); } // メイン処理 async function m

ようわからんかったのでメモ TL;DR Array.fromAsync()は順次実行 Promise.all()は同時実行 const sleep = delay => new Promise(resolve => setTimeout(resolve, delay)) console.time() await Array.fromAsync([200, 100, 300], sleep) console.timeEnd() // elapsed: 600ms console.time() await Promise.all([200, 100, 300].map(sleep)) console.timeEnd() // elapsed: 300ms const sleep = delay => new Promise(resolve => setTimeout(() => resolve

corepackを使っていた人こそpnpmをおすすめしたい！ 以前、上記の記事で書いたように僕はNode.jsに標準搭載されているcorepackを使ってpnpmのバージョン管理をしていました。 しかし、先日 corepackをNode.jsから削除し、標準搭載じゃなくなる方針であることが決定されました。 (反対意見も多いみたいなのでもしかしたら変更されるかもしれない) そんな中、先月、pnpmがv9.7でcorepackを使わなくても、package.jsonのpackageManagerのフィールドを見て、pnpmのバージョンを切り替えられる機能をリリースしました！ pnpm v9.7 is out! If you want pnpm to switch between versions, set the "manage-package-manager-versions" settin

概要 Nuxt.js製のサイトにNuxtLinkを導入したら、CMSからuseFetchしてきているコンポーネントへの遷移時に問題が発生したので忘れないように記事に残す。 前提 Nuxt3 SSR構成 どんなバグか？ 記事リストをCMSから取得してくる場合、 下記のように該当するurlやidで一意にページを選択して取得できている状態が期待される。 しかし、NuxtLinkを導入後、同様のフローを試してみると下記のような挙動になってしまった。 考えられる原因 NuxtLinkのおかげでページをロードせずに内部遷移できるようになったが、それによりuseFetchのキャッシュの扱いが変わった？（というか正しく動くようになった） useFetchは前回の実行のキャッシュを保存するため、同じコンポーネントからのフェッチが再度行われた際に同じデータを取ってくれば良いと考えるようになりキャッシュからデー

はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 記事は約3分程度で読めるので最後まで読んでもらえると幸いです。 さっと見たい人向け importの書き方パターン 説明

概要 FlowChartなどをテキストで書けるようにするMermaid記法のparserは公式で提供されていない．@excalidraw/mermaid-to-excalidrawというnpmのライブラリを使用することで，dictionary形式でノードとエッジの配置データを取得できる． excalidrawは手書き風の図を作成するツールであり，jsライブラリが提供されている．mermaid-to-excalidrawはexcalidrawのAPIと一緒に使うことが想定されたライブラリである．想定された使い方ではないかもしれないが，excalidraw形式のdictionaryデータには図形の種類，位置，サイズなどの情報が含まれているのでMermaidパーサーとして使用することが可能である．例えばMermaid記法で入力すると図形を配置してくれるExcelプラグインなどが考えられる． 使い

Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっていったのかが気になってる。いま存在しているのは過去の仕様や慣習の踏襲として理解できても、そもそもなぜそれらが生まれたのかが理解できない。 https://t.co/ZLz0Pw9GOK — ymrl (@ymrl) July 29, 2024 これについて

顧客セグメンテーションのために使える3つの分析手法 マーケティングをはじめとするビジネスの世界では、顧客一人一人に合わせて最適なコミュニケーションを取れることが理想的ですが、コストや労力の観点で、そのようなことは現実的とは言えません。 一方で、顧客を共通の「属性」や「行動」をもとに、いくつかのセグメントに分けられれば、それぞれのセグメントに合わせて効果的なコミュニケーションを取ったり、そのセグメントに最適な施策を実行できるようになります。 そこで今回は、顧客に関する購買・行動・属性・アンケートなどのデータがあったときに、顧客セグメンテーションのために使える3つの分析手法を紹介いたします。 K-means クラスタリング: 顧客の属性や購買履歴をもとにセグメントに分ける 例えば、以下のように1行が1人の回答者を表し、列に数値型の情報をもつアンケートの回答のデータがあったときに、人が1人1人の

Kyとは Kyは、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。 Kyの利点 軽量で効率的: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。 Promiseベース: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。 シンプルなAPI: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。 再試行機能: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。 JSON処理: Kyは自動

はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after

<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」

はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が

はじめに こんにちは、ken です。お仕事では Go をよく書きます。 最近、Go の公式パッケージであるgolang.org/x/toolsを眺めていたら、なにやら有用そうなパッケージを見つけたので今回はそれについて書こうと思います。 それはegというリファクタリングツールです。 eg とは eg は、例ベースで Go コードをリファクタリングするためのツールです。このツールを使用することで、特定のコードパターンを別のコードに置き換えることができ、効率的にリファクタリングが行えます。 先ほど貼った公式ドキュメントに詳しい説明があるかと思いきや The eg command performs example-based refactoring. For documentation, run the command, or see Help in golang.org/x/tools/ref

JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,