はじめに こんにちは！株式会社マイベストでフロントエンドエンジニアを担当している おぎー と言います！ この記事では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日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この

「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.

AIが、夢のそばにいた。 強くなりたい。 幼き日の彼はその一心で、 自分と向き合いつづけた。 欲しかったのは、深い推論を導ける環境。 選んだのは、一枚のチップだった。 AIは、夢を加速させる。 どんなフィールドでも。 AMDは、そんな未来の 原動力でありたい。 進化の裏側に。 Sota Fujii×AMD 藤井聡太×AMD 新記録を更新し続ける藤井聡太さん。圧倒的な強さの 裏側にあるのは、日々の努力とAIの活用にあると言われています。 AIで将棋の可能性を広げる藤井さんと、先進のAIを生み出すAMD。 私たちはこれからも、藤井さんの活躍を応援していきます。 藤井 聡太 Sota Fujii 2002年7月19日生まれ。愛知県瀬戸市出身の将棋棋士。2016年に史上最年の14歳2ヶ月で四段昇段を果たし、公式戦最多連勝記録の29連勝を樹立。その後、最年少一般棋戦優勝・タイトル獲得など多くの最年少

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

🔥 Want improve your Debugging CSS skills? Get my book for just $19.99! Buy the book 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 lik

ReactJS: Keep Simple. Everything can be a component!

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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

Web-Types started as a format to support Vue libraries, but we've always wanted to provide a more generic solution. Finally, version 2.0 of Web-Types format works seamlessly for any kind of web framework, Web Components library, or CSS icons pack. A detailed documentation of the format is available here Starting with version 2021.3.1 of WebStorm (and other JetBrains IDEs), a full support for the n

🔥 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