まずはこれだけ！　テキストエディタの導入！（VScode）

# まずはこれだけ！　テキストエディタの導入！

プログラミングを書くにはテキストエディタを使うのはわかったけど
どうやって導入するの？

　わかりやすく解説します。

## ペルソナ

- プログラミングをこれから勉強しようとしている方
- 初めてプログラミングを書こうと思っている方

## 内容
テキストエディタの導入（詳しいコーディングは解説しません）

## Key Word

- テキストエディタ
- VScode



# 目次

1.テキストエディタとは？
2.実際に導入してみる
3.まとめ


## Contents

### 1.テキストエディタとは？

前回の[まずはこれだけ！HTML！](https://qiita.com/rrrrr1231/items/587ebc4608897278fedd)の記事の最後に、

------------------------------------------------------------

プロのプログラマーHTMLをはじめとするプログラミング言語を書くのに使うツールを「エディタ」と言います。
プログラミングを書くことに特化させた「メモ帳」のようなものです。
このエディタは基本的に無料でダウンロードして使用することができます。

------------------------------------------------------------

とお伝えしました。
本記事ではテキストエディタの導入方法をお伝えします！


####テキストエディタの種類

テキストエディタはWindowsやMacにもともと入っているものから、
Web上で無料でダウンロードできるもの、ブラウザ上で操作するものまで
多種多様にあります。

今回はその中でも、私が愛用している**VScode**の導入方法をご紹介します。

余談ですが、なぜもともと入っているエディタを使わずにわざわざダウンロードするのでしょうか？

それはWebで公開されているテキストエディタは
**プログラミング開発に特化したカスタマイズができるから**です。
例えば、以下はVScodeの実際の画面の一部です。
<img width="654" alt="テキストエディタサンプル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/58290515-53c1-4d9f-e559-d3a5f837303a.png">

（使用言語はここでは気にしなくていいです）
色がついていますね？

ではもともと入っているエディタも見てみましょう

<img width="708" alt="テキストエディタメモサンプル.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/1b129025-0d77-9096-757d-075197751065.jpeg">

驚くことにこれは全く同じコードです！
見やすさの違いが一目瞭然だと思います！

言語の中にはインデント（段落の深さ）が半角スペース一個ぶんだけずれるだけでもエラーになるものもあります。
それを２番目のエディタの中から探すのは実に効率が悪いです。

これだけでもVScodeなどのテキストエディタの価値を何となくわかっていただけると思いますが、
これは機能の一部で、自分好みにカスタマイズすることができて非常に便利なのです！

（というよりこっちの方がプロも使っているからかっこいい！・・・という理由でも全然OKです！）


### 2.実際に導入してみる

では、早速導入しましょう！

①　**VScode　HPにアクセスする**(https://code.visualstudio.com/)
上記リンクまたは**VScodeで調べる**

[![Image from Gyazo](https://i.gyazo.com/a00efa05345a54251aee49bc856a0758.gif)](https://gyazo.com/a00efa05345a54251aee49bc856a0758)

②**ダウンロードする。**
[![Image from Gyazo](https://i.gyazo.com/341dfde22b795324447f786ddab8a1f2.gif)](https://gyazo.com/341dfde22b795324447f786ddab8a1f2)

1.「Download for Mac」または矢印を押してダウンロード
<img width="404" alt="ダウンロード１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/be601df4-ada5-1622-b677-2e09b9ec9405.png">

矢印を押すと
<img width="51" alt="ダウンロード３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/fe292346-35fe-2a0f-f0cf-f905f6cfcdbe.png">
この画面が開くので
<img width="395" alt="ダウンロード２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/f99f0a40-1f15-3352-0afc-36f879fbde6f.png">

自分のPCのOSにあったもので**Stable**と書いてある矢印を押してダウンロードしてください。

ダウンロードが完了したら
基本的に**「ダウンロードフォルダ」**に格納されますので、
ダウンロードフォルダを開きましょう！

（ダウンロードフォルダの場所がわからない人は検索しましょう！
Macの場合は**commandキー + スペースキー**で検索ボックスが開きます）

ブラウザによっては下のバーにダウンロードしたファイルが表示されるのでクリックすると
そのファイルのある場所に直接いくことができます。（Gif画像左下参照）

ダウンロードファイルを開くと以下のようになるので、**「VSCode-darwin-stable.zip」**を
ダブルクリックしてください

するとVScodeが開きますのでこちらもダブルクリックをして開いてみましょう！

[![Image from Gyazo](https://i.gyazo.com/c4ba330ed742acb44ff411a547abf3b6.gif)](https://gyazo.com/c4ba330ed742acb44ff411a547abf3b6)

するとテキストエディタが開くと思います！

<img width="1440" alt="エディタサンプル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503867/aa7a3f09-c6de-51e3-2c07-46d8dbd995c4.png">



### 3.まとめ

今回のポイントは

- テキストエディタをダウンロードするのは使い勝手がいいから！かっこいいから！
（漠然とこれを使うものだという認識でOK！徐々に実戦で覚えられますので安心してください！）

- VScodeのダウンロード方法

でした！


今回はまずはPCにテキストエディタを導入するフローをお伝えしました！
次回はテキストエディタを入れたらまず入れるべきカスタマイズの紹介をします！
その後はHTMLを実際に書いてみましょう！

最後までありがとうございました！！