HTTP/3の今と将来 第71回 HTML5とか勉強会 @flano_yuki マスコット: https://github.com/quicwg/wg-materials/blob/main/ietf103/http.pdf
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
経緯 DOMについて調べてた時に気づいたので、備忘録として。 (この備忘録ではReactベースで書いてます) 結論 仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。 命令的UIと宣言的UIってなんだろう... 命令的UI 「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある const checkbox = document.querySelector(".checkbox"); const button = document.querySelector(".button"); checkbox.addEventListener("click", () => { if (checkbox.checked === true) { button.disabled =
Go で Web Server 書く 動作確認するだけのコードなのでなるだけシンプルに書く。んで、 Port 80 を Listen したいけどプロセスは root で走らせたくないので、 systemd でポート開いてそれをプログラム側で使うようにする。 ディスクリプタごにょる部分は coreos/go-systemd がドンピシャなのでこれを使う。 package main import ( "errors" "fmt" "log" "net" "net/http" "github.com/coreos/go-systemd/activation" ) func main() { // Mux を設定する m := http.NewServeMux() m.HandleFunc("/", handler) // Server を設定する s := &http.Server{ Handl
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか?何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか?現状どうなっているのか?を調べたので、記事にしたいと思います! 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか?!と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。 この記事で用いる基本的なhooksをいくつか紹介します。 useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => { c
フロントエンドエンジニアの小林和弘です。 kakari という薬局向けに提供しているサービスで Electron を使って Windows アプリケーションを作成したので、そのことについてお話しようかと思います。 事の発端 これまで、「kakari」では、患者さまから薬局へ処方せんが送信されたときに薬剤師さまが処方せんの受信に気づけるように FAX で処方せんを送信していました。 しかし、FAX 送信に利用していた Twilio Programmable Fax サービスが 2021 年 12 月 17 日をもってサービス終了になってしまいました。 このサービス終了に対応すべく、薬局向けに処方せんが送信されたらプリンターで処方せん印刷ができる Windows アプリケーションを Electron で作成することになりました。 そもそもElectronとは HTML, CSS, JS のフロ
Go 1.19が8/2に早々にリリースされました。個人的にはGo 1.19よりも楽しみだったのが、サービス間通信とIDL(インタフェース記述言語)連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートでした。そしてそれはやってきました。 詳しい内容は↑の記事を見ていただくとして、Connectがその開発元ブログの紹介記事で宣言していたのが次の2つのことでした。 Go 1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ connect-webを出すよ 前者はまだ0.3だったのですが、connect-webはリリースされました。歴史のあるフロントエンドのコードジェネレータはTypeScript対応が後付けだったりするのですが、TypeScriptがファーストシチズンかつ、ネイティブというコードジェネレータなので、開発はかなりやりやすくなることが期待され
自社では Sphinx というドキュメントツールを利用しているのですが、残念ながらこれに付属している検索機能の日本語検索はかなり厳しいです。また残念ながら Sphinx 開発側も検索周りを改善するという予定は直近ではないようです。 そして検索というのはとても難しい技術なため自分のような素人では導入して「普通に期待する動作」をさせるまでの距離はとても遠いです。 ただ、なんとかして日本語全文検索を実現したいという思いはここ10 年くらいずっと思っていました。これは自社の Sphinx テーマを作ってくれている社員ともよく話をしていたのですが、どうしてもリソースをつぎ込めずにいました。 まとめ日本語検索に対応している Meilisearch を採用したドキュメントスクレイパーの実行は GItHub Actions (Self-hosted Runner) を採用した自社 Sphinx テーマの検
TypeScriptではデザインパターンとしてtagged unionによる直和がよく使われます。このときパターンマッチに相当する処理はswitchで行われますが、そこで直和に対する分岐が網羅的であることの保証を実行時と型検査時の両方で賢く行う方法がこれまでも模索されてきました。 今回、ヘルパー関数を導入せずにいくつかの問題を同時に解決する賢い方法を思い付いたので共有します。 コード これだけです。 // switch (action.type) { ... default: throw new Error(`Unknown type: ${(action as { type: "__invalid__" }).type}`); // .. } 以下、より詳しく説明します。 問題 TypeScriptではオブジェクトに type プロパティーを用意し、決まった文字列を入れることで直和を実現
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ(React)が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
TypeScript (4.7 時点) において, 文字列に付けられる型には以下の 3 つ (とそのユニオン型) があります. 文字列型 string 文字列リテラル型 ("foo" など) テンプレートリテラル型 (`data-${string}` など) これらのうち, 実行時の入力, 特に事前にパターンが想定されていないような任意の入力が含まれるような文字列に対しては, string や string を含むテンプレートリテラル型を付けることはできても, 文字列リテラル型を付けることはできません. 文字列リテラル型を付けるためには型検査時 (実行の前) に入力文字列の内容がわかっている必要があるので, まあそれはそうですね. このことを利用して, 実行時の入力を含む文字列を与えようとすると型検査に失敗するような関数を作ることができそうです. まずは与えられた型が文字列リテラル型, ま
先日 CDK for Terraform が GA になりました。 CDK for Terraform を使うことにより、 TypeScript や Go などといったプログラミング言語を使って Terraform エコシステムを利用したインフラの定義やプロビジョニングを行うことができます。 「Go でインフラが書ける」と聞き、ふと思ったことがこちらです。 というわけで書きました。 (2022/10/27 追記) CI/CD も Go で書いた記事を公開しました。 作ったもの GoGoGo 猫の画像をランダムで表示するサンプルアプリです。 主な利用技術について簡単に紹介します。 利用技術 Go 説明不要ですね。 Google 様が作ったプログラミング言語です。 Gin Go の軽量な Web フレームワークです。 公式の紹介に「パフォーマンスは Martini の最大 40 倍です」と書か
先日 Babel のメンテナーとして知られる Nicolò Ribaudo 氏が次のツイートを投稿した。 We finally finished migrating the Babel monorepo from Flow to TypeScript! It has been a very long process started by @z_bodya, and after migrating package-by-package @JLHwung just opened this PR 😄 pic.twitter.com/WKXxV8x2MY — Nicolò Ribaudo 🏳️🌈 • 💙💛 (@NicoloRibaudo) July 23, 2022 そう、JavaScript のトランスコンパイラである Babel のソースコードが Flow から TypeScrip
こんにちは、21Bのseasonです。この記事はtraP夏のブログリレー3日目の記事です。 自作Cコンパイラでセルフホスト達成しました。 リポジトリ: https://github.com/season1618/c-compiler/tree/main 自作Cコンパイラでセルフホスト達成しました!!!!!!🎉🎉🎉https://t.co/8fLIAJWksQ pic.twitter.com/2fgH5sKoZ0 — season (@season1618) July 27, 2022 実際にどうやって作るかを書くと長くなるので、ここでは経緯とか完成までの流れとかを書こうと思います。一応開発メモは以下に上げておきました。 開発メモ: https://github.com/season1618/note/blob/main/cs/c-compiler/index.md 経緯 大学の講義で
「良いコード/悪いコードで学ぶ設計入門」という本がとても売れているようです。私の所属している開発チームでも、何人か購入した人がいたので、私も購入して一通り読んでみました。 結果として、いくつかの考えが整理され、私としてはこの本によって考えが深まり、本を読んで考えた事自体は有意義であったと思いました。ただし一方で、あまり知識がない状態で(自分の中での判断軸が無い状態で)この本を読むと、色々と誤解が生まれるのではないか?という事を感じました。 一つの技術書がこれだけ売れるという事はそんなに多くはない事だと思うので、つまり、 その内容が改善されるとその効果は相対的に大きい という事になります。そこで、私が本を読んでいて思ったことや、この本の内容で正しいこと、現在も賛否両論とされること、事実として認識が間違っているであろうこと、この本で触れられていないが設計において大事なこと、などについてまとめて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く