AI駆動プログラム開発、一気入門
AI駆動プログラム開発、一気入門 AI Driven Development このドキュメントは、全てMarkdown AIで作成しました。2024.11.18 <div Align="right">作成：Markdown AI ファウンダー兼アーキテクト coke_kouichi</div> AI駆動開発とは？ AI時代がやってきた！ あの大変だったプログラミング作業を、AIが勝手にやってくれるという、とんでもない時代がやってきました。 そこで、本書ではVercel社のv０、Stackblitz社のBolt、Replit社のReplit Agent、Anysphere社のCursor+Clineの5つのツールを用いて、AIプログラミングに挑戦します。 プログラミングは難しい、昔プログラミングに挑戦して挫折した、そんな方もAI時代は大丈夫です、ご心配なく。 本書でもう一度プログラミングに挑
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポートに対応したと発表しました。 Introducing Figma to Bolt Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting! pic.twitter.com/r78vjraVms — bolt.new (@boltdotnew) March 13, 2025 Figmaで作成した画面デザインをBolt.newへインポート可能に これまでBolt.ne
【個人開発】リリース1ヶ月で月5万円(理論値)のサービスを作ったのでノウハウを全公開してみる（Next.js / Rails） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、個人開発はしていますか？ そして個人開発をしている方は 個人開発アプリで一発あてて月収 xx 万円 を夢見ていたりしませんか？ 私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。 今回は、私が個人開発した Learning Next というサービスがあります。 こちらが軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。 この記事を読んだらわかること この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズ
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
ChatGPTを最強の学習ツールにする方法 - Qiita
質問のコツ 質問内容は抽象的な言葉よりも具体的な言葉を選ぶようにすると、回答の精度がより上がります。 回答内容に対して、更に質問を繰り返して深掘りしていくと理解度が高まり効果的です。 「あなたはプロのエンジニアとして振る舞って下さい」などと最初につけるとよりそれっぽくなります。 文章が長くて途中で終わってしまう場合は、「続き」と入力すると続きからの回答をしてくれます。 わかりやすく解説してもらいたい時は「小学生でもわかるように解説して下さい」などとつけるとわかりやすい回答が返ってきます。 「私はプログラミング初心者です」など自分のレベル感を付けると、レベルに応じた回答になります。 「コードブロックだけで返事をしてください」とつけるとコードだけで回答してくれます。 ロードマップ(カリキュラム)編 まずは、目標に向けてどういった勉強をすべきかというロードマップ(カリキュラム)を提案してもらいま
Next.jsとAuth0で会員制メディアを作る【1. 認証編】
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
2024年11月現在の最新の構成に関する記事をこちらに書きました。 よろしければそちらもご参照下さい。 （Qiita の本記事は、2022年4月時点の構成に関しての記事で、多少古い内容が含まれています。） 個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴ラボ技術ブログ
こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介 - ぽ靴な缶
この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。 qiita.com 昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。 コードでコピーするココピーです 今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。 chrome.google.com しゅぴっと拡張を開いてコピーするフォーマットを選択できます。 このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。 利用者が js を書いてフォーマットを追加できます。 コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。 Markdown, Scrapbox HTML, は
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました!
Lorem Ipsum Generator
Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus. Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis
JS ? ReactNative × Redux ? ダサいよ... Flutter × Reduxにしましょう... - Qiita
今回は初めて記事を書くことになりますが、よろしくおねがいします。私はiOSエンジニア（Swift）をやっていました。２ヶ月前あたりにはちょうどiOSとAndroid両方対応しないといけないプロジェクトを始めたのでいろいろを検討をしていました。最初はReact Nativeを検討していましたが、Expoがすごくよかったと思いますが、やっぱり自分はJSとフロントエンド開発には向いていないと思いますので、Nativeで両方iOSとAndroidを別々でやろうと思いました。TypeScriptをReact Nativeプロジェクトに入れようとしてもいろいろいじらないといけないのでめんどくさいなと思っていましいた。その時、ちょうど友人がちょっとFlutterをやってておすすめされました。Flutterをインストールして、VSCodeのPluginもよくできているので、FlutterとDart（言語的
[React Native] プロジェクトの基本構成を確認する | DevelopersIO
React Nativeのプロジェクトの基本構成を確認しよう React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。 先日紹介した下記の記事では create-react-native-app というツールを使って、React Nativeのサンプルプロジェクトをサクッと生成しました。 【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす 本記事では基礎を学ぶため、React Nativeのプロジェクト構成を確認していきたいと思います。React Nativeがどのような仕組みでクロスプラットフォームで実行できるようになるかを知るためには構成について理解を深めて
![[React Native] プロジェクトの基本構成を確認する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a22fec9aeff05e2a961d7a521bdf37dbd726607/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F09%2Freact-native.png)
React Nativeの光と闇について喋ってきました #上越TechMeetup - ナカザンドットネット
7月21日（土）に新潟県上越市で行われた、上越TechMeetup#2に参加してきました。 jtm.connpass.com 町家を改装したイベントスペース「高田小町」で、総勢15名での、和やかな雰囲気での開催となりました。 なんでいったの 主催の五十川さんがRNの話を聞きたいということでお呼ばれしました。上越は地元なので、地元で行われるIT勉強会にお呼ばれなんて、テンションがダダ上がりになる事案です。 個人的なところとして、2010年ごろに上越である程度の規模のIT勉強会を開催することを諦めて新潟市で開催していたという事情がありまして、自分が諦めたことを実現した勉強会を是非応援したいという気持ちもありました。 なにしたの React Nativeの光と闇というタイトルで講演してきました。スライドは次のとおりです。 React Nativeの光と闇 from Yukiya Nakagawa
Chart.jsなどのWeb用のJSライブラリをReact Nativeで使う - ぴよログ
React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓ JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊 とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。 WebにもJSのチャート系ライブラリはいくつかあります。例えば有償のHighchartsなんかはかなり協力です。これから登場するChart.jsのようにMITライセンスのものもあります。 そういったWebのライブラリを使ったほうが案外良い結果になることもあるかも、という提言として今回の例を紹介してみます。 React NativeにはWebViewがあるため、Javascriptを有効にした状態で通常のWeb
2018-06-25のJS: Node.js 10.5.0 Workerサポート、ESLint 5.0.0、AirbnbとReact Native
JSer.info #389 - Node.js 10.5.0がリリースされました。 Node v10.5.0 (Current) | Node.js この中で--experimental-workerの試験的なフラグ付きでworker_threadsモジュールが利用できるようになっています。 このWorker Threadsについては次のPRとFAQでまとめられています。 worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node workers-faq.md 現在は、1 Worker Thread = 1 Threadとなっていることや、現在はMessageChannel APIに沿った作りとなっていること、Transferring dataやSharedArrayBufferをサポートし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native + Expo アプリに Native Base 導入で楽々画面デザイン - Qiita
React Native + Expo + Visual Studio Code + Chrome で実機デバッグする - Qiita
