初心者向け

【GitHub Copilot】無料プランでAIにコードを書いてもらう方法

この記事で解決すること「GitHub Copilotって聞いたことあるけど、無料で使えるの？」 GitHub Copilotは、コードを書いているとAIが自動で続きを提案してくれるツールです。無料プランがあるので、誰でも試せます。 GitHub Copilotとは VS Codeなどのエディタに入れる拡張機能で、コードを書き始めるとAIが「こう書きたいんじゃない？」と続きを提案してくれます。例えば、こう書き始めると： # ファイルを読み込んで行数を数える AIが自動でこう提案してくれます： def count_lines(filename): with open(filename, 'r') as f: return len(f.readlines()) Tabキーを押すだけで提案を採用できます。無料プランでできること無料プラン有料プラン（月10ドル）コード補完月2,000回まで無制限チャット月50回まで無制限対応エディタ VS Code等 VS Code等月2,000回のコード補完は、個人の学習や小さなプロジェクトには十分な量です。始め方ステップ1: GitHubアカウントを用意する GitHubのアカウントが必要です。まだ持っていない方は： 👉 GitHubのアカウント作成方法はこちらステップ2: VS Codeに拡張機能をインストール VS Codeを開く Ctrl + Shift + X で拡張機能を開く「GitHub Copilot」と検索「GitHub Copilot」をインストール GitHubアカウントでサインインを求められるので、許可するステップ3: 使ってみる新しいファイルを作って、コメントを書いてみてください。 # 1から10までの合計を計算する数秒待つと、灰色の文字で提案が表示されます。Tab キーを押すと採用、Esc キーを押すとスキップです。便利な使い方コメントから関数を生成日本語のコメントでやりたいことを書くと、関数を丸ごと提案してくれます。 ...

【GitHub】アカウントを作ったけど何すればいい？最初の使い方ガイド

この記事で解決すること「GitHubのアカウントを作りました。で、何すればいいの？」プログラミングを始めると「GitHubにコードを上げましょう」と言われます。でもGitHubを開いても、英語だらけで何をすればいいか分からない。この記事では、GitHubで最初にやることだけに絞って説明します。 GitHubとは何か（30秒で理解） GitHubは「コードの保管場所」です。 Googleドライブがファイルの保管場所であるように、GitHubはプログラムのコードを保管する場所です。違いは：コードの変更履歴が全部残る（いつ、誰が、何を変えたか）間違えても過去の状態に戻せる他の人とコードを共有できる最初にやること：リポジトリを作る「リポジトリ」はプロジェクトのフォルダのようなものです。1つのプロジェクトにつき1つのリポジトリを作ります。ステップ1: 新しいリポジトリを作る GitHubにログイン右上の「+」ボタン → 「New repository」をクリック以下を入力： Repository name: my-first-repo（好きな名前でOK） Description: はじめてのリポジトリ（省略可） Public を選択「Add a README file」にチェック ✅ 「Create repository」をクリックこれでリポジトリが作られました。ステップ2: READMEを編集してみるリポジトリのページに README.md というファイルがあります。これはプロジェクトの説明書です。 README.md をクリック右上の鉛筆アイコン（✏️）をクリック内容を書き換える： # はじめてのリポジトリ GitHubの練習用リポジトリです。 ## 今日やったこと - GitHubのアカウントを作った - リポジトリを作った - READMEを編集した下にスクロールして「Commit changes」をクリック Commit は「変更を保存する」という意味です。普通の「保存」と違って、変更の履歴が記録されます。ステップ3: 変更履歴を見るリポジトリのトップページに戻る「2 commits」のようなリンクをクリックさっきの変更が記録されています。いつ、何を変えたかが全部残っています。 ...

【HTML】最低限のHTMLファイルの書き方 ― コピペで使えるテンプレート付き

この記事で解決すること「HTMLを書いてみたいけど、何から始めればいいか分からない」この記事では、HTMLファイルの最低限の構造と、コピペで使えるテンプレートを紹介します。 HTMLとは HTMLは、Webページの「骨組み」を作る言語です。ブラウザで見ているすべてのWebページは、HTMLで書かれています。 HTMLは「プログラミング言語」ではなく「マークアップ言語」です。計算や処理をするのではなく、「ここは見出し」「ここは段落」「ここは画像」と、コンテンツの構造を指定するだけです。最低限のHTMLテンプレート以下をコピペして、index.html というファイル名で保存してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>はじめてのWebページ</title> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLで作った最初のページです。</p> </body> </html> 保存したファイルをブラウザにドラッグ＆ドロップすると、Webページとして表示されます。各行の意味 <!DOCTYPE html> 「このファイルはHTML5で書かれています」という宣言です。おまじないだと思ってください。必ず1行目に書きます。 <html lang="ja"> HTMLの始まりを示すタグです。lang="ja" は「このページは日本語です」という意味。 <head> の中身ページの「裏方情報」を書く場所です。ブラウザの画面には表示されません。 <meta charset="UTF-8"> → 文字化けを防ぐ設定 <meta name="viewport" ...> → スマホで見たときにちゃんと表示される設定 <title> → ブラウザのタブに表示されるタイトル <body> の中身ここに書いたものがブラウザに表示されます。 <h1> → 一番大きい見出し <p> → 段落（普通の文章）よく使うタグ一覧  <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3>  <p>これは段落です。</p>  <a href="https://example.com">リンクテキスト</a>  <img src="photo.jpg" alt="写真の説明">  <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>  <strong>太字のテキスト</strong>  <br>  <hr> 実践：自己紹介ページを作ってみよう以下をコピペして profile.html として保存し、ブラウザで開いてみてください。 ...

【Python】pip installでエラーが出たときの対処法まとめ

この記事で解決すること pip install したらエラーが出た。何が起きているのか分からない。この記事では、pip installでよく出るエラーを5つ取り上げて、それぞれの原因と解決方法を説明します。エラー1: Permission denied（権限エラー） ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied 原因システム全体のPythonにインストールしようとして、権限が足りない状態です。解決方法 --user オプションをつけてインストールします。 pip install --user パッケージ名もしくは、仮想環境を使うのが根本的な解決策です。 python -m venv .venv .venv\Scripts\activate # Windowsの場合 pip install パッケージ名仮想環境については別の記事で詳しく解説しています。 👉 ModuleNotFoundErrorの原因と解決方法エラー2: No matching distribution found ERROR: No matching distribution found for パッケージ名原因以下のどれかです。パッケージ名のスペルミスそのパッケージが自分のPythonバージョンに対応していないそのパッケージがOSに対応していない解決方法まずスペルを確認してください。大文字小文字やハイフンとアンダースコアの違いに注意。 # NG pip install Requests # OK pip install requests Pythonのバージョンを確認するには： ...

【初心者向け】JSONとは？5分で分かるデータ形式の基本

この記事で解決すること「JSONって何？プログラミングの記事を読んでいるとよく出てくるけど、意味が分からない」この記事を読めば、JSONが何なのか、どう読めばいいのかが5分で分かります。 JSONとは JSON（ジェイソン）は、データを整理して書くためのフォーマット（書き方のルール）です。正式名称は「JavaScript Object Notation」ですが、名前は覚えなくて大丈夫です。具体例を見てみようたとえば、「田中太郎さん、30歳、東京在住」という情報をJSONで書くとこうなります。 { "name": "田中太郎", "age": 30, "city": "東京" } ルールはシンプルです。 {} で全体を囲む "項目名": 値の形で書く項目同士は , で区切る文字列は "" で囲む、数字はそのままなぜJSONが使われるのかプログラム同士がデータをやり取りするときに使います。たとえば：天気予報アプリがサーバーから天気データを受け取るとき Webサイトがログイン情報をサーバーに送るとき設定ファイルに設定を保存するとき人間にも読めて、プログラムにも読める。この「両方に優しい」のがJSONの強みです。もう少し複雑な例リスト（配列）も書けます。 { "name": "田中太郎", "age": 30, "hobbies": ["読書", "映画", "プログラミング"] } [] で囲むとリストになります。入れ子（ネスト）もできます。 { "name": "田中太郎", "address": { "city": "東京", "zip": "100-0001" } } {} の中に {} を入れると、データの中にデータを持てます。よくある間違い最後のカンマ { "name": "田中太郎", "age": 30, } 最後の項目の後にカンマ , をつけるとエラーになります。30 の後のカンマを消してください。 ...

