はじめに 前回は、「Tauri 2.0」と「Rust」についての基本情報と環境整備を解説しました。今回は、実際にお絵描きアプリを作る前に、まずRustの文法についておさらいしておきましょう。もしRustの文法をよくご存知なら、この回は読み飛ばしても大丈夫です。特別なことは書いていません。 ただしプログラミング言語「C/C++」を知っていても、Rustには所有権という独特なメモリ管理の概念があるので、Rustが初めての方は必ず読んでください。「new」や「delete」とは一味違います。 Rustの知っておくべき文法 プログラミング言語において、最も基本で最も重要な文法の1つが「変数」です。 変数には値を入れたり見たり後から値を上書きしたりすることができます。変数に入れられる値には「データ型」という種類が決められています。数値の変数は算数と同じ計算ができます。またプログラムの処理をまとめて「

はじめに 私は、手を動かしながらOAuth2/OIDC認可コードフローを学びたいと思い、この記事を書きました。本記事ではAmazon Cognitoを使ってOAuth2/OIDCの認可フローを学ぶハンズオンです。使用するのはCurlだけで、アプリケーションコードの準備は不要です。 目次 登場人物は4人 認可コードフローの概要 詳細な手順 セキュリティを向上させるために まとめ 登場人物は4人 1. クライアント(フロントエンド) Webアプリや、モバイルアプリなど、ユーザーの目に触れる画面を指します。今回は画面がないので、curlコマンドなどで代用します。 2. 認可エンドポイント(API) ユーザーの入力したIDやPasswordを検証し、認証が成功した場合に認可コードを発行します。この時点ではログインに成功していません。

これはpyspa アドベントカレンダー 2024の12日目の記事です。11日目は@aodagの走るということについてでした。 はじめに​ この15年くらいは、おおむね平均すると毎年2，3人程度の技術者をOn the Job Training（OJT）で教育する機会に恵まれており、その中で蓄積した知見や私の考えを散発的に説明していきます。 私自身は受託開発を主たるビジネスとするシステムインテグレータ（SIer）と呼ばれる企業で働いており、足掛け25年程度のキャリアがありますがソフトウェアについて専門的な教育を受けたことはありません。また、教育についても同様です。 このエントリに記載された内容について何らかのエネルギーを注いでくれる方がいるなら、XあたりのSNSでURL付きで指摘して頂ければ非常にありがたいです。 教育によって形成される技術者像​ まずは、どのような技術者なら育てられるのでしょ

クイックサマリー：以前は、JavaScriptの正規表現は他の言語の正規表現に比べてパフォーマンスが劣っていたものの、近年改良が重ねられ、他の言語に見劣りしなくなっています。この記事では、Steven Levithan氏がJavaScriptの正規表現の歴史と現状を評価し、より読みやすく、保守性とレジリエンスに優れた正規表現の書き方をアドバイスします。 モダンJavaScriptの正規表現は、皆さんがよく知っている従来の正規表現と比べると随分進化しました。正規表現はテキストを検索して置き換えるツールとして非常に優れている一方で、書くのも理解するのも難しいという根強い評判があります（しかし今から説明するように、この認識は時代遅れかもしれません）。 正規表現に関するこの認識は、JavaScriptに特に当てはまります。PCREやPerl、.NET、Java、Ruby、C++、Pythonといっ

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

アーキテクチャカンファレンス２０２４　発表資料

「すべてのライフサイクルモデルの祖は、ウォーターフォールモデルである」とは、スティーブ・マコネルの言葉だ1。また、ソフトウェア開発ライフサイクル（SDLC）に関するGitHubの文書では、広く採用された最初のSDLCがウォーターフォールモデルであるとされている2。 そこに、ウォーターフォールを学ぶことに対する価値がある。それは、スクラムを導入し、アジャイルソフトウェア開発を実践する組織にも言えることだろう。いや、そうであるからこそだ。どんなソフトウェア開発プロセスモデルであろうと、ウォーターフォールから派生したり、何らかの影響を受けていると考えられる。したがって、ウォーターフォールへの理解から、自分達がやっていることの本質を見いだせるのではないだろうか。 ウォーターフォールなんて誰でも知っていると思うかもしれないが、そうとも限らない。確かにウォーターフォール未経験のソフトウェア開発者は少な

僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け

目次 目次 はじめに 開発生産性の歴史 工業製品のコスト管理 (1950~1970年代) 工業製品とサービス業の収益増加 (1980~2000年代) ITサービスの開発生産性 (2010年代~) 2024年現在の開発生産性 開発生産性の経営視点での構造化 B-1 プロセス改善 B-2 ソフトウェア化 B-3 技術的負債 B-4 開発者体験 2024年時点での開発生産性の現在地 まとめ 【採用】開発生産性の歴史を一緒に作りませんか？ 参考文献 はじめに 食べログ開発本部、品質管理室で室長をしている荻野です。近年ITサービス業界では、ビジネスを取り巻く変化に迅速に対応するため、アジャイル開発やDevOpsなどの開発プラクティスが普及し、開発生産性に関する議論が活発化しています1。 このブログ記事では、開発生産性の歴史をアジャイル開発の源流である日本の製造業まで遡って振り返った上で、開発生産性C

