プログラミングを始めたときに知っておくと良いこと

## はじめに
この記事では、プログラミングを始めたときに筆者が知っておきたかったことを中心にプログラミングをこれから始める方向けにまとめている記事です。
この記事の趣旨としては、プログラミングを始める前に基本的な内容をそれっぽくそれなりに理解してもらうことです。
記事の内容に誤りがあった際には優しく指摘してくださると筆者が急いで修正します。

## 基本的な用語
1. フォルダ
    - フォルダとは、コンピュータの世界におけるファイルを入れておくための入れ物のようなものです
2. ファイル
    - フォルダをバインダーとするとファイルは書類にあたります。基本的にフォルダはファイルを入れるためにあります
3. プログラム
    - プログラムとは、コンピュータを動かすための命令のことを指しており、これが集まってソフトウェアを構成しています
4. コード
   - コードとは、人間が書いたプログラムの元となるテキストのこと
5. ソフトウェア
    - ソフトウェアとは、コンピュータに対して命令を出すプログラム群のことを指しています。いくつかの種類に分けることができますが、今回は割愛します
6. ハードウェア
    - ハードウェアとは、コンピュータの目に見える機械部分のことを指していることが多いです

## ディレクトリとは
ディレクトリとは、フォルダのことです。
プログラミングをしていると、フォルダという人と、ディレクトリという人と両方の人に遭遇するので、どちらも同じ言葉を指していることを覚えておきましょう。
ただし、厳密にはOS（後述）によってディレクトリと呼ぶか、フォルダと呼ぶかが変わります。しかし、両者の違いを意識している人は殆どいないので、通常使い分けることはありません。

:::message
OSによるフォルダとディレクトリの違い
WindowsやMacなどのGUI上では、「フォルダ」という呼称を使用していますが、LinuxやUnixなどのCLI上では「ディレクトリ」という呼称を使用しています。
:::

## パスとは
パスとは、特定のファイルがどこにあるのかを示すための経路情報のことです。パスには２種類あり、相対パスと絶対パスというものがあります。相対パスとは、今いるファイルから目的のファイルに到達するまでの経路を示したもので、絶対パスはルート（階層構造の頂点）となる場所からの経路を示したものです。
例えば、以下のようなドメインとファイル構成があるとします。
```
https://example.com - img
                        - flower.png
                    - index
                        - picture
                            - show.tsx
```
すると、show.tsxから、flower.pngへの相対パスは「../../../img/flower.png」となります。
また、flower.png自体の絶対パスは以下のようになります。
```
https://example.com/img/png
```

### 　パス名に日本語を使わない方がいい理由
一般的にプログラムは英語、つまり半角文字で動いていることが多いので、日本語をパス名に指定すると不具合が起こる可能性があります。なので、プログラミングをする際にはディレクトリ名、及びファイル名になるべく**日本語が入らないようにしておくことを推奨**します。
実際に筆者がハンズオン（現地で実践する形式）のイベントに行った際には、Windowsのコンピュータを使っている人がパス名に日本語を入れていて動かなかったことがありました。

## 拡張子とは
一般的に拡張子はファイル名の「.」以降の英数字1~4文字のことを指しています。例えば、speech.txtというファイルがあったとき、このファイルの拡張子はtxtの部分のことを指しています。
以降によく目にする拡張子の表を貼付しておきます。
| 拡張子 | 説明 |
| --- | --- |
| jpg | 画像ファイルの一種 |
| png | 画像ファイルの一種。jpgと比べてデータサイズが大きい |
| gif | 画像ファイルの一種。webページなどでよく使用される |
| mp3 | 音声圧縮の形式の一種 |
| txt | 一般的なテキストファイルの形式 |
| html | htmlファイル |
| css | cssファイル |

