プログラミング

2024.12.26

エディタ

文字を打ち込んだり、編集したりするためのソフト

普段パソコンで文章を書いたりメモを取ったりするときに使うソフト。
例えば、Windowsの「メモ帳」やMacの「テキストエディット」などが代表的なエディタです。
エディタは、以下のようなことができます。
文字を打つ（入力する）: キーボードで文字を打ち込んで、画面に表示させることができます。
文字を編集する: 打ち込んだ文字を消したり、コピーしたり、貼り付けたり、入れ替えたりすることができます。
文字の保存: 打ち込んだ内容をファイルとして保存することができます。
文字の読み込み: 保存したファイルを読み込んで、以前の続きから作業することができます。
友達にメールを送る、ブログを書く、レポートを作成する、プログラムのコードを書く、ウェブサイトのHTMLを編集するこれらすべて、文字を入力して編集する作業が必要です。エディタがなければ、文字を打ち込むことさえできませんし、間違えた時に修正することもできません。
エディタの種類
シンプルなテキストエディタ:
例: Windowsの「メモ帳」、Macの「テキストエディット」
とてもシンプルで、文字を打つことと保存することに特化しています。文字の装飾（太字にしたり色をつけたり）はできません。主に、書式のない「プレーンテキスト」と呼ばれる文章を扱うのに使われます。
高機能なテキストエディタ:
例: Visual Studio Code (VS Code), Sublime Text, Atom, Sakura Editor, TeraPad
シンプルなエディタに比べて、以下のような便利な機能がたくさんあります。
　シンタックスハイライト:プログラミング言語のコードなど、特定のルールに従って書かれた文字に色をつけたりして見やすくしてくれます。
　自動補完: 入力途中の単語を予測して表示し、入力を助けてくれます。
　Grep機能: 複数のファイルの中から特定の文字を探し出す機能。
　プラグイン・拡張機能: 自分の用途に合わせて、機能を追加することができます。
プログラミング、ウェブサイトの作成、マークダウン記法の文章作成など、より専門的な作業に使われます。
ワープロソフト:
例: Microsoft Word, Google ドキュメント
特徴: エディタと少し似ていますが、文字の装飾（フォントの種類、大きさ、色、太字、斜体など）や画像の挿入、表の作成など、見た目を整えることに特化しています。
用途: レポート、企画書、手紙など、印刷したり、人に見せるための文書作成に使われます。厳密にはエディタとは区別されることが多いですが、文字を編集するという意味では広義のエディタと言えるでしょう。

開発環境

コンピューターのプログラム（ソフトウェア）を作るための、道具一式が揃った場所

例えば、料理をするためには、包丁や鍋、まな板、コンロ、冷蔵庫などの道具が必要ですし、それらを置くためのキッチンという場所がプログラムを作るには、専用の道具（ソフトウェア）が必要で、それらがうまく連携して使えるように準備された「場所」が「開発環境」なんです。
プログラミングは、単に文字を打ち込むだけではできません。私たちが書いたプログラムのコードは、コンピューターが直接理解できる言葉ではありません。そのため、以下のような様々なプロセスが必要です。

  1. コードを書く: まずは、プログラミング言語（Python, C++, JavaScriptなど）でプログラムの指示を文字として書きます。
  2. コンピューターが理解できるようにする: 書いたコードを、コンピューターが実行できる形（機械語）に変換する必要があります。この変換作業を「コンパイル」や「インタープリット」と呼びます。
  3. プログラムを実行する: 変換されたプログラムを実際に動かして、意図した通りに動くか確認します。
  4. 間違いを探して直す（デバッグ）: プログラムがうまく動かない場合、どこに間違いがあるのかを探し出し、修正します。

