React + Vite + TypeScript で診断アプリを作ってみた記録（Step2） - Qiita
Step2：UI仮構築とJSONデータ連携 今回は、診断アプリの Step2 として以下の実装を行いました。 ✅ 今回の目的 ハードコーディングではなく、外部JSONファイルから質問データを読み込む仕組みを作る JSXにベタ書きしていたUIを、動的に表示される構成へ変換 質問と選択肢の管理が柔軟になるように構造化する ✅ 追加・変更した内容 1. UIコンポーネントの作成（仮質問画面） return ( <div style={{ padding: '2rem' }}> <h2>質問：{question.text}</h2> <div style={{ marginTop: '1rem' }}> {question.options.map((option, index) => ( <OptionButton key={index} label={option.label} /> ))} <
ホントは教えたくない。AWS新試験を一日3連勝！Cline×Claude 3.7で挑んだ7日間のチート級勉強法 - Qiita
試験当日の様子 朝9時、試験会場の受付にて 受付：「〇〇さん本日は２つ受験予定ですね？」 私：「いえ、今日もう一つ予約していて、３つの予定です」 受付：「……3つ！？ 確認してまいります。少々お待ちください」 （ブースの裏で小声でざわつく） ： ： ： 受付：「大丈夫のようでしたので、３つまとめて受付しますね」 という感じで、試験３回分の写真と署名を連続でされました。 無事受けられそうでした。（いや、申し込みできてる時点で大丈夫と思ってましたが） 実際の試験時間 第一戦目 9:30-11:05 AWS Certified Data Engineer - Associate DEA-C01 試験端末の受験者一覧に自分の名前が３つありました。 試験官の方が受ける試験を選ぶのですが、同じ名前が並んでるので12時の試験を間違えて開始されそうになりました・・・ 確か試験名が途中で切れてるのでパッと見
PostgreSQL MCP ServerでAIデータベース管理を実現する方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、深夜までPostgreSQLと格闘する日々が続いていて、正直疲れ気味だったんですよね。複雑なクエリの最適化やスキーマ設計に頭を悩ませる毎日...。そんな時、偶然見つけたのが「PostgreSQL MCP Server」というツールでした。最初は「また一つの管理ツールか」と思ったんですが、使ってみたら衝撃的だったんです！AIがデータベース管理を手伝ってくれるなんて、まさに開発者の救世主じゃないですか！今日はその魅力を皆さんに紹介したいと思います。 PostgreSQL MCP Serverって何？私の体験から語ります 簡単に言うと、
AI × 個人開発：2ヶ月で「Draw.io＋Cacoo/200」をReactで作った話 - Qiita
初めまして。Qitta初投稿です。 2ヶ月で「Draw.ioとCacooを足して200で割ったアプリ」をReactで作った話です。ポエムはNoteに（ChatGPTがあることないこと）書いたので良ければ。 きっかけ 小さなSIerにいるんですが、いつまで経っても仕事でAI使う機会が出てず（大丈夫かSI業界）、ChatGPT-4oみて流石にマズいなと思い、個人開発で試したというところです。 Clineが良さそうですが、まずはスタンダードにGithubCopilot + ChatGPTでどれだけ効率変わるか、実際触って試してました。 あと、図形エディタのような高頻度なレンダリングにReactが耐えれるか試したかったのもあります。 できたもの 何かできるって段階にはまだ至ってないんですが、それらしく動くようになっています。それがこちら。 機能は大体こんな感じです。 四角形・円・線の作成 図形の移
Reactにおけるリストレンダリング：mapとforループの比較 - Qiita
Reactでリストをレンダリングするとき、ほとんどの場面でmapメソッドを使いますよね。公式ドキュメントでもそうだし、ネット上の記事やチュートリアルもほぼすべてがmapで実装しています。 JavaScriptの基本的なループ構文であるforループは使うべきではないのか？とまとまっている記事がなかったので、まとめてみたのと、実際に検証してみることにしました。 基本的な実装方法 まずは両方の実装方法を見てみましょう。 mapメソッドを使う方法 function ListComponent({ items }) { return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); } これが最もよく見かける方法です。JSX内に直接mapを書いて、配列の各要素に対応するJSX要素を返します。とて
[MCP再入門]「MCPはAIアプリにとってのUSB-C」がしっくりこなかったあなたに - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに MCPとは？公式ページの冒頭にはUSB-Cみたいな共通仕様、という抽象的な説明があります。この例から端を発したMCPの説明を日本語で書かれているのもいくつか見かけますし、記事としてとても人気があるようです。 ですが、公式ページを読んでも、日本語で書かれたいろんな紹介ページを読んでも、私にはMCPの良さは全然理解できませんでした。なのに世の中はMCPブームと言っても良いぐらいMCPが流行っています。私が理解できないだけで、沢山の方がその良さを見出しています。これはまずいと思いました。私は何かを誤解してしまったのだと思い、色々と作
JavaScriptのPromise、asyncの決まり事，awaitと .then() の関係 - Qiita
JavaScriptで非同期処理をするときに一番使われる技術に「Promise」「async」「await」があります。本記事は、その基本として「なぜ必要なのか」を分かりやすく解説します。また、これらを使う際の“決まりごと”や“使い方の型”も紹介します。 非同期処理とは JavaScriptは基本的に1本のスレッド(単線)で動作します。 たとえばネットワーク経由のAPI呼び出しなど、答えが返ってくるまで時間がかかる処理を直接動かすと、他の処理が止まってしまいます。 そこで、JavaScriptは "非同期" にする方法として Promise という構造を用意しています。 Promiseとは Promiseは、一言で言うと「後で答えが返ってくるボックス」です。 Promiseの基本形
Playwright MCP を使ってAIにUXを評価してもらう - Qiita
はじめに 乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。 今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思い付きを試してみました。 1. MCPとは？ MCPは、Model Context Protocolの略称です。 Protocolとある通り、「AI」と「サービスやリソース」を繋ぐ、共通規格です。 従来の悩み 従来は、AIと他サービスやリソースを連携させる際、それぞれの接続先ごとに個別の実装が必要となり、開発者に大きな負担がかかっていました。 下記ではAIエージェントが利用できるように「ブラウザ操作」「画像生成」など個別に実装する必要があります。 MCPが解決すること 「AI」と「サービスやリソース」を繋ぐ部分を共通規格化することで、開発の負担が減り、手軽にAIとサービス・リソースを接続できるよ
【Rust】【Java】非同期のユースケースとコード - Qiita
// ✅ 非同期が必要な15の代表ユースケース + 最小コード例 // 1. Web API ハンドラー（axum） use axum::{routing::get, Router}; async fn api_handler() -> &'static str { "Hello, async API" } fn app() -> Router { Router::new().route("/", get(api_handler)) } // 2. 複数リクエストを同時処理（tokio::spawn） #[tokio::main] async fn main_spawn() { for i in 0..3 { tokio::spawn(async move { println!("Task {} start", i); }); } } // 3. 外部API呼び出し（reqwest） #[
Fluent Bitでメモリ使用量が上昇し続ける問題を解決した話（Amazon Linux 2023 ＋ CloudWatch Logs） - Qiita
TL;DR Amazon Linux 2023 で Fluent Bit を使って CloudWatch Logs にログ転送していたところ、メモリ使用量が上昇し続けていた 原因は systemd input プラグインがJournalログを全読み込みし続けていたため Read_From_Tail と Max_Entries を設定することで、メモリ使用量の増加が解消された tail input には storage.type filesystem を使ってメモリ圧迫も回避した 環境 EC2(Amazon Linux 2023) EC2 は毎朝08:00に起動して、20:00に停止 fluent-bit をインストールしてAmazon Linux 2023 の Journalを CloudWatchLogs へ転送 問題
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 - Qiita
応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話 はじめに 2024年春、応用情報技術者試験に独学で合格しました。 そのときずっと思っていたのが、 「もっとサクッとスマホで過去問を解けるサイトがあったらよかったのに…」 ということ。 そこで合格後、「過去の自分がほしかったもの」を形にするべく、 資格試験の過去問演習サイトを自作しました。 👇 サイトはこちら 📎 https://ap-shiken-navi.jp/ サイトの概要 応用情報技術者試験ナビというサイト名で公開中です。 現在は午前試験の過去問を対象に、以下の年度の問題を掲載しています。 令和6年 春・秋（160問） 令和5年 春・秋（160問） 令和4年 秋（80問） 📱 レスポンシブ対応で、スマホ・タブレット・PCすべてに対応しています。 ▼ トップページ画面イ
SlackメッセージをS3にmarkdown形式で保存するシステムを作った - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに 私は日々のインプットのメモや雑記をSlackを使っています。しかし、多くのワークスペースに入っているとメモも散らばるし、何より後から見返しづらいです。 このプロジェクトでは、SlackのメッセージをMarkdown形式に整え、S3バケットに自動保存するシステムを構築しました。これによってSlackでのメモをひとまとめにしてS3に保存し、Obsidianなどのツールを使って見返すことができるようになります。 2. システム概要 これから説明するシステムは、以下のGitHubリポジトリのものです。お気軽に覗いてみてください！
202504_異なるDB間移行作業に特化したAWS Schema Conversion Tool(AWS SCT) - Qiita
① 異なるDB間移行作業の自動化アプローチの手段 DBの移行プロジェクトを2回経験しましたが、どちらの現場でも手作業でのコード作成とスキーマ作成をする方針でした。同じような境遇のエンジニアに届くことを祈っています。 現場のセキュリティレベルでローカル環境での作業が必須になる場合が多くあります。2025年現在では、一番安定して使えるツールがAWS SCTなのではないかと感じたので、ツールの概要をまとめています。 異なるDB間の移行プロジェクトで、コードとスキーマのコンバートを自動化するためには、以下のようなアプローチが考えられます。上から効果的だと思う順番です。 ダウンロードツール SaaS型クラウドツール DBのDDLエクスポート, dumpエクスポート 生成AI オープンソース変換スクリプト 自作スクリプト（SQL変換バッチ） (APIという観点もありますが、ツール自体がAPI機能を持っ
React開発に役立つ主要ライブラリ一覧と選定ガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンド開発において、適切なライブラリやツールを選択することは、プロジェクトの成功を左右する重要な要素です。 特に React を中心としたエコシステムでは、UI コンポーネント、状態管理、フォーム、データ通信、スタイリング、テストなど、さまざまな分野で数多くのライブラリが存在します。 それぞれのライブラリには独自の特徴や強みがあり、プロジェクトの規模や要件に応じて最適なものを選ぶ必要があります。 しかし、これだけ多くの選択肢がある中で、どのライブラリを選ぶべきか迷うことも少なくありません。 特に、初めてプロジェクトを立
GitHub Actions⇔AWS らくらく連携手順書♪ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 閲覧ありがとうございます。 本記事では、一回繋いでしまえば超絶便利なGitHub ActionsとAWSの連携方法を共有します。 今回は、GitHub ActionsとAWSを、IAM IDプロバイダ・STSを用いて連携します。 AWS側の設定 【 用意するもの 】 GitHub ActionsがAWS環境にアクセスするためのIAMロール GitHub Actionsからのアクセスに対し一時的な認証情報を渡すためのIDプロバイダ ① IAMロールの作成 1. 任意のIAMポリシーをアタッチしたIAMロールを作成 私はAWS Nuke(*
Playwright MCPとAWS MCPのクライアントをVercel AI SDKで構築する - Qiita
はじめに 昨今 AI エージェントの流れが本当に激しいですね。 特に最近は MCP 関連の話題に溢れているなと感じているところです。 先週末には Azure Functions で MCP サーバーを作成できるようになりましたね。 私は普段 Azure を触ることが多く、このニュースがきっかけで MCP を触ろうと思ったので、非常に大きな出来事でした。 「MCP」とは「Model Context Protocol」の略で、生成 AI モデルに文脈情報を渡しやすくするための規格です。生成 AI 界の USB-C とも言われていますね。 すでに見られている方も多いかと思いますが、みのるんさんが以下のスライドで大変わかりやすくまとめてくださってます。私もこれで勉強しましたので、非常におすすめです！ ずっと MCP や AI エージェントを触りたいと思っては実行に移せていなかったのですが、今週から
【JavaScript】MDNが推奨する最強の書き方 - Qiita
はじめに MDNのドキュメントを眺めていたら、JavaScript のサンプルコードの作成ガイドラインという章を見つけました。第三者にコードを公開するような人向けにまとめられたものですが、正しい書き方の実践としてみることができるので、クローズドなプロジェクトの中でも使えるかもしれません。ただ、モノによってはチームで決めた慣習と食い違うこともあるかもしれないので、採用はケースバイケースになると思います。 上記のページが紹介された記事があまり見当たらなかったので、折角なので共有してみようと思います。あと、ところどころ補足を付け加えています。 対象読者 基本的には初心者向け ただ、幾つかは中級者の方でもためになるものがあるかも？ 規則の一般性 ☆：よく見かける書き方。一般的 ☆☆：あまり見かけないかもしれない書き方。あるいは、意識的には規則づけられてなかった書き方 ☆☆☆：クローズドなプロジェク
Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） - Qiita
はじめに Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。 「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことが出来るものだと考えてください。 Playwright はブラウザを操作する E2E テストツールです。E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールというものでした。Playwright MCP が登場したことで、 生成AIがブラウザを操作することが出来るようになります。 Cline で Playwright MCP の環境準備 ※環境構築手順は Cline と GitHub Copilot 両方書きました。お好きな方を使ってください。 Playwright
安全と言われるRustの落とし穴 - Qiita
Rustは「安全な言語」として知られています。特にメモリ安全性の面では優れた言語設計が施されていますが、それだけですべての問題が解決するわけではありません。コンパイラは多くのバグを捕捉してくれますが検出できない落とし穴も存在します。 上記の記事にRustで安全なコードを書く際によく遭遇する落とし穴と、それらを避けるためのベストプラクティスが非常によくまとまっていました。いくつか紹介します。 Rustコンパイラが検出できない問題の種類 Rustのコンパイラは優秀ですが、以下のような問題は検出できません： 数値型の変換ミスによるオーバーフロー ロジックのバグ unwrapやexpectの使用による意図しないパニック サードパーティクレートの問題のあるbuild.rsスクリプト 依存ライブラリの不適切なunsafeコード 競合状態 それでは、よくある落とし穴とその対策を見ていきましょう。 1.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【AWS構築】EventBridge + Lambdaで毎日決まった時間にEC2を自動停止させる - Qiita
