新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150

はじめに レバテック株式会社で主にサービスサイトのディレクターをしている山本です！ 普段はデザインシステムや、デザインの制作進行管理などをメインで担当しています。 レバテックでは、Figmaというデザインツールを用いて多くのメンバーがデザイン制作を行なっているんですが、いろんな人が各々のやり方でデザインデータを作成するので、属人的なズレがたくさん発生し、コミュニケーションコストや内部品質管理などの色々な問題が起きていました。 例 Auto LayoutとFrameが混在 コンポーネントのプロパティ名がバラバラ etc... 私自身、フロントエンドの理解はありつつもレバレジーズに入社してからFigmaを触り始めたため、社内のデザイナーにちょこちょこ質問を投げかけて勉強していました。当たり前に使っているtipsでも意外と「知らなかった」ような内容もたくさんあり、今回は私が「これは賢い！」と思っ

2024/03/07 【開発系エンジニアのためのDocker絵とき入門出版記念】著者と学ぶ Docker ハンズオン https://phper-oop.connpass.com/event/309942/ 本スライドで参考資料としているのは　開発系エンジニアのためのDocker絵とき入門…

Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな

こうしてふりかえりは終わってしまった / A Demise of a retrospective ふりかえりカンファレンスで一番面白かった発表資料です。 資料をざっくり要約すると ふりかえりは最初は順調に機能するがある段階で停滞し、次第に「効果が出ていないもの」と判断されて廃止されてしまう、という話です。 理由として最初は低コスト高リターンの課題を倒していけるが、それらをすべて解決すると残るのは「リターンはあるが、コストが高すぎて解決できない課題」と「コストは低いがリターンもほぼない課題」だけになります。 開発チームは前者を「コストが高すぎて解決できない」と忌避し、後者だけに打ち込んだ結果、リターンが出ずに振り返り事態を無価値を判断してしまうからです。 ふりかえりを廃止することでチームの成長は停止してしまうでしょう。 これを防ぐために「コストが高すぎて解決できない」課題を解決する方向に頑張

先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsなどがあるが、これらと異なるのは、ネイティブのDateオブジェクトを直接対象としていることである。 従来の日付ライブラリは、独自の日付プリミティブを提供することが一般的であったが、TempoではネイティブのJavaScript Dateオブジェクトと直接連携し、Intl.DateTimeFormatを活用することで、タイムゾーンやロケールのファーストクラスサポートを提供するだけでなく、ライブラリのサイズ削減

New Components!Color Pickers, Submenu, and more!JollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

つい最近、会社の若手の人から、「勉強会やセミナーの時、いい質問かどうかを気にしてしまって、質問自体なかなか出来ない」というような相談を受けました。 その時にしたやりとりがなかなか有益だったかも知れないと思いまして、内容をまとめてみたくなりました。 この記事で書きたいことは、大体以下のようなことです。 ・勉強会やセミナーなどで「質問」をするのは、質問の内容によらず、とても大事だし重要なことです ・もちろん質問は「疑問点を解決する」為のものなんですが、周囲の人の理解を明確化する役にも立つし、話を掘り下げるトリガーにもなり得るし、リスナーの反応を確認する為の重要なポイントにもなります ・その為、場面にもよりますが、本来「いい質問をしよう」なんて考える必要はなく、「よくわかんなかった」「聞いてなかった」だけの内容でも、質問してもらえるだけで十分ありがたいです ・みんなもっと軽率に「質問」をしていく

はじめに Vimは、そのパワフルなカスタマイズ性と柔軟性で知られており、世界中のプログラマーやテキストエディタ愛好家たちから絶大な支持を受けています。このエディタの真価を引き出す鍵の一つが、autocmd（自動コマンド）機能です。autocmdを用いることで、ファイルの読み込みや保存、さらにはウィンドウのフォーカスが変更されるといった特定のイベントが発生した際に、自動でスクリプトやコマンドを実行することが可能になります。 このガイドでは、autocmdの基本概念から始め、その豊富な応用方法を段階的に解説していきます。初心者でも容易に理解できるように、具体的な使用例を通じて、Vimの作業効率を大幅に向上させる方法をご紹介します。Vimをカスタマイズし、より快適なテキスト編集環境を実現するための第一歩として、このガイドをお役立てください。 autocmdを活用することで、あなたのVim使用経験

ユーザーストーリーとはユーザーストーリーとは、システムがユーザーにとってどのような価値をもたらすのかを示すものです。 アジャイル開発において、要件定義の代わりに使われる概念です。１つのユーザーストーリーはとても短いものですが、必ず１つの価値があります。 ユーザーストーリーは、顧客とプログラマが会話をするためのメモとしての役割も担うため、専門用語はなるべく使わず、ユーザーが日常的に使う言葉で作成します。 ユーザーストーリーの作成方法ユーザーストーリーの3Cユーザーストーリーは、次に挙げる"Card（カード）"、"Conversation（会話）"、そして"Confirmation（確認）"という３つの「C」に注意して作成していきます。 ここからはユーザーストーリーの３つのCを解説していきます。 Card（カード）ユーザーストーリーはカードまたは付箋などに書かれます。 Conversation

こんにちは。BASE BANK 株式会社 Dev Division にて、 Software Developer をしている東口（@hgsgtk）です。 TL;DR バーティカルスライスでのデリバリーを可能な限り保つユーザーストーリーの分割はどうすればいいか ユーザーストーリーが 1 回のイテレーションで収まらないような場合に分割する ３つの分割軸「データ境界に沿って分割する」・「パフォーマンス制約をストーリーにする」・「アクターのモチベーションで分割する」をもって、ユーザーストーリーを分割する ビジネス価値の内訳要素に基づいて優先順位を考える 当記事の背景 BASE BANK Dev Division での開発プロジェクトでは、アジャイル開発の考え方・取り組みを取り入れています。その導入については、「少人数でのアジャイル開発への取り組み実例 （一歩目の踏みだし方） | 詳説 | July

※今回はほぼ実話です。 システム開発会社勤務　プログラマーワイ ワイ「さあ、今日も開発をしていこか」 ワイ「とあるWebサービスの管理画面を作らなアカンのや」 ワイ「今日は、どんな機能を作らなアカンのやったかな」 ワイ「せや、クライアントさんからもらった機能一覧.xlsを見てみよか」 ワイ「あとは、デザインデータも見ながら、詳細設計書でも作っていこか」 ワイ「・・・ふーむ、作るべき機能の一覧は書いてあるんやけど」 ワイ「なんか、やる気が出ぇへんなぁ」 ワイ「仕方ないから、社内のSlackで愚痴っとこか」 ワイ「今のプロジェクト、誰のために何を作ってるのかがイマイチ分からんから」 ワイ「モチベーションが上がらへんなぁ」 ワイ「この管理画面を使って、どんな課題を解決したいのか」 ワイ「どういう風にユーザーさんの業務をうまく回したいのか」 ワイ「そんなんがピンと来てないから、作るべきモノもはっき

アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな