プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【厳選】オススメのテキストエディタを3つ紹介【導入方法と使い方も解説】

吹き出し

プログラミング学習を始めて、テキストエディタを導入したいんだけど、沢山あってどれにすればいいか分からない・・・。

こんな悩みを持っている方へ

本記事では、実際にフリーランスエンジニアとして活動している僕がオススメのテキストエディターを紹介します。また導入方法も解説していきます。(macを例に)

結論から申し上げますと、好みのモノを使えばOKです。
「これじゃなきゃダメ」みたいなのは無いので見た目など自分に合うものを使いましょう。

ちなみに僕が愛用しているのは「Brackets」というテキストエディタで、シンプルでとても使いやすく個人的におすすめです。

有料のテキストエディタもありますが、本記事では無料のモノのみを紹介しています。(無料で充分です)

テキストエディタ①:Atom

アトム

Atom(アトム)は、GitHubが開発したオープンソースのテキストエディタである。ウィキペディア

GitHubというプログラミング界隈だと有名な会社が開発したテキストエディタです。僕が始めた使用していたのがAtomでした。

特にAtomにした理由はなくて、オススメされたので何となく使用していました。

Atomの特徴

  • 無料
  • ロゴがお洒落
  • GitHubが開発

どのエディタも機能は似たり寄ったりですので、開発会社などで選ぶのもアリです。

Atomの見た目

アトムの見た目

上記がAtomの編集画面です。

デフォルトでは黒を基調としたデザインとなっており、左側で開いているフォルダなどを管理することができます。

Atomの導入方法

Atom導入の手順は下記の通りです。

  • ①:公式サイトからダウンロード
  • ②:Atomを起動

簡単に導入する事ができます。

①:公式サイトからダウンロード

アトムをダウンロード

››Atom公式サイトはこちら

まずは、上記の公式サイトにいきダウンロードというボタンからAtomをダウンロードしましょう。

②:Atomを起動しましょう

アトムを起動

zipファイルを解凍して、アプリケーションを起動すると上記のような画面になります。

その中から「open a project」というのを選択して、編集したいファイル(HTML,CSS)のファイルなどを選択しますともうゴリゴリとコードを書き始めることができます。

特にインストールとかもないので、ダウンロード後すぐに使うことができます。

テキストエディタ②:SublimeText

sublimetext

オーストラリアのJonSkinnerによって開発されたテキストエディタ。
割と愛用者が多くて有名なテキストエディタです。

僕がWEB制作会社で働いていた頃は、「SublimeText」を使用している方が多かったです。というよりPCにデフォルトでインストールされていた。

SublimeTextの特徴

  • 無料
  • 愛用者が多い
  • 機能も充実

愛用者が多く機能も充実しているので、多くの人が使っている印象です。また、コードも見やすいと定評があるのが特徴ですね。

SublimeTextの見た目

sublimetextの見た目

テキストエディタって色々ありますが、やはり同じような見た目ばっかりですね。今回この記事を書きながら思いました。

SublimeTextはAtomとは違って左側のフォルダのところが白になっているのが特徴です。Atomよりも黒すぎない感じの雰囲気ですね。

SublimeTextの導入方法

導入方法は下記の通り。

  • ①:公式サイトからダウンロード
  • ②:SublimeTextを起動する

こちらも特にインストールなどは必要なく、ダウンロード後にすぐに使用することができます。

①:公式サイトからダウンロード

sublimetextをダウンロード

››SublimeTextの公式サイトはこちら

上記の公式のサイトにいきダウンロードボタンを押してダウンロードしましょう。

②:SublimeTextを起動しましょう

sublimetextを起動

ダウンロードしましたら、まずはSublineTextを起動させてみましょう。

上記のような画像になりましたら、上のバーにある「ファイル」という項目から【新規ファイル】または【開く】からファイルを選び、プログラミングを開始することができます。

これでSublimeTextの導入は完了です。

テキストエディタ③:Brackets

brackets

こちらはAdobeが開発しているテキストエディタです。他にはPhotoShopなども有名ですよね。

僕が愛用しているテキストエディタでもあります。軽量でシンプルなのでミニマムな感じが好きな方にオススメ。

Bracketsの特徴

  • 無料
  • ミニマムなデザイン
  • シンプルで使いやすい

僕は普段からAdobe製品を使うことが多いので、テキストエディタもAdobeで統一しています。ミニマムなデザインで操作もシンプルですので個人的にオススメできるテキストエディタです。

Bracketsの見た目

bracketsの見た目

AtomやSublimeTeatとは違ってデフォルトで背景が白になっています。黒か白かは好みが分かれると思いますが、背景色は設定で変えられますのでご安心を。

Bracketsの導入方法

先程に紹介した2つと手順は同じですのでサクッと解説します。

  • ①:公式サイトからダウンロード
  • ②:Bracketsを起動

①:公式サイトからダウンロード

bracketsの見た目

››Bracketsの公式サイトはこちら

上記の公式サイトからダウンロードしていきます。

②:Bracketsを起動します

bracketsを起動

zipファイルを解凍して、Bracketsを起動させましょう。

上記のような画面になると思います。これがブラケッツのデフォルトの画面です。

こちらも上部にある「ファイル」という項目から【新規作成】または【開く】からファイルを選ぶだけでプログラミングをすることができます。

拡張機能を追加してカスタマイズできます。

カスタマイズ

先程の程、紹介した3つのテキストエディタは拡張機能というのがありまして、追加の機能を追加することができます。

Bracketsを例に「Emmet」という拡張機能を追加してみましょう。

Emmetとは

爆速でコーディングする為の拡張機能です。WEB制作をする方には必須なので追加しておきましょう。

【ファイル】から【拡張機能マネージャー】を選択

拡張機能マネージャー

上部のバーにある【ファイル】から【拡張機能マネージャー】を選択します。

【Emmet】を検索してインストール

emmet

検索欄から「Emmet」と入力しますと下に検索結果が出てきますので、そこからEmmetを見つけて【インストール】を押してインストールしましょう。

これでインストールは完了です。

Emmetの使い方は別記事で解説しようと思います。

こんな感じで、便利な拡張機能が沢山ありますので自分でググりつつ自分用のテキストエディタにカスタムしてプログラミング効率を上げていきましょう。