開発環境

この記事で解決すること 「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とは何か（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」のようなリンクをクリック さっきの変更が記録されています。いつ、何を変えたかが全部残っています。 ...

この記事で解決すること 「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: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で起きることがあります。 ...

この記事で解決すること プログラミングを始めようとしたら「ターミナルを開いてください」と言われた。 黒い画面が出てきた。何を打てばいいか分からない。変なコマンドを打ったら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共通です。 ...

この記事で解決すること 「VS Codeをインストールしたけど、メモ帳と何が違うの？」 そう思っている人向けに、最初にやるべき設定と覚えるべき操作を10個だけに絞りました。全部覚えなくていいです。使いながら少しずつ身につければOK。 VS Code（Visual Studio Code）は、Microsoftが作った無料のコードエディタです。プログラミングをする人のほとんどが使っています。 最初にやる設定（3つ） 1. 日本語化 VS Codeは初期状態だと英語です。 Ctrl + Shift + X を押す（拡張機能の画面が開く） 検索欄に Japanese と入力 「Japanese Language Pack for Visual Studio Code」をインストール VS Codeを再起動 2. 自動保存をオンにする ファイル → ユーザー設定 → 設定 を開いて、検索欄に auto save と入力。 「Files: Auto Save」を afterDelay に変更。 これで、編集するたびに自動で保存されます。保存し忘れて「変更が反映されない」と悩むことがなくなります。 3. テーマを変える（お好みで） Ctrl + K → Ctrl + T でテーマ選択画面が開きます。 好きな見た目を選んでください。暗い画面（ダークテーマ）が目に優しくて人気です。 覚えるショートカット（7つ） 全部Windowsのキーです。Macの人は Ctrl を Cmd に読み替えてください。 4. ファイルを開く: Ctrl + P フォルダ内のファイルをファイル名で検索して開けます。マウスでフォルダを辿るより圧倒的に速い。 ...