未分類

プログラミング用のエディターは『visual studio code』でOKです

プログラミングを始めたい人
プログラミングを始めたい人
Progateは終わったけど、次に何すればよいの…?

自粛期間にプログラミング学習を始めた人は多いと思います。

Progateはめちゃくちゃ分かりやすいですよね。自分もお世話になりました😊

この記事は、Progateなどを一通り終わって、『自分のPCにプログラミング環境を作りたい』という人に向けて書きました。(エディター紹介編です)

プログラミング環境を作る

まず、自分のPCにプログラミング環境を作るには、次の2つが必要になります。(今回は、HTML/CSS,JavaScriptなどでweb制作をすることを想定しています)

  • ブラウザ
  • エディター

それぞれ簡単に説明します。『そんなことよりVScodeの魅力を教えてくれ!』という人は飛ばしてOKです。

ブラウザ

有名なもので『Google Chrome』、『Internet Explorer(IE)』などがあります。iPhoneでよく使う『safari』もブラウザの一種類です。

エディター

Progateでコードを書く部分がありましたよね。これをエディターと呼びます。

シンプルなメモ帳などでもコードは書けますが、よりコードを快適に書けるように機能がたくさんあるエディターもあります。

有名なエディターとして、

  • Visual Studio Code
  • atom
  • sublime text

などがあります。

もっちー
もっちー
『visual studio code』(略してVScode)がオススメだよ!

ここからは『Visual Studio Code』について紹介したいと思います。プログラミング初心者から熟練者まで、幅広くオススメできるエディターです。

 Visual Studio Codeについて

Visual Studio CodeはMicrosoftが開発したWindows、Linux、macOS用のソースコードエディタである。デバッグ、埋め込みGitコントロールとGitHub、シンタックスハイライト、インテリジェントなコード補完 、スニペット、コードリファクタリングのサポートが含まれる。 (wikipediaより)

Microsoft社が開発したエディターですが、もちろんMacユーザーでも使うことが出来ます。

使いやすいな〜と感じる点は、

  • Emmetが標準で使える
  • とにかく軽い
  • 名前がカッコいい(笑)

Emmet機能が使える

いきなり難しい言葉を使ってしまいスイマセンm(_ _)m

Emmetをざっくり説明すると、『よく使う書き方をまとめることができる』機能です。

例を見てみましょう。Webページを作るときは最初に、以下のコードを書く必要がありますね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
  
</body>
</html>

 

このコードをいつも手入力するのは面倒だと思います。どこかのメモ帳にメモを取っていても、わざわざコピペしてくるのも時間がかかります。

そこで活躍するのがEmmet機能です!

HTMLの雛形(上記のコード)を作成する場合は、『!』を入力してから『Tabキー』の約2秒で完成です。

他にもたくさんあるので、興味があれば調べてみてください。爆速でコードを書けるようになりますし、入力ミスもなくなります。

Emmetは、自分のよく使う書き方を登録できます。

自分はPHPをメインで使用しているので、

『php』+『TABキー』  →  <?php  ?> を登録しています。

とにかく軽い

以前は『Atom』というエディターを使っていました。これがめちゃくちゃ重くて、ファイルを開くのに時間がかかっていました。

そこで『Visual Studio Code』にしてみたら改善しました◎

原因はいまだ分からないのですが、もしエディターが重くてイライラしている場合は、検討の余地アリかもしれません。

名前がカッコいい

カッコいいですよね〜〜😊

略して『VScode』。発音は「ブイ エス コード」です。

最後に

もちろん好みもあると思いますが、『Visual Studio Code』は多くの人にオススメできるエディターだと思います。

もし、インストールの方法や使い方などで分からないことがあれば、もっちー(@mochi_bbb2)まで連絡お願いします\(^o^)/