「コードエディタを開いたけれど、どこから触ればいいの？」 「文字は書き換えられたけれど、これで保存できている？」
初めての画面には、ファイル名やボタンがたくさん並んでいます。最初に覚えたいのは、目的のファイルを開き、少し編集して保存し、変更が残っているか確かめることです。
この記事では、コードを書くためのアプリ「Visual Studio Code（以下、VS Code）」を例に、基本操作を順番に試します。プログラミングの知識は必要ありません。練習用のファイルに短い文章を書いてみましょう。
💡 このページでわかること
- コードエディタの画面で最初に見る場所
- ファイルを開く・編集する・保存する・検索する方法
- 保存後や、思うように操作できないときの確認ポイント
コードエディタとは？コードを書くためのアプリ
コードエディタは、プログラムなどの内容を文字で書いたり、修正したりするアプリです。行ごとに番号を表示したり、決まった言葉を色分けしたりして、内容を読みやすくする機能があります。
代表的なものには、この記事で使う Visual Studio Code（VS Code） や、Sublime Text（サブライム テキスト） などがあります。
普通の文章も編集できるので、最初の操作練習は文章だけで十分です。
また、ファイルを保存することと、プログラムを動かすことは別の操作です。保存は、編集した内容をファイルに書き込むこと。実行は、書いた指示に従ってプログラムを動かすことです。
今回は、文章の編集・保存・再表示・検索を練習します。言語ごとの実行方法は、次に使う教材や仕事の手順書で確認しましょう。
最初に知っておきたい画面と作業の流れ
ここからは、パソコンに入っているVS Codeを開いて、一緒に試してみましょう。最初からすべての機能を覚える必要はありません。まずは、文字を書いて保存するところから始めます。仕事で使う場合は、職場で指定されたエディタや設定も確認しておきましょう。
操作はPC用のVS Codeで説明します。他のコードエディタを使っている場合は、機能や操作方法が少し違うことがあります。
メニュー名は日本語を中心に、必要なところには英語名も添えています。バージョンや設定によって、配置や名前が違うこともあるので、画面が少し違っていても慌てずに確認してみてください。
最初に見る場所は、次の3つです。
| 場所 | 何を見る？ |
|---|---|
| ファイル一覧 | 開いたフォルダーの中に、どのファイルがあるか |
| 編集欄の上にあるタブ | 今、どのファイルの内容を見ているか |
| 中央の編集欄 | ファイルに書かれている文字と、編集する位置 |
VS Codeでは、ファイル一覧を表示する機能を「エクスプローラー」と呼びます。Windowsのファイル管理アプリと同じ名前ですが、ここではVS Code内の一覧を指します。
作業は「練習用フォルダーを開く → ファイルを作る → 編集・保存する → 開き直して確かめる」の順で進めます。その後、検索も試してみましょう。
STEP1：練習用フォルダーを開き、ファイルを作る
まず、WindowsのエクスプローラーやMacのFinderで、自分が分かる場所に editor-practice という新しいフォルダーを作ります。仕事のファイルが入っていない、練習専用の場所にしてください。
- VS Codeの「ファイル（File）」メニューから「フォルダーを開く…（Open Folder…）」を選びます。Macでは、画面上部の「ファイル」→「開く…（Open…）」からもフォルダーを選べます。
- 作成した
editor-practiceを選んで開きます。 - VS Codeのファイル一覧に、そのフォルダー名が表示されているか確かめます。
フォルダーを開くと、作成者を信頼するかの確認や「制限モード」の案内が出る場合があります。これは、そのフォルダーに含まれる設定などを使って、プログラムを動かす機能を許可するか判断するためのものです。
今回、自分で新しく作った練習用フォルダーであることを確認してから判断してください。入手元が分からないものは、無理に信頼する必要はありません。今回の文章の作成・編集・保存は、制限モードのままでもできます。
続いて、「ファイル」→「新しいテキスト ファイル（New Text File）」を選びます。空の編集欄に、次の2行を入力してください。
コードエディタの練習
今日はファイルを保存します。「ファイル」→「保存（Save）」を選び、保存先に editor-practice、ファイル名に practice.txt を指定します。名前の末尾にある .txt は、文字を保存するファイルの種類を示す「拡張子」です。
保存後は、ファイル一覧の editor-practice の中に practice.txt があり、タブにも同じ名前が表示されていることを確かめます。保存エラーが出ている場合は、先へ進む前にメッセージを確認しましょう。
STEP2：文字を編集し、保存して開き直す
今度は、2行目の「保存」を「編集」に書き換えます。
編集欄で「保存」の2文字をドラッグして選び、「編集」と入力してください。選択した部分を入力した文字に置き換えられます。
書き換える範囲を間違えたら、「編集（Edit）」メニューの「元に戻す（Undo）」で、直前の編集を取り消せます。文字を削除しすぎたときも、まず1回戻して内容を確認しましょう。
編集後の2行目が、次のようになっているか確かめます。
今日はファイルを編集します。日本語の変換を確定したら、「ファイル」→「保存」を選びます。キーボードなら、Windowsでは Ctrl + S、Macでは Command + S でも保存できます。
Ctrl + S は、Ctrlキーを押しながらSキーを押す操作です。Macでは、Commandキーを押しながらSキーを押します。
VS Codeでは、未保存の変更があるとタブに丸い印が表示されます。保存すると、この印が消えます。自動保存が有効な場合は、設定されたタイミングで保存されるため、印がすぐ消えることもあります。
最後に、次の順で確かめてください。
- 保存した
practice.txtのタブにある「×」をクリックして閉じます。アプリ全体を終了する必要はありません。 - ファイル一覧の
practice.txtをダブルクリックして開き直します。 - 2行目が「今日はファイルを編集します。」になっているか確認します。
保存を求める画面が出たら、内容を残す場合は保存を選びます。判断できなければキャンセルして編集欄へ戻りましょう。
なお、VS Codeには、終了時などの未保存内容を一時的に保持し、次の起動時に復元する機能があります。復元されて画面に文字が見えても、practice.txt に保存されたとは限りません。 アプリの再起動だけで判断せず、「保存」してからタブを閉じ、ファイル一覧から開き直して確認しましょう。
STEP3：検索で目的の文字を見つける
ファイルが長くなったら、目で探す代わりに検索を使います。
practice.txt の編集欄をクリックし、Windowsでは Ctrl + F、Macでは Command + F を押してください。検索欄に「編集」と入力すると、本文にある同じ文字が強調されます。
ここで探しているのは、今開いているファイルの中です。別のファイルも含めて探すときは、検索範囲を変えます。
| 探したい範囲 | Windows | Mac |
|---|---|---|
| 今開いているファイル内の文字 | Ctrl + F | Command + F |
| 開いたフォルダー内の複数ファイルにある文字 | Ctrl + Shift + F | Command + Shift + F |
上のキー操作はVS Codeの標準設定です。自分で変更した設定や追加機能によって、異なる場合があります。
フォルダー内を検索したら、結果に出てきたファイル名と、文字が見つかった場所を見てみましょう。そこから、目的のファイルを開けます。探す範囲は開いているフォルダーの中で、パソコン全体ではありません。設定によっては、検索されないファイルもあります。
見つからないときは、まず入力した文字が本文と同じかを確かめてみましょう。ファイル内の検索では、選択した部分だけを探す設定になっていないかも確認してみてください。
検索が終わって本文を書き換えたくなったら、編集欄をクリックして戻りましょう。検索欄に入力した文字は、探すためのものです。そこに文字を足しても、本文は変わりません。
初心者が注意したい確認ポイント
編集前は、ファイル名だけでなく保存場所も見る
別のフォルダーに、同じ名前のファイルがあることもあります。たとえば practice.txt が2つあると、片方を編集し、もう片方を確認してしまうかもしれません。
ファイル一覧で、どのフォルダーの中にあるファイルかを見ます。仕事では「このフォルダーの、このファイルを編集すればよいですか？」と確認すると、対象を共有しやすくなります。
置換は対象を確認してから使う
文字を別の文字にまとめて変える機能を「置換」といいます。便利ですが、「すべて置換」を使うと、残したかった文章まで変わることがあります。
最初は検索で見つけた箇所を確認し、必要な部分だけ編集しましょう。置換を使う場合も、今のファイルだけなのか、複数ファイルなのかを確かめます。
保存後も、変えた箇所と周りの行を読む
保存できたことと、正しく編集できたことは別です。文字を消しすぎていないか、関係のない行まで変わっていないかを見直します。
コードにある行頭の空白は、読みやすさのためだけでなく、言語によっては処理のまとまりを表します。今回の文章練習とは違い、実際のコードでは、空白や記号を見た目だけで削らないようにしましょう。
自動で見た目を整える設定により、保存時に空白などが変わる場合もあります。広い範囲が変わって戸惑ったら、繰り返し修正せず、設定やチームのルールを確認してください。
よくある疑問
保存したのに、Webページやプログラムが変わらないのはなぜ？
保存は編集内容をファイルに残す操作です。表示を変えるには、ページの再読み込みやプログラムの再実行などが必要な場合があります。
まず、編集したファイルと保存先が合っているか確認します。その後、教材や手順書にある動作確認の手順を確かめましょう。保存に合わせて自動で表示が変わる環境もあるため、必要な操作は環境によって異なります。
また、手元のファイルを保存するだけでは、変更履歴を管理する道具「Git」に履歴を記録したり、共有サービス「GitHub」に送ったりしたことにはなりません。履歴に記録する「コミット」や、記録を共有先へ送る「プッシュ」は、保存とは別の操作です。
別のファイルを開いたら、前のタブが消えた。削除された？
タブが切り替わっただけなら、ファイルを削除したわけではありません。
VS Codeには、ファイルを一時的に表示する「プレビューモード」があります。ファイル一覧で1回クリックすると、同じタブの表示が別のファイルに切り替わることがあります。開いたままにしたいファイルは、一覧でダブルクリックしてください。
拡張機能は、最初から入れた方がいい？
今回のテキストファイルの練習には、追加の拡張機能は必要ありません。拡張機能とは、エディタに機能を追加するものです。
実際の開発を始めて、教材やチームから指定されたものがあれば、その用途を確認して追加しましょう。
まとめ
初めてコードエディタを使うときは、「開く → 編集する → 保存する → 開き直して確認する」を一度試してみましょう。
練習が終わったら、次の4点を確かめてください。
editor-practiceの中にpractice.txtがある- 2行目が「今日はファイルを編集します。」になっている
- 保存してタブを閉じ、開き直しても変更が残っている
- ファイル内検索で「編集」を見つけられる
仕事のファイルでも、編集する対象・保存状態・変更内容を一つずつ確かめることが基本になります。
関連記事
- ターミナルとは？黒い画面で何ができるのかを初心者向けに解説：次の教材で「ターミナルに入力する」と出てきたときに、文字で指示を伝える画面の役割を確認できます。
- GitとGitHubの違いとは？初心者向けにやさしく解説：ファイルの保存と、変更履歴の記録・共有の違いを理解したい方へ。
- 開発環境を準備するときの確認手順｜新人が最初に見るポイント：エディタの基本操作に慣れ、開発に必要な道具や設定の確認へ進みたいときに。
- 新人エンジニアは何から勉強すればいい？最初に学びたい基礎知識：新人エンジニアが学ぶ順番と、次の勉強の選び方を知りたい方に。