【初心者向け】localhost接続が拒否されたときの対処法

この記事で解決することブラウザで localhost:3000 や localhost:8080 にアクセスしたら、こんなエラーが出た。このサイトにアクセスできません localhost で接続が拒否されました ERR_CONNECTION_REFUSED プログラミングの学習中によく出るエラーです。原因は単純なので、順番に確認すれば解決します。原因1：サーバーが起動していない（最も多い）一番多い原因です。ブラウザでlocalhostにアクセスする前に、サーバーを起動する必要があります。確認方法ターミナルを見てください。サーバーが起動していれば、こんな表示があるはずです。 Server running on http://localhost:3000 この表示がなければ、サーバーが起動していません。解決方法使っているフレームワークに応じて、サーバーを起動してください。 # Node.js / Express node app.js # React npm start # Python / Flask python app.py # Python / Django python manage.py runserver 原因2：ポート番号が違うサーバーは起動しているけど、ブラウザでアクセスしているポート番号が違う場合。確認方法ターミナルの表示を確認してください。 Server running on http://localhost:8000 この場合、localhost:3000 ではなく localhost:8000 にアクセスする必要があります。原因3：ポートが他のプログラムに使われている同じポート番号を別のプログラムが使っていると、サーバーが起動できません。確認方法（Windows） netstat -ano | findstr :3000 何か表示されたら、そのポートは使用中です。解決方法別のポート番号でサーバーを起動するか、使用中のプログラムを終了してください。原因4：ファイアウォールにブロックされている会社のPCや、セキュリティソフトが入っているPCで起きることがあります。 ...

【初心者向け】コマンドラインが怖い人へ ― 覚えるコマンド5つだけ

この記事で解決することプログラミングを始めようとしたら「ターミナルを開いてください」と言われた。黒い画面が出てきた。何を打てばいいか分からない。変なコマンドを打ったらPCが壊れそう。その気持ち、よく分かります。この記事では「これだけ知っていれば怖くない」という操作だけに絞って説明します。まず知っておくことコマンドを間違えてもPCは壊れません「コマンドが見つかりません」と言われるだけですいつでも閉じてやり直せますターミナル（コマンドライン）は、マウスの代わりにキーボードでPCを操作する道具です。やっていることはエクスプローラーと同じで、フォルダを開いたりファイルを見たりするだけです。ターミナルの開き方 Windowsの場合キーボードの Windows キーを押す cmd と入力してEnter 「コマンドプロンプト」という黒い画面が開きます。もしくは、PowerShellでもOKです： Windows キーを押す powershell と入力してEnter Macの場合 Command + Space を押す（Spotlight検索が開く） terminal と入力してEnter 覚えるコマンドは5つだけ 1. 今どこにいるか確認する # Windows cd # Mac / Linux pwd 今自分がどのフォルダにいるかが表示されます。迷子になったらまずこれ。 cd は「current directory（今のフォルダ）」、pwd は「print working directory（作業フォルダを表示）」の略です。 2. フォルダの中身を見る # Windows dir # Mac / Linux ls 今いるフォルダにあるファイルやフォルダの一覧が表示されます。エクスプローラーで見ているのと同じ情報です。 3. フォルダに移動する cd フォルダ名例えば、デスクトップに移動したいなら： cd Desktop これはWindows、Mac、Linux共通です。 ...

【Python】ダウンロードフォルダを自動整理するスクリプトの作り方

