Honoマイベストプラクティス
はじめに この記事はHono Advent Calendar 2024の2日目の記事です。 自分のやっているプロジェクトではレストランの予約システムをHonoで構築しています。 アプリ、ウェブ、管理画面（ウェブ）があり、それらのAPIを一つのHonoサーバーで捌いています。 モノレポで構成されており、ウェブのフロントはNext.jsで作られています。 自分なりのHonoのベストプラクティスや設定を紹介いたしますので、よければ最後までお付き合いください！ (うちのインフラの話はあまり面白い部分がないので省きますが、逆に面白い話があれば記事にするかXなどで話しかけてください！) ディレクトリ構成 とりあえずこんな感じに落ち着いています。 src/ ├── domain/ │ └── reservation/ # 予約ドメイン ├── lib/ ├── routes/ │ ├── admin/
【最強】Honoフル活用事例2024年
Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip
JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
The new wave of Javascript web frameworks
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
オブジェクトを連想配列として使うと痛い目にあいますよ
2億回くらい口をすっぱくして言ったような気がします。(嘘) というくらいに過去に何度も語られて語りつくされた話題なので、雑にまとめておきます。 JavaScript でオブジェクトを連想配列として使っちゃだめです。 だめ。全然だめ。絶対だめ。 こういう、『なんか工夫して使ったら使えちゃったから便利。』だけどあとからひどい目にあうという変な構文やテクニックがやたらおおくてカオスなのがJavaScriptの難しさです。気をつけましょう。 const inputValue = 'a'; const object1 = { a: 'Aです', b: 'Bです', c: 'Cです', } const isUndefined = value => typeof value === 'undefined'; if (isUndefined(object1[inputValue])) { console.
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と JavaScriptのツールチェインを統一的に提供することを目指した「Rome Tools, Inc.」（以下、Rome Tools）は、JavaScriptおよびTypeScriptのコードの書式を高速に整えるフォーマッター「Rome Formatter」をリリースしました。 Release of the Rome Formatter, a super fast formatter for JavaScript, with a focus on Prettier compatibilityhttps://t.co/2iXq5Gm5K3 — Rome Tools (@rometools) April 5, 2022 Rome Toolsは、
A Whole Website in a Single JavaScript File | Deno
We have 3 paths: / for the main page, and/stats for some statistics, and /bagels to display various bagels that we sell. We also have a fallback handler (the last argument in the snippet), which will be called when none of the paths match, acting as a 404 page. These are served using the serve function from the standard library. For rendering of the JSX, we use nanossr, which is a tiny server-side
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
Node.jsのMySQLパッケージにおけるエスケープ処理だけでは防げない「隠れた」SQLインジェクション - GMO Flatt Security Blog
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？
概要 Partytownというプロジェクトが先月発表された。このプロジェクト自体はWebのパフォーマンス向上(3rd Party Scriptによるブロッキングの低減)を主目的としているが、実質ブラウザにおけるJavaScript Sandboxの方向性に一石を投じるものであるとして自分は理解した。本稿ではこちらについて背景とともに解説を試みる。 WebブラウザにおけるJavaScript Sandbox JavaScriptで記述されたWebアプリケーションにおいて、たとえばプラグイン機構を実現したいなど、他Partyが提供あるいはユーザ自身が記述したスクリプトを、ホストとなるアプリケーションに影響を与えることなく実行することを許可したい、というケースはままある。2000年代に跋扈したブログパーツの類はWebコンテンツに対するプラグインの代表例とも言えるが、埋め込み先ページに対しての全権
Elm at Rakuten | Rakuten Engineering Blog
In our team at Rakuten, we have been using Elm1 in production for almost two years now. This post is about our story, the lessons we learned, and our likes and dislikes. This post is quite long so if you prefer to see an overview, feel free to jump to the index. Everything started in the Berlin branch of Rakuten during the summer of 2017. We were maintaining a medium-size single-page application w
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
Sparkplug — a non-optimizing JavaScript compiler · V8
Show navigation Writing a high-performance JavaScript engine takes more than just having a highly optimising compiler like TurboFan. Particularly for short-lived sessions, like loading websites or command line tools, there’s a lot of work that happens before the optimising compiler even has a chance to start optimising, let alone having time to generate the optimised code. This is the reason why,
Introducing WebContainers: Run Node.js natively in your browser
Introducing WebContainers: Run Node.js natively in your browser Update: Since the publication of this blog post in May 2021, WebContainers became stable and available on Firefox. Most importantly, we released the WebContainers API for you all to enjoy! You can even self-host the API with StackBlitz Enterprise. Get in touch to learn more. A few years ago we realized that the web was heading towards
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ 現在、モダンなJavaScript開発環境としては、ESLintに代表される構文チェッカーや、Babelに代表されるJavaScript変換ツール、モジュールを組み合わせるなどのバンドル操作を行うWebpackなど、さまざまなツールを組み合わせる、いわゆるツールチェインを用いるのが一般的となっています。 こうしたなかで、このツールチェインの機能をすべて備えた1つのツールでJavaScriptの開発環境を統一してしまおうというオープンソースのプロジェクト「Rome」が、昨年発表されました。 Romeでは、JavaScriptやTypeScript、JSXなどでの開発において、現時点で以下の領域をカバーする予定です。HTML、CSS、Markdown、JSONなどにも対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSG is a compiler
GitHub
Explore DOM Events
