はてなブックマーク

はじめに この記事はHono Advent Calendar 2024の2日目の記事です。 自分のやっているプロジェクトではレストランの予約システムをHonoで構築しています。 アプリ、ウェブ、管理画面（ウェブ）があり、それらのAPIを一つのHonoサーバーで捌いています。 モノレポで構成されており、ウェブのフロントはNext.jsで作られています。 自分なりのHonoのベストプラクティスや設定を紹介いたしますので、よければ最後までお付き合いください！ (うちのインフラの話はあまり面白い部分がないので省きますが、逆に面白い話があれば記事にするかXなどで話しかけてください！) ディレクトリ構成 とりあえずこんな感じに落ち着いています。 src/ ├── domain/ │ └── reservation/ # 予約ドメイン ├── lib/ ├── routes/ │ ├── admin/

はじめに この記事はTypeScript Advent Calendar 2023の15日目の記事です。 フロント開発からバックエンド開発まで、みなさんが大好きなTypeScriptですが、今回は意外と？知られていない豆知識を紹介していきたいと思います。 技術的に為になる記事は他のみなさんが書いてくださっているので、僕は今回ネタ枠で投稿させてもらいます！ 作者 TypeScriptは天下のMicrosoft社によって開発されているOSSのプログラミング言語です。 C#のリードアーキテクトでもあるアンダースヘルスバーグという方によってチームが作成され、開発がスタートしました。 AltJS TypeScriptのようにJavaScriptにトランスパイルされる言語をAltJSと読んでいました。 TypeScript以外のAltJSはほぼ滅んだので最近はあまり使われない言葉です。 たとえばCof

まだパッケージマネージャーの打ち間違いで消耗してるの？ 初手煽りタイトル失礼します。よだかと申します。 僕はフリーランスでいくつかプロジェクトをやらせてもらっているのですが、プロジェクトごとにパッケージマネージャーが違ったりします。 これがかなり辛く、yarnのプロジェクトでnpm installしてpackage-lock.jsonを生成してしまったり、npmのプロジェクトでyarn installしてyarn.lockを生成してしまったり。。 果ては、yarn devなのか、npm run devなのか、など気をつけないいけないことがかなり多いです。 そこで今回ご紹介したいのがniというツールです。 niについて niについて説明するために、READMEを見てみましょう。 まずは一行目です。 npm i in a yarn project, again? F**k! とても強い思いから

はじめに 先日、仕事で参加させてもらっているプロジェクトでVueを3系にバージョンアップしました。 続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。 前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 おそらく<script setup>自体は簡単に書けるようになってすぐ慣れると思うのですが、TypeScript対応が結構癖があって困ります。 なのでこれらの公式ドキュメントをよく読むようにしましょう。 SFC<script setup>TypeScript のみの機能 https://v3

初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま

初めに 最近自分がNext.jsをやる案件がとにかく増え、ディレクトリ構成が固まってきたのでここに置いておきます。 何か意見あれば是非いただけると嬉しいです。 個人的に最近流行りのfeaturesはやりすぎだと思っていたのですが、結局開発していくとfeaturesのようなディレクトリを切った方が合理的な場面が多々出てきたのでこうなった次第です。 設計時に参考にした記事 こちらのReact TypeScript Cheatsheetに、Recommendationとして載っているbulletproof-reactを参考にしました。 構成 例として飲食店のウェブサイトで、コース（course）という機能を持たせるとする。 ├─ components/ │ ├─ elements/ │ │ └─ Button │ │ ├─ Button.stories.tsx │ │ └─ Button.tsx

はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない

モチベーション 普段フロントエンドを領分にしているのになかなかこのあたりの基礎が足りていないと感じることが多いので、なんとかしたい。 ES Modules方式でしか対応されていないライブラリを使おうとしてコケたので色々調べたのも含め、まとめていく。 ちなみにその辺りについてはこの神記事見ると良い。 個人的に気になっているモジュールシステムについて掘り下げていく。 CommonJS CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。 from Wikipedia 例えばNode.jsで使われている。 Node.jsはデフォルトで全てのモジュールをCommonJSで扱うが、Node.jsは最近のバージョンでES Modulesに対応するなどしていて、潮流はES Modulesに流れつつある。 後述する

はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。

React Confとは これ 追記：YouTubeにアーカイブがそれぞれ上がってたので貼っておきます！ YouTubeのvideoIDが不正です 注意 まとめたのはKeyNoteと React 18 for app Developerのとこだけです あとReact Nativeのところは端折ってます。 面白そうなのがあればまた追記して行きます。 はじめに ReactのAPIはプログラミングではなく、「design principles」（設計原則）に根差している。 だから、最近のデザインツールがReactのコードを吐き出したりするのも不思議じゃない。 Reactを使えばデザイナーと同じ言葉でプログラマーが会話をできるということだ。 真のUXとは開発体験を犠牲にせずとも済むものののはずだ。 React Suspense React Suspenseがやりたいこと 「ネットワークを介したデー