2023年11月7日 フロントエンド・WEBに関するニュース

How to (and how not to) design REST APIs

https://github.com/stickfigure/blog/wiki/How-to-(and-how-not-to)-design-REST-APIs

• REST API設計のベストプラクティスとして、コレクションには複数形の名詞を使用することが推奨されています。
• 不要なパスセグメントを追加しないこと、また、.jsonや他の拡張子をURLに含めないことが良い設計とされています。
• トップレベルのレスポンスとして配列を返すのではなく、オブジェクトを返すべきで、これにより後方互換性のある変更が容易になります。
• IDフィールドには文字列を使用し、識別子にはプレフィックスを付けることで、APIの使いやすさが向上します。
• 404エラーを「見つからない」ことを示すために使用するのではなく、サーバーがリクエストを理解したが対象が見つからなかったことを示す他の400レベルのエラーコードを使用することが推奨されています。

OSSコントリビューションへの一歩に悩んでいる方向けにちょっとした事例を紹介

https://blog.stenyan.jp/entry/2023/11/04/194730

• OSSプロジェクトへの貢献過程を紹介し、他の開発者が参考にできるようにすることを目的としています。
• 不具合の特定から修正までの一連の流れを、実際のGitHubのPull Requestを例に説明しています。
• 不具合の原因を特定するために、状況の把握、仮説の立案、問題点の絞り込みといったステップを踏んでいます。
• 実際のコードを用いて問題を再現し、失敗するテストを書いた後、実装を修正するというプロセスを解説しています。
• OSSへの貢献は、日々の開発作業中に遭遇する問題を解決する過程で自然と行えると助言しています。

JavaScriptのMapとは何か？Mapの使い方・基本文法まとめ

https://zenn.dev/aiq_dev/articles/1660d739a1369d

• JavaScriptのMapはキーと値のペアを格納するコレクション型で、任意の型のキーを許可する。
• MapはObjectと異なり、キーに制約がなく、より柔軟なデータ管理が可能。
• Mapの主なメソッドにはset, get, has, delete, clearなどがあり、使い方は直感的。
• Mapは特に、キーに変数などを使ってデータを管理したい場合に有用。
• Mapの繰り返し処理にはforEach, keys, values, entriesなどのメソッドが利用できる。

テレビやPS4のJavaScriptのログをPCに出力する方法

https://qiita.com/omo_taku/items/16df25b7845792a4c2c8

• テレビやPS4のアプリ開発でJavaScriptのログをPCで確認するためにconsole.reというツールの使用方法を紹介。
• セットアップ手順はソースコードのクローンから始まり、必要なパッケージのインストール、ローカルIPの設定変更などが含まれる。
• コンソールサーバの起動からコンソールアプリの起動、開発ディレクトリへの移動、console.reパッケージのインストールまでの流れを説明。
• プロジェクトにconsole-remote-clientパッケージを追加し、ログを取りたいコンポーネントに特定のコードを追加することでPCでログを確認できるようになる。
• このツールを使えば、開発中のアプリケーションのJavaScriptログをリアルタイムでPC上でチェックできるようになる。

やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話

https://zenn.dev/coconala/articles/d23fe8701ce10b

• Next.js App Routerのキャッシュ再検証（revalidate）の実装に関する経験を共有。
• キャッシュの種類としてRequest Memoization, Data Cache, Full Route Cache, Router Cacheがあり、それぞれの特性と再検証の必要性について説明。
• 再検証の方法としてtime-based revalidationとon-demand revalidationがあり、それぞれの使用例と実装時の注意点を解説。
• 特にon-demand revalidationの実装では、Vercelの使用者認証やNext.jsの特定バージョンへのアップデートなど、いくつかの障害に直面したことを述べている。
• 記事は、Next.jsのキャッシュ再検証機能の理解を深めるための実践的なガイドとなっている。

サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能

https://www.publickey1.jp/blog/23/apimock_service_worker_20fetch_apiapi.html

• 「Mock Service Worker 2.0」がリリースされ、サーバを立てずにバックエンドAPIのモックを簡単に設定できるようになった。
• Service Workerをプロキシサーバとして使用し、RESTfulまたはGraphQL形式のリクエストに対してモックデータを返す。
• Fetch APIプリミティブを本格的にサポートし、Node.js 16以前のバージョンでの実行が非推奨となった。
• ストリームAPIの「ReadableStream」やFormDataをボディとするリクエストのサポートなど、新機能が追加された。
• 開発者はリアルタイムでのテキスト表示など、よりリッチなモックアプリケーションの開発が可能になる。

Owning Your Web

https://css-irl.info/owning-your-web/

• ウェブサイトのURLとその選択についての考察を共有している。
• 「CSS IRL」というブログ名は、実際の人々のために機能するウェブサイトを構築するという意図を反映している。
• ハイフンが含まれるドメイン名は、偶然css-tricks.comからのトラフィックを引き寄せる助けになったかもしれない。
• 個人名ではなく、ビジネスのような名前をウェブサイトのURLとして選ぶことの利点と欠点を論じている。
• TLD（トップレベルドメイン）として「.info」を選んだが、ウェブサイトの内容が訪問者を引き寄せる最も重要な要素であると述べている。

CMS「Movable Type」の新バージョン「8」のソフト版出荷とクラウド版提供を開始

https://www.publickey1.jp/blog/23/apimock_service_worker_20fetch_apiapi.html

• シックス・アパートがCMS「Movable Type 8」のソフト版とクラウド版の提供を開始。
• 「Movable Type 7」の機能を継承しつつ、共有プレビュー機能やブロックエディタ機能などが強化・改善された。
• 新機能の共有プレビューでは、CMSアカウントがないユーザーもプレビューリンクからコンテンツを確認できるようになった。
• ブロックエディタ機能により、見出しや本文、画像要素をブロックとして組み合わせて編集が可能に。
• 管理画面では多要素認証機能が導入され、セキュリティが強化された。

Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント

https://coliss.com/articles/freebies/linefont-and-wavefont.html

• 折れ線グラフを描くための「Linefont」と棒データを描くための「Wavefont」がGoogle Fontsで無料公開された。
• これらのフォントはSIL Open Font Licenseの下で提供され、個人利用から商用プロジェクトまで無料で使用可能。
• Linefontは0～100の範囲の値を折れ線グラフで表示するために設計されており、Wavefontと視覚的に一貫性を持たせることができる。
• Wavefontは波形、スペクトル、ダイアグラム、ヒストグラムなどの棒データを描画するために使用され、同じく0～100の範囲の値を表示する。
• フォントのダウンロードはGoogle Fontsのページから行え、デモページで実際にどのようなグラフやデータが描けるかを確認できる。