Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！

転職ドラフトからオライリーの本たくさんもらったので欲しかったやつとりあえず全部読んでみた。 <pr> 紹介コード RVSC を使うとお互いにもらえるので気になる人は是非。 https://job-draft.jp/sign_up?utm_term=RVSC </pr> オブザーバビリティ・エンジニアリング 良い本。トレーシングやOpenTelemetryの本と思って買っていたが、実際はオブザーバビリティを確保するための色々な手法を紹介している。そのような手法が発達するまでの歴史の流れの解説も面白かった。従来のメトリクスとモニタリングだけでは現代の分散システムのデバッグが困難ということで、 オブザーバビリティ・エンジニアリングを導入する上での説得に使えそうな文言がたくさん散りばめられている。その手法の一つが、そもそも問題が起きてからデバッグのためにデバッガを挟み込んでデプロイしたくないという

飲み会で「お前、次の転職どうするよ？」的な話をするときはいつも これまでは自分が一番下手くそなバンドメンバーになれる職場を意図的に探していたし、今の職場もその基準で選んだが、そろそろ俺の音楽をやりたい プログラミングそのものをドメインとした仕事をしたい ドキュメントやチュートリアルの整備をしたい。あわよくば今 blog.ojisan.io を書いていること自体が仕事になるようなことをしたい 的なことを言っている（はず、アルコールが入っているので記憶が定かでない）。 で、この最後の 「ドキュメントやチュートリアルの整備をしたい」というのはここ１年くらい言っている気がするのだが、そろそろ本当に動き出そうと思って最近ふわふわ考えていることを書いてみようと思う。そういう仕事をしている人の目に止まってくれると嬉しい。 どうしてドキュメントを書くような仕事をしたいのか いまこういったブログを運営してい

クソコードを読ませない💩 https://uit.connpass.com/event/291443/ 免責事項 「クソコードという言葉を使うな」と思った人、いると思います。 攻撃的で、解像度も荒くて、建設的でない言葉だと私は思っています。 一方で、目にすることも多い言葉であり、具体例に関してはふわりとした共通認識が持たれているのと、そういったコードに対するダメージコントロールの話なので、便宜上クソコードという言葉を使います。とあるソースコードに対してクソコードと呼ぶのはよくないですが、クソコードという概念そのものについて話すことに対しては有益だと思います。 自己紹介 sadnessOjisan JS/TS, Rust, 最近 Go, PHP マイブーム: 優光というラーメン屋 クソコードとは何か クソコードとは何でしょうか？ 知りません。 インターネットミーム？ https://tog

Rust でWebサーバーを書く時の技術選定をするときに調べていると hyper に必ず出会うと思う。これは黎明期から存在しているライブラリで、Webサーバーにしては珍しく version 1 まで到達している老舗だ(1に到達してたら安心って考え方が正しいかはさておき...)。このライブラリは actix-web や axum のような他のライブラリとは毛色が違い、かなり primitive だ。そのため axum のベースに使われてもいて、hyper はそのまま使わないライブラリなのかもしれない。 サンプルコードから存在意義がわかりにくい さて、そんな hyper だが公式の example はこのようになっている。 #[tokio::main] async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>>

axum を始め、tower 系列でサーバーを作っているといくらでも例が出てきそうな話ではあるが、「ちょっと君、明日からRust でトレーシングしたまえ」って言われた時に欲しいまとまった情報は意外とない気がしたので書く。 基本的に tower 系列や、tower に準ずる様な Service トレイトを持つ様なFWであれば同じ様な話であり、tracing crate 自体は Agnostic なものなので、ここでは axum を例にあげて書く。 axum と tracing subscriber まず、簡単に HTML を返すサーバーを作る。 use axum::{response::Html, Router}; use std::net::SocketAddr; #[tokio::main] async fn main() { let app = Router::new().route(

はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ？」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自

Rust でモザイク加工を実装し、それを WebAssembly として Web アプリから利用する2022-07-11 Twitter のアイコンが本人とかなり乖離してきたため、職場の人に「え、誰ですか？」と言われることが多々あり、そろそろアイコンを変えようかなと思っていました。でもアイコンを変えると認識できなくなると思ったので、少しずつアイコンにモザイクをかけていこうと思い、モザイクツールを自作していました。自作しなくても既存のツールがあるのではと思うかもしれませんが、車輪は再発明するものなので再発明しました。ただ車輪の再発明とは言っても、Wasm で動作（=クライアントで加工してくれるからサーバーに送らなくていいし Web で使える）という点では比較的新しい車輪の再発明な気がしています。 それがこの umie です。ファイル選択して送信するとこのようにモザイクをかけられます。 ちなみ

この記事はもしかしたら誤りを含むかもしれません。 今週ツイッター眺めてたら色んな人が javy のリンクを共有していて、なんじゃこれ？と思ったのでそのまとめ。 FYI: https://github.com/Shopify/javy javy は Run your JavaScript on WebAssembly. と説明されていて、要するに JS を wasm で実行するものである。ただこのモチベーションなどがよく分からなかったので、wasm とは何かということから周辺知識をおさらいしつつ javy を理解しようとしてみる。 wasm とは こういうのは MDN を見る WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル

この記事は sadnessOjisan Advent Calendar 2021 25 日目の記事です。 ついに最終日ですね！今日は 02/04 なのですが・・・ 12/25 に Qiita のクソアプリカレンダーに マッチした人の年収を知れるマッチングアプリを作った と言うのを書いたのですが、あまりにも攻撃的なリクエストが飛んできたので閉じました。 で、閉じさせられることに腹が立ってきたので何か仕返しできないかなと思ってこの記事を書いています。 何を作っていたか 年収マッチ と言う、マッチングアプリ です。 マッチング（出会い）した相手とマッチ（対戦）できるというコンセプトです。 「年収を教えてくれる人には自分の年収を教えてもいいよね〜」と個人的に思っていて、それをしやすくするサービスとして作りました。 最終的には 50 人くらいの人が登録してくれていたのですが、一方でリクエストを見てい

API Spec を書くとそれ通りのリクエストしか受け付けないようにバリデーションしてくれて、なおかつバリデーションされた値には Spec で期待した通りの型が付いて欲しいですよね。 これを TypeScript で実現しようとすると色々と壁があります。特に API Spec と TypeScript の型を揃えるのが難しいです。 この手の課題は NestJS であればクラスフィールドとデコレータを使って解決できるのですが、制約の強い FW であるため会社の事情で採用が難しかったりもします。そこで fastify を使って同様のことを達成できるか模索してみましょう。 (※ OGP は https://www.pakutaso.com/photo/75600.html です。型、バリデータ、API Spec 三銃士感があって選びました) API 仕様書はどうあるべきか まず、フロントエンドエ

追記 一旦締め切りました。 連絡をくださった方、書籍などのアドバイスをくださった方ありがとうございます。 本文 謝礼をお支払いするので、教えて欲しいことがあります。 自習しろと言われそうですが、試行錯誤するには人生が短すぎたり、爆速突破するには能力が足りなかったりで色々辛くなってきたので何卒。 以下、学びたい優先度順です。同時に学べるのは多くて 2 つで、被った場合は優先度順でお願いすることになります。 教えて欲しいこと OCaml で Parser Combinator を 0 から作る 狙い: 関数型プログラミング言語とそれの使い方を学びたい。また、OCaml のエコシステムに詳しくなりたい。 Monadic Parser をゼロから作ることで、関数型プログラミングのテクニックや考え方を学びたいです。 すでに 教科書的な簡単な Monadic Parser を 0 dependenci

いつも再レンダリングを確認するときは Chrome の DevTool から Profiler 立ち上げて、'Highlight updates when components render.' のチェックを入れていたのですが、それやらなくても良いじゃんということに気づいたのでメモ。 import * as React from "react" import { StateContext } from "./app" export const Count = () => { const context = React.useContext(StateContext) const getColor = () => Math.floor(Math.random() * 255) const style = { color: `rgb(${getColor()},${getColor()},${

公式では制御されたコンポーネントを推奨し、<input type="text" value={this.state.value} onChange={this.handleChange} /> のように onChange を使って更新、value に state を入れて制御するようにしているのですが、推奨は言いすぎではと思っていることについて書きます。 「公式のここがおかしいのではないか」という問いかけはだいたい自分が間違っているだけという場合がほとんであることは自覚していますので、もし間違っていたら """優しく""" 指摘してくれると嬉しいです。 React は制御されたコンポーネントを推奨している まず制御されたコンポーネントについて、公式の定義をみましょう。 HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保

ESLint の Plugin と Extend の違いを説明できますか？ 違いを知っている人からすれば（というかそもそも全然違うものなので）、「え、それ悩む？」となるところなのですが、ユーザー向けドキュメントには Plugin の定義が書かれておらず、Extend の説明も不十分で、さらに Plugin の設定をする Extend なんてものがあるお陰で、慣れないうちは混乱すると思います。 特に最後の事象は個人的には印象的で、「Plugin の設定をしていないのに Plugin が設定されている。Plugin って何？」といった混乱の原因になっていました。 この混乱は ESLint の全体感を掴むと混乱しなくなるのでそういう話を書きたいと思います。 実際に混乱してた人も多そうです（6/24 更新) 結論を言うと、Extend は Extend です。設定を Extend する役割を持って

Rust 分かんないッピ ・ε・ Rust の文字列周りのプラクティスを基礎から勉強してみようと思って勉強したのでそのときのメモをまとめます。 Rust は GC を持たない なぜ Rust の文字列周りの型があんなに大変なことになっているかは、Rust のメモリモデルと Copy の仕組みを学ぶことで理解できた気がしたので、メモリの話から始めます。 FYI: https://www.reddit.com/r/rustjerk/comments/ovx0uq/the_two_major_ways_rust_changed_my_life/ GC とは まずは GC からです。 GC とは Wikipedia をそのまま引用すると ガベージコレクション（英: garbage collection; GC）とは、コンピュータプログラムが動的に確保したメモリ領域のうち、不要になった領域を自動的に

私はプログラミングを 3 年近くやってみて、「ただ知らなかっただけで損した」という悔しい経験をたくさんしました。 そこで自分にとって「これを知っているだけでエンジニアとしてステップアップできた」というものをまとめてみようと思います。 ちなみにステップアップする前の私はこのようなとても凄いコードを書いていました。 ご査収ください。 プログラミングを始めて最初に作った成果物です。 https://gist.github.com/sadnessOjisan/6f1a1956d4848e3c17f0c0c5af28cfb8 (//varを付けたらダメだよ(ローカル変数になっちゃう。関数内だからローカル変数使うと外部からアクセスできない) というコメントがすごい・・・) はじめに 書こうと思ったきっかけ 自分は大学生の時にプログラミングに触れたことがあるものの情報系を出ておらず、エンジニアになったの

最近 React のパフォーマンスチューニング、特に再レンダリング抑制について調べたのでそのまとめです。 特に昔からおまじないとして書いていたことを、「なんであの書き方していたんだっけ」というのを調べてまとめました。 古いものを調べたのは、今あるチューニング方法とその当時の解決方法を比較したかったからです。 再レンダリングとはなにか 公式に説明があったのでそのまま引用します。（https://ja.reactjs.org/docs/optimizing-performance.html#avoid-reconciliation） React では、コンポーネントの props や state が変更された場合、React は新しく返された要素と以前にレンダーされたものとを比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します

preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。 preact とは React の軽量版・サブセットです。 公式では Fast 3kB React alternative with the same modern API. Components & Virtual DOM. と説明されています。 (p)react には、 状態を持て、書き換えも可能である 状態を書き換えるとそれに対応して HTML が書き換わる という特徴があります。 それがどのようにして実現されているのかを見ていきましょう。 前提となる知識 preact のコードリーディングを進める上では VNode というオブジェクトに慣れる必要があります。 これは JSX を仮想 D

まだまだ 2022 年の振り返りが終わらないぜということで今日は dotfiles の振り返り。dotfiles はその変遷を見ると面白いので、毎年やろうと思い早速やっていきたい。 ちょっと前に M2 の MBA 買って、dotfiles を一新した。 これが今の dotfiles だ。 https://github.com/sadnessOjisan/dotfiles コンセプト 自分は Mac しか使わない が、WSL 環境も持ってるのでシェル周りの環境は移せるように作っておく（原神しかしないけど・・・） make all だけでセットアップが完結する 手作業はしない なるべく標準に準拠し、プラグインやライブラリへの依存を減らす。入れる場合も単体で剥がせるものを選ぶ。 シンボリックリンクを貼って、dotfiles の変更が即時に反映されるようにする .config など XDG に準拠