平常運転

アニソンが好き

過去記事とかは記事一覧で見れます

HTMLFormElement.submit は validation を無視するし submit イベントを発火しない

日記です。タイトルでほぼすべてがオチてしまった。

const form = document.querySelector('form#ultra-form');
form.submit();

みたいな感じで、 <form>JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている:

Submits the form, bypassing interactive constraint validation and without firing a submit event.

https://html.spec.whatwg.org/multipage/forms.html#htmlformelement

つまり、例えば下のような HTML form の場合、 submit ボタンをクリックした場合は (1) username が入力されていないと validation が通らないので submit できない し、 (2) onsubmit が false を返せば submit は中止される のだけど、HTMLFormElement.submit はそれらをすべてバイパスして問答無用で実際に form を送信してしまう。

<form id="ultra-form" onsubmit="..." action="...">
  <input name="username" required />
  <input type="submit" />
</form>

若干直感に反する気もするけどそういう感じらしい。ので、 submit ボタンを押すのと同等のアクションとしてはこれを使ってはいけない。

じゃあこういう時に何を使うといいかというと HTMLFormElement.requestSubmit というのが数年前に提案されている。こいつは submit ボタンをクリックするのと同様のバリデーションが走るし、 onsubmit によってキャンセルされることもある、というより自然な仕草が実現される。

Requests to submit the form. Unlike submit(), this method includes interactive constraint validation and firing a submit event, either of which can cancel submission.

The submitter argument can be used to point to a specific submit button, whose formaction, formenctype, formmethod, formnovalidate, and formtarget attributes can impact submission. Additionally, the submitter will be included when constructing the entry list for submission; normally, buttons are excluded.

https://html.spec.whatwg.org/multipage/forms.html#htmlformelement

やったじゃん、と思うわけですが、

caniuse.com

Safari ではまだ使えません。 WebKit レベルでは実装されていて、最新の Safari Technology Preview では「開発」メニューから選べる実験的機能扱いになっている。

f:id:astj:20210716165550p:plain

こちらからは以上です。WebKit の話は id:cockscomb さんに教えてもらいました。

masawada slotmachine - behind the scene

このエントリは masawada advent calendar 2020 ではありません。

adventar.org

この12月は前述の masawada advent calendar のために masawada slotmachine というものを作った。

astj.github.io

astj.github.io

非常に素朴な JS のオモチャという感じだけど、いちおう Next.js で書いている。静的ページの上で React をなんか動かす、もしかしたら複数エンドポイント作るかも(実際作った)という要件から、興味はあるものの触ったことのなかった Next.js を選んでみたという感じ。

github.com

そもそも元々はこのアドベントカレンダーでは全然別のことをやろうと思っていたのだけど、いろいろあって直前で断念してしまって他のネタを考える必要がアリ、全然ネタが思い浮かばないなか辛うじてひねり出したのが今回のスロットという感じ。なので実装も突貫工事のめちゃくちゃで、ソースコードはまあ薄目で遠くからそっと見る程度にしてもらえると。。今回書いたコードに仕事のコードレビューで遭遇したらめっちゃ文句言うと思う。

あとは Next.js の感想。Next.js 便利ですねみたいなことを今更言っても何周遅れだという感じではあるけど便利だった。規約に従って React コンポーネントを書いていくとエンドポイントが誕生していって、 SSR とか SPA とかの細かいことを気にする必要もなくて開発体験が良かった。勿論今回の規模ならまあなんとでもなるという話はあると思っていて、もっと大規模な物を扱ったり、(今回は GitHub Pages に html と js を置く静的ビルドだったのに対して)サーバーありの動的なものを作ったりするともっと難しさとか、逆にありがたみも増えたりするのであろう。またなにか機会があったら使ってみたい。

ソースコードの質はさておくと、アドベントカレンダーの締切駆動にすることで久々にインターネットおもちゃみたいなのを自分で作ることが出来て良い体験だったなと思っている。要件定義も技術選定も実装もデプロイも、なんならデザイン*1も全部自分でやって作るというのは実はだいぶ久々だったと思う。普段仕事でやってるときはチームで分業して大きな物を作る感じなので、たまにこういう活動をしておかないと小回りとかを見失ってしまうな〜と思ったりした。

