はじめに こんにちは！株式会社マイベストでフロントエンドエンジニアを担当している おぎー と言います！ この記事ではTypeScriptの型と実行時の値が噛み合わなくなる話と、型付けへの向き合い方についてお話できたらと思います。 TypeScriptの型付けについて 型があるメリットとは TypeScriptは静的型付け言語です。プログラムを実行せずともコンパイルの段階で型の噛み合わないコードを発見することができます。このおかげで実行するコードは一定品質を担保されている状態を保ちやすい作りになっていると言えます。 またVS Codeをはじめとした開発用エディタではリアルタイムに型チェックしてくれるため、間違った記述にいち早く気づき修正することができます。 これらを踏まえると、素早く一定の品質を保たれたコードを作れることがポイントになるかなと思います。 型と実態がズレるとは TypeScri

最近 GitHub Actions を弄くり倒すことにハマっていて、 GitHub の Checks API を利用して annotation を出すおもてなしをすることだけが生きがいだと思って生活していました。 そんな中、JavaScript (TypeScript) のコードのテストでよく使われている Jest で、どの assertion が落ちているかを annotation で分かりやすく表示したいと思っていました。自作で頑張ろうかな～と思って調べていると、 Jest 28.0.0 （2022年4月末ごろリリース）から Github Actions で annotation を出す reporter 機能が組み込まれていたという事実を知りました。 jestjs.io この便利機能が思ったより世の中で使われていない感じがしたので紹介します。 サンプル こちらをどうぞ： github

アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？　見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を

こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は新規プロダクトの開発でご参画頂いている、nonsugarless さんにご寄稿いただいたテックブログです。 はじめに こんにちは、フレキシブルメンバーとして Offers の運営会社 overflow をお手伝いしている nonsugarless です。 Nuxt3 の RC 版がリリースされ 4 ヶ月経過しました。 overflow では、新プロダクトのフロントエンドにいち早く Nuxt3 を導入し、元々 Nuxt2 の頃から行っていたスキーマ駆動開発を Nuxt3 でどう行うか知見が溜まってきたので、個人的ベストプラクティスとしてご紹介します。 スキーマ駆動開発については以下の記事もご紹介しているのでご覧ください。 なぜこれが

【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」。「デザインシステム」を導入することで、デザイナーやエンジニアの開発生産性や効率性を高めたり、ユーザー体験の一貫性を提供できたりと、様々なメリットがある一方で、事業内容や成長フェーズ、組織構造などによってデザインシステムの目指すべきカタチは異なり、正解や完成がないことから、悩みを抱えている企業や開発者は少なくありません。 そこでラクスル株式会社（以下、RAKSUL）は、デザインシステムのコミュニティ「Design System Build」を立ち上げ、2022年8月23日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この

Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM

「神の一手」の裏側に。 2021年、3月23日。 将棋界に、衝撃が走った。 ある対局で、彼の放った「4一銀」。 それは、人類には指せない「神の一手」と言われた。 なぜ彼は、そこまで強いのか？ その鍵は、将棋ソフトを用いた独自の研究にある。 ハイスペックなCPUを用いたコンピューターで 膨大な手数を読むことにより、 最善手を導き出すのだ。 将棋の真理に、辿り着くために。 人間の限界に、挑むために。 この競技への熱き想いが、彼をかりたて、突き動かす。 情熱と生きる人へ。 Sota Fujii×AMD 藤井聡太×AMD 将棋棋士の藤井聡太さんが、AMDのブランド広告に出演。 AMDを搭載したPCで、日頃の将棋研究に励むなど、 以前よりAMDユーザーであったことから、このオファーは実現しました。 近年、将棋界ではAIソフトを活用したトレーニングが常識となり、 AIの力を最大限に発揮するための環境が

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

I can’t contain my excitement while writing the first few words for this article. Ladies and gentlemen, CSS container queries are finally here! Yes, you read that right. They’re currently supported in Google Chrome (105) and soon in Safari 16. This is a huge milestone for web development. For me, I see it just like when we started building responsive websites via media queries, which is a game cha

How to Create Impact in a Changing Tech Landscape [PerfNow 2023]

昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。

イベント: Figmaお楽しみトーク Vol.2 https://friends.figma.com/events/details/figma-tokyo-presents-figmaole-shimitoku-vol2/

Welcome to Web-Types, a JSON format for documenting web component libraries. Web-Types is a framework-agnostic format aimed at providing IDEs and other tools with the metadata information about the contents of a component library. Its powerful name patterns allow encoding information about web framework syntax or customizing code completion suggestions for large icon libraries in the IDEs that sup

🔥 MiniflareMiniflare is a simulator for developing and testing Cloudflare WorkersOpen external link. It's written in TypeScript, and runs your code in a sandbox implementing Workers' runtime APIs. 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSock