[{"content":"この記事で解決すること 「GitHub Copilotって聞いたことあるけど、無料で使えるの？」\nGitHub Copilotは、コードを書いているとAIが自動で続きを提案してくれるツールです。無料プランがあるので、誰でも試せます。\nGitHub Copilotとは VS Codeなどのエディタに入れる拡張機能で、コードを書き始めるとAIが「こう書きたいんじゃない？」と続きを提案してくれます。\n例えば、こう書き始めると：\n# ファイルを読み込んで行数を数える AIが自動でこう提案してくれます：\ndef count_lines(filename): with open(filename, \u0026#39;r\u0026#39;) as f: return len(f.readlines()) Tabキーを押すだけで提案を採用できます。\n無料プランでできること 無料プラン 有料プラン（月10ドル） コード補完 月2,000回まで 無制限 チャット 月50回まで 無制限 対応エディタ VS Code等 VS Code等 月2,000回のコード補完は、個人の学習や小さなプロジェクトには十分な量です。\n始め方 ステップ1: GitHubアカウントを用意する GitHubのアカウントが必要です。まだ持っていない方は：\n👉 GitHubのアカウント作成方法はこちら\nステップ2: VS Codeに拡張機能をインストール VS Codeを開く Ctrl + Shift + X で拡張機能を開く 「GitHub Copilot」と検索 「GitHub Copilot」をインストール GitHubアカウントでサインインを求められるので、許可する ステップ3: 使ってみる 新しいファイルを作って、コメントを書いてみてください。\n# 1から10までの合計を計算する 数秒待つと、灰色の文字で提案が表示されます。Tab キーを押すと採用、Esc キーを押すとスキップです。\n便利な使い方 コメントから関数を生成 日本語のコメントでやりたいことを書くと、関数を丸ごと提案してくれます。\n# リストの中から重複を削除して、昇順に並べ替える関数 テストコードの自動生成 関数を書いた後に「テスト」とコメントすると、テストコードを提案してくれます。\ndef add(a, b): return a + b # addのテスト エラーの修正 コードにエラーがあるとき、Copilot Chatに聞けます。\nCtrl + I でCopilot Chatを開く 「このコードのエラーを修正して」と入力 注意点 Copilotの提案は必ず正しいとは限りません。内容を確認してから採用してください 機密情報（APIキーやパスワード）をコードに書くと、Copilotが学習データとして使う可能性があります 無料プランの回数制限は月初にリセットされます まとめ GitHub Copilotは無料プランで月2,000回のコード補完が使える VS Codeに拡張機能を入れるだけで始められる コメントを書くだけでAIがコードを提案してくれる 提案は必ず確認してから採用する 関連リソース Gitをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/github-copilot-free/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e「GitHub Copilotって聞いたことあるけど、無料で使えるの？」\u003c/p\u003e\n\u003cp\u003eGitHub Copilotは、コードを書いているとAIが自動で続きを提案してくれるツールです。無料プランがあるので、誰でも試せます。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"github-copilotとは\"\u003eGitHub Copilotとは\u003c/h2\u003e\n\u003cp\u003eVS Codeなどのエディタに入れる拡張機能で、コードを書き始めるとAIが「こう書きたいんじゃない？」と続きを提案してくれます。\u003c/p\u003e\n\u003cp\u003e例えば、こう書き始めると：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# ファイルを読み込んで行数を数える\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eAIが自動でこう提案してくれます：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003edef\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ecount_lines\u003c/span\u003e(filename):\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#66d9ef\"\u003ewith\u003c/span\u003e open(filename, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;r\u0026#39;\u003c/span\u003e) \u003cspan style=\"color:#66d9ef\"\u003eas\u003c/span\u003e f:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#66d9ef\"\u003ereturn\u003c/span\u003e len(f\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003ereadlines())\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eTabキーを押すだけで提案を採用できます。\u003c/p\u003e\n\u003ch2 id=\"無料プランでできること\"\u003e無料プランでできること\u003c/h2\u003e\n\u003ctable\u003e\n  \u003cthead\u003e\n      \u003ctr\u003e\n          \u003cth\u003e\u003c/th\u003e\n          \u003cth\u003e無料プラン\u003c/th\u003e\n          \u003cth\u003e有料プラン（月10ドル）\u003c/th\u003e\n      \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n      \u003ctr\u003e\n          \u003ctd\u003eコード補完\u003c/td\u003e\n          \u003ctd\u003e月2,000回まで\u003c/td\u003e\n          \u003ctd\u003e無制限\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003eチャット\u003c/td\u003e\n          \u003ctd\u003e月50回まで\u003c/td\u003e\n          \u003ctd\u003e無制限\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003e対応エディタ\u003c/td\u003e\n          \u003ctd\u003eVS Code等\u003c/td\u003e\n          \u003ctd\u003eVS Code等\u003c/td\u003e\n      \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003e月2,000回のコード補完は、個人の学習や小さなプロジェクトには十分な量です。\u003c/p\u003e\n\u003ch2 id=\"始め方\"\u003e始め方\u003c/h2\u003e\n\u003ch3 id=\"ステップ1-githubアカウントを用意する\"\u003eステップ1: GitHubアカウントを用意する\u003c/h3\u003e\n\u003cp\u003eGitHubのアカウントが必要です。まだ持っていない方は：\u003c/p\u003e\n\u003cp\u003e👉 \u003ca href=\"/posts/github-what-is-it/\"\u003eGitHubのアカウント作成方法はこちら\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"ステップ2-vs-codeに拡張機能をインストール\"\u003eステップ2: VS Codeに拡張機能をインストール\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eVS Codeを開く\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eCtrl + Shift + X\u003c/code\u003e で拡張機能を開く\u003c/li\u003e\n\u003cli\u003e「GitHub Copilot」と検索\u003c/li\u003e\n\u003cli\u003e「GitHub Copilot」をインストール\u003c/li\u003e\n\u003cli\u003eGitHubアカウントでサインインを求められるので、許可する\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"ステップ3-使ってみる\"\u003eステップ3: 使ってみる\u003c/h3\u003e\n\u003cp\u003e新しいファイルを作って、コメントを書いてみてください。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 1から10までの合計を計算する\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e数秒待つと、灰色の文字で提案が表示されます。\u003ccode\u003eTab\u003c/code\u003e キーを押すと採用、\u003ccode\u003eEsc\u003c/code\u003e キーを押すとスキップです。\u003c/p\u003e\n\u003ch2 id=\"便利な使い方\"\u003e便利な使い方\u003c/h2\u003e\n\u003ch3 id=\"コメントから関数を生成\"\u003eコメントから関数を生成\u003c/h3\u003e\n\u003cp\u003e日本語のコメントでやりたいことを書くと、関数を丸ごと提案してくれます。\u003c/p\u003e","title":"【GitHub Copilot】無料プランでAIにコードを書いてもらう方法"},{"content":"この記事で解決すること 「GitHubのアカウントを作りました。で、何すればいいの？」\nプログラミングを始めると「GitHubにコードを上げましょう」と言われます。でもGitHubを開いても、英語だらけで何をすればいいか分からない。\nこの記事では、GitHubで最初にやることだけに絞って説明します。\nGitHubとは何か（30秒で理解） GitHubは「コードの保管場所」です。\nGoogleドライブがファイルの保管場所であるように、GitHubはプログラムのコードを保管する場所です。\n違いは：\nコードの変更履歴が全部残る（いつ、誰が、何を変えたか） 間違えても過去の状態に戻せる 他の人とコードを共有できる 最初にやること：リポジトリを作る 「リポジトリ」はプロジェクトのフォルダのようなものです。1つのプロジェクトにつき1つのリポジトリを作ります。\nステップ1: 新しいリポジトリを作る GitHubにログイン 右上の「+」ボタン → 「New repository」をクリック 以下を入力： Repository name: my-first-repo（好きな名前でOK） Description: はじめてのリポジトリ（省略可） Public を選択 「Add a README file」にチェック ✅ 「Create repository」をクリック これでリポジトリが作られました。\nステップ2: READMEを編集してみる リポジトリのページに README.md というファイルがあります。これはプロジェクトの説明書です。\nREADME.md をクリック 右上の鉛筆アイコン（✏️）をクリック 内容を書き換える： # はじめてのリポジトリ GitHubの練習用リポジトリです。 ## 今日やったこと - GitHubのアカウントを作った - リポジトリを作った - READMEを編集した 下にスクロールして「Commit changes」をクリック Commit は「変更を保存する」という意味です。普通の「保存」と違って、変更の履歴が記録されます。\nステップ3: 変更履歴を見る リポジトリのトップページに戻る 「2 commits」のようなリンクをクリック さっきの変更が記録されています。いつ、何を変えたかが全部残っています。\nよく見る画面の意味 Code タブ ファイルの一覧。普通のフォルダと同じ。\nIssues タブ 「ここにバグがある」「この機能がほしい」などのメモを残す場所。自分用のTODOリストとしても使えます。\nPull requests タブ コードの変更を提案する機能。チームで開発するときに使います。最初は気にしなくてOK。\nSettings タブ リポジトリの設定。名前の変更や削除ができます。\nGitHubでやってはいけないこと パスワードやAPIキーを上げない コードと一緒にパスワードやAPIキー（サービスの鍵のようなもの）をGitHubに上げると、世界中の人に見られます。Publicリポジトリは誰でも見られるので注意。\nもし間違えて上げてしまったら、すぐにそのパスワードやキーを変更してください。\n他人のコードをそのまま自分のものとして上げない GitHubのコードにはライセンス（使用条件）があります。コピーして使う場合は、ライセンスを確認しましょう。\n次にやること GitHubの画面上でファイルを編集するのは練習としてはOKですが、実際の開発では自分のPCでコードを書いて、それをGitHubにアップロード（push）します。\nその方法は別の記事で解説しています：\n👉 git pushしたら「rejected」と言われたときの対処法\nまとめ GitHubは「コードの保管場所」 リポジトリ = プロジェクトのフォルダ Commit = 変更履歴付きの保存 パスワードは絶対に上げない 最初は「コードの保管場所」として使うだけで十分です。慣れてきたら、他の人のコードを見たり、自分のポートフォリオとして活用したりできます。\n関連リソース Gitをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/github-what-is-it/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e「GitHubのアカウントを作りました。で、何すればいいの？」\u003c/p\u003e\n\u003cp\u003eプログラミングを始めると「GitHubにコードを上げましょう」と言われます。でもGitHubを開いても、英語だらけで何をすればいいか分からない。\u003c/p\u003e\n\u003cp\u003eこの記事では、GitHubで最初にやることだけに絞って説明します。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"githubとは何か30秒で理解\"\u003eGitHubとは何か（30秒で理解）\u003c/h2\u003e\n\u003cp\u003eGitHubは「コードの保管場所」です。\u003c/p\u003e\n\u003cp\u003eGoogleドライブがファイルの保管場所であるように、GitHubはプログラムのコードを保管する場所です。\u003c/p\u003e\n\u003cp\u003e違いは：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eコードの変更履歴が全部残る（いつ、誰が、何を変えたか）\u003c/li\u003e\n\u003cli\u003e間違えても過去の状態に戻せる\u003c/li\u003e\n\u003cli\u003e他の人とコードを共有できる\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"最初にやることリポジトリを作る\"\u003e最初にやること：リポジトリを作る\u003c/h2\u003e\n\u003cp\u003e「リポジトリ」はプロジェクトのフォルダのようなものです。1つのプロジェクトにつき1つのリポジトリを作ります。\u003c/p\u003e\n\u003ch3 id=\"ステップ1-新しいリポジトリを作る\"\u003eステップ1: 新しいリポジトリを作る\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eGitHubにログイン\u003c/li\u003e\n\u003cli\u003e右上の「+」ボタン → 「New repository」をクリック\u003c/li\u003e\n\u003cli\u003e以下を入力：\n\u003cul\u003e\n\u003cli\u003eRepository name: \u003ccode\u003emy-first-repo\u003c/code\u003e（好きな名前でOK）\u003c/li\u003e\n\u003cli\u003eDescription: \u003ccode\u003eはじめてのリポジトリ\u003c/code\u003e（省略可）\u003c/li\u003e\n\u003cli\u003ePublic を選択\u003c/li\u003e\n\u003cli\u003e「Add a README file」にチェック ✅\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e「Create repository」をクリック\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eこれでリポジトリが作られました。\u003c/p\u003e\n\u003ch3 id=\"ステップ2-readmeを編集してみる\"\u003eステップ2: READMEを編集してみる\u003c/h3\u003e\n\u003cp\u003eリポジトリのページに \u003ccode\u003eREADME.md\u003c/code\u003e というファイルがあります。これはプロジェクトの説明書です。\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003eREADME.md\u003c/code\u003e をクリック\u003c/li\u003e\n\u003cli\u003e右上の鉛筆アイコン（✏️）をクリック\u003c/li\u003e\n\u003cli\u003e内容を書き換える：\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-markdown\" data-lang=\"markdown\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e# はじめてのリポジトリ\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eGitHubの練習用リポジトリです。\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e## 今日やったこと\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003e-\u003c/span\u003e GitHubのアカウントを作った\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003e-\u003c/span\u003e リポジトリを作った\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003e-\u003c/span\u003e READMEを編集した\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003col start=\"4\"\u003e\n\u003cli\u003e下にスクロールして「Commit changes」をクリック\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003ccode\u003eCommit\u003c/code\u003e は「変更を保存する」という意味です。普通の「保存」と違って、変更の履歴が記録されます。\u003c/p\u003e\n\u003ch3 id=\"ステップ3-変更履歴を見る\"\u003eステップ3: 変更履歴を見る\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eリポジトリのトップページに戻る\u003c/li\u003e\n\u003cli\u003e「2 commits」のようなリンクをクリック\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eさっきの変更が記録されています。いつ、何を変えたかが全部残っています。\u003c/p\u003e","title":"【GitHub】アカウントを作ったけど何すればいい？最初の使い方ガイド"},{"content":"この記事で解決すること 「HTMLを書いてみたいけど、何から始めればいいか分からない」\nこの記事では、HTMLファイルの最低限の構造と、コピペで使えるテンプレートを紹介します。\nHTMLとは HTMLは、Webページの「骨組み」を作る言語です。ブラウザで見ているすべてのWebページは、HTMLで書かれています。\nHTMLは「プログラミング言語」ではなく「マークアップ言語」です。計算や処理をするのではなく、「ここは見出し」「ここは段落」「ここは画像」と、コンテンツの構造を指定するだけです。\n最低限のHTMLテンプレート 以下をコピペして、index.html というファイル名で保存してください。\n\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;ja\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1.0\u0026#34;\u0026gt; \u0026lt;title\u0026gt;はじめてのWebページ\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;はじめてのWebページ\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;HTMLで作った最初のページです。\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 保存したファイルをブラウザにドラッグ＆ドロップすると、Webページとして表示されます。\n各行の意味 \u0026lt;!DOCTYPE html\u0026gt; 「このファイルはHTML5で書かれています」という宣言です。おまじないだと思ってください。必ず1行目に書きます。\n\u0026lt;html lang=\u0026quot;ja\u0026quot;\u0026gt; HTMLの始まりを示すタグです。lang=\u0026quot;ja\u0026quot; は「このページは日本語です」という意味。\n\u0026lt;head\u0026gt; の中身 ページの「裏方情報」を書く場所です。ブラウザの画面には表示されません。\n\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt; → 文字化けを防ぐ設定 \u0026lt;meta name=\u0026quot;viewport\u0026quot; ...\u0026gt; → スマホで見たときにちゃんと表示される設定 \u0026lt;title\u0026gt; → ブラウザのタブに表示されるタイトル \u0026lt;body\u0026gt; の中身 ここに書いたものがブラウザに表示されます。\n\u0026lt;h1\u0026gt; → 一番大きい見出し \u0026lt;p\u0026gt; → 段落（普通の文章） よく使うタグ一覧 \u0026lt;!-- 見出し（h1が最大、h6が最小） --\u0026gt; \u0026lt;h1\u0026gt;大見出し\u0026lt;/h1\u0026gt; \u0026lt;h2\u0026gt;中見出し\u0026lt;/h2\u0026gt; \u0026lt;h3\u0026gt;小見出し\u0026lt;/h3\u0026gt; \u0026lt;!-- 段落 --\u0026gt; \u0026lt;p\u0026gt;これは段落です。\u0026lt;/p\u0026gt; \u0026lt;!-- リンク --\u0026gt; \u0026lt;a href=\u0026#34;https://example.com\u0026#34;\u0026gt;リンクテキスト\u0026lt;/a\u0026gt; \u0026lt;!-- 画像 --\u0026gt; \u0026lt;img src=\u0026#34;photo.jpg\u0026#34; alt=\u0026#34;写真の説明\u0026#34;\u0026gt; \u0026lt;!-- リスト --\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;項目1\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;項目2\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;項目3\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;!-- 太字 --\u0026gt; \u0026lt;strong\u0026gt;太字のテキスト\u0026lt;/strong\u0026gt; \u0026lt;!-- 改行 --\u0026gt; \u0026lt;br\u0026gt; \u0026lt;!-- 水平線 --\u0026gt; \u0026lt;hr\u0026gt; 実践：自己紹介ページを作ってみよう 以下をコピペして profile.html として保存し、ブラウザで開いてみてください。\n\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;ja\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1.0\u0026#34;\u0026gt; \u0026lt;title\u0026gt;自己紹介\u0026lt;/title\u0026gt; \u0026lt;style\u0026gt; body { font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 2rem; background: #f5f5f5; } h1 { color: #333; } .card { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } \u0026lt;/style\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;div class=\u0026#34;card\u0026#34;\u0026gt; \u0026lt;h1\u0026gt;自己紹介\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;名前：あなたの名前\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;趣味：プログラミング学習\u0026lt;/p\u0026gt; \u0026lt;h2\u0026gt;好きな技術\u0026lt;/h2\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;HTML / CSS\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Python\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;JavaScript\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;h2\u0026gt;リンク\u0026lt;/h2\u0026gt; \u0026lt;a href=\u0026#34;https://github.com\u0026#34;\u0026gt;GitHub\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; \u0026lt;style\u0026gt; タグの中にCSSを書くと、見た目を変えられます。色やフォントを変えて遊んでみてください。\nまとめ HTMLはWebページの「骨組み」を作る言語 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;body\u0026gt; が基本構造 \u0026lt;head\u0026gt; は裏方情報、\u0026lt;body\u0026gt; が表示される内容 まずはテンプレートをコピペして、中身を変えてみる 関連リソース Web開発をもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/html-basic-structure/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e「HTMLを書いてみたいけど、何から始めればいいか分からない」\u003c/p\u003e\n\u003cp\u003eこの記事では、HTMLファイルの最低限の構造と、コピペで使えるテンプレートを紹介します。\u003c/p\u003e\n\u003ch2 id=\"htmlとは\"\u003eHTMLとは\u003c/h2\u003e\n\u003cp\u003eHTMLは、Webページの「骨組み」を作る言語です。ブラウザで見ているすべてのWebページは、HTMLで書かれています。\u003c/p\u003e\n\u003cp\u003eHTMLは「プログラミング言語」ではなく「マークアップ言語」です。計算や処理をするのではなく、「ここは見出し」「ここは段落」「ここは画像」と、コンテンツの構造を指定するだけです。\u003c/p\u003e\n\u003ch2 id=\"最低限のhtmlテンプレート\"\u003e最低限のHTMLテンプレート\u003c/h2\u003e\n\u003cp\u003e以下をコピペして、\u003ccode\u003eindex.html\u003c/code\u003e というファイル名で保存してください。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ehtml\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003elang\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;ja\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ehead\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003echarset\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;UTF-8\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ename\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;viewport\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;width=device-width, initial-scale=1.0\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003etitle\u003c/span\u003e\u0026gt;はじめてのWebページ\u0026lt;/\u003cspan style=\"color:#f92672\"\u003etitle\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ehead\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ebody\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003eh1\u003c/span\u003e\u0026gt;はじめてのWebページ\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eh1\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e\u0026gt;HTMLで作った最初のページです。\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ebody\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ehtml\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e保存したファイルをブラウザにドラッグ＆ドロップすると、Webページとして表示されます。\u003c/p\u003e\n\u003ch2 id=\"各行の意味\"\u003e各行の意味\u003c/h2\u003e\n\u003ch3 id=\"doctype-html\"\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e\u003c/h3\u003e\n\u003cp\u003e「このファイルはHTML5で書かれています」という宣言です。おまじないだと思ってください。必ず1行目に書きます。\u003c/p\u003e\n\u003ch3 id=\"html-langja\"\u003e\u003ccode\u003e\u0026lt;html lang=\u0026quot;ja\u0026quot;\u0026gt;\u003c/code\u003e\u003c/h3\u003e\n\u003cp\u003eHTMLの始まりを示すタグです。\u003ccode\u003elang=\u0026quot;ja\u0026quot;\u003c/code\u003e は「このページは日本語です」という意味。\u003c/p\u003e\n\u003ch3 id=\"head-の中身\"\u003e\u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e の中身\u003c/h3\u003e\n\u003cp\u003eページの「裏方情報」を書く場所です。ブラウザの画面には表示されません。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;\u003c/code\u003e → 文字化けを防ぐ設定\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;meta name=\u0026quot;viewport\u0026quot; ...\u0026gt;\u003c/code\u003e → スマホで見たときにちゃんと表示される設定\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e → ブラウザのタブに表示されるタイトル\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"body-の中身\"\u003e\u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e の中身\u003c/h3\u003e\n\u003cp\u003eここに書いたものがブラウザに表示されます。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e → 一番大きい見出し\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e → 段落（普通の文章）\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"よく使うタグ一覧\"\u003eよく使うタグ一覧\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 見出し（h1が最大、h6が最小） --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003eh1\u003c/span\u003e\u0026gt;大見出し\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eh1\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003eh2\u003c/span\u003e\u0026gt;中見出し\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eh2\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003eh3\u003c/span\u003e\u0026gt;小見出し\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eh3\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 段落 --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e\u0026gt;これは段落です。\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- リンク --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ea\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ehref\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;https://example.com\u0026#34;\u003c/span\u003e\u0026gt;リンクテキスト\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ea\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 画像 --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003eimg\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003esrc\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;photo.jpg\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ealt\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;写真の説明\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- リスト --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003eul\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;項目1\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;項目2\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;項目3\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eli\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#f92672\"\u003eul\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 太字 --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003estrong\u003c/span\u003e\u0026gt;太字のテキスト\u0026lt;/\u003cspan style=\"color:#f92672\"\u003estrong\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 改行 --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ebr\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e\u0026lt;!-- 水平線 --\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ehr\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"実践自己紹介ページを作ってみよう\"\u003e実践：自己紹介ページを作ってみよう\u003c/h2\u003e\n\u003cp\u003e以下をコピペして \u003ccode\u003eprofile.html\u003c/code\u003e として保存し、ブラウザで開いてみてください。\u003c/p\u003e","title":"【HTML】最低限のHTMLファイルの書き方 ― コピペで使えるテンプレート付き"},{"content":"この記事で解決すること pip install したらエラーが出た。何が起きているのか分からない。\nこの記事では、pip installでよく出るエラーを5つ取り上げて、それぞれの原因と解決方法を説明します。\nエラー1: Permission denied（権限エラー） ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied 原因 システム全体のPythonにインストールしようとして、権限が足りない状態です。\n解決方法 --user オプションをつけてインストールします。\npip install --user パッケージ名 もしくは、仮想環境を使うのが根本的な解決策です。\npython -m venv .venv .venv\\Scripts\\activate # Windowsの場合 pip install パッケージ名 仮想環境については別の記事で詳しく解説しています。\n👉 ModuleNotFoundErrorの原因と解決方法\nエラー2: No matching distribution found ERROR: No matching distribution found for パッケージ名 原因 以下のどれかです。\nパッケージ名のスペルミス そのパッケージが自分のPythonバージョンに対応していない そのパッケージがOSに対応していない 解決方法 まずスペルを確認してください。大文字小文字やハイフンとアンダースコアの違いに注意。\n# NG pip install Requests # OK pip install requests Pythonのバージョンを確認するには：\npython --version パッケージの対応バージョンはPyPI（https://pypi.org）で確認できます。\nエラー3: Connection timeout（接続タイムアウト） WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) ERROR: Could not fetch URL https://pypi.org/... 原因 インターネット接続の問題か、会社のプロキシに阻まれています。\n解決方法 まずインターネット接続を確認。接続できているなら、ミラーサーバーを使います。\npip install パッケージ名 --index-url https://pypi.tuna.tsinghua.edu.cn/simple 会社のプロキシ環境の場合：\npip install パッケージ名 --proxy http://プロキシアドレス:ポート番号 エラー4: ModuleNotFoundError（インストールしたのに見つからない） ModuleNotFoundError: No module named \u0026#39;requests\u0026#39; 原因 pip install したPythonと、python コマンドで動くPythonが別物です。PCに複数のPythonが入っている場合に起きます。\n解決方法 python -m pip を使ってインストールします。\npython -m pip install requests これで「今動いているPython」に確実にインストールされます。\nエラー5: Could not build wheels ERROR: Could not build wheels for パッケージ名 原因 パッケージのビルドに必要なツール（C言語のコンパイラなど）がPCに入っていません。\n解決方法 まず pip と setuptools を最新にします。\npython -m pip install --upgrade pip setuptools wheel それでもダメな場合は、ビルド済みのバージョンを指定してインストールします。\npip install パッケージ名==バージョン番号 まとめ Permission denied → --user か仮想環境を使う No matching distribution → スペルとPythonバージョンを確認 Connection timeout → ネット接続確認、ミラーサーバーを使う ModuleNotFoundError → python -m pip install を使う Could not build wheels → pip/setuptools を更新 関連リソース Pythonをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/python-pip-install-error/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003epip install\u003c/code\u003e したらエラーが出た。何が起きているのか分からない。\u003c/p\u003e\n\u003cp\u003eこの記事では、pip installでよく出るエラーを5つ取り上げて、それぞれの原因と解決方法を説明します。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"エラー1-permission-denied権限エラー\"\u003eエラー1: Permission denied（権限エラー）\u003c/h2\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"原因\"\u003e原因\u003c/h3\u003e\n\u003cp\u003eシステム全体のPythonにインストールしようとして、権限が足りない状態です。\u003c/p\u003e\n\u003ch3 id=\"解決方法\"\u003e解決方法\u003c/h3\u003e\n\u003cp\u003e\u003ccode\u003e--user\u003c/code\u003e オプションをつけてインストールします。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epip install --user パッケージ名\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eもしくは、仮想環境を使うのが根本的な解決策です。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epython -m venv .venv\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.venv\u003cspan style=\"color:#ae81ff\"\u003e\\S\u003c/span\u003ecripts\u003cspan style=\"color:#ae81ff\"\u003e\\a\u003c/span\u003ectivate   \u003cspan style=\"color:#75715e\"\u003e# Windowsの場合\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epip install パッケージ名\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e仮想環境については別の記事で詳しく解説しています。\u003c/p\u003e\n\u003cp\u003e👉 \u003ca href=\"/posts/python-venv-beginner/\"\u003eModuleNotFoundErrorの原因と解決方法\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"エラー2-no-matching-distribution-found\"\u003eエラー2: No matching distribution found\u003c/h2\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eERROR: No matching distribution found for パッケージ名\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"原因-1\"\u003e原因\u003c/h3\u003e\n\u003cp\u003e以下のどれかです。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eパッケージ名のスペルミス\u003c/li\u003e\n\u003cli\u003eそのパッケージが自分のPythonバージョンに対応していない\u003c/li\u003e\n\u003cli\u003eそのパッケージがOSに対応していない\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"解決方法-1\"\u003e解決方法\u003c/h3\u003e\n\u003cp\u003eまずスペルを確認してください。大文字小文字やハイフンとアンダースコアの違いに注意。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# NG\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epip install Requests\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# OK\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epip install requests\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003ePythonのバージョンを確認するには：\u003c/p\u003e","title":"【Python】pip installでエラーが出たときの対処法まとめ"},{"content":"この記事で解決すること 「JSONって何？ プログラミングの記事を読んでいるとよく出てくるけど、意味が分からない」\nこの記事を読めば、JSONが何なのか、どう読めばいいのかが5分で分かります。\nJSONとは JSON（ジェイソン）は、データを整理して書くためのフォーマット（書き方のルール）です。\n正式名称は「JavaScript Object Notation」ですが、名前は覚えなくて大丈夫です。\n具体例を見てみよう たとえば、「田中太郎さん、30歳、東京在住」という情報をJSONで書くとこうなります。\n{ \u0026#34;name\u0026#34;: \u0026#34;田中太郎\u0026#34;, \u0026#34;age\u0026#34;: 30, \u0026#34;city\u0026#34;: \u0026#34;東京\u0026#34; } ルールはシンプルです。\n{} で全体を囲む \u0026quot;項目名\u0026quot;: 値 の形で書く 項目同士は , で区切る 文字列は \u0026quot;\u0026quot; で囲む、数字はそのまま なぜJSONが使われるのか プログラム同士がデータをやり取りするときに使います。\nたとえば：\n天気予報アプリがサーバーから天気データを受け取るとき Webサイトがログイン情報をサーバーに送るとき 設定ファイルに設定を保存するとき 人間にも読めて、プログラムにも読める。この「両方に優しい」のがJSONの強みです。\nもう少し複雑な例 リスト（配列）も書けます。\n{ \u0026#34;name\u0026#34;: \u0026#34;田中太郎\u0026#34;, \u0026#34;age\u0026#34;: 30, \u0026#34;hobbies\u0026#34;: [\u0026#34;読書\u0026#34;, \u0026#34;映画\u0026#34;, \u0026#34;プログラミング\u0026#34;] } [] で囲むとリストになります。\n入れ子（ネスト）もできます。\n{ \u0026#34;name\u0026#34;: \u0026#34;田中太郎\u0026#34;, \u0026#34;address\u0026#34;: { \u0026#34;city\u0026#34;: \u0026#34;東京\u0026#34;, \u0026#34;zip\u0026#34;: \u0026#34;100-0001\u0026#34; } } {} の中に {} を入れると、データの中にデータを持てます。\nよくある間違い 最後のカンマ { \u0026#34;name\u0026#34;: \u0026#34;田中太郎\u0026#34;, \u0026#34;age\u0026#34;: 30, } 最後の項目の後にカンマ , をつけるとエラーになります。30 の後のカンマを消してください。\nシングルクォート { \u0026#39;name\u0026#39;: \u0026#39;田中太郎\u0026#39; } JSONではシングルクォート ' は使えません。必ずダブルクォート \u0026quot; を使います。\nコメント JSONにはコメントを書けません。// これはコメント のような書き方はエラーになります。\nどこで見かけるか package.json（Node.jsのプロジェクト設定） APIのレスポンス（Webサービスから返ってくるデータ） 設定ファイル（VS Codeの settings.json など） プログラミングを続けていると、必ず出会うフォーマットです。\nまとめ JSONは「データを整理して書くフォーマット」 \u0026quot;項目名\u0026quot;: 値 の形で書く 人間にもプログラムにも読みやすい リストや入れ子も書ける 最後のカンマとシングルクォートに注意 関連リソース プログラミングを始めたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/json-what-is-it/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e「JSONって何？ プログラミングの記事を読んでいるとよく出てくるけど、意味が分からない」\u003c/p\u003e\n\u003cp\u003eこの記事を読めば、JSONが何なのか、どう読めばいいのかが5分で分かります。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"jsonとは\"\u003eJSONとは\u003c/h2\u003e\n\u003cp\u003eJSON（ジェイソン）は、データを整理して書くためのフォーマット（書き方のルール）です。\u003c/p\u003e\n\u003cp\u003e正式名称は「JavaScript Object Notation」ですが、名前は覚えなくて大丈夫です。\u003c/p\u003e\n\u003ch2 id=\"具体例を見てみよう\"\u003e具体例を見てみよう\u003c/h2\u003e\n\u003cp\u003eたとえば、「田中太郎さん、30歳、東京在住」という情報をJSONで書くとこうなります。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-json\" data-lang=\"json\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;name\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;田中太郎\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;age\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e30\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;city\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;東京\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eルールはシンプルです。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e{}\u003c/code\u003e で全体を囲む\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;項目名\u0026quot;: 値\u003c/code\u003e の形で書く\u003c/li\u003e\n\u003cli\u003e項目同士は \u003ccode\u003e,\u003c/code\u003e で区切る\u003c/li\u003e\n\u003cli\u003e文字列は \u003ccode\u003e\u0026quot;\u0026quot;\u003c/code\u003e で囲む、数字はそのまま\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"なぜjsonが使われるのか\"\u003eなぜJSONが使われるのか\u003c/h2\u003e\n\u003cp\u003eプログラム同士がデータをやり取りするときに使います。\u003c/p\u003e\n\u003cp\u003eたとえば：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e天気予報アプリがサーバーから天気データを受け取るとき\u003c/li\u003e\n\u003cli\u003eWebサイトがログイン情報をサーバーに送るとき\u003c/li\u003e\n\u003cli\u003e設定ファイルに設定を保存するとき\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e人間にも読めて、プログラムにも読める。この「両方に優しい」のがJSONの強みです。\u003c/p\u003e\n\u003ch2 id=\"もう少し複雑な例\"\u003eもう少し複雑な例\u003c/h2\u003e\n\u003cp\u003eリスト（配列）も書けます。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-json\" data-lang=\"json\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;name\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;田中太郎\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;age\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e30\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;hobbies\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;読書\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;映画\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;プログラミング\u0026#34;\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003e[]\u003c/code\u003e で囲むとリストになります。\u003c/p\u003e\n\u003cp\u003e入れ子（ネスト）もできます。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-json\" data-lang=\"json\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;name\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;田中太郎\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;address\u0026#34;\u003c/span\u003e: {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003e\u0026#34;city\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;東京\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003e\u0026#34;zip\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;100-0001\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  }\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003e{}\u003c/code\u003e の中に \u003ccode\u003e{}\u003c/code\u003e を入れると、データの中にデータを持てます。\u003c/p\u003e\n\u003ch2 id=\"よくある間違い\"\u003eよくある間違い\u003c/h2\u003e\n\u003ch3 id=\"最後のカンマ\"\u003e最後のカンマ\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-json\" data-lang=\"json\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;name\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;田中太郎\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;age\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e30\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e最後の項目の後にカンマ \u003ccode\u003e,\u003c/code\u003e をつけるとエラーになります。\u003ccode\u003e30\u003c/code\u003e の後のカンマを消してください。\u003c/p\u003e","title":"【初心者向け】JSONとは？5分で分かるデータ形式の基本"},{"content":"この記事で解決すること ブラウザで localhost:3000 や localhost:8080 にアクセスしたら、こんなエラーが出た。\nこのサイトにアクセスできません localhost で接続が拒否されました ERR_CONNECTION_REFUSED プログラミングの学習中によく出るエラーです。原因は単純なので、順番に確認すれば解決します。\n原因1：サーバーが起動していない（最も多い） 一番多い原因です。ブラウザでlocalhostにアクセスする前に、サーバーを起動する必要があります。\n確認方法 ターミナルを見てください。サーバーが起動していれば、こんな表示があるはずです。\nServer running on http://localhost:3000 この表示がなければ、サーバーが起動していません。\n解決方法 使っているフレームワークに応じて、サーバーを起動してください。\n# Node.js / Express node app.js # React npm start # Python / Flask python app.py # Python / Django python manage.py runserver 原因2：ポート番号が違う サーバーは起動しているけど、ブラウザでアクセスしているポート番号が違う場合。\n確認方法 ターミナルの表示を確認してください。\nServer running on http://localhost:8000 この場合、localhost:3000 ではなく localhost:8000 にアクセスする必要があります。\n原因3：ポートが他のプログラムに使われている 同じポート番号を別のプログラムが使っていると、サーバーが起動できません。\n確認方法（Windows） netstat -ano | findstr :3000 何か表示されたら、そのポートは使用中です。\n解決方法 別のポート番号でサーバーを起動するか、使用中のプログラムを終了してください。\n原因4：ファイアウォールにブロックされている 会社のPCや、セキュリティソフトが入っているPCで起きることがあります。\n解決方法 一時的にファイアウォールを無効にして試してみてください。それで接続できたら、ファイアウォールの設定でlocalhostへの接続を許可してください。\nまとめ まずサーバーが起動しているか確認 ポート番号が合っているか確認 ポートが他のプログラムに使われていないか確認 ファイアウォールを確認 関連リソース プログラミングを始めたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/localhost-refused/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003eブラウザで \u003ccode\u003elocalhost:3000\u003c/code\u003e や \u003ccode\u003elocalhost:8080\u003c/code\u003e にアクセスしたら、こんなエラーが出た。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eこのサイトにアクセスできません\nlocalhost で接続が拒否されました\nERR_CONNECTION_REFUSED\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eプログラミングの学習中によく出るエラーです。原因は単純なので、順番に確認すれば解決します。\u003c/p\u003e\n\u003ch2 id=\"原因1サーバーが起動していない最も多い\"\u003e原因1：サーバーが起動していない（最も多い）\u003c/h2\u003e\n\u003cp\u003e一番多い原因です。ブラウザでlocalhostにアクセスする前に、サーバーを起動する必要があります。\u003c/p\u003e\n\u003ch3 id=\"確認方法\"\u003e確認方法\u003c/h3\u003e\n\u003cp\u003eターミナルを見てください。サーバーが起動していれば、こんな表示があるはずです。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eServer running on http://localhost:3000\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eこの表示がなければ、サーバーが起動していません。\u003c/p\u003e\n\u003ch3 id=\"解決方法\"\u003e解決方法\u003c/h3\u003e\n\u003cp\u003e使っているフレームワークに応じて、サーバーを起動してください。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Node.js / Express\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003enode app.js\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# React\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003enpm start\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Python / Flask\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epython app.py\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Python / Django\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epython manage.py runserver\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"原因2ポート番号が違う\"\u003e原因2：ポート番号が違う\u003c/h2\u003e\n\u003cp\u003eサーバーは起動しているけど、ブラウザでアクセスしているポート番号が違う場合。\u003c/p\u003e\n\u003ch3 id=\"確認方法-1\"\u003e確認方法\u003c/h3\u003e\n\u003cp\u003eターミナルの表示を確認してください。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eServer running on http://localhost:8000\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eこの場合、\u003ccode\u003elocalhost:3000\u003c/code\u003e ではなく \u003ccode\u003elocalhost:8000\u003c/code\u003e にアクセスする必要があります。\u003c/p\u003e\n\u003ch2 id=\"原因3ポートが他のプログラムに使われている\"\u003e原因3：ポートが他のプログラムに使われている\u003c/h2\u003e\n\u003cp\u003e同じポート番号を別のプログラムが使っていると、サーバーが起動できません。\u003c/p\u003e\n\u003ch3 id=\"確認方法windows\"\u003e確認方法（Windows）\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003enetstat -ano | findstr :3000\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e何か表示されたら、そのポートは使用中です。\u003c/p\u003e\n\u003ch3 id=\"解決方法-1\"\u003e解決方法\u003c/h3\u003e\n\u003cp\u003e別のポート番号でサーバーを起動するか、使用中のプログラムを終了してください。\u003c/p\u003e\n\u003ch2 id=\"原因4ファイアウォールにブロックされている\"\u003e原因4：ファイアウォールにブロックされている\u003c/h2\u003e\n\u003cp\u003e会社のPCや、セキュリティソフトが入っているPCで起きることがあります。\u003c/p\u003e","title":"【初心者向け】localhost接続が拒否されたときの対処法"},{"content":"この記事で解決すること プログラミングを始めようとしたら「ターミナルを開いてください」と言われた。\n黒い画面が出てきた。何を打てばいいか分からない。変なコマンドを打ったらPCが壊れそう。\nその気持ち、よく分かります。この記事では「これだけ知っていれば怖くない」という操作だけに絞って説明します。\nまず知っておくこと コマンドを間違えてもPCは壊れません 「コマンドが見つかりません」と言われるだけです いつでも閉じてやり直せます ターミナル（コマンドライン）は、マウスの代わりにキーボードでPCを操作する道具です。やっていることはエクスプローラーと同じで、フォルダを開いたりファイルを見たりするだけです。\nターミナルの開き方 Windowsの場合 キーボードの Windows キーを押す cmd と入力してEnter 「コマンドプロンプト」という黒い画面が開きます。\nもしくは、PowerShellでもOKです：\nWindows キーを押す powershell と入力してEnter Macの場合 Command + Space を押す（Spotlight検索が開く） terminal と入力してEnter 覚えるコマンドは5つだけ 1. 今どこにいるか確認する # Windows cd # Mac / Linux pwd 今自分がどのフォルダにいるかが表示されます。迷子になったらまずこれ。\ncd は「current directory（今のフォルダ）」、pwd は「print working directory（作業フォルダを表示）」の略です。\n2. フォルダの中身を見る # Windows dir # Mac / Linux ls 今いるフォルダにあるファイルやフォルダの一覧が表示されます。エクスプローラーで見ているのと同じ情報です。\n3. フォルダに移動する cd フォルダ名 例えば、デスクトップに移動したいなら：\ncd Desktop これはWindows、Mac、Linux共通です。\n4. 一つ上のフォルダに戻る cd .. .. は「一つ上」という意味です。フォルダを間違えて入ったときに使います。\n5. 画面をきれいにする cls # Windows clear # Mac / Linux 画面がごちゃごちゃしてきたらこれでリセット。表示が消えるだけで、何かが削除されるわけではないので安心してください。\n実際にやってみよう 以下の手順を順番にやってみてください。\n# 1. 今どこにいるか確認 cd # 2. 中身を見る dir # 3. デスクトップに移動 cd Desktop # 4. 中身を見る dir # 5. 一つ上に戻る cd .. # 6. 画面をきれいにする cls どうですか？ 何も壊れなかったはずです。\nよくある不安と答え 「変なコマンドを打ったらどうなる？」 「\u0026lsquo;xxx\u0026rsquo; は、内部コマンドまたは外部コマンド\u0026hellip;として認識されていません」と表示されるだけです。何も起きません。\n「間違えてファイルを消しちゃわない？」 ファイルを消すコマンド（del や rm）は、自分で意図的に打たない限り実行されません。cd や dir でファイルが消えることはありません。\n「矢印キーの↑を押すと前のコマンドが出てくる」 これは便利機能です。同じコマンドをもう一度打ちたいときに使えます。\nまとめと次のステップ 覚えるのは5つだけ：\ncd / pwd → 今どこにいるか dir / ls → 中身を見る cd フォルダ名 → 移動する cd .. → 戻る cls / clear → 画面をきれいにする これだけ知っていれば、「ターミナルを開いてこのコマンドを実行してください」と言われても怖くありません。\n関連リソース プログラミングを始めたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/command-line-scary/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003eプログラミングを始めようとしたら「ターミナルを開いてください」と言われた。\u003c/p\u003e\n\u003cp\u003e黒い画面が出てきた。何を打てばいいか分からない。変なコマンドを打ったらPCが壊れそう。\u003c/p\u003e\n\u003cp\u003eその気持ち、よく分かります。この記事では「これだけ知っていれば怖くない」という操作だけに絞って説明します。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"まず知っておくこと\"\u003eまず知っておくこと\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eコマンドを間違えてもPCは壊れません\u003c/li\u003e\n\u003cli\u003e「コマンドが見つかりません」と言われるだけです\u003c/li\u003e\n\u003cli\u003eいつでも閉じてやり直せます\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eターミナル（コマンドライン）は、マウスの代わりにキーボードでPCを操作する道具です。やっていることはエクスプローラーと同じで、フォルダを開いたりファイルを見たりするだけです。\u003c/p\u003e\n\u003ch2 id=\"ターミナルの開き方\"\u003eターミナルの開き方\u003c/h2\u003e\n\u003ch3 id=\"windowsの場合\"\u003eWindowsの場合\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eキーボードの \u003ccode\u003eWindows\u003c/code\u003e キーを押す\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecmd\u003c/code\u003e と入力してEnter\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e「コマンドプロンプト」という黒い画面が開きます。\u003c/p\u003e\n\u003cp\u003eもしくは、PowerShellでもOKです：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003eWindows\u003c/code\u003e キーを押す\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epowershell\u003c/code\u003e と入力してEnter\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"macの場合\"\u003eMacの場合\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003eCommand + Space\u003c/code\u003e を押す（Spotlight検索が開く）\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eterminal\u003c/code\u003e と入力してEnter\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"覚えるコマンドは5つだけ\"\u003e覚えるコマンドは5つだけ\u003c/h2\u003e\n\u003ch3 id=\"1-今どこにいるか確認する\"\u003e1. 今どこにいるか確認する\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Windows\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ecd\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Mac / Linux\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epwd\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e今自分がどのフォルダにいるかが表示されます。迷子になったらまずこれ。\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ecd\u003c/code\u003e は「current directory（今のフォルダ）」、\u003ccode\u003epwd\u003c/code\u003e は「print working directory（作業フォルダを表示）」の略です。\u003c/p\u003e\n\u003ch3 id=\"2-フォルダの中身を見る\"\u003e2. フォルダの中身を見る\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Windows\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edir\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# Mac / Linux\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003els\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e今いるフォルダにあるファイルやフォルダの一覧が表示されます。エクスプローラーで見ているのと同じ情報です。\u003c/p\u003e\n\u003ch3 id=\"3-フォルダに移動する\"\u003e3. フォルダに移動する\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ecd フォルダ名\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e例えば、デスクトップに移動したいなら：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ecd Desktop\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eこれはWindows、Mac、Linux共通です。\u003c/p\u003e","title":"【初心者向け】コマンドラインが怖い人へ ― 覚えるコマンド5つだけ"},{"content":"この記事で作るもの ダウンロードフォルダに溜まったファイルを、拡張子ごとに自動でフォルダに振り分けるPythonスクリプトを作ります。\nこんな感じに整理されます：\nダウンロード/ ├── 画像/ ← .jpg, .png, .gif など ├── ドキュメント/ ← .pdf, .docx, .xlsx など ├── 動画/ ← .mp4, .mov など ├── 音楽/ ← .mp3, .wav など └── その他/ ← 上記に当てはまらないもの 必要なもの Python 3.8 以上（公式サイトからインストール） テキストエディタ（メモ帳でもOK） 追加のライブラリは不要です。Pythonに最初から入っている機能だけで作れます。\n手順 ステップ1: スクリプトファイルを作る 好きな場所に organize.py というファイルを作り、以下のコードを書きます。\nimport os import shutil from pathlib import Path # 整理したいフォルダのパス（自分の環境に合わせて変更） TARGET_DIR = Path.home() / \u0026#34;Downloads\u0026#34; # 拡張子とフォルダ名の対応表 CATEGORIES = { \u0026#34;画像\u0026#34;: [\u0026#34;.jpg\u0026#34;, \u0026#34;.jpeg\u0026#34;, \u0026#34;.png\u0026#34;, \u0026#34;.gif\u0026#34;, \u0026#34;.bmp\u0026#34;, \u0026#34;.svg\u0026#34;, \u0026#34;.webp\u0026#34;], \u0026#34;ドキュメント\u0026#34;: [\u0026#34;.pdf\u0026#34;, \u0026#34;.doc\u0026#34;, \u0026#34;.docx\u0026#34;, \u0026#34;.xls\u0026#34;, \u0026#34;.xlsx\u0026#34;, \u0026#34;.ppt\u0026#34;, \u0026#34;.pptx\u0026#34;, \u0026#34;.txt\u0026#34;, \u0026#34;.csv\u0026#34;], \u0026#34;動画\u0026#34;: [\u0026#34;.mp4\u0026#34;, \u0026#34;.mov\u0026#34;, \u0026#34;.avi\u0026#34;, \u0026#34;.mkv\u0026#34;, \u0026#34;.wmv\u0026#34;], \u0026#34;音楽\u0026#34;: [\u0026#34;.mp3\u0026#34;, \u0026#34;.wav\u0026#34;, \u0026#34;.flac\u0026#34;, \u0026#34;.aac\u0026#34;, \u0026#34;.ogg\u0026#34;], \u0026#34;圧縮ファイル\u0026#34;: [\u0026#34;.zip\u0026#34;, \u0026#34;.rar\u0026#34;, \u0026#34;.7z\u0026#34;, \u0026#34;.tar\u0026#34;, \u0026#34;.gz\u0026#34;], \u0026#34;プログラム\u0026#34;: [\u0026#34;.exe\u0026#34;, \u0026#34;.msi\u0026#34;, \u0026#34;.dmg\u0026#34;], } CATEGORIES は辞書（dict）と呼ばれるデータ構造で、「フォルダ名」と「そこに入れる拡張子のリスト」を対応づけています。\nステップ2: 振り分けの処理を書く 先ほどのコードの続きに、以下を追加します。\ndef get_category(extension): \u0026#34;\u0026#34;\u0026#34;拡張子からカテゴリ名を返す。該当なしなら「その他」\u0026#34;\u0026#34;\u0026#34; for category, extensions in CATEGORIES.items(): if extension.lower() in extensions: return category return \u0026#34;その他\u0026#34; def organize(): \u0026#34;\u0026#34;\u0026#34;ダウンロードフォルダ内のファイルを整理する\u0026#34;\u0026#34;\u0026#34; moved_count = 0 for file_path in TARGET_DIR.iterdir(): # フォルダはスキップ（ファイルだけ対象） if not file_path.is_file(): continue # このスクリプト自身はスキップ if file_path.name == \u0026#34;organize.py\u0026#34;: continue # 拡張子からカテゴリを判定 category = get_category(file_path.suffix) # 振り分け先のフォルダを作る（なければ自動で作成） dest_dir = TARGET_DIR / category dest_dir.mkdir(exist_ok=True) # ファイルを移動 dest_path = dest_dir / file_path.name # 同名ファイルがあったら番号をつける counter = 1 while dest_path.exists(): stem = file_path.stem suffix = file_path.suffix dest_path = dest_dir / f\u0026#34;{stem}_{counter}{suffix}\u0026#34; counter += 1 shutil.move(str(file_path), str(dest_path)) print(f\u0026#34; {file_path.name} → {category}/\u0026#34;) moved_count += 1 return moved_count Path.iterdir() はフォルダ内のファイルやサブフォルダを1つずつ取り出すメソッドです。for ループで順番に処理していきます。\nステップ3: 実行部分を書く 最後に、スクリプトを実行したときに動く部分を追加します。\nif __name__ == \u0026#34;__main__\u0026#34;: print(f\u0026#34;整理対象: {TARGET_DIR}\u0026#34;) print(\u0026#34;-\u0026#34; * 40) count = organize() print(\u0026#34;-\u0026#34; * 40) print(f\u0026#34;完了！ {count} 個のファイルを整理しました。\u0026#34;) if __name__ == \u0026quot;__main__\u0026quot;: は「このファイルを直接実行したときだけ動く」という意味のPythonの定型文です。\nステップ4: 実行する ターミナル（コマンドプロンプト）を開いて、以下を実行します。\npython organize.py こんな出力が表示されます：\n整理対象: C:\\Users\\あなたの名前\\Downloads ---------------------------------------- report.pdf → ドキュメント/ photo.jpg → 画像/ music.mp3 → 音楽/ setup.exe → プログラム/ ---------------------------------------- 完了！ 4 個のファイルを整理しました。 完成コード コピペで動く全体のコードです。\nimport os import shutil from pathlib import Path # 整理したいフォルダのパス（自分の環境に合わせて変更） TARGET_DIR = Path.home() / \u0026#34;Downloads\u0026#34; # 拡張子とフォルダ名の対応表 CATEGORIES = { \u0026#34;画像\u0026#34;: [\u0026#34;.jpg\u0026#34;, \u0026#34;.jpeg\u0026#34;, \u0026#34;.png\u0026#34;, \u0026#34;.gif\u0026#34;, \u0026#34;.bmp\u0026#34;, \u0026#34;.svg\u0026#34;, \u0026#34;.webp\u0026#34;], \u0026#34;ドキュメント\u0026#34;: [\u0026#34;.pdf\u0026#34;, \u0026#34;.doc\u0026#34;, \u0026#34;.docx\u0026#34;, \u0026#34;.xls\u0026#34;, \u0026#34;.xlsx\u0026#34;, \u0026#34;.ppt\u0026#34;, \u0026#34;.pptx\u0026#34;, \u0026#34;.txt\u0026#34;, \u0026#34;.csv\u0026#34;], \u0026#34;動画\u0026#34;: [\u0026#34;.mp4\u0026#34;, \u0026#34;.mov\u0026#34;, \u0026#34;.avi\u0026#34;, \u0026#34;.mkv\u0026#34;, \u0026#34;.wmv\u0026#34;], \u0026#34;音楽\u0026#34;: [\u0026#34;.mp3\u0026#34;, \u0026#34;.wav\u0026#34;, \u0026#34;.flac\u0026#34;, \u0026#34;.aac\u0026#34;, \u0026#34;.ogg\u0026#34;], \u0026#34;圧縮ファイル\u0026#34;: [\u0026#34;.zip\u0026#34;, \u0026#34;.rar\u0026#34;, \u0026#34;.7z\u0026#34;, \u0026#34;.tar\u0026#34;, \u0026#34;.gz\u0026#34;], \u0026#34;プログラム\u0026#34;: [\u0026#34;.exe\u0026#34;, \u0026#34;.msi\u0026#34;, \u0026#34;.dmg\u0026#34;], } def get_category(extension): \u0026#34;\u0026#34;\u0026#34;拡張子からカテゴリ名を返す。該当なしなら「その他」\u0026#34;\u0026#34;\u0026#34; for category, extensions in CATEGORIES.items(): if extension.lower() in extensions: return category return \u0026#34;その他\u0026#34; def organize(): \u0026#34;\u0026#34;\u0026#34;ダウンロードフォルダ内のファイルを整理する\u0026#34;\u0026#34;\u0026#34; moved_count = 0 for file_path in TARGET_DIR.iterdir(): if not file_path.is_file(): continue if file_path.name == \u0026#34;organize.py\u0026#34;: continue category = get_category(file_path.suffix) dest_dir = TARGET_DIR / category dest_dir.mkdir(exist_ok=True) dest_path = dest_dir / file_path.name counter = 1 while dest_path.exists(): stem = file_path.stem suffix = file_path.suffix dest_path = dest_dir / f\u0026#34;{stem}_{counter}{suffix}\u0026#34; counter += 1 shutil.move(str(file_path), str(dest_path)) print(f\u0026#34; {file_path.name} → {category}/\u0026#34;) moved_count += 1 return moved_count if __name__ == \u0026#34;__main__\u0026#34;: print(f\u0026#34;整理対象: {TARGET_DIR}\u0026#34;) print(\u0026#34;-\u0026#34; * 40) count = organize() print(\u0026#34;-\u0026#34; * 40) print(f\u0026#34;完了！ {count} 個のファイルを整理しました。\u0026#34;) まとめと次のステップ Pythonの標準ライブラリだけで、ファイル整理の自動化ができました。\nさらに発展させるなら：\n定期実行: Windowsのタスクスケジューラに登録すれば、毎日自動で整理される カテゴリ追加: CATEGORIES に好きな拡張子とフォルダ名を追加できる ログ出力: いつ何を移動したか記録するようにすると、あとから確認できて安心 関連リソース Pythonをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/python-auto-file-organizer/","summary":"\u003ch2 id=\"この記事で作るもの\"\u003eこの記事で作るもの\u003c/h2\u003e\n\u003cp\u003eダウンロードフォルダに溜まったファイルを、拡張子ごとに自動でフォルダに振り分けるPythonスクリプトを作ります。\u003c/p\u003e\n\u003cp\u003eこんな感じに整理されます：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eダウンロード/\n├── 画像/        ← .jpg, .png, .gif など\n├── ドキュメント/ ← .pdf, .docx, .xlsx など\n├── 動画/        ← .mp4, .mov など\n├── 音楽/        ← .mp3, .wav など\n└── その他/      ← 上記に当てはまらないもの\n\u003c/code\u003e\u003c/pre\u003e\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"必要なもの\"\u003e必要なもの\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003ePython 3.8 以上（\u003ca href=\"https://www.python.org/downloads/\"\u003e公式サイト\u003c/a\u003eからインストール）\u003c/li\u003e\n\u003cli\u003eテキストエディタ（メモ帳でもOK）\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e追加のライブラリは不要です。Pythonに最初から入っている機能だけで作れます。\u003c/p\u003e\n\u003ch2 id=\"手順\"\u003e手順\u003c/h2\u003e\n\u003ch3 id=\"ステップ1-スクリプトファイルを作る\"\u003eステップ1: スクリプトファイルを作る\u003c/h3\u003e\n\u003cp\u003e好きな場所に \u003ccode\u003eorganize.py\u003c/code\u003e というファイルを作り、以下のコードを書きます。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003eimport\u003c/span\u003e os\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003eimport\u003c/span\u003e shutil\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003efrom\u003c/span\u003e pathlib \u003cspan style=\"color:#f92672\"\u003eimport\u003c/span\u003e Path\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 整理したいフォルダのパス（自分の環境に合わせて変更）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eTARGET_DIR \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e Path\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003ehome() \u003cspan style=\"color:#f92672\"\u003e/\u003c/span\u003e \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;Downloads\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 拡張子とフォルダ名の対応表\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eCATEGORIES \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;画像\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.jpg\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.jpeg\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.png\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.gif\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.bmp\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.svg\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.webp\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;ドキュメント\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.pdf\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.doc\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.docx\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.xls\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.xlsx\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.ppt\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.pptx\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.txt\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.csv\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;動画\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.mp4\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.mov\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.avi\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.mkv\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.wmv\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;音楽\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.mp3\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.wav\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.flac\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.aac\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.ogg\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;圧縮ファイル\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.zip\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.rar\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.7z\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.tar\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.gz\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;プログラム\u0026#34;\u003c/span\u003e: [\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.exe\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.msi\u0026#34;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;.dmg\u0026#34;\u003c/span\u003e],\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003eCATEGORIES\u003c/code\u003e は辞書（dict）と呼ばれるデータ構造で、「フォルダ名」と「そこに入れる拡張子のリスト」を対応づけています。\u003c/p\u003e","title":"【Python】ダウンロードフォルダを自動整理するスクリプトの作り方"},{"content":"この記事で解決すること ターミナルで git push したら、こんなエラーが出た。\n! [rejected] main -\u0026gt; main (fetch first) error: failed to push some refs to \u0026#39;https://github.com/...\u0026#39; 「rejected」って何？ 壊した？ と焦るかもしれませんが、大丈夫です。よくあることで、簡単に直せます。\nなぜこのエラーが出るのか GitHub上のコードと、あなたのPC上のコードが「ズレている」のが原因です。\nたとえばこんな状況：\nGitHubの画面で直接ファイルを編集した 別のPCからpushした リポジトリを作るときにREADMEを自動生成した GitHubの方が「先に進んでいる」ので、Gitが「まずそっちの変更を取り込んでからpushしてね」と言っています。\n解決方法 ステップ1: GitHubの変更を取り込む git pull origin main これでGitHub上の変更をあなたのPCに取り込みます。\npull は「引っ張ってくる」という意味で、GitHubからコードをダウンロードする操作です。\nステップ2: もう一度pushする git push origin main これで通るはずです。\npullしたら「conflict」と言われた場合 まれに、同じファイルの同じ場所を両方で編集していると「conflict（競合）」が起きます。\nCONFLICT (content): Merge conflict in ファイル名 この場合は、該当ファイルを開くとこんな表示があります：\n\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt; HEAD あなたのPCの内容 ======= GitHubの内容 \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; origin/main 残したい方を選んで、\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt; ======= \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; の行を削除してから：\ngit add . git commit -m \u0026#34;conflictを解決\u0026#34; git push origin main まとめと次のステップ rejected は「GitHubの方が先に進んでるよ」という意味 git pull してから git push すれば解決 conflictが出たら、ファイルを開いて残したい方を選ぶ Gitに慣れないうちはこのエラーに何度も出会います。でも毎回やることは同じなので、すぐ慣れます。\n関連リソース Gitをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/git-first-push-error/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003eターミナルで \u003ccode\u003egit push\u003c/code\u003e したら、こんなエラーが出た。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e! [rejected]        main -\u0026gt; main (fetch first)\nerror: failed to push some refs to \u0026#39;https://github.com/...\u0026#39;\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e「rejected」って何？ 壊した？ と焦るかもしれませんが、大丈夫です。よくあることで、簡単に直せます。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"なぜこのエラーが出るのか\"\u003eなぜこのエラーが出るのか\u003c/h2\u003e\n\u003cp\u003eGitHub上のコードと、あなたのPC上のコードが「ズレている」のが原因です。\u003c/p\u003e\n\u003cp\u003eたとえばこんな状況：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eGitHubの画面で直接ファイルを編集した\u003c/li\u003e\n\u003cli\u003e別のPCからpushした\u003c/li\u003e\n\u003cli\u003eリポジトリを作るときにREADMEを自動生成した\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eGitHubの方が「先に進んでいる」ので、Gitが「まずそっちの変更を取り込んでからpushしてね」と言っています。\u003c/p\u003e\n\u003ch2 id=\"解決方法\"\u003e解決方法\u003c/h2\u003e\n\u003ch3 id=\"ステップ1-githubの変更を取り込む\"\u003eステップ1: GitHubの変更を取り込む\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit pull origin main\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eこれでGitHub上の変更をあなたのPCに取り込みます。\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003epull\u003c/code\u003e は「引っ張ってくる」という意味で、GitHubからコードをダウンロードする操作です。\u003c/p\u003e\n\u003ch3 id=\"ステップ2-もう一度pushする\"\u003eステップ2: もう一度pushする\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push origin main\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eこれで通るはずです。\u003c/p\u003e\n\u003ch2 id=\"pullしたらconflictと言われた場合\"\u003epullしたら「conflict」と言われた場合\u003c/h2\u003e\n\u003cp\u003eまれに、同じファイルの同じ場所を両方で編集していると「conflict（競合）」が起きます。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eCONFLICT (content): Merge conflict in ファイル名\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eこの場合は、該当ファイルを開くとこんな表示があります：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt; HEAD\nあなたのPCの内容\n=======\nGitHubの内容\n\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; origin/main\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e残したい方を選んで、\u003ccode\u003e\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u003c/code\u003e \u003ccode\u003e=======\u003c/code\u003e \u003ccode\u003e\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u003c/code\u003e の行を削除してから：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit add .\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;conflictを解決\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push origin main\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"まとめと次のステップ\"\u003eまとめと次のステップ\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003erejected\u003c/code\u003e は「GitHubの方が先に進んでるよ」という意味\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003egit pull\u003c/code\u003e してから \u003ccode\u003egit push\u003c/code\u003e すれば解決\u003c/li\u003e\n\u003cli\u003econflictが出たら、ファイルを開いて残したい方を選ぶ\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eGitに慣れないうちはこのエラーに何度も出会います。でも毎回やることは同じなので、すぐ慣れます。\u003c/p\u003e","title":"【Git】git pushでrejectedエラーが出たときの対処法"},{"content":"この記事で解決すること Pythonでコードを実行したら、こんなエラーが出た。\nModuleNotFoundError: No module named \u0026#39;requests\u0026#39; pip install requests したのに動かない。なぜ？\nこの記事では、このエラーの原因と「仮想環境」を使った根本的な解決方法を説明します。\nなぜこのエラーが出るのか PCに複数のPythonが入っていることが原因です。\nたとえば：\nPython 3.10 と Python 3.12 が両方入っている pip install したのは3.10の方 python コマンドで動くのは3.12の方 別々のPythonなので、片方にインストールしたライブラリはもう片方からは見えません。\n解決方法：仮想環境を使う 「仮想環境（venv）」を使えば、プロジェクトごとに専用のPython環境を作れます。ライブラリの混乱がなくなります。\nステップ1: 仮想環境を作る プロジェクトのフォルダで以下を実行します。\npython -m venv .venv .venv というフォルダが作られます。この中に、このプロジェクト専用のPythonが入ります。\nvenv は「virtual environment（仮想環境）」の略です。\nステップ2: 仮想環境を有効にする Windowsの場合：\n.venv\\Scripts\\activate Mac / Linuxの場合：\nsource .venv/bin/activate 成功すると、ターミナルの先頭に (.venv) と表示されます。\n(.venv) C:\\Users\\あなた\\project\u0026gt; ステップ3: ライブラリをインストールする 仮想環境が有効な状態で pip install します。\npip install requests これで、この仮想環境の中にだけ requests がインストールされます。\nステップ4: コードを実行する python your_script.py ModuleNotFoundError は出なくなります。\n毎回activateするのが面倒な場合 VS Codeを使っているなら、自動で仮想環境を認識してくれます。\nVS Codeでプロジェクトフォルダを開く 右下のPythonバージョンをクリック .venv のPythonを選択 これで、VS Code内のターミナルでは自動的に仮想環境が有効になります。\n仮想環境を終了するとき deactivate これだけです。\nまとめと次のステップ ModuleNotFoundError は「そのPythonにはライブラリが入っていない」という意味 仮想環境を使えば、プロジェクトごとにライブラリを管理できる python -m venv .venv → activate → pip install の3ステップ 慣れると、新しいプロジェクトを始めるときに無意識にやるようになります。\n関連リソース Pythonをもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/python-venv-beginner/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003ePythonでコードを実行したら、こんなエラーが出た。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eModuleNotFoundError: No module named \u0026#39;requests\u0026#39;\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003ccode\u003epip install requests\u003c/code\u003e したのに動かない。なぜ？\u003c/p\u003e\n\u003cp\u003eこの記事では、このエラーの原因と「仮想環境」を使った根本的な解決方法を説明します。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"なぜこのエラーが出るのか\"\u003eなぜこのエラーが出るのか\u003c/h2\u003e\n\u003cp\u003ePCに複数のPythonが入っていることが原因です。\u003c/p\u003e\n\u003cp\u003eたとえば：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ePython 3.10 と Python 3.12 が両方入っている\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epip install\u003c/code\u003e したのは3.10の方\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epython\u003c/code\u003e コマンドで動くのは3.12の方\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e別々のPythonなので、片方にインストールしたライブラリはもう片方からは見えません。\u003c/p\u003e\n\u003ch2 id=\"解決方法仮想環境を使う\"\u003e解決方法：仮想環境を使う\u003c/h2\u003e\n\u003cp\u003e「仮想環境（venv）」を使えば、プロジェクトごとに専用のPython環境を作れます。ライブラリの混乱がなくなります。\u003c/p\u003e\n\u003ch3 id=\"ステップ1-仮想環境を作る\"\u003eステップ1: 仮想環境を作る\u003c/h3\u003e\n\u003cp\u003eプロジェクトのフォルダで以下を実行します。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epython -m venv .venv\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003e.venv\u003c/code\u003e というフォルダが作られます。この中に、このプロジェクト専用のPythonが入ります。\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003evenv\u003c/code\u003e は「virtual environment（仮想環境）」の略です。\u003c/p\u003e\n\u003ch3 id=\"ステップ2-仮想環境を有効にする\"\u003eステップ2: 仮想環境を有効にする\u003c/h3\u003e\n\u003cp\u003eWindowsの場合：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.venv\u003cspan style=\"color:#ae81ff\"\u003e\\S\u003c/span\u003ecripts\u003cspan style=\"color:#ae81ff\"\u003e\\a\u003c/span\u003ectivate\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eMac / Linuxの場合：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esource .venv/bin/activate\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e成功すると、ターミナルの先頭に \u003ccode\u003e(.venv)\u003c/code\u003e と表示されます。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e(.venv) C:\\Users\\あなた\\project\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"ステップ3-ライブラリをインストールする\"\u003eステップ3: ライブラリをインストールする\u003c/h3\u003e\n\u003cp\u003e仮想環境が有効な状態で \u003ccode\u003epip install\u003c/code\u003e します。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epip install requests\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eこれで、この仮想環境の中にだけ \u003ccode\u003erequests\u003c/code\u003e がインストールされます。\u003c/p\u003e\n\u003ch3 id=\"ステップ4-コードを実行する\"\u003eステップ4: コードを実行する\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epython your_script.py\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003eModuleNotFoundError\u003c/code\u003e は出なくなります。\u003c/p\u003e","title":"【Python】ModuleNotFoundErrorの原因と解決方法 ― 仮想環境入門"},{"content":"この記事で解決すること CSSで何かを「真ん中に置きたい」だけなのに、なぜかうまくいかない。\ntext-align: center; /* 効かない… */ margin: auto; /* これも効かない… */ 中央揃えはCSSで最も検索される悩みの1つです。パターンごとに「これを使えばOK」という正解を整理しました。\nパターン1: テキストを中央揃え \u0026lt;p class=\u0026#34;center-text\u0026#34;\u0026gt;このテキストを中央に\u0026lt;/p\u0026gt; .center-text { text-align: center; } これは素直に動きます。テキストや inline 要素（画像など）の水平方向の中央揃えはこれでOK。\nパターン2: ブロック要素を水平方向に中央揃え div などのブロック要素を中央に置きたい場合。\n\u0026lt;div class=\u0026#34;center-box\u0026#34;\u0026gt;中央に置きたいボックス\u0026lt;/div\u0026gt; .center-box { width: 300px; /* 幅の指定が必要 */ margin-left: auto; margin-right: auto; } ポイントは width を指定すること。幅が決まっていないと margin: auto は効きません。\nブロック要素とは、div や p のように横幅いっぱいに広がる要素のことです。\nパターン3: 上下左右ど真ん中（最も使う） ページやコンテナの中で、要素を完全に中央に置きたい場合。2026年の正解はこれです。\n\u0026lt;div class=\u0026#34;container\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;centered\u0026#34;\u0026gt;ど真ん中\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; .container { display: flex; justify-content: center; /* 水平方向 */ align-items: center; /* 垂直方向 */ height: 100vh; /* 画面の高さいっぱい */ } flexbox は要素の配置を柔軟に制御できるCSSの仕組みです。中央揃えに限らず、レイアウト全般で使います。\n100vh は「画面の高さ100%」という意味です。vh は viewport height の略。\nパターン4: gridを使う方法（最短コード） flexboxよりさらに短く書けます。\n.container { display: grid; place-items: center; height: 100vh; } place-items: center の1行で上下左右中央揃えが完了します。\nよくある「効かない」原因 高さが指定されていない 垂直方向の中央揃えは、親要素に高さがないと効きません。\n/* NG: 高さがないので垂直方向の中央揃えが効かない */ .container { display: flex; justify-content: center; align-items: center; /* height がない */ } /* OK */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* または具体的な高さ */ } margin: auto が効かない margin: auto はブロック要素にしか効きません。span や a などのインライン要素には効かないので、display: block を追加するか、flexboxを使ってください。\n結局どれを使えばいい？ 迷ったらこれ：\ndisplay: flex; justify-content: center; align-items: center; この3行を覚えておけば、ほとんどの中央揃えは解決します。\nまとめと次のステップ テキストの中央揃え → text-align: center ブロック要素の水平中央 → margin: auto（幅の指定が必要） 上下左右ど真ん中 → flexbox か grid 効かないときは親要素の高さを確認 関連リソース CSS・Web開発をもっと学びたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/html-css-center/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003eCSSで何かを「真ん中に置きたい」だけなのに、なぜかうまくいかない。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003etext-align\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003ecenter\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e;\u003c/span\u003e  \u003cspan style=\"color:#75715e\"\u003e/* 効かない… */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003emargin\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#f92672\"\u003eauto\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e;\u003c/span\u003e         \u003cspan style=\"color:#75715e\"\u003e/* これも効かない… */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e中央揃えはCSSで最も検索される悩みの1つです。パターンごとに「これを使えばOK」という正解を整理しました。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"パターン1-テキストを中央揃え\"\u003eパターン1: テキストを中央揃え\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eclass\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;center-text\u0026#34;\u003c/span\u003e\u0026gt;このテキストを中央に\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ep\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.\u003cspan style=\"color:#a6e22e\"\u003ecenter-text\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003etext-align\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003ecenter\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eこれは素直に動きます。テキストや \u003ccode\u003einline\u003c/code\u003e 要素（画像など）の水平方向の中央揃えはこれでOK。\u003c/p\u003e\n\u003ch2 id=\"パターン2-ブロック要素を水平方向に中央揃え\"\u003eパターン2: ブロック要素を水平方向に中央揃え\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003ediv\u003c/code\u003e などのブロック要素を中央に置きたい場合。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eclass\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;center-box\u0026#34;\u003c/span\u003e\u0026gt;中央に置きたいボックス\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.\u003cspan style=\"color:#a6e22e\"\u003ecenter-box\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003ewidth\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e300\u003c/span\u003e\u003cspan style=\"color:#66d9ef\"\u003epx\u003c/span\u003e;        \u003cspan style=\"color:#75715e\"\u003e/* 幅の指定が必要 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003emargin-left\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003eauto\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003emargin-right\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003eauto\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eポイントは \u003ccode\u003ewidth\u003c/code\u003e を指定すること。幅が決まっていないと \u003ccode\u003emargin: auto\u003c/code\u003e は効きません。\u003c/p\u003e\n\u003cp\u003eブロック要素とは、\u003ccode\u003ediv\u003c/code\u003e や \u003ccode\u003ep\u003c/code\u003e のように横幅いっぱいに広がる要素のことです。\u003c/p\u003e\n\u003ch2 id=\"パターン3-上下左右ど真ん中最も使う\"\u003eパターン3: 上下左右ど真ん中（最も使う）\u003c/h2\u003e\n\u003cp\u003eページやコンテナの中で、要素を完全に中央に置きたい場合。2026年の正解はこれです。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eclass\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;container\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eclass\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;centered\u0026#34;\u003c/span\u003e\u0026gt;ど真ん中\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#f92672\"\u003ediv\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.\u003cspan style=\"color:#a6e22e\"\u003econtainer\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003edisplay\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003eflex\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003ejustify-content\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003ecenter\u003c/span\u003e;  \u003cspan style=\"color:#75715e\"\u003e/* 水平方向 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003ealign-items\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003ecenter\u003c/span\u003e;      \u003cspan style=\"color:#75715e\"\u003e/* 垂直方向 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#66d9ef\"\u003eheight\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e100\u003c/span\u003e\u003cspan style=\"color:#66d9ef\"\u003evh\u003c/span\u003e;            \u003cspan style=\"color:#75715e\"\u003e/* 画面の高さいっぱい */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003eflexbox\u003c/code\u003e は要素の配置を柔軟に制御できるCSSの仕組みです。中央揃えに限らず、レイアウト全般で使います。\u003c/p\u003e","title":"【CSS】中央揃えができないときの解決パターン集 ― 2026年版"},{"content":"この記事で解決すること 「VS Codeをインストールしたけど、メモ帳と何が違うの？」\nそう思っている人向けに、最初にやるべき設定と覚えるべき操作を10個だけに絞りました。全部覚えなくていいです。使いながら少しずつ身につければOK。\nVS Code（Visual Studio Code）は、Microsoftが作った無料のコードエディタです。プログラミングをする人のほとんどが使っています。\n最初にやる設定（3つ） 1. 日本語化 VS Codeは初期状態だと英語です。\nCtrl + Shift + X を押す（拡張機能の画面が開く） 検索欄に Japanese と入力 「Japanese Language Pack for Visual Studio Code」をインストール VS Codeを再起動 2. 自動保存をオンにする ファイル → ユーザー設定 → 設定 を開いて、検索欄に auto save と入力。\n「Files: Auto Save」を afterDelay に変更。\nこれで、編集するたびに自動で保存されます。保存し忘れて「変更が反映されない」と悩むことがなくなります。\n3. テーマを変える（お好みで） Ctrl + K → Ctrl + T でテーマ選択画面が開きます。\n好きな見た目を選んでください。暗い画面（ダークテーマ）が目に優しくて人気です。\n覚えるショートカット（7つ） 全部Windowsのキーです。Macの人は Ctrl を Cmd に読み替えてください。\n4. ファイルを開く: Ctrl + P フォルダ内のファイルをファイル名で検索して開けます。マウスでフォルダを辿るより圧倒的に速い。\n5. 全体検索: Ctrl + Shift + F プロジェクト内の全ファイルからテキストを検索します。「この変数どこで使ってたっけ？」というときに使います。\n6. 行の複製: Shift + Alt + ↓ カーソルがある行をそのまま下にコピーします。似たコードを何行も書くときに便利。\n7. 行の移動: Alt + ↑ / Alt + ↓ カーソルがある行を上下に移動します。コードの順番を入れ替えたいときに、コピペより楽。\n8. 複数カーソル: Alt + クリック 複数の場所に同時にカーソルを置いて、同時に編集できます。同じ変更を何箇所もするときに使います。\n9. コメントアウト: Ctrl + / 選択した行をコメント（無効化）にします。もう一度押すと元に戻ります。\nコメントアウトとは、コードを削除せずに一時的に無効にすることです。\n10. ターミナルを開く: Ctrl + ` VS Codeの中でターミナル（コマンドプロンプト）を開けます。別ウィンドウを行き来しなくて済みます。\n` はバッククォートと呼ばれるキーで、キーボード左上の 半角/全角 キーの隣にあります。\nおすすめ拡張機能（入れておくと便利） 最初から全部入れる必要はないです。必要になったときに入れればOK。\n拡張機能 用途 Prettier コードを自動で整形してくれる Live Server HTMLファイルをブラウザでリアルタイムプレビュー indent-rainbow インデント（字下げ）に色がついて見やすくなる 拡張機能は Ctrl + Shift + X で検索してインストールできます。\nまとめと次のステップ まず日本語化・自動保存・テーマの3つを設定 ショートカットは使うものから少しずつ覚える 拡張機能は必要になったら入れる 全部一度に覚えようとしなくて大丈夫です。毎日コードを書いていれば、自然と手が覚えます。\n関連リソース プログラミングを始めたい方へ：\nリンク ","permalink":"https://blog-8lz.pages.dev/posts/vscode-shortcuts-beginner/","summary":"\u003ch2 id=\"この記事で解決すること\"\u003eこの記事で解決すること\u003c/h2\u003e\n\u003cp\u003e「VS Codeをインストールしたけど、メモ帳と何が違うの？」\u003c/p\u003e\n\u003cp\u003eそう思っている人向けに、最初にやるべき設定と覚えるべき操作を10個だけに絞りました。全部覚えなくていいです。使いながら少しずつ身につければOK。\u003c/p\u003e\n\u003cp\u003eVS Code（Visual Studio Code）は、Microsoftが作った無料のコードエディタです。プログラミングをする人のほとんどが使っています。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n  \u003cdiv class=\"admax-pc\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e302ba1409c01d850122cd181e3e974d\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"admax-sp\"\u003e\n    \u003cscript src=\"https://adm.shinobi.jp/s/e211b24947d4bfe74c47e3219e4ea5dd\"\u003e\u003c/script\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"最初にやる設定3つ\"\u003e最初にやる設定（3つ）\u003c/h2\u003e\n\u003ch3 id=\"1-日本語化\"\u003e1. 日本語化\u003c/h3\u003e\n\u003cp\u003eVS Codeは初期状態だと英語です。\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003eCtrl + Shift + X\u003c/code\u003e を押す（拡張機能の画面が開く）\u003c/li\u003e\n\u003cli\u003e検索欄に \u003ccode\u003eJapanese\u003c/code\u003e と入力\u003c/li\u003e\n\u003cli\u003e「Japanese Language Pack for Visual Studio Code」をインストール\u003c/li\u003e\n\u003cli\u003eVS Codeを再起動\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"2-自動保存をオンにする\"\u003e2. 自動保存をオンにする\u003c/h3\u003e\n\u003cp\u003eファイル → ユーザー設定 → 設定 を開いて、検索欄に \u003ccode\u003eauto save\u003c/code\u003e と入力。\u003c/p\u003e\n\u003cp\u003e「Files: Auto Save」を \u003ccode\u003eafterDelay\u003c/code\u003e に変更。\u003c/p\u003e\n\u003cp\u003eこれで、編集するたびに自動で保存されます。保存し忘れて「変更が反映されない」と悩むことがなくなります。\u003c/p\u003e\n\u003ch3 id=\"3-テーマを変えるお好みで\"\u003e3. テーマを変える（お好みで）\u003c/h3\u003e\n\u003cp\u003e\u003ccode\u003eCtrl + K\u003c/code\u003e → \u003ccode\u003eCtrl + T\u003c/code\u003e でテーマ選択画面が開きます。\u003c/p\u003e\n\u003cp\u003e好きな見た目を選んでください。暗い画面（ダークテーマ）が目に優しくて人気です。\u003c/p\u003e\n\u003ch2 id=\"覚えるショートカット7つ\"\u003e覚えるショートカット（7つ）\u003c/h2\u003e\n\u003cp\u003e全部Windowsのキーです。Macの人は \u003ccode\u003eCtrl\u003c/code\u003e を \u003ccode\u003eCmd\u003c/code\u003e に読み替えてください。\u003c/p\u003e\n\u003ch3 id=\"4-ファイルを開く-ctrl--p\"\u003e4. ファイルを開く: \u003ccode\u003eCtrl + P\u003c/code\u003e\u003c/h3\u003e\n\u003cp\u003eフォルダ内のファイルをファイル名で検索して開けます。マウスでフォルダを辿るより圧倒的に速い。\u003c/p\u003e","title":"【VS Code】最初に覚えるべき設定とショートカット10選"},{"content":"当サイトへのお問い合わせは、以下のボタンからお願いいたします。\n📩 お問い合わせフォームを開く お問い合わせ内容を確認後、必要に応じてご連絡いたします。\n","permalink":"https://blog-8lz.pages.dev/contact/","summary":"\u003cp\u003e当サイトへのお問い合わせは、以下のボタンからお願いいたします。\u003c/p\u003e\n\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n\u003ca href=\"https://forms.gle/SQXNG5gdB2CtjDw87\" target=\"_blank\" style=\"display: inline-block; background: linear-gradient(135deg, #5b9bd5, #764ba2); color: white; padding: 1rem 2.5rem; border-radius: 50px; font-size: 1.1rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 15px rgba(91, 155, 213, 0.3);\"\u003e📩 お問い合わせフォームを開く\u003c/a\u003e\n\u003c/div\u003e\n\u003cp\u003eお問い合わせ内容を確認後、必要に応じてご連絡いたします。\u003c/p\u003e","title":"お問い合わせ"},{"content":"広告について 当サイトはアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。\n当サイトでは、第三者配信の広告サービス（忍者AdMax、Google AdSense）を利用しています。広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookieを使用することがあります。\n免責事項 当サイトの情報は、可能な限り正確な情報を掲載するよう努めていますが、正確性や安全性を保証するものではありません。当サイトの情報を利用することで生じた損害について、一切の責任を負いません。\nお問い合わせ 当サイトに関するお問い合わせは、サイト内の連絡手段よりお願いいたします。\n","permalink":"https://blog-8lz.pages.dev/privacy/","summary":"\u003ch2 id=\"広告について\"\u003e広告について\u003c/h2\u003e\n\u003cp\u003e当サイトはアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。\u003c/p\u003e\n\u003cp\u003e当サイトでは、第三者配信の広告サービス（忍者AdMax、Google AdSense）を利用しています。広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookieを使用することがあります。\u003c/p\u003e\n\u003ch2 id=\"免責事項\"\u003e免責事項\u003c/h2\u003e\n\u003cp\u003e当サイトの情報は、可能な限り正確な情報を掲載するよう努めていますが、正確性や安全性を保証するものではありません。当サイトの情報を利用することで生じた損害について、一切の責任を負いません。\u003c/p\u003e\n\u003ch2 id=\"お問い合わせ\"\u003eお問い合わせ\u003c/h2\u003e\n\u003cp\u003e当サイトに関するお問い合わせは、サイト内の連絡手段よりお願いいたします。\u003c/p\u003e","title":"プライバシーポリシー"},{"content":" ググワカ編集部 「ググっても分からなかった初心者へ」運営\nこのブログについて 「ググっても分からなかった初心者へ」は、プログラミングや技術でつまずいた初心者のための解決ノートです。\n検索しても解決しなかったあの問題を、一緒に解決します。\n発信しているテーマ 🐍 Python の基礎とエラー解決 🌿 Git / GitHub の使い方 🎨 HTML / CSS のつまずきポイント ⚡ VS Code や開発環境の設定 🤖 AIツールを使ったプログラミング 大切にしていること 初心者が本当につまずくポイントを丁寧に解説する 専門用語を使ったら必ず一言で説明を添える 「簡単です」とは言わない。一緒に解決する姿勢で書く 経験者が読んでもくどくない、シンプルな構成 関連メディア 📘 Kindle：「ChatGPTの教科書」「ChatGPT × Excel 完全攻略」 🤖 AIブログ：AIつかいこなし帳 お問い合わせ 📩 お問い合わせはこちら ","permalink":"https://blog-8lz.pages.dev/about/","summary":"\u003cdiv style=\"text-align: center; margin: 2rem 0;\"\u003e\n\u003cimg src=\"/profile.png\" alt=\"プロフィール画像\" style=\"width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: center; border: 4px solid #5b9bd5; box-shadow: 0 4px 15px rgba(91, 155, 213, 0.2);\"\u003e\n\u003c/div\u003e\n\u003cdiv style=\"text-align: center; margin-bottom: 2rem;\"\u003e\n\u003ch2 style=\"margin: 0;\"\u003eググワカ編集部\u003c/h2\u003e\n\u003cp style=\"color: #6b7280;\"\u003e「ググっても分からなかった初心者へ」運営\u003c/p\u003e\n\u003c/div\u003e\n\u003ch2 id=\"このブログについて\"\u003eこのブログについて\u003c/h2\u003e\n\u003cp\u003e「ググっても分からなかった初心者へ」は、プログラミングや技術でつまずいた初心者のための解決ノートです。\u003c/p\u003e\n\u003cp\u003e検索しても解決しなかったあの問題を、一緒に解決します。\u003c/p\u003e\n\u003ch2 id=\"発信しているテーマ\"\u003e発信しているテーマ\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e🐍 Python の基礎とエラー解決\u003c/li\u003e\n\u003cli\u003e🌿 Git / GitHub の使い方\u003c/li\u003e\n\u003cli\u003e🎨 HTML / CSS のつまずきポイント\u003c/li\u003e\n\u003cli\u003e⚡ VS Code や開発環境の設定\u003c/li\u003e\n\u003cli\u003e🤖 AIツールを使ったプログラミング\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"大切にしていること\"\u003e大切にしていること\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e初心者が本当につまずくポイントを丁寧に解説する\u003c/li\u003e\n\u003cli\u003e専門用語を使ったら必ず一言で説明を添える\u003c/li\u003e\n\u003cli\u003e「簡単です」とは言わない。一緒に解決する姿勢で書く\u003c/li\u003e\n\u003cli\u003e経験者が読んでもくどくない、シンプルな構成\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"関連メディア\"\u003e関連メディア\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e📘 Kindle：「ChatGPTの教科書」「ChatGPT × Excel 完全攻略」\u003c/li\u003e\n\u003cli\u003e🤖 AIブログ：\u003ca href=\"https://ai-blog-d4o.pages.dev/\"\u003eAIつかいこなし帳\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"お問い合わせ\"\u003eお問い合わせ\u003c/h2\u003e\n\u003cdiv style=\"text-align: center; margin: 1.5rem 0;\"\u003e\n\u003ca href=\"/contact/\" style=\"display: inline-block; background: linear-gradient(135deg, #5b9bd5, #764ba2); color: white; padding: 0.8rem 2rem; border-radius: 50px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 15px rgba(91, 155, 213, 0.3);\"\u003e📩 お問い合わせはこちら\u003c/a\u003e\n\u003c/div\u003e","title":"プロフィール"}]