そういえば今年は masawada さんとオフラインでお会いしたことあったっけ。1月の納会ではきっと会ってるな。東京勤務の同僚と会う機会がめっきりなくなりましたね。2020年ももうすぐ終わりです。

こちらからは以上です。

*1:今回は100点満点で7点みたいなことしかしてない

Apple M1 Mac で mackerel-agent を動かす

このエントリは Mackerel Advent Calendar 2020 の16日目です。遅刻です。

qiita.com

昨日は kazeburo さんでした。

kazeburo.hatenablog.com

今日は Apple M1 Mac で mackerel-agent を動かす話をします。
前日の "Apple M1 Mac で Go を動かす" の続きというつもりで書き始めましたが、気がつけばあまり関連性のないエントリになりました。

blog.astj.space

disclaimer

筆者 (id:astj) はこれを書いている現在 Mackerel の開発チームメンバー、いわゆる「中の人」です。

また、 Mackerel は mackerel-agent による Mac の監視を正式にはサポートしていません。開発チーム内に Mac ユーザーのエンジニアが多いことからある程度メンテナンスされているという実態はありますが、 Mackerel として正式に動作保証をしているものではない、という背景はご留意ください。

正式なサポート対象についてはヘルプをご確認ください。

mackerel.io

続きを読む

Apple M1 Mac で Go を動かす

このエントリははてなエンジニア Advent Calender の15日目です(遅刻)。

qiita.com

昨日?前日?は id:ma2saka さんのAWSコストエクスプローラーAPIと気軽につきあう(2020) with Next.js でした。

qiita.com

このエントリでは、 Apple M1 搭載の Mac で Go を動かすという話をします。

続きを読む

ISUCON10に参加して予選敗退しました

しました。

isucon.net


我々のチーム "できの悪いウォーターフォール開発" は予選敗退となりました。最終スコア(かつベストスコア)は1320点くらいです。

リポジトリはこちらです:

github.com

敗退はめちゃめちゃ悔しいし無念な思いですが、非常にやり応えがあって良い意味で ISUCON らしい素敵な問題でした!!!!多分文末にも改めて記しますが、これだけの大規模となった今回の ISUCON 予選を運営されたスタッフの皆様には本当に感謝しています。ありがとうございました。

以下は問題のネタバレを含むので、もし問題に関してノータッチでいたい方はここでお戻りください。
また、疲れていてかつお酒を飲んだ状態で書いているので支離滅裂だったり不正確な可能性もあります。後で素面に戻ってから追記したり修正するかもしれません。

続きを読む

AWS CloudFormation に AWS::ECS::CapacityProvider が来はじめた

概要

  • CloudFormation で ECS Capacity Provider が限定的に操作できるようになった
  • Fargate Spot がちょっと使いやすくなったかもしれない
  • もうちょっと待ったらフルサポートされると思う(されてほしい)
  • もうもうちょっと待ったら AWS CDK で良い感じに扱えるようになると思う(されてほしい)
    • 特に Fargate Spot はきっと良い感じになる(なってほしい)
  • EC2 Managed Scaling はもうちょっと様子見が必要かも(未確認)

本文

タイトルの通り、気付いたらやってきた。

docs.aws.amazon.com

Capacity Provider とはみたいな話は去年ブログに書きました:

blog.astj.space

続きを読む

Amazon ECS Capacity Provider と Fargate Spot と ECS Cluster Auto Scaling を整理する

ラスベガス帰りの id:astj です。

今年も re:Invent ではたくさんのサービスリリース/アップデートがあって目が回るような思いでした。現地にいたからキャッチアップできた中身もあれば、しれっとリリースされていて現地でセッションを聞いてるだけだと気づきそびれた中身もあって物量に圧倒されております。

さて、本稿では2019年の re:Invent で発表された ECS 関連のリリースのうち、以下の3つを中心に整理してみようと思います。

  • Amazon ECS Capacity Provider
  • AWS Fargate Spot
  • AWS ECS Cluster Auto Scaling

遅くなりましたが(ダブルミーニング)、このエントリは はてなエンジニア Advent Calendar 2019 の12/9分のエントリです。ラスベガス時間ではまだ 12/9 ではないでしょうか。そういう話題ではない。

qiita.com

前日は id:kouki_dan さんによる "SlackでクイズができるSlack Appsを作った" でした。

kouki.hatenadiary.com

続きを読む