## 階層とは
ディレクトリには、ファイルの他にディレクトリを入れることが可能となっています。それらの包括関係のことを階層構造、あるいは木(ツリー)構造と言います。
以下のようなディレクトリ構造があるときには、上の階層にいるディレクトリのことを「親」、下の階層にいるディレクトリのことを「子」と言います。
![](https://storage.googleapis.com/zenn-user-upload/37a3bdb38e14-20240918.jpg)

## GUIとCLIとは
CLI(Command Line Interface)とは、よくプログラミングと言われたときに思い浮かべるあの真っ黒な画面に文字を打っている画面のことを指しています。
もう少しきちんと説明すると、キーボードからの入力によって、コンピュータに指示を送る形式のことをCLIあるいはCUI(Character User Interface)と言います。ここでいうインターフェースとは、あるものとあるものをつなぐもののことを指しています。かなり概念的な言葉なので、難しく考える必要はありません。今回は人とコンピュータを繋ぐためのものという意味で使われています。
下の画像のようなものが、一般的にCLIと呼ばれているものです。また、このようなコマンド(コンピュータに出す命令)自体やコマンドを打ち込む場所のことをコマンドラインと言います。
![](https://storage.googleapis.com/zenn-user-upload/1098d813f650-20240918.png)

:::note warn
この例として出したディレクトリの中身が汚いことや、時刻が23時であることは触れないでください。
:::
GUI(Graphical User Interface)とは、CLIとは対照的にマウスによってカーソルなどを操作し、アイコンや画像などを操作する方法のことです。私たちが今見ている画面こそGUIの最たる例です。映画のハッカーのコンピュータの画面ではない、普段私たちが触っているコンピュータの画面のことをGUIと言います。

## OSとは
OS(Operating System)の、直訳は「動かすためのシステム（仕組み）」です。簡潔にいうならば、コンピュータを動かすために必要なソフトウェアが入ったシステムソフトウェアのことです。
代表的なOSには以下のようなものがあります。
| OS | 説明 |
| --- | --- |
| macOS | Apple社の販売しているMac Bookシリーズ(PC)に搭載されているOS |
| iOS | 同じくApple社の販売しているiPhoneシリーズ(スマートフォン)に搭載されているOS |
| Windows | Microsoft社の販売している多様なコンピュータに搭載されているOS |
| Linux | 色々な会社や団体が独自のディストリビューション(派生のようなもの)を発表しているOS |
| Android | 世界の70%のスマホに利用されているOS |

## プログラミング言語とは
プログラムを書く際には、人間が読める**プログラミング言語**という言語で記述します。その仕組みや種類は多岐に渡り、一通り説明するのに記事一つ分は使うのでここではとても簡単に機械に命令を出すための言語という説明だけで留めておきます。
以下に主要なプログラミング言語の一部を抜粋して紹介します。
| プログラミング言語 | 説明 |
| --- | --- |
| C | 長い歴史のあるプログラミング言語で、組み込みからソフトウェア開発までその用途は多岐にわたる |
| C++ | C言語をもとにオブジェクト指向の概念を取り込んだ言語、C言語と同じく組み込みからソフトウェア開発まで、その用途はたきにわたる |
| Java | 高い汎用性と環境への非依存性を持つオブジェクト指向言語 |
| C# | C++とJavaをもとにして作られたオブジェクト指向言語。C言語、及びC++との互換性はない。 |
| Python | 比較的シンプルな文法が特徴で、機械学習に強い印象があるが大抵のことはできる。ライブラリが豊富な言語。 |
| JavaScript | 主にWebアプリやWebブラウザで利用されるスクリプト言語 |
| HTML | プログラミング言語ではない気もするマークアップ言語。Webブラウザなどで利用される。 |
| CSS | HTMLの見た目を整えるための技術 |
| PHP | 主にWeb開発に利用されるスクリプト言語 |
| Kotlin | Androidのアプリなどで使用されるJavaとの完全互換性を持つ言語 |

## コマンドとは
コンピュータに命令を渡す際には、コマンドライン(コンピュータに命令を渡す場所)を通して命令を渡すことができます。この命令のことを**コマンド**と言います。
ここでは、一部のコマンドを紹介します。

Unix、Linuxにおけるコマンド例
| コマンド | 説明 |
| --- | --- |
| ls | 現在いるディレクトリ（カレントディレクトリ）のファイル一覧表示 |
| pwd | カレントディレクトリのフルパス(絶対パス)表示 |
| mkdir 作成するディレクトリ名 | ディレクトリ作成 |
| rm ファイル名 | ファイル削除 |
| cd オプション | ディレクトリ移動 |

## VSCodeとは
プログラミングを始めた方、もしかしたらプログラミングを始めようとしている方にも聞いたことがある人がいるかもしれませんが、VSCode(Visual Studio Code)とは、開発用のエディタのことです。
エディタと言われて、コンピュータにあらかじめ入っているテキストエディタなどを思い浮かべた人もいると思います。それらもエディタの一種です。
そもそも、エディタとは、何かを編集する際に使用するソフトウェアのことでVSCodeやコンピュータ付属のテキストエディタ等はテキストの編集を行うテキストエディタと呼ばれるものですが、他にも、バイナリエディタやサウンドエディタなどのエディタが存在します。
では、コンピュータにあらかじめ入っているエディタとVSCodeの違いは何なのかといえば、VSCodeはプログラムのコードを書くことに特化しているため、付属のテキストエディタでは利用できない様々な恩恵を受けることができる点です。例えば、シンタックスハイライトと言われる、プログラムを意味ごとに区切り、文字の色を変えてくれる機能をプログラミング言語ごとに設定できたり、インテリセンスと呼ばれる補完機能を使用できることなどが挙げられます。
![](https://storage.googleapis.com/zenn-user-upload/e6e09d1fdcf7-20240919.png)
実際のVSCodeの画面
シンタックスハイライトが効いているのが分かる

## IDE(統合開発環境)とは
エディタとよく似た概念にIDEと呼ばれるものがあります。IDE(統合開発環境)とは、簡単にいうと開発に必要な機能が全部入っている高機能なエディタです。しかし、近年ではエディタも高性能になってきているので、IDEとエディタの区別が曖昧になっており厳密に区別しないこともあります。