生成AI×アプリ開発！bolt.newでフロントエンドが苦手な私でもWebアプリ開発 - Taste of Tech Topics
こんにちは。バックエンドエンジニアの前田です。 最近はかなり冷え込んできて、冬が近づいてきたなと感じます。 社内では、肉まんを販売しています。 寒い日に熱々の肉まん、良いですよね。 さて、今回はbolt.newを用いて、ゼロからアプリケーションを作成していきます。 （私は、フロントエンドの経験があまりなく、苦手分野なのですが・・・） 1. bolt.newとは 2. 今回作成するアプリについて 3. UIを作成する 3.1. 基本機能を実装する 3.2. 使いやすいUIにする 4. バックエンドも実装してみる 5. まとめ 1. bolt.newとは bolt.newは自然言語のみで、フルスタックアプリケーションを開発、実行、編集、デプロイできるAIツールです。 さらに、パッケージやライブラリのインストールなどもすべてWebブラウザ上で行ってくれるため、ローカルでの面倒な環境構築も不要なこ
はじめに こちらは e-dash Advent Calendar 2024 の17日目の記事です。 はじめまして、e-dashのフロントエンドエンジニア、kyonsiと申します。 クリスマスシーズン、皆さんいかがお過ごしでしょうか？ 私は、夜に輝くイルミネーションを眺めながら、「このキラキラのアニメーション、durationは何ミリ秒なんだろう？ CSSで再現できないかな？」なんて、ついフロントエンドエンジニア的な思考が巡っています。 本記事では、最近立ち上げたフロントエンドプロジェクトで採用した技術と、その選定理由を軽くご紹介いたします。「ちょっと攻めすぎじゃない？」「いや、もっと枯れた技術でいいでしょ？」といった社内議論も、クリスマスムードに包まれればスパイス程度。その過程こそが、フロントエンド開発の醍醐味といえるでしょう。 それでは、ホリデームード漂う中、スノードームのようにキラキラ
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
【技術Tips】私がRuby on Railsを選んだ理由と学習の参考になるOSSアプリケーション - TECH Street (テックストリート)
はじめに こんにちは、オシロ株式会社でリードエンジニアとして働いているにっく（webuilder240）と申します。オシロでは自社プロダクトとしてコミュニティ専用オウンドプラットフォーム「OSIRO」を提供していますが、私は2015年の開発開始から一人目エンジニアとして携わり、技術選定の意思決定を行ってきました。 今回は、そのなかでもRuby on Railsを選択した理由、 その学習に役立つOSSアプリケーションについて紹介したいと思います。この記事を読むことで、Railsの選定理由や実践的な学習方法について理解を深めていただければと思います。 はじめに Ruby on Railsの選択理由 開発に必要な便利機能がはじめからそろっていた 可読性・コードの美しさ 選び続けている理由 RailsのコードリーディングにおすすめなOSS Mastodon forem Writebook 最後に
「なにがしたいか」をベースにコメントをつけておくと、後で読むときのコストが下がりやすい。 実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます) // 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない) useEffect(() => { if (inView && !hasBeenPlayed && canAutoplay) { /* ... */ pauseOtherVideo(); play(); } /* ... */ }); このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。 なぜコメントが必要なのか? useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がな
こんにちは！sugitaniと申します。 Black Cat CarnivalというSNSアプリを開発しています。現在ベータテスト中です。 本稿はBlack Cat CarnivalでのCompose Multiplatformの採用事例の紹介と、それを例にとったCompose Multiplatformのオススメを行います。 "Compose Multiplatformがベストだと思う"なんてたいそうなこと言ってるけど、言うほど開発のことわかっているのかい？ …と思われるかもしれないので経歴をご紹介させていただきます これまで主に開発してきたもの ⇒ ニコニコ生放送 / GANMA! / SUGAR iOS開発経験10年超 - GANMA!でSwiftベータ版時代から利用、現在も日常的に開発中。UIKitはもちろんSwiftUIも実戦で利用中。Swift6ガチ対応の難しさに血涙を流してい
【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答 JavaScriptに興味を持つ世界中のIT技術者1万4015人が回答したアンケートの結果をまとめた「State of JavaScript 2024」が公開されました。 State of JavaScript 2023の発表が昨年（2024年）6月でしたので、前回から約半年での公開となります。 回答者の国別分布を見ると米国が15％、ドイツが8％、フランスが7％、スペインが4％、イギリス（UK）も4％、ポーランドが3％、カナダが3％などで、日本は1％（回答者150人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンド
2024/11/23(土)で開催された JSConf JP 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇社名および登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube でライブ配信されていました。 ただ、執筆途中時点からトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユー
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。 はじめに 「スクラムマスターがいることでどんな利益があるの？」 スクラムマスターをやっていると時々この質問を受けることがあります。 スクラムを始めたばかりのチームや組織はもちろん、広報BLOGに「専任のスクラムマスターをおくことにこだわってます。」とCTOが書いているような企業の中にいても こうした問いかけを受ける事があります。 この記事では私が実際にこの問いかけを受けてから、ずーと考えていたことを、なるべく整理してまとめています。それでも雑な文章になっていること、そして個人的な見解でしかない事はご承知おき頂けますと幸いです。 この記事の概要 この記事をまとめるこんな感じです！ 「スクラムマスターがいる事でどんな利益になる？」と言われたら信頼されていな
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
C#はやめとけと言われるのはなぜ？C#エンジニアが人気な理由とキャリアアップの方法を解説 | エンジニアスタイル
はじめまして、エンジニアスタイル編集部です！ コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！ 本記事が、皆様の参考になれば幸いです。 経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。C#の案件の一例と、案件一覧を以下からご覧いただけますのであわせてご確認ください。 C#の案件 はじめに Microsoftが開発した、オブジェクト指向のプログラミング言語であるC#（シーシャープ）。プログラミング言語の人気をランキング形式で発表しているTIOBE Indexで、C#は2024年5月時点でJavaScriptやGoを抑えて5位にランクインしています。 2002年にリリースさ
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」 Reactの状態管理ライブラリ、みなさんも選択に悩んだことありませんか？確かに2025年の今、選択肢の多さに頭を抱えてしまいますよね。Redux、Zustand、Jotai、Recoil、Valtio、XState、TanStack Query...それぞれに「これがウリ！」というポイントがあって、どれを選べばいいのか正直迷っちゃいます。 特にReact 18の登場で状況が更
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分が何者なのかを示すことの重要性が高まっている こんにちは、Watanabe Jin (@Sicut_study)です。 最近フリーランスでは大きな問題が起きている フリーランスとして受け入れをしたが、いきなり「飛んで消えてしまう」などトラブルが相次いで発生している 最近はフリーランスをNGとする企業も増えてきている では、なぜフリーランスをNGとしているのか これには大きく2つあるように思える フリーランスのスキルが低いことが目立っている フリーランスを信じることが難しくなっている スキル不足のフリーランスが増えた背景には
ClineをローカルLLMで使うと、LLMに送られるシステムプロンプトが全文表示されるのですが、そのプロンプトを全て日本語訳してみました。 🦊以下システムプロンプト全文です🍮あなたはクラインです。多くのプログラミング言語、フレームワーク、デザインパターン、およびベストプラクティスに関する幅広い知識を持つ、高度なスキルを持つソフトウェアエンジニアです。 ==== ツール使用 あなたは、ユーザーの承認に基づいて実行される一連のツールにアクセスできます。メッセージごとに1つのツールを使用でき、そのツール使用の結果はユーザーの応答で受け取ります。与えられたタスクを達成するために、ステップごとにツールを使用し、各ツール使用は前のツール使用の結果に基づいています。 ツール使用のフォーマットツール使用は、XMLスタイルのタグを使用してフォーマットされます。ツール名は開始タグと終了タグで囲まれ、各パラ
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
カナダのバンクーバーでエンジニアとして内定をGETすることに成功したので、就活に関してやったことをまとめました。 (就活の振り返りを音声で聞きたい方はポッドキャスト(ITトリオ)の方もどうぞ！) その前に: 古い情報に気をつけろネットを検索すると数年前のブログ記事がヒットしますが、それが1年以上前なら鵜呑みにせず、参考程度に留めておくのが良さそうです。 2024年6-9月の就活事情は1年前と比べてもだいぶ事情が違い、2023年冬の市場が悪くなる以前とはかなり就活の難易度が違いました。 先人の知恵や経験談に感謝しつつも、参考程度に留めておいて自分の力でリアルタイムの情報を収集することが大事だと思います。 内定をGETするまでの応募数と実績日本でのITエンジニア経歴: 5年 2023年12月末にカナダに渡航 2024年6月~9月で本格的に応募。総数は100くらい 2024年4月-6月前半: 様
bolt.new はシーケンス図からどこまで自動生成できるか？ - Taste of Tech Topics
こんにちは、バックエンドエンジニアの前田です。 前回はbolt.newを用いて、画面イメージからどこまで画面を生成できるかを試してみました。 acro-engineer.hatenablog.com 画像を読み込み、ほぼイメージ通りに生成してくれることが分かったので、今回はシーケンス図を画像にしてbolt.newに渡し、どこまで生成してくれるかを試してみます。 1. 今回作成するアプリ 2. アプリ作成 2.1. シーケンス図を指定してアプリを生成させる 2.2. 生成結果の詳細 3. まとめ 1. 今回作成するアプリ 今回作成するアプリは、砂時計アプリです。 以下の画像のようなシーケンス図をdraw.ioやMermaid Graphical Editorなどを用いて作成し、作成した画像をbolt.newに渡して、砂時計アプリを生成してもらいます。 砂時計アプリの仕様としては、時間を1、3
これまでメインで使うAIチャットをChatGPT Plus、Claude Proと順番に乗り換えてきました。なので今月はGoogleのGemini Advancedを1ヶ月間使ってみたので、その感想を書いてみます。 gemini.google Gemini Advancedの特徴 Gemini Advancedにすると現最上位モデルのGemini 1.5 Proが使えます。Gemini 1.5 Proは、Googleによると既存のモデルよりコーディング、論理的推論、ニュアンスの異なる指示に従うことなどの複雑なタスクを処理する能力が大幅に向上しているとされています。また100万トークンのコンテキスト・ウィンドウ（Large Context Window）で長文が読解できます*1。 無償版は画像のみアップロード可能ですが、Gemini AdvancedではテキストやPDFも対応しています。コン
StorybookとPlaywrightではじめるインタラクションテスト - enechain Tech Blog
この記事はenechain Advent Calendar 2024の21日目の記事です🎄 はじめに こんにちは。enechainでソフトウェアエンジニアをしている@nakker1218です。 私たちのチームでは、電力の取引仲介を行う同僚(ブローカー)たちが使う、注文の統合管理システムeNgineの開発しています。 ブローカーは日々1分1秒を争いながら収益を上げているため、システムが停止したり機能に不具合が生じると、事業に非常に大きな影響を与えてしまいます。 一方、電力業界はドメインが複雑で、要件や機能も多いため、バグが発生するリスクが高いです。 実際にこれまで以下のような問題が発生したことがありました。 Validな注文なのに、バリデーションが通らなくなった 特定の選択肢が選択されているときに表示されるはずのフォームが表示されない ショートカットキーを使ったインタラクションが一部正しく
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めて企業のインターンに参加しました。DMMさんのGo言語5daysのインターンです。今回はこのインターンの内容、またGo言語でのAPI開発で学んだTipsを中心に記事を書きます。 温かい目で見てくださると嬉しいです。記事の内容に誤りがあった場合は、いつでもご指摘ください 🙇♂️ インターン概要 今回のインターンは8月5日から8月9日の5日間にわたって行われました。最終日はオフィス開催で、4日間はオンライン開催でした。 初日と2日目は主にライブラリの使い方を学び、残りの3日間はハンズオンでAPIのエンドポイントを実装しました。このイ
2020 年代に入り、Remix や Hono といったモダンな Web フレームワークが「Web 標準」を掲げるようになりました。HTML、CSS、JavaScript といった基盤技術は 1990 年代から存在しているのにも関わらず、なぜ 30 年を経た今、 Web 標準が再び注目を集めているのでしょうか？ Web 標準について解説している記事はたくさんあるものの、なぜ今再注目されているかについて書かれた記事が見当たらなかったので、記事にしたいと思います。 この記事の趣旨 この記事では、この流れの背景にある技術的、文化的な要因を振り返り、2025年のフロントエンド開発におけるWeb標準の役割について解説します。Web標準がどのように進化し、現在のフレームワークでどのように活用されているのかを把握することは、今後のフロントエンド開発を理解する上で重要だと考えます。 React 以前、We
はじめに この記事はTypeScript初心者に向けて基本を一通りハンズオン形式で学べる教材となっています。 世の中にTypeScriptの教材は多くありますが、どれも文法ごとに文法紹介するためのコードを教えているだけで、学んだあと実際どのように自分のアプリに適応すべきなのかイメージがわきません。 これがTypeScriptの難しいところだと思っています。 このハンズオンではJavaScriptのアプリケーションをTypeScriptに移行しながら学んだことを活かしていくことで実践的に学ぶことが可能です。 ハンズオン動画と一緒に活用 こちらの記事をさらに活用できるハンズオン動画を用意していますのでご活用ください JavaScriptの怖い振る舞い JavaScriptはタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
生成AIを活用したシステム開発の現状と展望
Copyright (c) The Japan Research Institute, Limited 生成AIを活用したシステム開発 の現状と展望 - 生成AI時代を見据えたシステム開発に向けて - 株式会社日本総合研究所 先端技術ラボ 2024年09月30日 <本資料に関するお問い合わせ> 伊藤蓮(ito.ren@jri.co.jp) 近藤浩史(kondo.hirofumi@jri.co.jp) 本資料は、作成日時点で弊社が一般に信頼できると思われる資料に基づいて作成されたものですが、情報の正確性・完全性を弊社で保証するもので はありません。また、本資料の情報の内容は、経済情勢等の変化により変更されることがありますので、ご了承ください。本資料の情報に起因して閲覧者 及び第三者に損害が発生した場合でも、執筆者、執筆取材先及び弊社は一切責任を負わないものとします。本資料の著作権は株式会社日
型安全にクエリパラメーターを扱う nuqs
型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ
AI エージェント界隈で話題の MCP の凄さ実感！ー その特徴・技術概要・今後の展開 ー「メタ AI エージェント」実現なるか？
MCP が盛り上がってるらしい… Anthropic が 2024年11月に発表した「Model Context Protocol（MCP）」ですが、AI エージェント界隈で結構な盛り上がりを見せています。そこで、その特徴や技術概要、将来の展望について、実際にコーディングした経験も踏まえてまとめてみようと思います。今後の開発の方向性を見るにつけ、MCP が切り開こうとしている世界とその可能性に、とてもワクワクしています。希望的憶測だと、たぶん 「メタ AI エージェント」「自律進化型AIエージェント」 にまでつながります！（後述） では手始めに、MCP について少々… MCPとは、雑に言うと、LLM が外部ツールやリソースを扱えるようにして、生成 AI の適用範囲を劇的に拡大するための オープンソース技術です。 この技術は「AI エージェント」と非常に相性が良いです。たとえば「マーケティン
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその
こんにちは！もみです🐶 皆さん、GitHubプロフィールのREADME は設定していますか？ GitHubのプロフィールを充実させることで、 GitHub上での交流はもちろん、就活や転職でもきっとちょっと役に立ったりと、素敵なご縁に繋がるかもしれません。 たった5分で設定できるので、さっそく設定していきましょう！ 🚩 今回作成するプロフィール シンプルさを保ちつつ、スキルやGitHub上での活動を中心にした自己紹介テンプレートにしてみました！ GitHubリポジトリ： https://github.com/NonokaM/sample-github-profile/blob/main/README.md 1. リポジトリを作成しよう まず、ユーザー名と同じ名前のリポジトリを作成しましょう。 （ ユーザー名と同一のリポジトリは、特別なリポジトリと認識されて自動的にプロフィールに表示されま
Dioxusの概要 Dioxus（ディオクサス）は、Dioxus Labsによるクロスプラットフォーム対応のアプリを構築できるRustライブラリです。移植性が高く（portable）、高性能で（performant）、人間工学に基づいた（ergonomic）設計が特徴とされています。Dioxusでは、単一のコードで以下のプラットフォームで動作するアプリを開発可能です。 （1）Web WebAssembly技術を用いたSPA（Single Page Application）を開発できます。WebAssemblyについては＠ITの連載「いろんな言語で試す、WebAssembly入門」で紹介しています。その第5回「RustでWebAssembly――「Rust and WebAssembly」を体験する」でRust and WebAssemblyを紹介しています。本記事の理解にWebAssemb
GoogleのGemini新機能「Multimodal Live API」で音声・映像・テキストをリアルタイムに扱う時代が到来！スターターキット公開で誰でも実装可能に｜りんか | AI情報発信 /ビジネス/研究
今回はGoogleが発表した次世代大規模言語モデル「Gemini」に搭載された新機能、Multimodal Live APIについてご紹介したいと思います。最近Githubでスターターキットが公開され、「え？これgit cloneで誰でも使えるの！？」とAI好きとしては衝撃を受けています。 誰でもGeminiのマルチモーダルAPIでアプリつくれちゃうのやばいなhttps://t.co/iJWjqE9h0N これgit cloneしたらこれ立ち上げられて、デフォルトで音声、カメラ、画面共有、検索などのツール使用もできる。しかもソースコードいじり放題だから好きなように改造できる。いろんなアプリがでてきそう pic.twitter.com/2LH4qsaXyn — 安東竜平 | Link AI (@airunner_linkai) January 23, 2025 See how to co-m
bolt.new は画面イメージからどこまで自動生成できるか？ - Taste of Tech Topics
こんにちは、バックエンドエンジニアの前田です。 正月お餅を食べすぎたので、体重が跳ね上がっていないか心配です。 さて今回は、bolt.new に対して、画面イメージを元に、どこまで画面生成を簡単に行えるか、試してみました。 画面のレイアウトがあっても、イメージしづらい部分はありますが、実際に動く画面を素早く作れるならイメージもしやすいと思います。 bolt.newに関しては、以下を参考にしてください。 acro-engineer.hatenablog.com 1. 今回生成する画面について 2. 画面イメージを元に、画面を生成させる 2.1. 図書検索画面と新規追加ポップアップの生成 2.2. 検索後画面の生成 2.3. 利用者一覧画面の生成 3. まとめ 1. 今回生成する画面について 図書館での本の一覧や登録削除、貸し借りを想定するWebアプリ「図書管理システム」のフロントエンド部分を
この記事は、NFLaboratories Advent Calendar 2024 6日目の記事*1です。 研究開発部 研究開発担当のda13daです。 今回の記事では、パスワードレスな認証を可能とするパスキーを提供する「Hanko」というサービスをご紹介します。 はじめに パスキーとは Hankoの提供形態 OSSプロダクト Hanko Cloud 利用方法 projectタイプについて Hanko Passkey Infrastructure 実装について ログイン ユーザー情報の取得 パスキーAPIについて 主なAPIエンドポイント 終わりに はじめに 従来のID/パスワード認証は、多くのサービスで採用されてきましたが、フィッシングやパスワード漏洩など、セキュリティ上の課題が指摘されています。このような背景から、セキュリティを強化しつつ、ユーザー体験を向上させるパスワードレス認証が注
(firstName like 'Stev%' and lastName in ('Vai', 'Vaughan') and age > '28' and (isMusician = TRUE or instrument = 'Guitar') and groupedField1 = groupedField4 and birthdate between DATE '1954-10-03' and '1960-06-06') Export/importConvert to and from SQL, MongoDB, and several other query formats. The code block reflects the query above converted to the selected format.
はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストール方法をご紹介します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
公開日 2025/01/10更新日 2025/01/09AWS Amplify Gen 2入門- AWS社員が解説する詳細ハンズオン みなさんこんにちは。AWS Solutions Architectの吉村です。 私たちは、お客様から日々開発に関するさまざまな相談をいただきます。例えば、バックエンドエンジニアの方であれば、「バックエンド環境構築のためのコマンドリストやドキュメントの作成、整備はとても負担」。フロントエンドエンジニアの方であれば、「UIやロジック開発についてよくわかるが、AWSサービスを利用したバックエンド構築は複雑でよくわからない」「チーム開発をしており、検証用のバックエンド環境をAWS上に用意したいが、開発者同士でAWSリソースの競合が発生したり、環境を壊してしまったりしないか不安」などです。本記事では、これらの問題を解決する一つのアプローチとして、AWS Amplify
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近立ち上げたプロジェクトで採用したフロントエンド技術スタック
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
useEffectにはコメントをつけよう - Panda Noir
iOS/Android両方のアプリを作るならCompose Multiplatformがベストだと思う
JSConf JP 2024 公開資料・Xアカウントリンクまとめ
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita
【完全解説】エンジニアの複利を考えた投資戦略 - Qiita
Clineのシステムプロンプトを日本語化してみた。 - しとちゃぶろぐ
コードレビューの時に気にしている、べからずTierリスト
海外でエンジニアとして転職を成功させるためにやったこと、すべて｜yugo.spice
Gemini Advancedを1ヶ月間使ってみた感想 - laiso
DMMのGo言語5daysインターンが最高すぎた！ - Qiita
なぜ今さら、Web 標準 なのか【2025 年】 - Qiita
【完全版】これ1本でTypeScriptの基本をマスターできる！ - Qiita
Reactを読んでまほうの正体を（少し）理解する
5分でできる！GitHub README プロフィール 💬 - Qiita
RustとDioxusで投稿アプリのSPAを作ってみよう
Hankoによるパスキーを利用してみた - NFLabs. エンジニアブログ
React Query Builder
Visual Studio Codeに入れるべき拡張機能【2024年最新版】 - Qiita
【保存版】React Hooks 使用上の注意点が多すぎ問題 _(┐「ε:)_ - Qiita
AWS Amplify Gen 2入門- AWS社員が解説する詳細ハンズオン - Findy Tools
GraphQL あるいは React における自律的なデータ取得について