プロのエンジニアが現場で使っているおすすめのWeb無料エディタツール

エンジニアとは、情報処理や情報通信といった「情報技術(IT)」に関連する技術者の総称です。

大手求人媒体の求人倍率傾向を見ると、エンジニア職の求人倍率は右肩上がりのトレンドを示しており、需給のバランスが取れた将来性のある業界と言えるでしょう。

IT業界は、移り変わりが早く、その流れに素早く対応できるスキルの高さを求められます。

今回は、そんなエンジニアを支えるおすすめのWeb無料ツールについてご紹介します。実際にエンジニアとして活躍しているプロが現場で使っているものをご紹介するので、ぜひご参考にしてください。

sublime text

sublime text(サブライムテキスト)とは、プログラミング言語をコーディングする際に使用するテキストエディタの1つです。

多くのプログラマやWebデザイナーが利用しており、過去に「sublime text」「sublime text2」とバージョンがありますが、最新バージョンは「sublime text3」となっております。

sublime textの特徴

ここでは、sublime textの特徴をご紹介します。

sublime textはインストールした段階では無駄な機能がないので動作が軽く、テキストエディタとして100%に近い機能を無料で使用することが可能です。

また、パッケージ(拡張機能)が豊富なので自分なりの使いやすさを追求することができます。

さらに、豊富なショートカットで作業スピードをアップできることが、急な案件が入ってきたり、大規模な修正が多かったりするエンジニアにとっては嬉しいのではないでしょうか。

sublime textのインストール手順

sublime textのインストールはとても簡単です。今後sublime textを使いたいと考えている方は、ぜひご参考にしてください。

【Mac】

①sublime textのダウンロードページを開きます。
②次に、dmgファイルをダウンロードし、dmgファイルをダブルクリックで展開します。
③ファイルからsublime text.appをアプリケーションフォルダにコピーします。
④コピーが完了したら、アプリケーションのフォルダからクリックしてsublime textのダウンロードを実行します。(もしもここでウィンドウが出てきたら「開く」をクリックします)

以上の手順でsublime textのインストールは完了となります。

【Windows】

①sublime textのダウンロードページを開きます。
②次に、OS一覧からご自身のパソコンに該当するものを選んでクリックします。
③クリックすると自動的にダウンロードが始まるので、ダウンロードが完了したらインストーラーファイルを開きます。
④sublime text関連のファイルをどこに保存するのか選択します。
⑤インストールをクリックすると、インストールが開始されます。
⑥インストールが終了したら、「finish」をクリックで完了です。

これらの動作で、sublime textのインストールは完了します。

インストールが完了したら、ショートカットキーを設定したり、プラグインをインストールしたりと、ご自身の使いやすいように環境を整えてください。

coteditor

coteditorは、多くのMacユーザーから愛されているOS X専用のテキストエディタです。

このcoteditorを使うことで、様々な拡張子でテキストを保存することができます。拡張子とは、ファイルの最後についている「.txt」「.pdf」「.jpg」などのピリオド+英数字で表されているファイルの種類のことです。この拡張子を見るだけで、ファイルを分別することができます。

Coteditorの特徴

Coteditorは国産ソフトなので最初から日本語対応となっております。また、AppStoreからダウンロードができるという安心感も嬉しいですね。

スニペット(プログラミング用語の中で簡単に切り貼りして再利用できる部分のこと、または検索エンジンによる検索結果の1部として表示されるWebページの要的分のこと)が登録できるので作業スピードアップに繋がりますし、背景色や文字色の設定が直感でわかりやすいというメリットがあります。

わかりやすく作業ストレスの少ないcoteditorを無料で使えるのは有難いですね。

Coteditorの初期設定方法

①まず、メニューバーのCotEditorから環境設定を開きます。
②その中で『フォーマット』を選び、デフォルトスタイルを『HTML』にします。これでcoteditorを開いてすぐにHTMLで書けるようになります。
③背景色を変えたりしたい場合は表示を選びます。そこで基本となるテーマを選び、その後に細かく背景を変えることができます。
④次に、スニペットを登録します。環境設定からキーバインドを選択し、スニペットを選んで事由に登録しましょう。

このように操作環境を整え、使いやすい状態にしましょう。

Atom

Atomとは、2015年と比較的新しいエディタながら、Web開発者が作業を効率化するための様々な機能を網羅している優れものです。

GitHugの創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」という思いから始まったオープンソースのエディタです。

