ナミブ砂漠に「なにもない」を見にいく - 運河
時々、何もない景色を見たくなる。なぜなのかはわからない。人も建物もないただ広大な空間、それを無性に見に行きたくなる。 たしか土曜の午後、自宅の窓から向かいのマンションの建物を眺めていたとき、どこかできるだけ遠くに行きたくなった。 ナミブ砂漠のナミブは、現地民族の言葉で「何もない」という意味らしい。このエピソードにすごく心を惹かれた。ここに行けば、本当の「何もない」があり、本当の「何もない」を体験できるはずだと思った。それにずっと憧れていた砂漠のイメージが重なって、どうしてもその景色を見てみたくなった。 それから何日かかけて、旅行のリサーチをしたり、あれこれ相談したりして、アフリカ南部の国 ナミビアのナミブ砂漠を最終目的地として旅をすることにしたのだった。 首都 ウィントフック 11月初頭、午前。アフリカ南部 ナミビアの首都 ウィントフックの空港に到着した。東京から韓国経由で飛行機に乗り、エ
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
はじめに 本書『Observability Engineering』は、複雑化の一途をたどる現代のソフトウェアシステムに立ち向かうための、強力な武器となる一冊であり本稿はその読書感想文です。Observability Engineering を今から知りたい方はもちろん、Observability Engineering の基礎を改めて学びたい方もぜひお読みください。この記事もかなりの長さになるので普通に書籍を読んだほうがいいかもです learning.oreilly.com 「Observability:可観測性」という言葉は、近年ソフトウェアエンジニアリングの世界で大きな注目を集めています。しかし、その概念の本質を理解し、実践に移すことは容易ではありません。 本書は、そのオブザーバビリティについて、その基本的な考え方から、具体的な実装方法、そして組織への適用まで、幅広くかつ深く解説して
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
はじめに 「理解容易性」は「保守性」の観点の1つとして重視され、多くの原則や技法が紹介されているが、断片的かつ多様であり、全体像を理解することは難しい。 抽象度は高いが、体系的に観点を整理する事で、その理解の助けとなれば幸いである。 定義 「理解容易性」を簡単に言えば、「理解のしやすさ」であるが、その意味から掘り下げると、「思考する量」と言い換えることができる。 本記事では理解容易性を「思考量の少なさ」と定義し、7つの観点に整理した。 先に要約およびチェックリストを記載し、概略を記載した。 後に詳細で理解のため、各観点毎の説明と個別の原則や技法へのリンクを記載した。 要約 7つの観点の要約を先に示す。 （変数や関数の）名称は分かりやすくする （変数や関数の）役割は１つにする （変数や関数の）参照は狭くする （変数や関数の）状態は変えられなくする （関数やクラスの）面積は小さくする （関数や
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
個人開発の SwiftUI アプリのアーキテクチャを MVVM から MV にした - maiyama4's blog
概要 SwiftUI Advent Calendar 2023 の 21 日目です。 最近趣味で iOS の podcast クライアントを SwiftUI で作っているのですが、やってみると podcast クライアントはアプリとしてそれなりに難しいことがわかってきました。作っているうちにどんどん状態管理が複雑になってきて、個人開発でなぜこんなにがんばりが必要なんだと思って開発が止まっていたのですが、最近 iOS 17 の登場をきっかけにアプリを全般的に書き直すことにして、同時にアーキテクチャを変えてみました。これにより構成がシンプルになって開発効率が上がり、開発を再開することができました。具体的には、 from: １画面に１つ ViewModel（ObservableObject）を作り、 View から ViewModel を監視する MVVM to: View から直接 Model
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
はじめに コンピュータのアーキテクチャ プログラムの構造 あとがき 執筆者 : 小田 逸郎 はじめに 筆者は自分のことを OS 開発者 (OS屋) だと思ってます。最近は、OSにあまり深く関われていないのですが、筆者が若かりし頃に情熱を注いだものであり、筆者の基盤をなしているものであることには間違いないです。 筆者が OS (UNIX) の開発に携わり始めたのは、1986年のことなので、もう40年近く経ってしまいました。その間に OS の規模も随分大きくなってしまったようです。 筆者が始めた頃の UNIX は、デバイスドライバを除くと、20K行くらいだったと記憶しています。 全コードをラインプリンタで出力、コピー、製本し、皆で読み合わせて、勉強会をしたりしていました。そんなことができる分量だったのです。 今の Linux の規模はどれくらいでしょうか。筆者たちが「Linuxカーネル 2.6
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
この本の概要 小さなプログラミング言語から本格的なプログラミング言語へ……ステップバイステップでの開発を通して，プログラミングそのものへの理解を深めよう！ こんな方におすすめ コンピュータサイエンス，とくにプログラミング言語そのものやコンパイラについての素養を得たいと考えている人 他言語でのプログラミング経験があり，Rustの習得に興味のある人。とくに，学習のための題材を探している人 第1章：プログラミング言語概論 プログラミング言語の分類 他の切り口での分類方法 コンパイルパイプライン 第2章：スタックベース仮想マシン 仮想マシン概論 Rustでの実装 標準入力からの読み込み パースとコマンドの実行 ブロックとネスト構造 if制御構文 変数の定義 複数行のソースコードへの対応 関数呼び出し 関数の再帰呼び出し WebAssemblyへのコンパイルとブラウザでの実行 第3章：プログラミング
Go、Python、Kotlin、Rust、TypeScript の5つの言語について「並列処理、並行処理の手法」というテーマに絞り解説する「並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しよう」。JavaScript編では橘氏が登壇。JavaScriptが疑似的な非同期処理をどう実現しているのかと、JavaScriptの非同期処理の歴史について紹介します。 橘氏の自己紹介 橘ゆう氏（以下、橘）：よろしくお願いします。風邪でめちゃくちゃ顔が死んでいるので、カメラオフでいきます。橘です。今日は「JSの非同期処理パターン Promise、async/awaitを理解する」というテーマについて話していきたいと思います。 簡単な自己紹介ですが、もともとDeNAにいて事業統合でそのままGOに移り、今は森下さん（森下篤氏）と同じチームで、主にサーバーサイドやMLOp
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブに変化する UI では、状態管理が複雑化し、コードの可読性が低下することがあります。その結果、バグが発生し、予測しにくい動作を引き起こすことも少なくありません。 そこで今回は、 zustand を導入
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「デザイン」という語は設計という意味と、見た目・意匠という意味がありますが、この記事ではどちらも含みます。 Misskey Webの設計思想 Misskey Webの設計思想として、「デスクトップでもモバイルデバイスでも同じように使えるようにする」というのがあります。 “同じように使える”とは、機能や使い勝手といった面でもそうなのですが、コンポーネント（UIを構成する個々のパーツ）レベルの話も含んでいます。 現在はこのような設計思想で開発していますが、Misskey初期の頃は、デスクトップ版Webクライアントとモバイルデバイス
この記事はAlex Rattrayさんの A curious case of the ternaries を、本人の許可を得て翻訳したものです(タイトルは大幅に変えてしまっていますが)。 記事の最後にあるように Google Forms から新しい機能についてのフィードバックを求めています。私以外のメンテナーも読めるようにできるだけ英語で書いてほしいですが、「日本語でなら書いてもいいよ」という人がいたら日本語で書いてもらっても大丈夫です。 三項演算子のフォーマットは長年の課題でした。Prettier の v3.1.0 では新しいフォーマットのスタイルを導入することで、ついにこれを解決しました(訳注: 後述の通り、まだ experimental なので、--experimental-ternaries をつけたときのみ有効になります)。 このブログ記事では、これまでの経緯と背景、実際に触って
Lensを始めとするOpticsがプログラミングをどう変えるか / 複雑なデータのモデリングをサボるには - Lambdaカクテル
仕事でLensを使う機会があった。Lensは複雑で入り組んだデータ構造の読み書きに非常に効果的な手法であるにもかかわらず、関数型プログラマ以外にはあまり知られていないように思える。 そこでこの記事では、Lensとは何なのか、なにが良いのか、具体的にどのようなケースでLensが役立ったか、そしてLensの亜種について紹介する。業務でも使ってます！ AIくんが考えるLens 前提条件 Lensとは Lensの使いどころ データをモデリングする場合 (とても つらい) Lensを使う場合: Lensはアクセスパスである Lensと愉快な仲間たち Lensの合成 -- andThenでひっつけよう Lens Law Monocleの便利機能 Lensの自動生成でサボる Focusでもっとサボる Lensがもたらしたもの まとめ あわせて読みたい 前提条件 この記事ではLensを紹介する言語としてS
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
こんにちはかねこです。私はCRuby(ruby/ruby)のコミッタをやっているのですが、最近はCRubyをメインのターゲットとしてLALR parser generator Lramaの開発をしています。 現役のLALR parser generator開発者として、日頃私以上にLR parserのことを考えている人はそうはいないでしょう。 この記事を読んでいる皆さんは構文解析、なかでも特にLR parserを理解するためにいろいろな教科書や記事を読んできたと思います。 一方でどんなに調べてもどこか腑に落ちない部分が残っているのではないでしょうか。 LR構文解析を勉強すると構文解析表に出会うとおもいます。 構文解析表を作る方法そのものは教科書に説明が載っており、その通りに手を動かせばこのような表を作ることはできるでしょう。 また出来上がった構文解析表をもとに実際に構文解析する手順も理解で
Ruby 3.3リリース！ 新機能解説 Prism：エラートレラントな、まったく新しいRubyパーサ Prismは、Ruby 3.3.0にバンドルされた新しいライブラリで、プログラミング言語Rubyの新しいパーサであるPrismパーサのバインディングです。Prismはエラートレラント、移植性、メンテナンス性、高速性、効率性を考慮して設計されています。この記事では、Prismの歴史、設計、API、そして今後の課題について取り上げます。 使用方法 Rubyバインディングを通してPrismパーサを使うにはrequire "prism"をして、Prismモジュールのparseメソッド、または他のparse_*系のメソッドを呼んでください。次に例を示します。 require "prism" Prism.parse("1 + 2") parseメソッドは、パース結果のオブジェクトを返します。こ
TL;DR スマホでQRコードを読み込むプロフィール交換アプリを開発した。 イベントソーシングだったり Hono だったり、気になる技術を試せた。 アプリのレスポンスが速く、懇親会も盛り上がったのでよかった！ はじめに レバテック開発部で基盤システムグループに所属している瀬尾です。 普段はマイクロサービスのつらみを味わったりしています。 昨年末に弊社で大規模な懇親会があり、そこでの交流を増やす目的として、互いの QR コードを読み取りプロフィールを交換するアプリを作りました。 この記事では、そのアプリをどんな技術でどのように開発していったかをご紹介しようと思います！ 技術スタック 言語 Typescript Go（Lambdaで使用） フロントエンド Node.js Next.js, TailwindCSS バックエンド Bun Hono, Prisma イベントソーシング インフラ AW
こんにちは。Gunosy R&D チームの森田です。 GPT-4o が発表されたこのタイミングで！？という向きもあるかとおもいますが、LLMの世界は一ヶ月もすればまったく違う状況になっているのが常なので、いずれは GPT-4o を超えるモデルが発表される時も来るでしょう。 Claude 3 Opus は一時期 GPT-4 のスコアを超え、 Claude 3 Haiku では GPT-3.5-Turbo のトークン当たりで約半額とコストパフォーマンスに優れていますし、 AWS Bedrock 経由で安定して利用できることもあり、Claude 3 は乗り換え先の候補の一つです。 Claude 3 への乗り換えには、点々とつまづくポイントがあるので、引っかかった所と回避方法をご紹介します。 今回紹介する内容はClaude 3に限らないものもありますので、ローカルLLM や他のLLM への乗り換え
ActiveRecord::Base.transaction(joinable: false)を使ってはいけない - SmartHR Tech Blog
注意喚起の記事になります。タイトルが結論です。 既にこの問題に言及している記事はいくつかあるのですが*1、私は気付かずに踏んでしまったので、タイトルで「おっと、うちは大丈夫かな」と思ってもらえるようにこの記事を書いています。 joinableとは何か 問題として挙げているjoinableオプションですが、これはネストしたトランザクションの挙動に影響を与えます。少しややこしいので、サンプルコードを見せながら説明します。 # frozen_string_literal: true require "bundler/inline" gemfile(true) do source "https://rubygems.org" git_source(:github) { |repo| "https://github.com/#{repo}.git" } gem "activerecord", "7.
今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }
「OpenAI Python API Library」のインタフェースが一新されたので、かるくまとめ直しました。 ・OpenAI Python API library v1.1.1 1. OpenAI Python API LibraryPythonで「OpenAI API」にアクセスするには「OpenAI Python API Library」を使います。 2. セットアップColabでのセットアップ手順は、次のとおりです。 (1) パッケージのインストール。 # パッケージのインストール !pip install openai(2) 環境変数の準備。 以下のコードの <OpenAI_APIキー> にはOpenAIのサイトで取得できるAPIキーを指定します。(有料) import os os.environ["OPENAI_API_KEY"] = "<OpenAI_APIキー>"(3)
朗報！ これでCSSネストの記述方法がより簡単になります
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relaxed syntax update by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 要素タグのネスト このネストを可能にするために何が変更されたのか はじめに CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされています。
Googleが数カ月前から一部の国と地域でFitbit製品の販売を停止していたと米メディアが報じた。Googleはメディアに対し、Googleのハードウェアポートフォリオを調整するためと説明した。 米GoogleがEUや南米などの一部の国と地域でFitbit製品の販売を停止していることが、サポートページで明らかになった。米Android Authorityが11月9日（現地時間）にまず報じた。 サポートページによると、香港、韓国、マレーシア、タイ、フィリピンでは8月11日に既にFitbitプレミアムの自動更新が停止されている。 欧州では、クロアチア、チェコ共和国、エストニア、ハンガリー、ラトビア、リトアニア、ルクセンブルク、ポーランド、ポルトガル、ルーマニア、スロバキアで10月24日に停止された。 メキシコとすべての南米諸国でも販売停止になっている。 GoogleはAndroid Auth
あれから進化的マージの試行錯誤を繰り返していたが、ついに相当性能が高そうなモデルが生まれた。 Umievo-itr012-Gleipnir-7Bである。 umiyuki/Umievo-itr012-Gleipnir-7B · Hugging Face ElyzaTasks100の平均スコアは3.91に達して、ついにGPT-3.5Turboのスコア（3.88）を上回ってしまった。 ただし、スコアが上回ってるからと言って性能が勝ってるというわけではない事に注意して欲しい。例えるなら、身長が高いからと言って強いわけではないみたいな話である。 前回の記事では少し誤解を招く書き方だったかもしれないが、そもそも7Bの小型日本語LLMなんてのは基本的にドアホである。間違ってもChatGPTの代わりに使えるなんて考えてはいけない。 とは言うものの、単なるドアホではスコア3.91なんて取れないという事もまた
2024年の実装に役立つCSSの新機能と使い方のまとめ
2023年の後半に、CSSの多くの新機能がすべてのブラウザにサポートされました。新機能が登場するときもワクワクしますが、やはりすべてのブラウザにサポートされてからが本番です。 2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。 5 CSS snippets every front-end developer should know in 2024 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
最初のARMORED CORE「AC1」をプレイしたのは小学生の時だった。27年前だ。 親友が持っていたのを一緒に遊んで、それが面白くて、給食のハンバーグをあげることを条件にそのソフトをもらった。 (当時、親友にとっての天秤はもっぱら花ではなく、目の前の団子のほうだった) 中学生になり、PS2の登場と共に「AC2」となってこれも遊び尽くした。以来仕事を始めるまでは新作毎に遊び続けたものの、この小中学生の時こそが自分の血肉となるような不思議な体験だったように感じる。 最新作「AC6」はその時の記憶を掘り起こしてくれた。 その基準というのも、回りくどい言い方をすれば「闘争の果てに…畑を耕し始めてしまった」こと。全てのバトル要素を終えた後にやることと言えば、ゲーム世界をのんびり探索し、ただただ眼福にあずかること。 PS1時代から27年をかけて研鑽されてきた、この「アーマードコア」の世界のそんなち
Small String Optimization で Rust ライブラリ ratatui を最適化した話 - はやくプログラムになりたい
最近 ratatui という crate に Small String Optimization を利用した最適化を入れたので，その話を書きます． 目次 Small String Optimization (SSO) とは（SSO を既に知っている人は読み飛ばして大丈夫です） Rust で SSO を適用した文字列型を提供する crate 比較 SSO を利用して ratatui のメモリ効率と実行効率を最適化した話 compact_str crate の実装の最適化の話 インラインストレージに24バイト全てを使える理由 隙間最適化のための工夫 説明を簡潔にするため，特に断りが無い場合 64bit アーキテクチャを前提とします． Small String Optimization (SSO) とは Rust の可変長文字列型 String は文字列バッファへのポインタ，文字列の長さ，バッフ
ZOZOTOWNのフロントエンド開発にCSS in JSを導入して2年後の状況 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 CSS in JS導入後の運用状況 ZOZOTOWNの開発体制は、Webフロントエンドだけでも5つのチームが存在し、さらに外部の業務委託メンバーも加えると、開発に携わるメンバーは執筆時点でのべ50名を超
※本記事はアフィリエイト広告を利用しています。 サクっとひとりランチにも、おしゃれパーティー料理にも、どんなシーンにも合わせられるピカールのサラダボウルはストックしておいたら確実に使える一品。 ベジタブルボウル カレー風味 598円(税込) カリフラワー、サツマイモ、グリルしたズッキーニをココナッツが香るカレーソースで絡めました。パンやライスに添えればご自宅で気軽にインド風カレーの味わいをお楽しみいただけます。 紙の容器は蓋を開けずにそのままレンジ600Wで7分半。だいたいピカールの調理時間設定は長めなので、うちは500Wですが同じ7分半で大丈夫。 ココナッツとカレーのイイ香りが漂います。ベジタブルボウルと言う名前だけど、野菜のカレー煮込みのような感じ。 原材料:カリフラワー、さつまいも、グリルズッキーニ、ココナッツミルク、米粉、カレーペースト（香辛料、植物油脂、玉ねぎ、生姜、にんにく、食
初めに 具体的なコードや方法も記述しますが、それよりも JUnit などの自動テストのFW、ユニットテストの概念や目的など本質的なことを把握し理解する事を主題にしてます。 また、参考資料欄にあるように、様々なものを参考に網羅的にまとめています。非常にボリュームがるので興味あるところだけ読んでもらう方が良いかもしれません。 こちらでは、ある程度開発経験（1〜2年程度）があり、自動テストについて少しでも触れた事があるくらいの方が対象になる記事です。自分がそうだからです。ただし、コンパイルエラーにならないだけの書き方では意味がないのでそういった構文やお作法に関する話はあまりしません。なぜそのようなお作法になったのか？そうである理由は何なのか？トレードオフは？といった、本質的な部分にフォーカスを当てていきたいと思います。 1. 概要 JUnit は Java 言語向けのユニットテストフレームワーク
Railsガイドにきちんと目を通して新しい知識を得る - Active Support コア拡張機能編 - - PLAY BALL
ドキュメントを読み込むのは大事、ということでRailsガイドを頭から読んでいく取り組みをしています。 各章ごとに、（Railsガイドにちゃんと書いてあるのに）知らなかった機能を雑にまとめていきます。 今回は、Active Support コア拡張の章です。 railsguides.jp deep_dup リンクはこちら dupでは、コピーした配列の中身がgsub!などで変化する場合、コピー元の配列の中身まで影響しますが、deep_dupでは影響を受けないようにできます。 このあたりは意図せぬバグを混入させてしまわないよう、きちんと理解しておく必要があるなと思いました。 try リンクはこちら &.とtryは似ていますが、存在しないメソッドを指定した際に、前者はNoMethodErrorを返し、後者はnilを返します。 &.とtry!は挙動自体は同じようです。 ただし、try!は&.と比べる
正直2つだろうが4つだろうがスペースだろうがタブだろうが何でも良い派なのですが、ふと気になって調べてみたら個人的に新しい観点の発見があったので記事にしてみました。 ※オフィシャルの見解を探すまでは頑張れなかったのですが、適当にググって出てきた中で見つかった興味ある観点の紹介になりますm 見たのはこちらのページ。 色々議論されてますが、個人的になるほどな、と思ったのは、スペース4個（要はある程度インデント確保する）だと、深いネストでコーディングされることを抑止しやすい意図があるという点でした。（もしかしたら他のエンジニアの方にとっては当たり前の観点なのかも...） 今回個人的にめちゃくちゃどうでも良い違和感から始まりましたが、案外新しい観点が見つかったりして面白い体験でした。
こんにちは、23卒の新卒エンジニアのfujinoです。今回は弊社のサービスでReactのフレームワークであるRemixを使い始めた話をしようと思います。 背景 弊社では今までVue.jsのフレームワークであるNuxt.jsを用いてフロントエンドを実装していました。 これは、採用当時は生のhtmlが使えるのが良いと思っていたことや、Vue.jsの経験のあるフロントエンジニアがチームにいたことが理由でした。 しかし、最近ではTypescriptとの親和性や、コミュニティの大きさなどの理由からReactの方が勢いがあるように感じます。 弊社でも少し前からReactに移行することを決定し、現在進行形でNuxt.jsからReactへの移行プロジェクトを進めています。 Reactの主要なフレームワークとして、Next.jsとRemixが挙げられます。 両者の違いとして、Next.jsはSSG（Stat
Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
チェックボックスの indeterminate 状態は将来多分なくなるdate2024.3.14(Thu.)tagsDesignFrontend 近年お手本にしがちなデジタル庁の Design System では定義がされていませんでしたが、「チェックボックスの indeterminate 状態」について考えたところ、多分将来的に無くなるんだろうなと予想を立てました。 第三の状態: indeterminateチェックボックスを使ったフォームが入れ子のとき、子が全て選択されていないことを示す表現として indeterminate が使われることがあります。 基本的にはチェックされているかいないかを表す checked 属性の true false を使いますが、別の属性として indeterminate (未決定状態)属性 の true か false があるため、トライステートとなります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
もう一度読むObservability Engineering - じゃあ、おうちで学べる
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
理解しやすいコードの書き方～理解容易性の7つの観点～ - Qiita
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
Remix vs Next.js - React Japan
OS徒然草 (1) - VA Linux エンジニアブログ
Rustで作るプログラミング言語 ——コンパイラ／インタプリタの基礎からプログラミング言語の新潮流まで
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
MisskeyのUI設計 | gihyo.jp
【翻訳】Prettier の新しい三項演算子のフォーマットを試してみてください
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
Ruby Parser開発日誌 (14) - LR parser完全に理解した - かねこにっき
Prism：エラートレラントな、まったく新しいRubyパーサ | gihyo.jp
Next.js + Hono + AWS でイベント駆動なプロフィール交換アプリを開発！
GPT から Claude 3 への移行ガイド - Gunosyデータ分析ブログ
SCSSからCSSネスティングに切り替えたい人に贈る3つの罠 - Qiita
OpenAI Python API Library v1.0 入門｜npaka
Google、Fitbit製品を約30カ国で販売停止
最近の7B小型日本語LLMはエージェントになれるのか？
「アーマード・コア6」の酔狂な遊び方：メカとキャラを愛すること - tete blog
ストックした者勝ち【ピカール】のベジタブルボウル - ツレヅレ食ナルモノ
JUnitで学ぶ実践的で本質的なユニットテストの考え方 - Qiita
なぜRustの標準スタイルではインデントが半角スペース4つなのか
Remixを使い始めた話 | Money Forward Kessai TECH BLOG
チェックボックスの indeterminate 状態は将来多分なくなる - feb19