データ取得で try...catch しない理由
try { const data = await fetchSomething(); // 正常系レスポンスの処理 } catch (err) { if (isAxiosError(err)) { // 異常系レスポンスの処理 } } 動機はつぎの 3 つです。 データ取得も宣言的に書きたいから データ取得に関係ない例外も catch してしまうから HttpError の集計に不便だから データ取得も宣言的に書きたいから 要約すると、データ取得時は常にこのように書きたい、という話です。useSWR・useQuery や apollo/client でお馴染みのインターフェイスです。 const { data, err, status } = await fetchSomething(); if (data) // 正常系レスポンスの処理 if (err) // 異常系レスポンスの処理
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
Zodを試す
※ 特徴は公式のREADMEより引用。 特徴 依存関係なし プレーンJavaScript：ブラウザとNode.jsで動作します サイズが小さい：8kb minified + zipped イミュータブル 簡潔で連鎖可能なインターフェース( 要は記述しやすい ) 関数型アプローチ: parse, don't validate 感想 ブラウザとNode.jsに対応している点はNext.jsとの相性は良さそう。サイズが小さいのもいいね👍 関数型寄りなので、色々とフロントエンドを意識したモノになっている感じかな。
【コード品質】綺麗なReactコード 応用７例 - Qiita
初めに Reactの実装ドキュメントやライブラリは充実している 要件通り動くだけのコードを作ることは誰でもできるが、保守運用改善は大変である 綺麗なコードほどコード修正は早くなり、デバックは効率的になり、開発者間の認識の共有は楽になる 前提 基本: 数行レベルで綺麗なコードが書けること 中級: コンポーネント単位で綺麗なコードが書けること 1. 無駄なアルゴリズムの適応はするな 問題提起されてない箇所に勝手に適応していないか? ベンチマークが数段高くても、ユーザ体験的には誤差でないか？ // NG🤔 制御フローの理解，例外ケースの確認，一定時間要してしまう const sumArray = (numbers: number[]): number => { let sum = 0; for (let i = 0, j = numbers.length - 1; i < j; i++, j-
How I/we got 2k stars - ゆーすけべー日記
Honoという僕が作っているWebフレームワークのGitHubスター数が2,000に迫ってきた。これまで作ってきたOSSのソフトウェアでは最高で revealgo の221、次点で gh-markdown-preview の134だ。それが一気に2,000である。 もちろん、スターの数がソフトウェアの良し悪しを決めるものではない。 それに2,000はとりわけ多いわけではない。 でも、以前の自分には遥か彼方に見えていた数を獲得できたのは、とても嬉しいことだ。 去年12月から作り始めて9ヶ月間、552コミット。 今や使ってくれる人も増えた。 cdnjs のAPI Serverのバックエンドにも使われているし、 HonoをきっかけにGitHubスポンサーをしてくれている企業や人も現れている。 なにより、いろんなことを勉強させてもらった。 今回はHonoというプロダクトがどうやって2,000のスタ
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
結局 React のコンポーネントにはどうやって型をつければ良いのさ - kk-web
React TypeScript Cheatsheet の Useful Patterns by Use Case の Wrapping/Mirroring に答えが書かれていました。 自分は function でなく const で作成することが多い(どっちが良いんですかね？)ので、以下のように書くのが良さそうです。 import React, { ComponentPropsWithoutRef, FC } from "react"; export type ButtonProps = ComponentPropsWithoutRef<"button"> & { specialProp?: string; }; const Button: FC<ButtonProps> = ({ specialProp, ...props }: ButtonProps) => { console.lo
Prisma: Node.js & TypeScript向けの完璧なORM
本記事は、@nikolasburk氏による「The Complete ORM for Node.js & TypeScript」（2021年4月21日公開）の日本語翻訳を、著者の許可を得て掲載しているものです。今後Prismaの公式ブログの日本語翻訳の許可をいただいたので、このアカウントで継続して翻訳していきます。※画像やリンクは公式のBlogからお借りしています。 Prismaは、Node.jsとTypeScriptのための次世代ORMです。2年以上の開発期間を経て、すべてのPrismaツールが製品化の準備が整ったことをお伝えできることに興奮しています! コンテンツ オブジェクト-リレーショナルマッピングの新しいパラダイム あらゆるスタックに対応するPrisma ミッションクリティカルなアプリケーションでの運用に対応 オープンソースを超えて お手伝いできることは？ Prismaを始めよう
【javaScript】for…in、for…of、forEachの違いと用途
・列挙可能であればなんでもループできる ・順不同であることに注意 ・オブジェクトのループ専用として利用した方が良い ・普通の配列のループには不向き ⬇オブジェクトをfor…inループする例 const obj = {key1: 'value1', key2: 'value2', key3: 'value3'}; for(let key in obj) { console.log(key + ' ' + obj[key]); } key1 value1 key2 value2 key3 value3 for…inで変数に入るのはオブジェクトのキーのみです。値はobj[key]のように取得できますが、少々使いにくいかもしれません。 順不同という仕様ですが、この例では配列の順序通り出力されました。たまたまなのか、順不同になる条件があるのか…？ ⬇普通の配列をfor…inループする例
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
TypeScriptでSOLID原則〜依存性逆転の原則〜 | メンバーズエッジカンパニーブログ
2021/09/29 TypeScriptでSOLID原則〜依存性逆転の原則〜 design TypeScript SOLID原則とは？ SOLID原則とは、オブジェクト指向プログラミングにおいて、変更しやすい・理解しやすい・再利用しやすいモジュール（クラスや関数などの、ソフトウェアのを構成する部品）を設計・開発するための原則のことです。ソフトウェアエンジニアRobert C. Martinに提唱された多くの設計原則を5つにまとめたものの頭文字をとって命名されました。 S … Single Responsibility Principle: 単一責任の原則O … Open-Closed Principle: 開放閉鎖の原則L … Liskov Substitution Principle: リスコフの置換原則I … Interface Segregation Principle: インター
OSS活動と好きな技術が新しいキャリアを切り開いた ー 活用も進む注目のDeno開発企業で私が働く理由 - Findy Engineer Lab
Webのフロントエンド開発言語として真価を発見されたJavaScriptは、数年後に今度はサーバーサイド開発言語として再発見されます。しかし、その立役者となったNode.jsの作者ライアン・ダール（Ryan Dahl）はNode.jsの開発を離れ、新しいJavaScript実行環境としてDenoを生み出しました。 ▶ Deno - A modern runtime for JavaScript and TypeScript 今回お話しを伺った日野澤歓也（@kt3k）さんは、2018年からオープンソース活動としてDenoにコントリビュートを重ねた結果、作者のライアン・ダール自身にリクルーティングされ、2021年1月にその開発会社であるDeno Land Inc.にジョインしました。現在はフルタイムのOSS開発者として勤務しています。 JSConf JP 2021における日野澤さんの発表「De
Reactで使えるバリデーションライブラリを紹介！ - bagelee（ベーグリー）
はじめに フォームの実装のライブラリはFormik、React Hook Form、React Final Formのどれにしよう…と悩むことは多いと思うのですが、バリデーションを何で行おうというのは考える機会が少ないと思います。 というのも、React Hook FormもFormikもYupを推しているので、あまり調査せずにYupを使う方が多いのではないでしょうか。そもそもReact Hook FormはデフォルトではHTML標準のバリデーション機能を使用しているので、バリデーションライブラリを意識したことないという方もいるかもしれません。 実は非常に多くのバリデーションライブラリがあるので、今回は色々紹介して比較していきます！ バリデーションライブラリの種類 ざっと挙げるだけでもこれくらいあります。 ・Joi ・Yup ・zod ・io-ts ・Superstruct ・Vest ま
TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita
TL;DR https://github.com/notakaos/typescript-node-base にアクセスして「Use this template」をクリックすると、以下の手順をベースとしたリポジトリが新規作成されます。 この記事の趣旨 以下の設定を適用した TypeScript + Node.js のプロジェクトを作成します。 項目 パッケージ
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
PullRequestからチーム開発の生産性・健全性を測るCLIツールを書いてみた - $shibayu36->blog;
最近、開発チームの生産性や健全性をどのように計測したら良いかについて興味を持っている。その中で「LeanとDevOpsの科学」の中に書いてあるようなデプロイの頻度・変更のリードタイム・MTTR・変更失敗率の4指標や、開発チームの生産性・健全性を客観的に知るためにリポジトリ履歴から機械的に可視化するツールを作った - Qiitaに興味を持った。 一方、それらの指標を考えてみた時、以下のような点について悩んでいた。 マイクロサービスなどで複数レポジトリとなり、さらにデプロイ手法がそれぞれ違う状況の場合、変更のリードタイム = コミット〜本番稼働までの時間を計測するのがなかなか難しい コミットという単位だとかなり小さく、個々人のばらつきも大きすぎるように感じるので、もう少し良い単位はないのだろうか このような悩みから、PullRequestの単位で集計することで、生産性や健全性をもう少し測りやす
ベストプラクティスを見つけるためのReact Nativeアプリ ソースコードリーディング - KitchHike Tech Blog
良いアプリを作るために、良いコードを読む。 CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0からReact Nativeでアプリ開発を始めました。この記事では、React Nativeアプリ開発のベストプラクティスを見つけるためのソースコード探索手法と、コードリーディングのポイントを紹介します。 良いアプリを作るために、良いコードを読む。 React Nativeアプリのソースコードの探し方 ReactNativeNewsのShowcase, React Native Appsから探す F8 2017 PxView React Docs ( React公式ドキュメント ) から探す react-nativeリポジトリのRNTesterを読む ライブラリのサンプルアプリのコードを読む コードリーディングのポイント ディレクトリ構成 使用している
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
TypeScript3.4 の const assertion - Qiita
const assertion は TypeScript3.4 の新機能です。Const contexts for literal expressions すでに master に入っているので、nightly build で挙動を確認することができます。 VSCode のワークスペースバージョンを切り替えれば、本稿内容の挙動を確認できます。const assertion により、個人的に待望だった widening Literal Types の抑止が叶います。 widening Literal Types って何？ 従来、const 宣言代入で得られた Literal Types は widening 挙動により、可変の変数に代入すると、Literal Types ではなくなってしまう仕様がありました。参考：https://qiita.com/Takepepe/items/2c06f6
さようなら、TypeScript enum - 株式会社カブク
フロントエンドエンジニアの今村です。TypeScriptではenumを使わずunion型を使いましょう、という話を書きます。 モチベーション 何を今さら、と思う方もいるかもしれません。 TypeScriptのunion型はenum的なものを表現可能であり、基本的にenumよりもunion型を使うべき、という意識を持っているTypeScriptプログラマーはすでに少なからずいるのではないかと思います。しかし、ではenumの使用はいかなる場合も避けるべきなのか、そうでないとしたらどのような基準でenumとunion型を使い分けるべきなのか、といった点について、広く合意の取れたガイドラインはなさそうです（少なくとも私は知りません）。この結果、コードレビューなどで少しやりづらさを感じることがあったので、白黒つけてしまいたいという気持ちからこのブログを書いています。 結論としては、enumは全面的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
