【初心者向け】おすすめのプログラミング環境を作ろう【中編: 開発エディタ】

こんにちは、masakiです。

ブロガー
プログラミングをこれから始めたいけど、どのような環境が必要なの?ベストプラクティスを知りたいなぁ・・

このような疑問をもっている人の為の記事です。

これからプログラミングを始める初心者でも、一般的なフリーランスエンジニアや制作会社が利用している環境を構築できるようにするのが本記事の目標です。

前回の【前編】では、Macに必要なソフトを入れGithubを登録し、基本環境を構築しました。

【中編】では、現時点もっとも人気でよく使われているプログラミングに必須なエディタのインストールと設定を行っていきます。

【初心者向け】おすすめのプログラミング環境を作ろう【前編: 基本環境を構築】

2019年8月24日

スポンサーリンク

プログラミングに必須の開発用エディタとは

開発用エディタとは、プログラムを書く時に利用するエディタの事です。

基本的には、あなたが何かを書くときに使っているエディタと大して変わりはありません。

しかし、プログラミング専用のエディタには便利な機能が色々付属していて、あなたがプログラミングをするのをあらゆる面で強力にサポートしてくれます。

必ず開発用エディタを利用してプログラミングすることをオススメします。

一番人気はVisual Studio Code

2019年9月現時点、世界最高の開発用エディタはMicrosoft製のVisual Studio Codeです。

世界中のエンジニアやプログラマー及び、制作会社でもっとも使われているエディタです。

あらゆるプログラミング言語に対応し、強力な拡張性と使いやすいインターフェイスを備え、無料です。

Microsoftと聞くと少し前までは、商用ソフトウェア=有料のイメージしかなかったのですが・・。今やオープンソースの開発環境の市場でも圧倒的シェアを牛耳っています。

Microsoftのクライアントソフトウェア(パソコン内で動くソフト)を開発する能力の高さを存分に生かし、あらゆる開発用エディタの歴史の中でも最高傑作といってよい仕上がりになっており、なおかつ無料で市場に投入してきています。

おそらく、このソフトの地位はしばらく揺らぐことは無いでしょう。

これからプログラミングを始める方は、開発用エディタにはVisual Studio Codeを使うことを圧倒的にオススメします。

ちなみに前回の記事で紹介したGitHub(ソースコードの管理サービス)もMicrosoftのサービスです。

開発用エディタのインストール

では、Visual Studio Codeをあなたのパソコンにインストールしていきましょう。

上記にアクセスして、『Download for Mac』をクリックしてダウンロードしてください。

zipファイルがダウンロードされるので、クリックして解凍してください。

Visual Studio Codeのアプリが解凍されるので、それをダブルクリックしてインストールします。

インストールは簡単。そのまま画面の流れに沿って進んで行くだけです。

インストールが完了すると、アプリケーションフォルダにVisual Studio Codeが追加されるので、ダブルクリックして起動してください。

Visual Studio Codeを起動して上記画面が表示されれば完了です。

おすすめの拡張機能をインストールしよう

Visual Studio Codeでは、世界中の開発者が開発している『拡張機能』を追加して、自分独自のエディタにカスタマイズする事ができます。

『何やら難しそう・・』と感じるかもしれませんが、簡単にいうと『あなたのエディタを便利に拡張してくれる物』と認識しておいてください。

ここではインストールした方がよい、おすすめの拡張を紹介します。

まずは拡張のインストールの仕方を簡単に解説します。

拡張機能のインストールの仕方

拡張機能のインストールの仕方を解説します。

まず画面左のメニュー中の、□アイコンをクリックしてください。

□アイコンを押すと以下の画面になります。赤枠のテキストエリアにインストールしたい拡張の名前を入力して検索します。

試しに、何も考えずにvscode-iconと入力してみましょう。

インストールボタンをクリックするとインストールされます。

これが基本的なインストールの仕方です。

インストールしたい拡張の名前をいれて検索 → 一覧にから拡張を選んでインストールボタンを押す。

簡単ですね。

では、ここから先はインストールするべきオススメの拡張を紹介します。

自分が作ったり学んだりするプログラミング言語毎に、非常に多くの拡張機能がありますが、ここではプログラミング言語に依存しない基本的な拡張を紹介します。

色々難しい用語や名前が出てきますが、後から削除したり追加したりできるので、今は無視してガンガン入れていきましょう。

