この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
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
Reactで余白をどうスタイリングするか
最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない まず前提として「子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない」です。 (太古に書いた記事から具体例を引用) 例えば、こんな感じのアイコンが複数並べたコンポーネントが存在するとします。 アイコンの間にはmarginが等間隔でありますね。 このmarginをアイコンコンポーネント内で定義していたとしましょう。 さて、他のページでこ
はじめに 配属研修の課題について エンジニア新入社員研修の個人課題：「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 を使い始
個人開発の 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 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
マークダウンパーサを作ろう - エムスリーテックブログ
デジカル開発メンバーの末永(@asmsuechan)です。電子カルテの開発を通して医師や医療事務の方の「書く」をサポートしています。 みなさん、マークダウンでテキストを書いていますか？私はマークダウンで書くことが好きで、プレーンテキストでもほとんどのメモをマークダウン記法で書いてしまいます。この記事もはてなのマークダウンを使って書いています。*1 マークダウンを使えるサービスを挙げていくとGitHubやStackOverflowなど開発者ならば誰しも知るサービスが多く出てきます。このことからもわかるように、マークダウンはもはや開発者とは縁の切れないものとなっています。 しかし、普段の開発時によく使うマークダウンですが、実際にはどのような仕組みで動いているのかを知る人は少ないのではないかと思います。 この記事ではオリジナルのマークダウンパーサ「minute」をTypeScriptを使ってハン
私たちに最も寄せられる質問は次のようなものです： 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 やってよ」
「一人の天才プログラマーがほとんど一人でシステムを作ったがドキュメントはなくて誰もメンテできないときってどうするの？って話」 https://togetter.com/li/1549364 1人の天才プログラマーがシステムをほとんど1人で作ったんだが、ドキュメントが残っておらず、他に誰もメンテできる人がいない。 みたいな状況って、みんなどう対応してるの？— やまぶん (@yamabunmath) June 25, 2020 保守不可能な糞コードは山ほど見てきたけど，そんな状況は一度も見たことがない．*1 ヘッポコ管理職が，社長を説得するためにそう説明しただけじゃないかね．まさか「自分はバカなので，デザインパターンとか平行プログラミングとか分かりません」なんて口が裂けても言わないもの．*2 またヘッポコプログラマーには自分に理解できないコードが，それが自分の理解を超えているからなのか，単純に
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を使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
こんにちは。広瀬マサルです。 これまでのパッケージをまとめて統合Flutterフレームワークを作成しました。 コンセプトは 自動生成を用いて安全かつ高速に高品質のアプリを開発可能にするフレームワーク です。 使い方をまとめたので興味ある方はぜひ使ってみてください！ masamune はじめに まずはこちらを御覧ください。 ※動画のサンプルコードはこちらに公開しています。 こちらはメモ帳アプリを全くの空の状態からわずか10分以内で完成させる動画です。 このMasamuneフレームワークを利用することでアプリ開発で行うコーディングの大半を削減することが可能になります。 このフレームワークは下記の機能を中心としています。 CLI（コマンドラインインターフェース）ツールによるコードテンプレートの生成 build_runner による追加コードの自動生成 つまりコードの大半を機械的に生成させることに
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では対
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
Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブに変化する UI では、状態管理が複雑化し、コードの可読性が低下することがあります。その結果、バグが発生し、予測しにくい動作を引き起こすことも少なくありません。 そこで今回は、 zustand を導入
一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、技術的な知見を書きます🚀 About Me 株式会社ヘンリー でソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on GitHub @kohii00 on Twitter 作ったもの 説明 詳しい説明： サービスの詳しい紹介はこちらに書いたので読んでみてください 🙏 雑な説明： Moyuk は TypeScript で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。 技術的要素の概要 Moyuk には一般的なアプリケーション（データの出し入れやUIの描画など）としての要素に加えて、以下のような特徴的な要素があります。 ユーザーが書いた TypeS
はじめに コンピュータのアーキテクチャ プログラムの構造 あとがき 執筆者 : 小田 逸郎 ※ 「OS徒然草」連載記事一覧はこちら はじめに 筆者は自分のことを OS 開発者 (OS屋) だと思ってます。最近は、OSにあまり深く関われていないのですが、筆者が若かりし頃に情熱を注いだものであり、筆者の基盤をなしているものであることには間違いないです。 筆者が OS (UNIX) の開発に携わり始めたのは、1986年のことなので、もう40年近く経ってしまいました。その間に OS の規模も随分大きくなってしまったようです。 筆者が始めた頃の UNIX は、デバイスドライバを除くと、20K行くらいだったと記憶しています。 全コードをラインプリンタで出力、コピー、製本し、皆で読み合わせて、勉強会をしたりしていました。そんなことができる分量だったのです。 今の Linux の規模はどれくらいでしょうか
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章：プログラミング
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
ひかえめにいっても最高傑作：Fitbit Charge5
控えめに言ってもFitbitトラッカーの最高傑作。 Fitbitといえば、フィットネスや睡眠、ストレスのケアができるスマートウォッチやトラッカーのパイオニアのひとつ。 私はここ2年ほどFitbitのアイテムとともに過ごし、アップデートされるたびに実機を触らせてもらっています。なので、Fitbit Versa以降のスマウォやトラッカーはだいたい試してきているのですが、そんな私が｢これは最高傑作では…！ ｣とテンション爆上がりになるトラッカーが新登場しました。それが、｢Fitbit Charge 5｣です。 ストイックなトラッカーFitbit Charge 4の後継機｢Fitbit Charge 5｣は、ストイックに体を動かして記録することに特化したフィットネストラッカーである｢Fitbit Charge 4｣の後継機です。ストイックさはそのまま、液晶はカラーディスプレイとベゼル幅が狭くなった
ネストしたコンテキストマネジャーの簡潔な記述 分かりやすくなったエラーメッセージ デバッグやプロファイリング用に提供される行番号がより正確なものに 構造的パターンマッチ ファイル操作などでエンコーディングを明示しなかった際にEncodingWarning警告クラスを送出するようにオプトイン可能 「|」演算子を使用したユニオン型の指定 パラメーター仕様変数 型エイリアス ユーザー定義の型ガード 本稿では、これらの新機能の中で新しく追加された構造的パターンマッチ（match～case文）について見ていくことにする。なお、構造的パターンマッチについてはPEP 634、PEP 635、PEP 636で詳しく述べられている。 match～case文の概要 match～case文の構文を以下に示す。なお、「match」と「case」はソフトキーワードであり、構造的パターンマッチを行う文脈でのみキーワー
ドメイン分析とモデル化ここで「モデル化」と呼ぶのは、実装者が理解しやすいように重要な側面に注目して、端的な形に抽象化する行為であると定義します。 また、実際に実務で行なっている自身のモデル化を行う時の書き振りを近しく再現(中身は変更)しているため、わかりづらいかもしれませんが、”実務ではこうやっている” というのを理解していただければ。 先の要件を整理すると、数という概念に金額とポイントという2つのドメインモデルが含まれる。 金額とポイントという異なる概念を計算して最終的に獲得ポイント数を導き出す必要がある。 存在する制約 金額が負の数になることはありえない。ポイントが負の数になることはありえない。金額は日本円のみを考慮し、外貨は存在しない。ポイントは文脈によって呼び名が変わるが、単位は変わらない。支払い金額合計以上にポイント利用数が設定されることはない。金額に小数点は存在しない。ポイント
【オフショア】ベトナムメンバと理解する「PHPリーダブルコード」 〜第1回 表面的な改善〜 - RAKUS Developers Blog | ラクス エンジニアブログ
本稿では、ベトナムとのオフショア開発において利用できるよう、"リーダブルコード" の内容をもとに筆者が解釈したものを、社内用資料として日本語とベトナム語の両方で解説したものです。*1 この記事を日本チームとベトナムチームのメンバに読んでもらうことで、"リーダブルコード" の知識がチーム間の共通認識となり、プログラムコードの品質が向上することを目的としています。 全2回を予定しており、第1回である本稿は、「表面上の改善」について解説します。 Trong bài post này, tôi sẽ tóm tắt nội dung của "Readable code" và giải thích bằng cả tiếng Nhật và tiếng Việt, để có thể sử dụng trong việc phát triển Offshore với Việt Nam. Khi
CUE言語(cuelang)に入門しよう
Abstruct 本記事においては、The CUE Configuration Languageを用いて設定ファイルを記述することはどのようなメリットがあるのか。また、どのような使い方が想定されるのかについて議論する。 私は、実際の開発現場において、各マイクロサービスチームがKubernetesのManifestを生成するテンプレートとして活用している。 そのため、KubernetesのManifestをcuelangを用いて記述している。(この件に関する記事は現在執筆中だ。) その経験から、CUE言語がどのような言語であるかについてここで述べることにする。 Keyword: CUE, cuelang, configuration, 設定記述言語, JSON, YAML, Kubernetes, manifest Introduction あなたは普段どんな設定記述言語を利用しているだろう
この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません． はじめに 世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA [1] を開発されている方もまだまだ多いのではないでしょうか． 私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています． こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されま
CISSP 勉強ノート
目次の表示 1. 情報セキュリティ環境 1-1. 職業倫理の理解、遵守、推進 職業倫理 (ISC)2 倫理規約 組織の倫理規約 エンロン事件とSOX法の策定 SOC (System and Organization Controls) レポート 1-2. セキュリティ概念の理解と適用 機密性、完全性、可用性 真正性、否認防止、プライバシー、安全性 デューケアとデューデリジェンス 1-3. セキュリティガバナンス原則の評価と適用 セキュリティ機能のビジネス戦略、目標、使命、目的との連携 組織のガバナンスプロセス 組織の役割と責任 1-4. 法的環境 法的環境 契約上の要件、法的要素、業界標準および規制要件 プライバシー保護 プライバシーシールド 忘れられる権利 データポータビリティ データのローカリゼーション 国と地域の例 米国の法律 [追加] サイバー犯罪とデータ侵害 知的財産保護 輸入と
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
理解しやすいコードの書き方～理解容易性の7つの観点～ - Qiita
UI・UXに強い！デザインシステムにおすすめ Figmaプラグイン20選
良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
研修で初めてRuby on Railsを触って学んだこと - ドワンゴ教育サービス開発者ブログ
OpenAPI Spec を出力できる DSL、TypeSpec の実践例 - ドワンゴ教育サービス開発者ブログ
Remix vs Next.js - React Japan
「天才プログラマーが作った糞コード」という都市伝説 - カレーなる辛口Javaな加齢日記
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
【Next.js】実務でapp routerに移行した所感
軽量な Go 製カラムナフォーマット変換ツール columnify を作った話 - Repro Tech Blog
【Flutter】わずか数分でアプリ開発！？超速アプリ開発総合フレームワーク「Masamune」
Vue に stale-while-revalidate がやってくる - STORES Product Blog
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
脱Firestoreするために考えていること（追記あり） - Sweet Escape
RBS基礎文法最速マスター - pockestrap
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史 | ログミーBusiness
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術
OS徒然草 (1) - VA Linux エンジニアブログ
dataclassを捨ててpydanticに乗り換える
Rustで作るプログラミング言語 ——コンパイラ／インタプリタの基礎からプログラミング言語の新潮流まで
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
Python 3.10の新機能：「構造的パターンマッチ」とは
Value Object (値オブジェクト) でリファクタリングしたら結構良かった
React Router から TanStack Router へ徐々に移行する技術