最近鬱状態になっていて自分の意見書くのがしんどいので自分の意見は過去に書いたnoteからコピペするだけにとどめます。 ブログ主の意見 なんか賛成してる人でも結構ここ間違えてる人多い気がするのですが、この問題は「サイゲームスの言い分が絶対に正しい」わけじゃありません。 ぶっちゃけサイゲームスさんにはツッコミどころは多いです。 性的なものとかイメージ毀損が問題といってるくせに水着姿でターフ走らせるとか舐めとんのかとキレてる人もいます。もっとも、水着イベントよりもウマネストのほうが不評だったのはオタクっぽいなと笑いましたが。 なので、今グラブルで同じことを言っても多分オタクは反発すると思います。 しぶしぶ従いはするでしょうが、文句はめっちゃ言われるでしょうし、反発でゲーム引退する人も続出するでしょう。 「オタクは別に著作権者の言うことであれば無条件でニコニコ従うわけではない。そこまで物わかりは良
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
「振り返ってみると失敗だった！」ということを、アーリーステージスタートアップの最前線で活躍しているエンジニアの方々が赤裸々LT形式で語る「スタートアップ開発しくじり先生LT」。ここでファンファーレ株式会社の中山氏が登壇。フロントエンドの立ち上げで起きたしくじりについて語ります。 自己紹介と会社紹介 中山太雅氏（以下、中山）：「フロントエンドをゼロから作り上げしくじってきた青春の思い出」ということで、話します。ファンファーレの中山と言います。よろしくお願いします。 時間がないので早口になってしまうと思いますが、ちょっとお許しください。発表内容ですが、大小いろいろ織り込もうと思いましたが時間の関係上、大にフォーカスしてお送りしようと思ってます。すみませんがご了承ください。 こんな感じで話そうと思っています。自己紹介と会社紹介をした上で、何をしくじったのかを最初に伝えて、そのバックグランドという
はじめに 本書『Observability Engineering』は、複雑化の一途をたどる現代のソフトウェアシステムに立ち向かうための、強力な武器となる一冊であり本稿はその読書感想文です。Observability Engineering を今から知りたい方はもちろん、Observability Engineering の基礎を改めて学びたい方もぜひお読みください。この記事もかなりの長さになるので普通に書籍を読んだほうがいいかもです learning.oreilly.com 「Observability:可観測性」という言葉は、近年ソフトウェアエンジニアリングの世界で大きな注目を集めています。しかし、その概念の本質を理解し、実践に移すことは容易ではありません。 本書は、そのオブザーバビリティについて、その基本的な考え方から、具体的な実装方法、そして組織への適用まで、幅広くかつ深く解説して
Reactハンズオンラーニングを読んだので感想
はじめに この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。 こちらの本を紹介したいなという、ただの布教記事です。 自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが こちらの本を読んで、まだまだ序の口だったのだなと感じました。 もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。 ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので そういった人にはとても有益な本になるのではないかと思います。 こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。 本の構成について ツールの紹介 から始まります。 Github React Dev Tools Node などの説明があります。 JavaScri
開発生産性を120%にブーストするIntelliJ IDEAのプラグイン紹介 - Retty Tech Blog
この記事はRetty Advent Calendar Part2の17日目の記事です。 はじめに おすすめプラグイン紹介 Git系 GitToolBox Find Pull Request GitLink エディタ拡張系 InspectionLens Randomness Rainbow Brackets ショートカット関連 Mnemonic Keymap Key Promoter X その他 EnvFile JsonParser Awesome Console おわりに はじめに Rettyで生産性改善を担うProductivityチームに所属している山田です。 生産性改善というと技術負債に立ち向かって開発しやすい環境を整備する、定型作業を自動化して本質的な作業に向かいやすくする、といった大掛かりなものが思い浮かびやすいと思いますが、普段使っているツールを最大限に活用して短い時間で仕事を
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 「理解容易性」は「保守性」の観点の1つとして重視され、多くの原則や技法が紹介されているが、断片的かつ多様であり、全体像を理解することは難しい。 抽象度は高いが、体系的に観点を整理する事で、その理解の助けとなれば幸いである。 定義 「理解容易性」を簡単に言えば、「理解のしやすさ」であるが、その意味から掘り下げると、「思考する量」と言い換えることができる。 本記事では理解容易性を「思考量の少なさ」と定義し、7つの観点に整理した。 先に要約およびチェックリストを記載し、概略を記載した。 後に詳細で理解のため、各観点毎の説明と個別の原
Figmaの使い方はとてもシンプルですが、デザインシステムの作成となると話は別です。 ストレスの多い作業プロセスになりがちですが、幸いにもFigmaにはそんな苦悩から救ってくれる、便利プラグインが数多く公開されています。 プラグインはデザインプロセスに欠かせないツールで、プロジェクト特有の問題点を解決したり、面倒な作業を自動化するなど、時間短縮にもつながります。 しかし、膨大な数のプラグインから自分にあったものを探すのは時間がかかるのも事実。 ここでは、デザインシステムの作成、管理、運用に役立つFigmaプラグイン20個をピックアップしてご紹介します。 無料ダウンロードできる良質UIテンプレート集を活用して、すぐに新しいプロジェクトをはじめてみましょう。 Figma Tokens Figma Tokens プラグインは、プロジェクトの配色や書体、境界線の半径サイズや余白サイズなどのグローバ
この本の概要 「ITエンジニア本大賞2023」技術書部門で大賞受賞！ 本書は，より成長させやすいコードの書き方と設計を学ぶ入門書です。 システム開発では，ソフトウェアの変更が難しくなる事態が頻発します。コードの可読性が低く調査に時間がかかる，コードの影響範囲が不明で変更すると動かなくなる，新機能を追加したいがどこに実装すればいいかわからない……。 変更しづらいコードは，成長できないコードです。ビジネスの進化への追随や，機能の改善が難しくなります。 成長できないコードの問題を，設計で解決します。 こんな方におすすめ コードの設計スキルに興味がある人 日々，悪いコードと向き合っていて改善したい人 より良いコードを書きたい人 1 悪しき構造の弊害を知覚する 1.1 意味不明な命名 1.2 理解を困難にする条件分岐のネスト 1.3 さまざまな悪魔を招きやすいデータクラス 1.4 悪魔退治の基本 2
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Docker Desktop for Windows 原文 、ウェブ版原文 2020年6月4日現在の情報です。 Windows 10 Pro で Docker Desktop をセットアップする手順については、別途記事をまとめ ています。 WSL 2 対応 Docker Desktop for Windowsを使うための手順 - Qiita https://qiita.com/zembutsu/items/22a5cae1d13df0d04e7b 目次 Docker for Windowsを始めよう WIndows に Docker D
Reactで余白をどうスタイリングするか
最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない まず前提として「子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない」です。 (太古に書いた記事から具体例を引用) 例えば、こんな感じのアイコンが複数並べたコンポーネントが存在するとします。 アイコンの間にはmarginが等間隔でありますね。 このmarginをアイコンコンポーネント内で定義していたとしましょう。 さて、他のページでこ
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
はじめに 配属研修の課題について エンジニア新入社員研修の個人課題：「JavaScriptでの開発」 配属研修課題1：「RailsでAPIサーバのみ構築」 配属研修課題2：「Railsでフロントエンドも含めた開発」 作ったアプリケーションの概要 JavaScript・Expressで開発した時との違いに関する感想 letやconstが要らない変数定義 falsyな値の違い ブロックをそのまま変数に代入できない 暗黙のreturn 条件文の後置 フレームワークの機能が豊富 ディレクトリ構造の一貫性 リソースベースルーティング 課題を取り組みながら学んだこと OpenAPIを使ったAPI定義ファイルの作成 N+1問題対策 テストコードに関する考えの変化 おわりに We are hiring! サムネイル画像 はじめに こんにちは。2022年4月に新卒で入社しました教育事業本部サービス開発部バッ
この記事はドワンゴ Advent Calendar 2024の 1 日目の記事です。 はじめに こんにちは。ZEN IDの開発をしている、エンジニアのユーンです。 株式会社ドワンゴは先日2024年11月16日に開催された日本最大級のTypeScriptをテーマとした技術カンファレンス TSKaigi Kansai 2024 にプラチナスポンサーとして協賛いたしました。 ドワンゴのスポンサーブース 私は個人でセッション「型付き API リクエストを実現するいくつかの手法とその選択」を発表し、OpenAPI を中心とした手法を一例として紹介しました。 speakerdeck.com このセッションで OpenAPI を記述する手段として紹介した TypeSpec について、 ZEN ID での実践例を交えて深く取り上げます。 OpenAPI の手書きに疲れた方、また TypeSpec を使い始
「一人の天才プログラマーがほとんど一人でシステムを作ったがドキュメントはなくて誰もメンテできないときってどうするの？って話」 https://togetter.com/li/1549364 1人の天才プログラマーがシステムをほとんど1人で作ったんだが、ドキュメントが残っておらず、他に誰もメンテできる人がいない。 みたいな状況って、みんなどう対応してるの？— やまぶん (@yamabunmath) June 25, 2020 保守不可能な糞コードは山ほど見てきたけど，そんな状況は一度も見たことがない．*1 ヘッポコ管理職が，社長を説得するためにそう説明しただけじゃないかね．まさか「自分はバカなので，デザインパターンとか平行プログラミングとか分かりません」なんて口が裂けても言わないもの．*2 またヘッポコプログラマーには自分に理解できないコードが，それが自分の理解を超えているからなのか，単純に
個人開発の 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
【React/Vue.js】UIコンポーネントのProps設計と具体的な作り方 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、UI コンポーネントの Props 設計について紹介します。 コンポーネントを初めて作る方や作り慣れていない方は、どのような Props 設計にすれば、汎用的にできるのか、どこまで Props に持たせるべきか悩んだことがあるのではないでしょうか。本記事では、具体的な実装例を元に解説していきますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、UI コンポーネントの Props 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
2023 年、改めて React と Elm Architecture を比較する - ジンジャー研究室
最近 React のドキュメントが新しくなったということで読んでみた。第一印象としては、とにかく懇切丁寧で React というか JavaScript すら初心者という読者でも基礎的な考え方が身に付くようになっている。ただ、深い内容まで読み進めると「同じ Virtual DOM のフレームワークでも Elm とだいぶ違うな」と改めて思った。 これはどちらが良いとか悪いということではなく、一長一短あると思う。筆者は長いこと Elm を使ってきたが React も嫌いではなく、趣味を含め色々な場面で重宝している。ただ、 Elm Architecture の提供するシンプルな仕組みには依然として価値があると思っており、それがあまり世の中に知られていないのが勿体無い。というのが、この記事を書こうと思った動機である。 昔は「部分的に取り入れても Elm メリットは享受できないから Elm やってよ」
RFC 8725 JSON Web Token Best Current Practices をざっくり解説する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ritou です。 今回は RFC 8725 JSON Web Token Best Current Practices を紹介します。 みんな大好き JWT (JSON Web Token) の BCP ときたらチェックせずにはいられないでしょう。 概要 JWTは 署名/暗号化が可能な一連のクレームを含む、URLセーフなJSONベースのセキュリティトークン です JWTは、デジタルアイデンティティの分野および他のアプリケーション分野の両方の多数のプロトコルおよびアプリケーションにて、シンプルなセキュリティトークンフォーマットとして広く
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？ 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
外部ユーザが安全かつ直接的に Amazon S3 へファイルをアップロードできるようにする方法 | Amazon Web Services
Amazon Web Services ブログ 外部ユーザが安全かつ直接的に Amazon S3 へファイルをアップロードできるようにする方法 このブログは 2022 年 3 月 24 日に Anderson Hiraoka (Solutions Architect) と、Rafael Koike (Principal Solutions Architect) によって執筆された内容を日本語化した物です。原文はこちらを参照して下さい。 企業では、ファイルや画像などのデジタル資産をリポジトリに保存することが求められることが多くあります。多くの場合、これらのファイルのソースは、社内システムに接続されていないパートナーまたは個人であり、ファイルをアップロードするためには、企業の認証が必要となります。お客様は従来、ファイルのアップロードを処理するためにサーバーを使用していましたが、大量のネットワー
こんにちは。業務委託として SRE チームのお手伝いをしている @syucream です。 本記事では Repro にて開発した、 Go 製のカラムナフォーマットへのデータ変換ツール columnify について、開発背景や技術的な取り組みを紹介します。 なぜカラムナフォーマットか？ ことのおこり 事業がスケールすると共に扱うログの量が増えることは、喜ばしい反面さまざまな悩みをもたらします。その中でも顕著なものの一つとしてコストの問題が挙げられます。 膨大なログデータはログに対するストレージ料金を増大させると共に、分析や可視化に際してクエリで求められるコンピュートのコストも無視できなくなっていきます。 近頃 Repro でもコンテナのログの管理においてこの問題が顕著になってきました。Repro のバックエンドシステムは ECS 上のコンテナで実現され、ログの閲覧・管理のため外部のログ収集サ
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブに変化する UI では、状態管理が複雑化し、コードの可読性が低下することがあります。その結果、バグが発生し、予測しにくい動作を引き起こすことも少なくありません。 そこで今回は、 zustand を導入
こんにちは。広瀬マサルです。 これまでのパッケージをまとめて統合Flutterフレームワークを作成しました。 コンセプトは 自動生成を用いて安全かつ高速に高品質のアプリを開発可能にするフレームワーク です。 使い方をまとめたので興味ある方はぜひ使ってみてください！ masamune はじめに まずはこちらを御覧ください。 ※動画のサンプルコードはこちらに公開しています。 こちらはメモ帳アプリを全くの空の状態からわずか10分以内で完成させる動画です。 このMasamuneフレームワークを利用することでアプリ開発で行うコーディングの大半を削減することが可能になります。 このフレームワークは下記の機能を中心としています。 CLI（コマンドラインインターフェース）ツールによるコードテンプレートの生成 build_runner による追加コードの自動生成 つまりコードの大半を機械的に生成させることに
はじめに コンピュータのアーキテクチャ プログラムの構造 あとがき 執筆者 : 小田 逸郎 ※ 「OS徒然草」連載記事一覧はこちら はじめに 筆者は自分のことを OS 開発者 (OS屋) だと思ってます。最近は、OSにあまり深く関われていないのですが、筆者が若かりし頃に情熱を注いだものであり、筆者の基盤をなしているものであることには間違いないです。 筆者が OS (UNIX) の開発に携わり始めたのは、1986年のことなので、もう40年近く経ってしまいました。その間に OS の規模も随分大きくなってしまったようです。 筆者が始めた頃の UNIX は、デバイスドライバを除くと、20K行くらいだったと記憶しています。 全コードをラインプリンタで出力、コピー、製本し、皆で読み合わせて、勉強会をしたりしていました。そんなことができる分量だったのです。 今の Linux の規模はどれくらいでしょうか
STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。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 からランナーをロード
FirebaseのFirestoreをやめることにしたので雑なメモを残しておく。なお、まだ走り始めたばかりなので、内容には間違いや考慮不足も多数含まれる可能性があるので読む人はその点注意を。あと、あくまでも雑なメモなので細かいところは書いていない。 なぜ脱Firestoreするのか？ なぜGraphQLではなくREST APIなのか？ 移行にあたって検討したこと、決め事 ドキュメントIDをどう扱うか サブコレクションをどう扱うか 配列やマップといったフィールドのタイプをどう扱うか 追記: Mapの配列をどうするか Firebase Authenticationとセキュリティルールで実現しているセキュリティ機能をどうするか では実際にどんなテーブル設計にするのか 次にやること なぜ脱Firestoreするのか？ まず、脱Firestoreする理由は ユースケースとしてFirestoreでは対
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
RBSはRuby 3に組み込まれた、Rubyの型情報を記述する言語です。 この記事ではRBSの文法を駆け足で紹介します。 細かい話は飛ばしますが、この記事を読めば大体のケースでRBSを読み書きできるようになると思います。 事前準備 インストール まずは文法の前に、rbs gemをインストールしましょう。 Ruby 3を使っている場合、rbs gemはRuby 3に同梱されているため何もしなくても使えます。 Ruby 3未満を使っている場合でも、gem install rbsすれば使うことができます。 この記事では、rbs gem v1.0.0を対象に構文を紹介します。 $ gem install rbs Successfully installed rbs-1.0.0 1 gem installed $ rbs --version rbs 1.0.0 動作確認 書いたRBSは、rbsコマン
Go、Python、Kotlin、Rust、TypeScript の5つの言語について「並列処理、並行処理の手法」というテーマに絞り解説する「並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しよう」。JavaScript編では橘氏が登壇。JavaScriptが疑似的な非同期処理をどう実現しているのかと、JavaScriptの非同期処理の歴史について紹介します。 橘氏の自己紹介橘ゆう氏（以下、橘）：よろしくお願いします。風邪でめちゃくちゃ顔が死んでいるので、カメラオフでいきます。橘です。今日は「JSの非同期処理パターン Promise、async/awaitを理解する」というテーマについて話していきたいと思います。 簡単な自己紹介ですが、もともとDeNAにいて事業統合でそのままGOに移り、今は森下さん（森下篤氏）と同じチームで、主にサーバーサイドやMLOps
一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、技術的な知見を書きます🚀 About Me 株式会社ヘンリー でソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on GitHub @kohii00 on Twitter 作ったもの 説明 詳しい説明： サービスの詳しい紹介はこちらに書いたので読んでみてください 🙏 雑な説明： Moyuk は TypeScript で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。 技術的要素の概要 Moyuk には一般的なアプリケーション（データの出し入れやUIの描画など）としての要素に加えて、以下のような特徴的な要素があります。 ユーザーが書いた TypeS
Rustコアコミッターが解説する言語の最新情報 〜Rustの新しいTraitソルバをのぞいてみる〜 - Findy Engineer Lab
「効率的で信頼できるソフトウェアを誰もが作れる言語」を提唱するプログラミング言語 Rust。その優れたパフォーマンスやプログラムとしての信頼性・生産性の高さなどから、近年非常に人気を集めています。そんなRustでは、いったいどのような新機能が登場しているでしょうか。今回はコアコミッターである前田喬之さんに、最近Rustに実装された新しいTraitソルバについて寄稿していただきました。 はじめに 前田喬之といいます。SNSはTaKO8Kiというハンドルネームでやっていて、Rustのコミッターをしています。コンパイラのコントリビューターチームや、エラー周りの機構を実装するワーキンググループに所属しています。 Rustの新しいTraitソルバ RustにはTraitがありますが、Trait解決をするために裏側ではTraitソルバが動いています。この記事では、Traitソルバがどういうものか簡単に
Pydanticが今最高にCool こんにちは、極論モンスターのYosematです。pydanticに替えてdataclassを使う理由は今ほとんどありません。pydanticがV2になったこのタイミングでpydanticに乗り換えましょう。この記事ではなぜdataclassよりもpydanticなのか理由を述べていきます。 ※2024/02/26追記 OpenAIのクライアントもPydanticを採用しました 素敵なブログからの引用。ただし現在はdataclassもslotを導入している。slotを利用して通常より高速にフィールドアクセスしたい人はattrsやdataclassもアリ。 理由① より洗練されたインターフェース pydanticをdataclassに代えて使うのはなんといってもかゆいところに手が届くインターフェースです。はっきりいってdataclassも素晴らしいライブラリ
この本の概要 小さなプログラミング言語から本格的なプログラミング言語へ……ステップバイステップでの開発を通して，プログラミングそのものへの理解を深めよう！ こんな方におすすめ コンピュータサイエンス，とくにプログラミング言語そのものやコンパイラについての素養を得たいと考えている人 他言語でのプログラミング経験があり，Rustの習得に興味のある人。とくに，学習のための題材を探している人 第1章：プログラミング言語概論 プログラミング言語の分類 他の切り口での分類方法 コンパイルパイプライン 第2章：スタックベース仮想マシン 仮想マシン概論 Rustでの実装 標準入力からの読み込み パースとコマンドの実行 ブロックとネスト構造 if制御構文 変数の定義 複数行のソースコードへの対応 関数呼び出し 関数の再帰呼び出し WebAssemblyへのコンパイルとブラウザでの実行 第3章：プログラミング
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウマ娘「二次創作ガイドライン」に対するはてなブックマークの反応 - 頭の上にミカンをのせる
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
フロントエンド立ち上げで起きたアーキテクチャ設計の失敗 学び生まれたのは間違いを認めて負債を返済する文化
もう一度読むObservability Engineering - じゃあ、おうちで学べる
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
理解しやすいコードの書き方～理解容易性の7つの観点～ - Qiita
UI・UXに強い！デザインシステムにおすすめ Figmaプラグイン20選
良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
Docker Desktop for Windows （参考訳） - Qiita
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
研修で初めてRuby on Railsを触って学んだこと - ドワンゴ教育サービス開発者ブログ
OpenAPI Spec を出力できる DSL、TypeSpec の実践例 - ドワンゴ教育サービス開発者ブログ
「天才プログラマーが作った糞コード」という都市伝説 - カレーなる辛口Javaな加齢日記
Remix vs Next.js - React Japan
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
【Next.js】実務でapp routerに移行した所感
軽量な Go 製カラムナフォーマット変換ツール columnify を作った話 - Repro Tech Blog
【Flutter】わずか数分でアプリ開発！？超速アプリ開発総合フレームワーク「Masamune」
OS徒然草 (1) - VA Linux エンジニアブログ
Vue に stale-while-revalidate がやってくる - STORES Product Blog
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
脱Firestoreするために考えていること（追記あり） - Sweet Escape
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
RBS基礎文法最速マスター - pockestrap
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史 | ログミーBusiness
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術
dataclassを捨ててpydanticに乗り換える
Rustで作るプログラミング言語 ——コンパイラ／インタプリタの基礎からプログラミング言語の新潮流まで