Atomの特徴

 タブ型で使いやすいユーザーインターフェース
 無料で公開されているパッケージで機能追加が可能
 1つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことができる

Atomの特徴を大きくわけると、以上の3つです。

この中でも最大の特徴はなんといってもその拡張性の高さです。1部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や、「キーバインド」など、Web開発者には嬉しい機能が備わっております。

また、初心者でも比較的使いやすいというメリットがあります。

Atomのインストール手順

【Mac】

①公式からexeファイルをダウンロードします。
②『ファイルを実行する』を選択するとソフトが起動します。

【Windows】

①公式サイトからexeファイルをダウンロードします。
②Exeファイルを実行するとインストール中の画面が表示されます。
③インストールが終わるとソフトが起動します。

Atomの文字化け対策

日本語を含む既存のファイルをAtomで開くと、文字化けが発生することがありますが、この場合は文字コードを変更します。

Atomを開くと、画面右下に文字コートを変更するエリアがあるので、ここを選択します。

すると、文字コードの一覧が表示されるので、ここで文字コードを変更します。Windowsの場合は、「Shift JIS」という文字コードが文字化けの原因となっているパターンが考えられますので、まずは「Japanese(Shift JIS)」から試していきましょう。

標準設定の文字コードを変更するためには、Atom>環境設定>で表示される「Settings」の画面で、「File Encoding」を変更します。

Vim

Vimとは、Viという世界的に多くのユーザーから高い支持を得ているテキストエディタの拡張版です。

Viとは、多くのWebサーバとして広く使われている多くのLinuxOSに標準搭載されている、人気の玄人向けテキストエディタのひとつです。ViおよびVimには根強いファンがおり、そのユーザーのことを「Vimmer(ビマー)」と呼びます。

Vimの特徴

 コマンドで操作が可能
 モードを切り替えて操作することができる
 自由自在にカスタマイズが可能
 動作が軽量
 CUIでそのまま利用が可能

Vimにはこのような特徴があり、最大のメリットは操作が楽という点です。

Vimのインストール手順

①ファイルを解凍します。
②フォルダ名にはダウンロードサイトや日付が記入されているので、フォルダ名を「Vim」に変更します。
③C:/ program Filesフォルダへ移動します。
➃ インストールしたディレクトリC:\program Files/vimを環境変数の保存したフォルダを追加します。

これらの動作で、Vimのインストールは完了します。

Visual Studio Code

Visual Studio Codeとは、マイクロソフトによって開発されているソースコードエディタのことを言います。

リリース当初から、多くのプログラマやWebデザイナー達の支持を集め、事実他の有名エディタからVisual Studio Codeに乗り換えるエンジニアも少なくありません。

Visual Studio Codeの特徴

 軽量な動作
 デバック機能
 複数言語のサポート
 コードの自動補完
 Git連携機能

Visual Studio Codeの特徴は、大きくわけて以上の5つとなります。

動きも軽く、機能性にとても使い勝手がよく、初心者でも比較的使いやすいと言えるでしょう。

Visual Studio Codeのインストール手順

①ダウンロード終了後、インストーラを起動します。
②セットアップウィザードが表示されているので、「次へ(N)」ボタンをクリックします。
③ライセンスの同意文書が表示されているので、一通り目を通したら「同意する」をクリックしましょう。
④インストール先を指定します。
⑤スタートメニューに表示されるプログラムグループの名前を設定します。
⑥追加タスクを設定することができるので、追加したい項目にチェックを入れてください。
⑦インストール前の確認ボタンが表示されるので、インストールボタンを押してインストールを開始します。

これらの動作で、Visual Studio Codeのインストールは完了します。

どのツールが自分に合っているのか

「どのツールが自分に合っているのかわからない…」、そう悩んでいる方もいらっしゃると思います。

その場合は、ご自身のスキルや、ツールを使用する際にどのようなことを重要視するのかよく考えることが大切です。

たとえば、動作の軽さを重要視するならAtomやVisual Studio Code、簡易な言語を使用するならcoteditor…といったように、ご自身とツールのすり合わせが大切です。

お試し版や無料版など、様々なツールを試してみて、最も使いやすいと感じたものを選んでみてください。ご自身にピッタリのツールを見つけることが、能力を高める要素の1つにもなるでしょう。

まとめ

いかがでしたか?

プロのエンジニアが実際に現場で使っているツールを5つご紹介しました。

これらのツールを使い、一線で活躍するエンジニアを目指してください。

よく読まれている記事

「技術について(開発言語/ツール情報)」でよく読まれている記事