`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

Nuxt2 -> Nuxt3にあげれない状況下（主にフレームワークに引っ張られてる）ため、VuexをPiniaに移行しつつNuxt3へアップデートを段階的に行うために調べたメモをスクラップする Piniaを動かすためには、以下をインストールするのが前提 Vue2.7系を直接インストールする compositionAPIを入れる Vue-demiが必要 TypeScriptが必要（ビルド時にコケる） 修正が必要な部分 既存コードdefineStoreで this参照できないようなので、 this.axios.$get などは axiosをインポートしてして axios.get に書き換えが必要

はじめに こんにちは、からころです。 今回は、Vue.js でよく利用される v-model の記事について保守性などの観点から書いていこうと思います。想定している読者としては、Vue.js を触ったこと、見たことがある方全般です。v-model は利用方法を誤ると痛手を負いがちですが、非常に強力な味方だよということをお伝えできればと思います。また、Vue.js のバージョンは、記事執筆時点で最新の 3.5.8 を想定しています。 v-model とは さて、v-model とはなんでしょうか？公式ドキュメントには、 コンポーネント上で v-model を使用すると双方向バインディングを実装できます。 https://ja.vuejs.org/guide/components/v-model と記載されています。もう少し詳しく書くと、props/emit のショートハンド構文です。 例えば

ソフトウェアエンジニアリングの第一人者である和田卓人氏が、自動テストの本質と望ましい姿について語りました。コスト削減ではなく「変化に対応する力」を得るための自動テストの重要性や、信頼性の高い自動テストを実現するための具体的な方法論を解説。まずは、偽陽性や偽陰性の罠を避け、持続可能なソフトウェア開発を実現するための洞察に満ちた講演内容を紹介しました。全4回。 和田卓人氏自己紹介 和田卓人氏：よろしくお願いします。 （会場拍手） お招きいただきましてありがとうございます。「望ましい自動テストとは」というタイトルで、自動テストに関するお話をさせていただきたいと思います。和田卓人と申します。インターネット上ではだいたい「t-wada」さんと呼ばれていて、t-wadaアカウントが下にいろいろ並んでいるんですが、ソーシャルアカウントをいろいろやっていますという感じです。 本日の講演、私の講演はいつもス

はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js の修正 tsconfig.json の修正 index.html の修正 App.vue の修正 vue.config.js の削除、vite.config.ts の追加 補足など Vue 2.7.

アクセシビリティを考慮したマークアップをした経験がある方は、aria-labelやaria-labelledbyについてご存じでしょう。これらは、要素にラベル付けするためのWAI-ARIAプロパティです。多くの場合、要素のアクセシブルな名前 (accessible name) を決めるために使われます。 aria-labelはラベルを直接文字列として指定するプロパティで、aria-labelledbyはIDを通じて他の要素をラベルとして指定するプロパティです。その使い分けについては、仕様書[1]で以下のように説明されています。つまり、可能な場合はaria-labelledbyに寄せるべきだということです。 If the label text is available in the DOM (i.e. typically visible text content), authors SHOU

はじめに Reactが指す「レンダリング」ちゃんと理解できていますか？ レンダリングって画面を描画することですよね？と思ったそこのあなた。それはブラウザレンダリングがやっているのでReactはやっていません。 いやいやレンダリングはDOMに反映することだと思ったそこのあなた。 実はそれも微妙に違います。なぜなら レンダリングが必ずしもDOMへの反映に繋がる わけではないからです。 似た様な言葉が多く私自身混同してきたのでまとめたいと思います。 きっかけ 私が混乱したきっかけは上記記事を読んだ時です。そのコメント欄にて以下のような話題がありました。 render(ing) を「レンダー」と「描画」で、意図的に訳し分けるルールにしています。前者は React が render() や関数コンポーネントの本体を呼び出すこと、後者はブラウザが画面に DOM を反映する動作のこと、というルールになっ

こんにちは。サーバエンジニアのnsym-mです。普段はGoでバックエンドの開発などをしています。 最近テストに関する書籍や記事などを色々読み漁ったので、現時点での自分のテストについての考え方を備忘録として残しておきます。 今回の話はWebフロントエンドやiOS/Androidなどでも適用できる汎用的な考え方として記載していますが、ベースの文脈はバックエンド開発になりますのでそのつもりで読んでいただけますと幸いです なお、本記事では主にGoogle、『単体テストの考え方/使い方』、@t_wadaさんの発表されている考え方（いわゆる古典学派）に倣っています。 用語整理 よく使われるテストスコープ 単体テスト（ユニットテスト） 人によって定義に差がある 統合テスト（インテグレーションテスト） 結合テスト（E2Eテスト） 単体テストの定義がブレることから、スコープではなく実行時間で判断するテストサ

この記事の初出は、Software Design 2023年6月号です。 はじめに前回と前々回でペアプログラミング(以下、ペアプロ)とモブプログラミング(以下、モブプロ)の魅力を伝えてきました。 そこで今回は、私のチームでのペアプロ・モブプロのやり方を紹介します。 執筆時点での私のペアプロ・モブプロ歴は4年です。 今回紹介するノウハウの特徴は「メンバーが楽しく成長する事」を重視している点です。 ペアプロ・モブプロは、楽しく成長するために有効な手段なので、本稿が少しでもその役に立てば幸いです。 なお、ペアプロとモププロは異なる特性がありますが、この記事では共通のノウハウを説明する便宜上、まとめています。 用語について、本稿ではキーボードを操作する人を「ドライバー」、それ以外の人を「ナビゲーター」と記します。 ペアプロ・モブプロをするタイミングまず、ペアプロ・モブプロをどういうタスクや進め方で

Tebiki株式会社 取締役CTO 渋谷 和暁 神戸大学法学部卒業後、SIerを経てWebシステムの開発会社に入社。ECなどの受託開発やゲームアプリ開発のリードとして従事した後、コーチ・ユナイテッドに転職。クックパッドによる吸収合併のタイミングでCEO貴山氏とともにTebiki社を起業し、取締役CTOを務める。 GitHub Medium アジャイルなプロダクト開発において、コード品質・学習効率・チームワークの向上に効果があるとされる「ペアプロ」。1人でプログラミングすること（＝ソロプログラミング、以下ソロプロ）が主流の中で、ペアプロをどうやって組織に浸透させるべきか、困っている組織は少なくないのではないでしょうか。 かつてのTebiki社も、同じ悩みを抱えていた組織の一つでした。2018年3月に創業し、小売、製造、サービス、物流などの現場マニュアルのDXを目的としたSaaSを開発する同社

【読書】Unit Testing Principles, Practices, and Patterns 感想 「テストは分類器」であるととらえ、混同行列における偽陽性を取り除くことが、単体テストで注力すべき柱であるという視点が得られたのが大きい。偽陰性を出さないことも重要ではあるが、プロジェクトの持続的な成長の観点からは偽陽性を出さないようなテストを書くことが最も重要である、と意識するだけでもテストの書き方は変わる。どうすればそのようなテストを書けるのか？という疑問にも答えが示されている。 数学的な背景のある著者は、プログラミングのガイドラインは数学的な定理と同様に第一原理から導出されるべきであるとの立場に立っており、本書は一貫して根本的な問いから徐々に論拠を構築して、最終的な結論に至るようなボトムアップ式の展開となっており、非常に理解しやすく腑落ちするところが多かった。 単体テストや統

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

はじめに こんにちは。hacomono UX部エンジニアのyasuです。 今年の3月からUX部とリアーキテクチャ&イネーブルメント部が連携し、フロントエンドの開発基盤を刷新するために発足した新プロジェクトにおいて「ドラッカー風エクササイズ」と呼ばれるチームビルディングを実施したので、実施に至るまでの背景や成果などをお伝えしたいと思います。 ドラッカー風エクササイズとは？ 自分の強みを活かすための方法や時間の有効活用など、経営学者のピーター・ドラッカーの思想や理論をベースに『アジャイルサムライ』の筆者が提唱したチームビルディングの手法の一つです。 次の4つの質問に回答する形で相互理解を深め、メンバー間の期待値を明らかにします。 自分は何が得意なのか？ 自分はどうやって貢献するつもりか？ 自分が大切に思う価値は何か？ チームメンバーは自分にどんな成果を期待していると思うか？ 各質問の意図などは

2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに

はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi

2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマン…

概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多