テクニカルライティングの基本を学べます。サイボウズの新入社員向け研修資料です。業務マニュアル、報告書、仕様書、技術解説書などのドキュメントを書く機会がある方向け。 本資料をもとにした書籍も発売中です：https://amzn.asia/d/2hQNEk2 Twitter：https://twit…

MySQLのレプリケーション方式には、デフォルトの非同期型と、プラグインをインストールすることでサポートされる準同期型が提供されています。 非同期レプリケーションはMySQL 3.23.15からサポートされ、準同期レプリケーションはMySQL 5.5から追加されました。 今回のブログでは、それぞれのレプリケーション方式の仕組みと、特徴の違いによる使い分けや設定方法について解説します。 １．MySQLのレプリケーション機能 MySQLのレプリケーションを有効化することで、複数のサーバで同一のデータを保持することができます。 レプリケーションの主な目的としては、障害時に備えた冗長化、負荷分散による性能向上、サーバを分けることによる役割分担、バックアップの代用などが挙げられます。 MySQLのレプリケーションは、1台をソース（マスタ）、他の複数のサーバをレプリカ（スレーブ）として、マスタからコミ

※ 当記事は、さくらじまハウス 2024 のLT「レンダリングを探訪する」 の書き起こしとして作成しました。 LT資料: はじめに この記事では、ブラウザのレンダリングについて掘り下げていきます。Web アプリケーション開発において、パフォーマンスの最適化や複雑なバグの解決は日常的な課題です。ブラウザのレンダリングフローを理解することで、それらの原因をより深く突き止めることができるようになります。 ブラウザと一口に言っても数多く存在しますが、今回は多くのブラウザで採用されている Chromium を題材に、そのレンダリングの仕組みを詳しく見ていきます。Chromium は Google Chrome、Microsoft Edge、Opera などで採用されているため、その仕組みを理解することは Web アプリケーション開発者にとって大きなヒントとなるでしょう。 ※ シェア列は、資料作成時点

本日のデモ 本日のソースコード タイトルには、文字数の限界で、DuckDB-Spatialという言葉を入れられなかったですわ。 もちろん、今回も、DuckDB-Wasmに加えて、DuckDB-Spatialも活用していますわよ。 はじめに わたくしは、学術的研究として、生成AIによるSQLクエリ生成、そして、生成AIによる地理空間情報の分析と可視化、といった事例が既に多数あることは知っていますわ。 しかしながら、いったい、どれだけの研究者が、そうした研究を、実際にどなたでもが触ることのできるWebアプリケーションやスマートフォンアプリケーションなどのソフトウェアプロダクトとしてデプロイして、本気で世界を変えたいという情熱を持っているのでしょうかしら？ わたくしは、どのようなアイデアも、ソフトウェアプロダクトとして、どなたでも試せるようにデプロイしてこそ、ようやく世界を変える第一歩目だと考え

以下のようなコードで、「setCount で count の値を 0 から 1 に更新したのに、console には古い値が表示されてしまう」ということがあると思います。(記事タイトルが不正確なのはわざとで、検索に引っかかって欲しいからです) const [count, setCount] = useState(0); const handleClick = () => { setCount(1); console.log(`同期: ${count}`); }; 「ステート 変更 反映されない」で Google 検索すると「それはステートの変更が非同期に反映されるから」という誤った解説が流布しています。 「setState の反映が非同期である」ことと「古い値を参照してしまう問題」は関係ありません。この記事で訂正できればと思います。 結論: 公式ドキュメントを見ろ React 公式の新ドキ

公式ドキュメントだと文字だけの情報なので、図解することで分かりやすく理解してもらえるように説明してみました。 わかり辛かったらすみません！ SQL Serverのロックとは DB上でデータを操作（SELECT/INSERT/UPDATE/DELETE等）する際、データの整合性を保つために使われる排他制御の仕組み。 例えば、「1つのレコードを一度に更新できるのは、1つのクエリだけ」といったルールを実現してくれる。 RDBMSのトランザクションのプロパティ「ACID」のうち、主にI（Isolation）を満たすための仕組みです。 SQL Serverのロックを理解するための3つのポイント １．ロックには複数の粒度（階層とも呼ばれる）が存在する ２．ロックには複数の種類が存在する（ロックモード） ３．各ロックモード間には「互換性」という関係性がある 以降で順を追って説明する。 なぜロックについて

v0とは v0（ブイゼロ）は、「Next.js」フレームワークの開発元としても有名なクラウドプラットフォーム企業Vercelが開発した、主にWebサイトやアプリケーションのUI（ユーザーインターフェース）コンポーネントの設計と開発を支援することを目的としたAIツールだ。 テキストプロンプトを入力するだけで、Webサイト用のUIコンポーネント（主にReactベース）やLP（ランディングページ）のコーディングができるのが本来の用途だが、最近はプレゼンテーション資料やその他のデザイン素材の作成にも利用できるということで注目を浴びている。 さっそく実際に使ってみることにしよう。 アカウント作成と料金プラン： v0を利用するには、まずVercelのアカウントを作成し、v0のFreeプランに登録する必要がある。 まずはv0の公式サイトにアクセス。

先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて

A short tutorial about setting up a Next.js application with Prisma and SQLite. I decided to write this tutorial, because many of my other Next.js tutorials depend on a database and I want to reference it. Why this ORM and database? Prisma is a great tool to interact with databases and SQLite is a simple database to get started with.