この記事で作るものダウンロードフォルダに溜まったファイルを、拡張子ごとに自動でフォルダに振り分けるPythonスクリプトを作ります。こんな感じに整理されます：ダウンロード/ ├── 画像/ ← .jpg, .png, .gif など ├── ドキュメント/ ← .pdf, .docx, .xlsx など ├── 動画/ ← .mp4, .mov など ├── 音楽/ ← .mp3, .wav など └── その他/ ← 上記に当てはまらないもの必要なもの Python 3.8 以上（公式サイトからインストール）テキストエディタ（メモ帳でもOK）追加のライブラリは不要です。Pythonに最初から入っている機能だけで作れます。手順ステップ1: スクリプトファイルを作る好きな場所に organize.py というファイルを作り、以下のコードを書きます。 import os import shutil from pathlib import Path # 整理したいフォルダのパス（自分の環境に合わせて変更） TARGET_DIR = Path.home() / "Downloads" # 拡張子とフォルダ名の対応表 CATEGORIES = { "画像": [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".svg", ".webp"], "ドキュメント": [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".txt", ".csv"], "動画": [".mp4", ".mov", ".avi", ".mkv", ".wmv"], "音楽": [".mp3", ".wav", ".flac", ".aac", ".ogg"], "圧縮ファイル": [".zip", ".rar", ".7z", ".tar", ".gz"], "プログラム": [".exe", ".msi", ".dmg"], } CATEGORIES は辞書（dict）と呼ばれるデータ構造で、「フォルダ名」と「そこに入れる拡張子のリスト」を対応づけています。 ...

【Git】git pushでrejectedエラーが出たときの対処法

この記事で解決することターミナルで git push したら、こんなエラーが出た。 ! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://github.com/...' 「rejected」って何？壊した？と焦るかもしれませんが、大丈夫です。よくあることで、簡単に直せます。なぜこのエラーが出るのか GitHub上のコードと、あなたのPC上のコードが「ズレている」のが原因です。たとえばこんな状況： GitHubの画面で直接ファイルを編集した別のPCからpushしたリポジトリを作るときにREADMEを自動生成した GitHubの方が「先に進んでいる」ので、Gitが「まずそっちの変更を取り込んでからpushしてね」と言っています。解決方法ステップ1: GitHubの変更を取り込む git pull origin main これでGitHub上の変更をあなたのPCに取り込みます。 pull は「引っ張ってくる」という意味で、GitHubからコードをダウンロードする操作です。ステップ2: もう一度pushする git push origin main これで通るはずです。 pullしたら「conflict」と言われた場合まれに、同じファイルの同じ場所を両方で編集していると「conflict（競合）」が起きます。 CONFLICT (content): Merge conflict in ファイル名この場合は、該当ファイルを開くとこんな表示があります： <<<<<<< HEAD あなたのPCの内容 ======= GitHubの内容 >>>>>>> origin/main 残したい方を選んで、<<<<<<< ======= >>>>>>> の行を削除してから： git add . git commit -m "conflictを解決" git push origin main まとめと次のステップ rejected は「GitHubの方が先に進んでるよ」という意味 git pull してから git push すれば解決 conflictが出たら、ファイルを開いて残したい方を選ぶ Gitに慣れないうちはこのエラーに何度も出会います。でも毎回やることは同じなので、すぐ慣れます。 ...

【Python】ModuleNotFoundErrorの原因と解決方法 ― 仮想環境入門

この記事で解決すること Pythonでコードを実行したら、こんなエラーが出た。 ModuleNotFoundError: No module named 'requests' pip install requests したのに動かない。なぜ？この記事では、このエラーの原因と「仮想環境」を使った根本的な解決方法を説明します。なぜこのエラーが出るのか PCに複数のPythonが入っていることが原因です。たとえば： Python 3.10 と Python 3.12 が両方入っている pip install したのは3.10の方 python コマンドで動くのは3.12の方別々のPythonなので、片方にインストールしたライブラリはもう片方からは見えません。解決方法：仮想環境を使う「仮想環境（venv）」を使えば、プロジェクトごとに専用のPython環境を作れます。ライブラリの混乱がなくなります。ステップ1: 仮想環境を作るプロジェクトのフォルダで以下を実行します。 python -m venv .venv .venv というフォルダが作られます。この中に、このプロジェクト専用のPythonが入ります。 venv は「virtual environment（仮想環境）」の略です。ステップ2: 仮想環境を有効にする Windowsの場合： .venv\Scripts\activate Mac / Linuxの場合： source .venv/bin/activate 成功すると、ターミナルの先頭に (.venv) と表示されます。 (.venv) C:\Users\あなた\project> ステップ3: ライブラリをインストールする仮想環境が有効な状態で pip install します。 pip install requests これで、この仮想環境の中にだけ requests がインストールされます。ステップ4: コードを実行する python your_script.py ModuleNotFoundError は出なくなります。 ...