はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Remixとは？ Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. （訳）Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ

2024/05/06 Files の見出しを追加し、対象・除外ファイルの設定をもう少し詳しく説明 徐々に利用者が増えている Biome の自分向け技術メモの共有です。導入の仕方やよく触る設定周りなど、自身がよく見返したり他者に説明する部分を抽出してまとめてあります。 実際に自身が利用した感想は以下の通りです。 pros 速さはとにかく正義 必要十分な lint ルールはあると感じた 設定もわかりやすく職人になりにくい cons ライブラリが提供してくれるライブラリのベストプラクティスを反映した eslint plugin が利用できない eslint 及び eslint plugin と比較するとルールは少ないので得られる学びは少なくなる 特に速さに関しては eslint だとプロジェクト規模が大きくなったり追加したルールが増えてくると開発効率に影響あるレベルで時間がかかるようになったので

Biomeとは Romeのコアメンバー達が新しく開発したツールです。 Romeはフォーマッター、リンター、テスト、トランスパイラ、バンドラなどのチェンツールを1つで担っていましたが、Biomeでは現在（2023年10/2）フォーマッターとリンターの機能のみを提供しています。 導入 Romeからの移行も簡単に出来るようです。以下の記事が参考になります インストール npm install --save-dev --save-exact @biomejs/biome or yarn add --dev --exact @biomejs/biome or pnpm add --save-dev --save-exact @biomejs/biome or bun add --dev --exact @biomejs/biome

そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、

この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele

先日、location-stateというパッケージについての記事を公開しました。 履歴に基づいて状態を復元できるReact系ライブラリで、現在はNext.jsを重点的にサポートしています。このライブラリの構成はcoreとなる部分とNext.js依存な部分を切り離しscoped packageとし、内部構成もこれに合わせていわゆるmonorepo構成で開発を行なっています。 @location-state/core: coreとなる部分 @location-state/next: Next.js依存な部分 この記事では、monorepoのパッケージ開発を快適にするために実際に採用したツールを紹介していきます。本稿で紹介するツールは以下になります。 pnpm turborepo tsup changesets Renovate pnpm まずパッケージマネージャーですが、個人的に最近はpnpm

概要 所属しているプロジェクトではフロントエンドもバックエンドも TypeScript で開発しているのですが、とある理由から最近 yarn workspaces を使った monorepo へ移行しました。フロントエンドとバックエンドに共通するロジックはなかったのですが、共通する型はあったので型定義場所を作りたくなり、その際に調べた知識と設定の仕方を共有したいと思います。 プロジェクトでは yarn workspaces を利用していますが、検証時は npm workspaces でも試したのでどちらの monorepo tool でも問題なく動作するはずです。また、サンプルコード等は説明に必要な最低限のものに省略したのですが、もし必要なコードが抜けている等あれば教えて頂けると助かります。 前提知識 npm パッケージの扱い パッケージ名は package.json の name に指定

この記事の目的 爆速のビルドツールViteを試してみたい！ この記事では、普段自分が使っているReact+Amplifyの構成にてプロジェクトを開始する場合の手順を、個人的なメモとしてまとめました。 ソフトウェアのバージョン 主なソフトウェアのバージョンを記載します。 node v18.9.0 TypeScript 4.6.4 Vite 3.1.0 React 18.2.0 先にまとめ AmplifyとReactを連携する場合に、Amplify公式ページではcreate-react-appを使う方法がガイドされています。Viteを使う場合も概ねこの方法が使えますが、そのままでは動かない箇所がいくつかあるため、エラー対応が必要となります。このセクションでは、エラー内容と対応の概略を記載します。具体的な手順は、「開発手順」のセクションで詳細に記載しています。 エラー発生箇所１ amplify

本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま

## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS