タグ

ブックマーク / blog.ojisan.io (19)

  • 2023年に読んだ本

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

    2023年に読んだ本
  • Laravel を Docker で動かしてホスティングするまで

    ひょんとしたことから PHP をやることになったのですが、Laravel を コンテナでホスティングするのが難しすぎて困っています。とりあえず今できていることをメモです。こうした方が良いよ的なアドバイスがあったら教えて欲しいです。 ちなみに当は昨日公開予定のブログでしたが、Xが急遽OGPに対する仕様を変えたのでそれを踏まえた新しいOGイメージでお送りします。 注意 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この文章は PHP + Laravel歴 1週間ちょっとのペーペーによって書かれたものです。apache も fastcgi も初見です。書かれている内容を間に受けないでください。 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ tl;dr Docker で動かす最小構成がわからないのですが、とりあえずこう書けば動きはします。 FROM php:8.2-f

    Laravel を Docker で動かしてホスティングするまで
  • クソコードを読ませない

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

    クソコードを読ませない
  • モノレポにすべきか、レポジトリを分割すべきか

    先日 フロントエンドの Monorepo をやめてリポジトリ分割したワケ というブログがバズっていた。そのおかげか、Twitter でもモノレポに関する言及がちょこちょこあった。一家言あるドメインなので書きたい。ただの一家言(a.k.a お気持ち)なのでぜひ皆さんの意見も聞いてみたい。 tl;dr 別に自分はどっち派とかではなく、どっちも選ぶ。強いて言うならリポジトリ分割派で、依存更新がしんどくなったら monorepo 派。 免責 モノレポに対する一家言を書きたいだけであって、内容自体はフロントエンドの Monorepo をやめてリポジトリ分割したワケ と全く関係なく、そのブログで述べられている施策については何も言及しません。ただ一つ言及するとしたら肉の部位がコードネームに採用されているのは良いと思いました。🍖🍖🍖 モノレポにしたくなる状態の前提にあるもの 前提は元記事と同じように

    モノレポにすべきか、レポジトリを分割すべきか
  • C10K 問題、実は理解していない

    お願い 「C10K 問題とは何か」がわかる方は是非 Issue や Twitter などで教えてください。 追記: 自分の立場 1req ごとに 1 native thread を割り当てていたら、クライアントの数が増えれば増えるほど負荷が高まるのは当然だ。ただハードウェアの性能的に余裕があっても性能が劣化することがあり、それを C10K 問題と呼ぶ。C10K 問題は fd, pid の枯渇、スレッドを固定長サイズで確保することによるメモリの無駄遣い、コンテキストスイッチコストを含む。これを解決する方法が 1req ごとに 1 native thread を割り当てない技術で、シングルスレッド+イベントループ+IO 多重化といったテクニックや M:N モデルにつながる。 追記: @naoya_ito さんに解説してもらった当時の歴史的背景 https://twitter.com/naoya

    C10K 問題、実は理解していない
  • Webサーバーアーキテクチャ進化論2023

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

    Webサーバーアーキテクチャ進化論2023
  • dotfiles 振り返り2022

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

    dotfiles 振り返り2022
  • どうして自分を過小評価するのかと言われた話

    忘年会の時に、「おじさん(私のこと)って自分のことをできないエンジニアであるふりをするけど、どうして?」って言われたのだが、いざどうして自分がそういうふりをするのかを言語化しようとしたら難しかったので、時間をかけて言語化してみた。 ぶっちゃけ自分はできないエンジニアではないと思っている まず「できる」「できない」の定義だが、ここではしない。 いろんな人と比較されて「できない」側の人間として扱われてきた自分にとってその定義は考えたくない。 「できない」の定義は人を傷つけると思うのでしたくない。 なのであくまで読者の感覚的な尺度で解釈して欲しい。 自分はいわゆる別業種からの転向組で、エンジニアとして働き始めたのは 2018 年なので今年で 5 年目エンジニアだ。別業種からの転向ということでコンピュータサイエンスを大学で学んだ者・小学生の頃からバリバリやってきた者・新卒でエンジニアになって研修や

    どうして自分を過小評価するのかと言われた話
  • Rust でモザイク加工を実装し、それを WebAssembly として Web アプリから利用する

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

    Rust でモザイク加工を実装し、それを WebAssembly として Web アプリから利用する
  • 無限スクロールは考慮することが多い

    毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

    無限スクロールは考慮することが多い
  • React ユーザー向けの Next.js ガイド

    最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい

    React ユーザー向けの Next.js ガイド
  • JS を wasm 化とは何か、あるいは不正確な情報

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

    JS を wasm 化とは何か、あるいは不正確な情報
  • 会社をやめて約1年プログラミングの勉強に費やしたことに対する満足と後悔

    働いていないことへの言い訳記事です。 この夢のような生活がもうすぐ終わるので書きたくなりました... ちなみにサムネイルは「仕事」でぱくたそで検索したら出てきました。 「エレベーターも給料も下降中の写真素材」というタイトルです。 https://www.pakutaso.com/20140914273post-4629.html 何をしていたのか 会社を辞めて約 1 年ほどプログラミングの勉強をしていました。 前職では「みんなのレベルが高くて着いていけないな〜」って感じることが多く、その原因のほとんどが知識や経験不足に依るところだったので、そういうのを先に補ってから働いた方が良さそうと思って辞めました。 いわゆる異業種からのキャリアチェンジでプログラマとしてのキャリアを始めたので、知識や経験は同世代の人たちに比べるとかなりのハンデがあり、そのハンデを埋めるための勉強をしました。 プログラミ

    会社をやめて約1年プログラミングの勉強に費やしたことに対する満足と後悔
  • 脱Reduxを試みて失敗した話、その原因と対策について

    さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです

    脱Reduxを試みて失敗した話、その原因と対策について
  • Reactのパフォーマンスチューニングの歴史をまとめてみた

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

    Reactのパフォーマンスチューニングの歴史をまとめてみた
  • Reactのコンポーネント周りの用語を整理する

    React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか?をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode

    Reactのコンポーネント周りの用語を整理する
  • firebaseでのパスワードログイン機能の実装をやりきるためのTips

    Firebase Authentification は OAuth 2.0 フローにのっとったログイン方法以外にも Email/Password を使ったログイン方法も提供しています。 このログイン形式をちゃんと使おうとすると、これまでは Provider が担ってくれていたパスワードの編集、パスワードの再発行、メールリンクでのログイン、アドレスの人確認など様々なことを考慮しなければいけません。 この記事ではそういった考慮をした Email / Password ログインに挑戦します。 基的にはmanage-users, password-auth, email-link-authといった公式ドキュメントを読むと IPASS ログインに必要なことは書いてあるのですが、action URL を自前で用意するフローを採用するとそれらのドキュメントで賄えなくなり試行錯誤をたくさんしなければい

    firebaseでのパスワードログイン機能の実装をやりきるためのTips
  • ESLint と Prettier の共存設定とその根拠について

    注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので

    ESLint と Prettier の共存設定とその根拠について
  • Gatsby + TypeScript で技術ブログを書くための知見

    Blog を作りました!!!!! 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog を作ってみたものの書く内容が特にないので、まずはこのブログをどうやって作ったかについて書きます。 「こういう記法にちゃんと対応できてる?」を試す目的でもあります。 技術スタック 根幹になっているものは、 TypeScript Gatsby です。 元々は amdx + NextJS, もしくは完全自作 SSG を考えていたのですが、 ブログは完璧を目指しているといつまでも完成しない ということは知っているので、自分にとって自信があるツールとして Gatsby を選びました。 しかし、ただ使うだけなのはチャレンジ性がなかったので、TypeScript を使ってみることにしました。 昔の Gatsby

    Gatsby + TypeScript で技術ブログを書くための知見
  • 1