フロントエンド技術を学ぼう 3-6.コード編集ツール

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第58回は Part III: Front-End Dev Toolsから、
6項のCode Editing Toolsを紹介します。

コード編集ツールの説明です。

Sponsored Link

コード編集ツール

ソースコードエディタは、プログラマがコンピュータプログラムのソースコードを編集するのに特化した設計がされたテキストエディタです。
これはスタンドアロンアプリケーションであったり、統合開発環境(IDE)またはWebブラウザーに組み込んであったりします。
プログラマの基本的な仕事はソースコードの作成と編集であり、ソースコードエディタは、最も基本的なプログラミングツールです。

参照元:英語版Wikipedia

フロントエンドコードは、メモ帳やTextEditなどの簡単なテキスト編集アプリケーションを使用しても、最低限編集することができます。
しかし、ほとんどのフロントエンドの実務では、プログラミング言語を編集するための設計がされたコードエディタを使用します。

コードエディタは、様々な種類やサイズが存在します。
その中から1つを選択することは、好みの問題です。
1つを選択し、その内部と外部を学び、次にHTML、CSS、DOM、JavaScriptの学習に進みましょう。

しかし私は最低限、コードエディタは(デフォルトまたはプラグインによって)次のような性質を持つべきだと強く信じています。

  1. エディタの使い方に関する良いドキュメントが存在すること。
  2. HTML、CSS、およびJavaScriptのコード品質を報告(ヒント/リンティング/エラー)する機能があること。
  3. HTML、CSS、およびJavaScriptのシンタックスハイライトが提供されること。
  4. HTML、CSS、およびJavaScriptのコード補完機能が提供されること。
  5. プラグインを追加してカスタマイズ可能であること。
  6. エディタを自由にカスタマイズする為の、サードパーティ/コミュニティのプラグイン用の大きなリポジトリが存在すること。
  7. 小さくてシンプルでコードに結合されていないこと。(コードを編集する必要がないこと)

コードエディタ

アドバイス

私はVisual Studio Codeを使用することをお勧めします。
これはツールの品質が高いことと、Microsoftが提供しているツールなので、止まること無く継続的に改善されているからです。

オンラインコードエディタ

共有可能かつ実行可能なコードエディタ

これらは、限られた量のコードをすぐ実行可能な状態で共有するために使用されます。
メインで使用するコードエディタではなく、Webブラウザですぐに実行可能な少量のコードに使用できるツールです。