主にWebアプリを開発するための魔法のガイド
💻 パソコンとAIと(´∀`)1万円開発をそろえて、君がイメージするアプリを作りましょう!
🌟 アイデアとアプリの出来がよければ、有名になれて、お金持ちになれるかも知れないぞ! 🌟
無料で始められる!学校のPC・図書館のPCでもOK!
まずパソコンを買うか借りよう!
💰 新品または中古のパソコンを買う
🏫 学校のパソコン室(放課後)
📚 図書館の無料PC
🏠 家族のパソコン借りる
⚠️ 学校・図書館PCの場合は、まず先生や図書館の人に「プログラミングの勉強をしたい」と相談しよう!
💡 週1回でも触れればスタートできる!
パソコンだけじゃダメ!ネット必須!
📡 予算別ネット回線の選び方
🆓 お金ない → 無料Wi-Fiスポット活用(イオン学習スペース、図書館、スタバ等)
💴 厳しい → 格安SIM 10GB(月2000円、最低限)
💵 普通 → ポケットWi-Fi(月3000円、おすすめ)
💰 余裕あり → 光回線(月5000円、最速最強!)
⚠️ 注意:月3GB(1000円)じゃ足りない!
• 動画学習 → すぐギガなくなる
• ソフトダウンロード → 100MB超えるのも多い
• 最低でも月10GBは必要(月2000円〜)
💡 裏技:最初は無料Wi-Fiで始めて、稼げたら光回線!
なぜモニター2台が必要なの?
🎯 左画面:VS Codeでコード書く
🌐 右画面:ブラウザでリアルタイム確認
⚡ 開発効率3倍アップ!
💡 画面切り替えのストレスゼロ
🔥 プロと同じ開発環境を手に入れる
📺 外付けモニターの選び方
📏 サイズ:24インチ以上推奨(21インチでもOK)
💰 予算:新品1万円〜、中古5000円〜
🔌 接続端子:HDMI、DisplayPort、USB-C
💻 お手持ちのパソコンの端子を確認しよう
🔌 接続方法
• HDMI接続:一番簡単、ケーブル1本
• DisplayPort:高画質、ゲーミングモニター多し
• USB-C:MacBook等、充電も同時可能
• 変換アダプタ:端子が合わない時に使用
💰 予算別おすすめ
🆓 お金ない → 中古21インチ(5000円〜)
💴 普通 → 新品24インチ(1万円〜)
💰 余裕あり → 27インチ4K(3万円〜)
AIアシスタントを選ぼう!
🆓 Gemini - 今は無料で始められる
💎 Claude.ai - 今は月2000円でもっと賢い
🖥️ Claude Code - 本格的な開発ツール
⚡ Cursor - プロ仕様のAIエディタ
⚠️ 料金は変わる可能性があります(2025年9月時点の情報)
🎓 学生割引や学生無料プランがあるサービスも多いので、学生なら必ず調べてみよう!
💡 GitHub Student Packなら多くの開発ツールが無料で使える!
💬 どれも日本語OK
💡 予算と目的に合わせて選ぼう!
💳 現在はクレジットカード決済のみですが、PayPay・コンビニ決済も準備中です。ご両親に相談しましょう。
「(´∀`)1万円開発」はWebアプリ開発を100倍速くする魔法のツール!
🌐 Webアプリ開発に特化(ブラウザで動くアプリ)
📱 PWA対応でスマホアプリっぽく見せられる!
• ホーム画面にアイコン追加可能
• プッシュ通知も送れる
• オフラインでも動く
⚡ 開発のスタートダッシュができる
🌟 基本的機能が山盛り
💰 本来は高額の機能だけど、1万円ぽっきり!
💡 ネイティブアプリ(App Store/Google Play)じゃないけど、ほぼ同じ体験!
必要なソフト
① 🎁 (´∀`)1万円開発のダウンロードインストール(推奨)
② 📝 VS Code(コード書くやつ)
③ 🌐 Chrome(開発者ツールが便利)(推奨)
④ 🎯 Git(コード管理)
⑤ ⚙️ (´∀`)1万円開発の各種機能の個別設定(推奨)
⑥ 🐳 Docker(1万円開発買った人は必須)
⑦ 🐙 GitHub(コード保存場所)
💡 基本ソフトは全部タダ!1万円開発なくても開発はできる!
⚠️ ただし1万円開発なしだと、かなり時間かかるで
💝 1万円開発を購入している人へ
「(´∀`)1万円開発」を購入している人は、【(´∀`)1万円開発本】に詳しく書いているので、下のボタンからダウンロードするのではなく、【(´∀`)1万円開発本】からダウンロードや設定をしてね!🎵
黒い画面を怖がらない!
🔥 重要テクニック!これができないとプログラマになれない!
プログラムを書くための最強ツール!
💡 プロも使う無料エディタ!
✨ VS Code(Visual Studio Code)
• 無料で高機能
• AI補完でコード自動生成
• 拡張機能で何でもできる
• Git連携も完璧
📦 必須拡張機能
• Python(Python開発必須)
• Django(Django開発支援)
• GitHub Copilot(AI補完)
• Japanese Language Pack(日本語化)
💡 1万円開発と相性抜群!
コードの履歴を管理!
🔥 重要テクニック!これなしでチーム開発は不可能!
📝 git add/commit - 変更を記録
🔄 git push/pull - リモートと同期
🌿 git branch - 機能ごとに開発
⏮️ git reset - 前の状態に戻る
💡 失敗しても前に戻れる安心感!
コードの履歴を管理!
🔥 重要テクニック!世界中の開発者が使ってる!
📝 git commit - 変更を記録
🔄 git push/pull - クラウドと同期
🌿 ブランチ - 機能ごとに開発
👥 プルリクエスト - チームでレビュー
💡 失敗しても前に戻れる!
AIが全部やってくれる!
📝 「ボタンを押したら色が変わる」
🎮 「じゃんけんゲーム」
⏰ 「タイマーアプリ」
💡 AIに指示するだけでコードが完成!
開発環境を一瞬で作る!
🔥 重要テクニック!今や必須の開発ツール!
📦 コンテナ - アプリを箱に入れて配布
🔄 docker-compose - 複数サービスを一括管理
💾 環境の保存 - チーム全員で同じ環境
🚀 本番環境と同じ - ローカルでテスト可能
💡 「動かない」がなくなる魔法!
AIは見た目を整えることが、クソカスや!
AIに的確に指示しないと、腐ったレイアウトになるぞ!
📚 AIの弱点を補う重要スキル!
📝 HTML - ページの構造を作る(タグの基本)
🎨 CSS - デザインを調整する(色・サイズ・配置)
📱 Bootstrap - スマホ対応が簡単に(レスポンシブ)
💡 AIが作ったコードを微調整できるようになる!
動画で学ぶのもええで〜!
動きのあるWebサイトを作る!
📚 インタラクティブな機能を追加する重要スキル!
⚡ クリックで動作 - ボタンを押したら何か起きる
🎬 アニメーション - 要素を動かす、フェードイン・アウト
📡 非同期通信 - ページ更新なしでデータ取得
🎮 ユーザー操作 - ドラッグ&ドロップ、スワイプ
💡 AIが苦手な細かい動作制御ができる!
ブラウザで何が起きてるか見える!
📚 これはテクニック!Chromeに最初から入ってるから導入不要!
📝 要素の検証 - HTML/CSSをリアルタイム修正
🖥️ コンソール - エラーメッセージを確認
📡 ネットワーク - 通信の成功/失敗チェック
📱 スマホ表示 - iPhone/Android表示テスト
💡 F12キーで開ける魔法のツール!
バグを見つけて直す力!
💡 これはテクニック!プロと初心者の差がここで出る!
import logging
logger = logging.getLogger(__name__)
logger.info("処理開始")
logger.debug(f"値: {var}")
console.log("デバッグ開始");
console.log("変数:", myVar);
console.error("エラー発生!");
データを簡単に管理!人間がテストする時に絶対必要!
💡 これはテクニック!Djangoの便利機能を使いこなそう!
👤 ユーザー管理 - 誰が使えるか設定
📝 データ編集 - ブラウザで簡単編集
🔐 権限設定 - 誰が何をできるか
📊 一覧表示 - データを見やすく表示
💡 コード書かずにデータ管理!
🔥 重要:実際に作ったプログラムを人間がテストする際には絶対に必要な機能!
本格的なWebアプリを作る!
💎 1万円開発購入者の必須テクニック!
🌐 Webサイト構築 - URLとビューを作る
🗜️ データベース設計 - モデルを作る
🎨 テンプレート - 見た目を作る
🔐 認証システム - ログイン機能
💡 プロと同じ技術が使える!
他のサービスと連携!
💡 上級テクニック!これができればプロレベル!
🔗 REST API - データをやり取り
📱 スマホアプリ連携 - APIで繋げる
🤖 AI連携 - ChatGPTを組み込む
💳 決済機能 - Stripeで課金
💡 世界中のサービスと繋がる!
作ったアプリをみんなに見せよう!
🔥 超重要!これができないと誰も使えない!
🚂 Heroku - AIエージェント開発に最適!
✅ Bash経由でAIが直接操作可能
✅ heroku logs --tailでリアルタイムログ確認
✅ GitHub連携で自動デプロイ
💰 月$7から(無料枠は2022年廃止)
☁️ Railway - モダンだけど制限あり
❌ Hobby Plan($5)はSMTP全ポートブロック
❌ メール機能使えない
📦 Render - 無料枠あるけど遅い
🔥 Firebase - Googleのサービス
💡 初心者はHerokuがおすすめ!
できるようになってきたら!
🎯 最終目標!ここまで来たらプログラマー!
🎮 ゲーム作る
💬 SNS作る
🛒 ショッピングサイト作る
🎊 友達に自慢しよう!