ホーム / Tools /

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

2020年7月30日木曜日

Front-end Developer Handbook Programming Tools

t f B! P L

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

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

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


コード編集ツール

ソースコードエディタは、プログラマがコンピュータプログラムのソースコードを編集するのに特化した設計がされたテキストエディタです。

これはスタンドアロンアプリケーションであったり、統合開発環境（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ブラウザですぐに実行可能な少量のコードに使用できるツールです。


QooQ