はじめに 2022年も残すところあと3日となりました。 皆様いかがお過ごしでしょうか？ 筆者は本日が仕事納めです。 今回は忘年記事として2022年のNext.jsのアップデートを振り返っていきたいと思います。 早速ですが以下の通り、2022年は5回も大きなアップデートがありました。 12.1(2022/02/18) 12.2(2022/06/29) 12.3(2022/09/09) 13(2022/10/26) 13.1(2022/12/23) それではそれぞれのアップデートを振り返っていきましょう。 12.1(2022/02/18) オンデマンドISR（ベータ版）：getStaticPropsによるページの即時再検証 SWCへのサポート拡充：styled-components、Relayなど next/jestプラグイン：SWCによるゼロコンフィグのJestサポート SWCによる高速な最

はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック

TL;DR React SWRをJetpack Compose向けに移植して公開したぞ！ 前置き もし今からモダンなAndroidアプリをゼロから書こうと思ったらおそらくJetpack Composeを採用したいという人が多いかと思います、いわゆる宣言的UIと呼ばれるやつですね。 この宣言的と呼ばれるトレンドはUIだけに適用されているものなのでしょうか？ AndroidというプラットフォームだけでみてもCompose以外で宣言的に書ける部分は年々広がってきています。 例えば遷移先の画面から値を受け取るstartActivityForResult()+onActivityResult()は非推奨になり、代わりにregisterForActivityResult()を宣言する形に置き換わりつつあるのは周知の通りです。 また、画面のライフサイクルのハンドリングはActivityのonStart(

https://docs.google.com/presentation/d/1SEYB7EA0uw0ARGfiC3pkY9m4KFw0m8Myng3Fc29cFvU/edit?usp=sharing

皆さん、WAI-ARIAってきいたことありますか？ 聞いたことはあるけど、なんの事かはあんまり知らない、そんな人はいませんか？ 実際私がそうだったので、今回はWAI-ARIAについて調べてみました。 （タグ付けしながら、WAI-ARIAタグの記事の少なさに驚愕しました） WAI-ARIAって何？ まず、WAI-ARIAについての話です。 WAI-ARIAとは、簡単に言うと、ウェブアクセシビリティを良くするためにHTMLに付与する言語です。 Accessible Rich Internet Applications (WAI-ARIA) 1.1(公式ドキュメント) Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 HTML自体にすでにどんな要素かを表す意味がついていますが、 WAI-ARIAではそれだけでは説明ができない要素や

M 年前にも N 年後にも人類は同じ話をしている. まとめ エラーの発生方法は throw と return に大別できる throw には簡潔さ, return には明瞭さと型安全性といった特徴がある どちらの方法がより適しているかはプログラムの規模, エラーの種類, ハンドリングの方法などが判断の材料になる 実際にどちらの方法を使うかは上の判断材料と, フレームワークやプロジェクトのコーディング規約なども合わせて複合的に決めるのがよい エラー発生方法の分類 まず前提として, 関数から呼び出し元にエラーを伝える方法は以下の 2 つに大別できます. 逆にこの記事ではこれ以上の具体的な方法についての議論はしません. throw エラーを throw して呼び出し元に伝える方法です. 例えば以下のようなものが当てはまります. throw new Error("...") Promise.rej

エンジニアとして今の自分を形成した本5冊 エンジニアとして働くにあたって自分が大きく影響を受けた本を考えてみた。もちろん他にもあるが、今回は以下の5冊に絞って紹介する。 Clean Coder（クリーンコーダー） Team Geek Clean Architecture（クリーンアーキテクチャ） テスト駆動開発 LeanとDevOpsの科学 この記事の対象者としては、独学でプログラムを書き始めた人やエンジニアスクールを卒業したばかりの方というよりは、実務経験を1~3年くらい積んでいるけど次に何を学べば良いかわからず、自分でイマイチ伸び悩んでいると感じている人を主に想定している（かつての自分がそうだった）。 特にチーム開発、オブジェクト指向言語でのコーディング、テストコードを書いた経験がある人が読んで、本に書いてあることを実践すると自分の成長を実感するだろう。 「Clean Coder」、「

Common mistakes with React Testing LibraryMay 4th, 2020 — 15 min read Hi there 👋 I created React Testing Library because I wasn't satisfied with the testing landscape at the time. It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on,

A while back, Guillermo Rauch‏ (creator of Socket.io and founder of Zeit.co (the company behind a ton of the awesome stuff coming out lately)) tweeted something profound: Write tests. Not too many. Mostly integration. This is deep, albeit short, so let's dive in: Write tests. Yes, for most projects you should write automated tests. You should if you value your time anyway. Much better to catch a b

"The Testing Trophy" 🏆 A general guide for the **return on investment** 🤑 of the different forms of testing with regards to testing JavaScript applications. - End to end w/ @Cypress_io ⚫️ - Integration & Unit w/ @fbjest 🃏 - Static w/ @flowtype 𝙁 and @geteslint ⬣

Apollo Server needs to know how to populate data for every field in your schema so that it can respond to requests for that data. To accomplish this, it uses resolvers. A resolver is a function that's responsible for populating the data for a single field in your schema. It can populate that data in any way you define, such as by fetching data from a back-end database or a third-party API. If you

Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"

「値オブジェクト」の定義について不勉強だったので「DDDの値オブジェクト」の定義とDDD以外の「値オブジェクト」との違いについて、改めて関連書籍を読み直し整理してみました。 すごい長いし細かいので他人に読ませるような記事ではなく、自分のために書いたメモです。 もし読むなら興味がある人だけで。 自分向けのメモですが、一応 この記事の前提や意図を書いておきます。 「DDDの値オブジェクト」以外を否定する記事ではありません。 原理主義のように書籍の理想どおり実践するべきだと主張するつもりはありません 「理想に従えばよい」「理想に従うの無意味だ」と決め付けの二項対立的な思考ではなく、理想と現実の絡み合ったグレーゾーンを見極めつつ、現場で手を打つのが優れた実践者ではないでしょうか 下記に紹介する、それぞれの値オブジェクトの優劣について細かく議論し、論破する・されることを目的としていません。 言い訳と

はじめに 最近では、多様なテスト手法や開発者向けツールを散見します。 エンドツーエンド（E2E）テストだけでも、「Cypress」「Puppeteer」「Playwright」「Selenium」などのツールがあります。単体テストでは「Vitest」や「Visual Studio」のビルトイン単体テスト機能など、テストの準備を容易に自動化できます。 ですが、多様なテストツールを導入しても、「When」、「How」を押さえてなければ、テストの効果を有効に得ることができないと考えています。 まず、静的テスト、単体テスト、統合テスト、E2Eテストを実装コスト、実行時間と信頼性の観点で見ていき、無駄や漏れのないテスト戦略を立てていきましょう 。 テストを実装コスト、実行時間と信頼性で考える どのテストを使用するかの選択する観点として、テストをする実装コスト、実行時間と、テスト結果の信頼性のトレード

はじめに こんにちは、タケと申します。 SQLの練習ができる学習サービス「SQLab」を作りました。 ※ PC専用です。 ※ 推奨ブラウザはGoogle Chromeです。 なぜ作ったの？ SQLを学び始めた当初は 「SQLってなんか難しそう」 というイメージでしたが、 練習問題を解いていく中で次第に自力でクエリを組み立てることが 「クイズみたいで楽しい」 と思うようになりました。 そこでもっと多くの練習問題を解いてみたい、もう少し難易度の高い練習問題を解きたいと思ったのですが、 ・無料でバリエーション豊かな多くの練習問題に取り組める ・環境構築不要でブラウザ上ですぐに実践できる ・シンプルで使いやすいUI ・ER図やデータベース値を参考にしながら自力でクエリを組み立てる必要がある の条件を揃えた学習サービスがなかったので作ることにしました。 どんな練習問題があるの？ 現在は5つの問題集が

競馬予想AIを作りながら機械学習の勉強ができるYouTubeチャンネル「競馬予想で始めるデータ分析・機械学習」の内容に沿って、競馬予想AIのソースコードを全て公開します！ 一度購入すれば、書籍の内容が更新された場合も、自動で反映されます。 📘はじめに〜なぜ「競馬予想で始める」のか？〜 Python・機械学習習得の一番の近道は「とにかく実践を積むこと」だと考えています。 基礎知識の学習はもちろん大事ですが、それ以上に「実際に何かを作る中で、自分でコードを考えて実装する」という、「実際のプロジェクトで試行錯誤した経験」から身につくものは非常に多く、また、その経験は転職市場などにおいても高く評価されます。 特に、競馬予想AIの作成は、「実際のレース結果」というフィードバックを常に得ながら ・スクレイピング ・データの加工 ・特徴量エンジニアリング ・学習時の目的変数の設定（相対評価をどう行うか

ReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。この本では、手を動かすことでトランジションの機構をしっかりと理解することを目指します。