これらの作業を効率的に行うために、開発環境が必要になります。
開発環境を構成する主な「道具」
開発環境は、通常いくつかのソフトウェアの組み合わせでできています。

  1. エディタ（コードエディタ）:
    • 役割: プログラムのコードを書くためのソフトです。
    • 例: Visual Studio Code (VS Code),
    • ポイント: 単なるメモ帳ではなく、プログラミングに特化した機能（文字の色分け、自動補完、エラー表示など）が充実しています。
  2. コンパイラ／インタプリタ:
    • 役割: 私たちが書いたプログラミング言語のコードを、コンピューターが理解できる形に変換するソフトです。
      • コンパイラ: コードをまとめて変換し、実行可能なファイル（アプリケーションなど）を作り出すタイプ（C++, Javaなど）。
      • インタプリタ: コードを一行ずつ読み込みながら、その場で変換して実行するタイプ（Python, JavaScriptなど）。
    • 例: Pythonの実行環境、Java Development Kit (JDK), GCC (C/C++用)
    • ポイント: プログラミング言語ごとに専用のコンパイラやインタプリタが必要です。
  3. デバッガ:
    • 役割: プログラムに間違い（バグ）があったときに、その原因を探し出すのを助けてくれるソフトです。
    • 例: 各IDEに内蔵されているデバッガ、GDB (C/C++用)
    • ポイント: プログラムの実行を途中で止めたり、変数の値を確認したりすることで、問題箇所を特定しやすくなります。
  4. バージョン管理システム:
    • 役割: プログラムのコードの変更履歴を記録し、管理するソフトです。
    • 例: Git (GitHub, GitLab, Bitbucketなどと組み合わせて使うことが多い)
    • ポイント: 複数人で開発する際に、誰がいつ、どこをどう変更したのかを追跡したり、以前のバージョンに戻したりするのに非常に役立ちます。
  5. 統合開発環境 (IDE – Integrated Development Environment):
    • 役割: 上記のエディタ、コンパイラ／インタプリタ、デバッガなどの様々なツールを一つにまとめた、オールインワンのソフトウェアです。
    • 例: IntelliJ IDEA (Java), PyCharm (Python), Xcode (iOS/macOS), Android Studio (Android), Visual Studio (C#, C++, .NET)
    • ポイント: 初心者でもこれ一つあれば開発を始めやすいですが、高機能な分、使いこなすのに慣れが必要な場合もあります。VS Codeのように、エディタに機能を追加してIDEのように使えるものもあります。

開発環境は、プログラミングをする上で非常に重要な「土台」です。目的に合わせて適切なツールを選び、それらを組み合わせて効率的にプログラミングができるように整えることが、スムーズな開発への第一歩となります。

HTML

HTMLを始めるための開発環境の作り方
HTMLはプログラミング言語というよりは「マークアップ言語」といって、ウェブページの構造を作るためのものなので、本格的なプログラミング言語に比べて、開発環境を準備するのはすごく簡単です。

  1. テキストエディタ: HTMLのコードを書くためのソフト
  2. Webブラウザ: 書いたHTMLのコードがどう表示されるか確認するためのソフト

この2つがあれば、すぐにHTMLを始められます。HTMLを書いて表示してみましょう。

1. 新しいフォルダを作る

まず、HTMLファイルなどを保存するための新しいフォルダをデスクトップなど分かりやすい場所に作りましょう。

2. テキストエディタでフォルダを開く

3. 新しいHTMLファイルを作る

  1. ファイル名を入力する欄が出てくるので、○○○○.html と入力してEnterキーを押します。
    必ず最後に .html をつけてください。

4. HTMLのコードを書いてみる

<!DOCTYPE HTML>
<html lang= "ja">
<head>
 <meta charset='utf-8'>
 <title>HTMLを書いてみた</title>
<style>body {color: blue;}</style>
</head>
<body style="font-size:40px">
HTMLを書いてみた！
</body>
</html>

解説：
<!DOCTYPE HTML>：HTML5で書かれたことを宣言。
<html lang= “ja”>:ページの言語が「日本語」だと指定しています。
<html>～</html> :HTMLのスタートとエンドを示しています。
<head>～</head> :ここには「ページの設定情報（見えない情報/メタ情報）」をまとめます。
<meta charset=’utf-8’>：文字コードをUTF-8に設定（日本語対応）。
<title>”HTMLを書いてみた”</title>：ブラウザのタブに表示されるタイトル。
<style>body {color: blue;}</style>：bodyのテキストの色を青に設定。
<body style=”font-size:40px”>：フォントサイズを40ピクセル と書いている
<body>～</body> :実際に画面に表示される内容を書きます。

5. ファイルを保存する

書いたコードを保存します。
ファイル(F) > 上書き保存(S) をクリックするか、
Ctrl + S (Windows) または Command + S (Mac) のショートカットキーを使います。

6. Webブラウザで表示してみる（Google Chrome使用）

  1. エクスプローラー（ファイルやフォルダを見るソフト）を開き、先ほど作った フォルダを開きます。
  2. その中に ○○○○.html というファイルがあるはずです。その ファイルをダブルクリックします。
  3. すると、自動的にWebブラウザ（Google Chromeなど）が立ち上がり、書いたHTMLが表示される

もし表示されない場合は、○○○○.html を右クリックして「プログラムから開く」を選び、普段使っているWebブラウザを選択してみてください。

JavaScript

Python

C++

プログラミング言語

  • HTML
  • CSS
  • JavaScript
  • Python
  • C＋＋

ホーム
Translate »