Japanese Language Pack

まず真っ先にこれをインストールしてください。

Visual Studio Codeを日本語化します。

vscode-icon

エディタ内のディレクトリツリーやファイルにアイコンが付いて見やすくなります。

vscode-icon-mac

上のvscode-iconがmac風のアイコンになる拡張です。macユーザーにはこちらのアイコンの方が慣れているので見やすいかも。

Live Server

『Live Server』はワンクリックでローカルのwebサーバーを起動できる拡張です。

エディタで書いたファイルをWebブラウザでリアルタイムで確認できます。非常に便利!

GItLens

【初心者向け】おすすめのプログラミング環境を作ろう【前編: 基本環境を構築】で簡単に説明したgitについての拡張です。

Gitとはあなたが今後作っていくプログラムのソースコードを、便利に管理する為のソフトウェアです。

今後、複数人でプログラムを開発したりすると、プログラムのソースコードを誰がどこを変更したり追加したのかがわからなくなりますよね?そういった全ての情報をgitは便利に管理してくれます。

この拡張をインストールすると、エディタ上で誰が何処をどの様に変更したのか、わかりやすく確認することができます。

Git History

この拡張もgitに関するものです。Gitの履歴を見やすく表示することができます。

あなたが今後プログラミングしてgitを使う時に必須になるので、何も考えずにとにかく入れましょう。

Prettier

Prettierとはプログラミングコードを整形するためのツールです。

プログラミングというはプログラミング言語毎に書き方が決まっています。それをコーディング規約といいます。

同じプログラミング言語でも、人によって色々な書き方をしてしまうものです。

例えば、以下のような2つのプログラミングがあったとします。


<?php

$blog = "good";

if ($blog == "good")
{
    print "yes of course.";
} else
{
    print "ops.";
}

<?php

$blog = "good";

if ($blog == "good") {
    print "yes of course.";
} else {
    print "ops.";
}

2つのプログラムコードですが、カギカッコの位置が違うだけで(改行しているかしていないか)、まったく同じ内容のプログラムです。

しかし、複数人でプログラムを開発している時に、それぞれ好き勝手にコードを書いていくと、できあがったプログラムは非常に見ずらいものになってしまいます。

そういったことを回避するために、この拡張は自動的にコードを綺麗に整形してくれます。

IntelliCode

Microsoft公式の拡張機能で、AIによるコード補完機能を提供する拡張です。

Python、Java、TypeScript、JavaScript 用の AI 支援 IntelliSense が提供されます。 AI 支援 IntelliSense では、API の一覧がアルファベット順に提示されるのではなく、開発者にとってそれを使うことが正解となる可能性が最も高い API が予測されます。 開発者が現在記述しているコードの文脈とパターンを使用し、この一覧を動的に提供します。

便利なので是非入れましょう。

是非もっと多くの言語に対応して欲しいところです。

『自分のやりたいプログラミング言語に対応してない!!』と思われた方。他にもあらゆるプログラミング言語毎に、あらゆるコード補完機能を提供する拡張がありますので安心してください。

Visual Studio Codeを使ってみる

さぁ、ここまででVisual Studio Codeの基本的な設定と拡張のインストールは完了しています。

実際にすこしだけ使ってみましょう。

Visual Studio Code上で、『command + n』を押してみてください。新規ファイルが作成されると思います。

次に『command + s』を押し、ファイルに名前を付けて保存してください。

test.htmlという名前にしておきましょう。

test.html上で、ビックリマーク( ! )をタイプしてEnterを押してみてください。

一瞬にしてHTMLの基礎部分が書き上がります。

HTMLコード内の<body> ~ </body>の間に、『hello world!!』とタイプしてみましょう。

次に『command + L 』『command + O』と連続でタイプしてみてください。

webサーバーが自動的に立ち上がり、ブラウザが今書いているtest.htmlを表示します。

このように拡張機能によって、無限に便利に自分独自のエディタにカスタマイズする事ができます。

では、【中編】はここまでになります。

【初心者向け】おすすめのプログラミング環境を作ろう【前編: 基本環境を構築】

2019年8月24日

【初心者向け】おすすめのプログラミング環境を作ろう【後編: 仮想化環境の構築】

2019年9月6日
エンジニアがおすすめするプログラミングスクール3社

スポンサーリンク