プログラミング

Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説

初心者向けにVisual Studio Codeについて解説しています。これはMicrosoft社が提供するコードエディタです。Visual Studio Codeの特徴とメリット、導入と設定の手順、拡張機能の一部を紹介します。エディタ検討時の参考にしてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

Visual Studio Code（VSCode）について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。Visual Studio Codeとはエディタのひとつです。機能性や拡張性や開発者コミュニティなどが優れており、使いこなせるようになると実装したい機能を手早くプログラムできるようになりましょう。

今回の記事では概要から実際のダウンロード方法まで解説していきます。

なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

今回は、プログラミングに関する内容だね！

どういう内容でしょうか？

Visual Studio Codeについて詳しく説明していくね！

お願いします！

Visual Studio Codeとは

Visual Studio Codeとは、プログラミングを行う時は「エディタ」と呼ばれるソフトウェアのひとつです。

エディタとは言わば高機能なメモ帳のようなものです。

エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われているのが「Visual Studio Code（ビジュアル・スタジオ・コード）」です。

エンジニアの間では略して「VSCode（ブイエスコード）」と呼ばれています。

Visual Studio Codeは単にエディタというだけではなく、プログラミングやシステム開発に関する様々な作業を効率的に行える機能が数多く用意されています。

プログラミングを開発するソフトウェア群を「開発環境」と呼びます。

Visual Studio Codeは数多くのプログラミング言語で使用されている主要な開発環境の1つと言えます。

[PR] プログラミングで挫折しない学習方法を動画で公開中

Visual Studio Codeの特徴

Visual Studio Codeはマイクロソフト社が開発しているエディタであり以下のような特徴があります。

オープンソース

誰でも無償で利用できます。

Visual Studio Codeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。

多くのオペレーティングシステム（OS）に対応

WindowsやMac、Linuxなど、多くのオペレーティングシステムに対応しています。

多くの言語に対応

メニューなどの表記を様々な言語に切り替えることが可能です。

英語や日本語だけでなく、中国語やフランス語、ドイツ語など多くの言語に対応しています。

拡張機能

「拡張機能」と呼ばれる仕組みで機能を追加することが出来ます。

拡張機能は数多く提供されており、プログラミングの目的に合った拡張機能を組み合わせることで最適な開発環境を構築することができます。

その他

ソースコードの入力補助（コード補完）や見た目を変えるテーマ、キーボード入力の変更など、多くの機能が提供されています。

なお、Visual Studio Codeと名前は似ていますが全く別の製品としてVisual Studioがあります。

Visual StudioはWebやWindowsアプリーケーションなどを構築する統合開発環境です。

エディタ機能に加えてシステム開発プロジェクトの管理やアプリの試験、解析などを行う機能が組み込まれています。

用途が異なりますので間違えないように注意しましょう。

Visual Studio Codeを使うメリット/デメリット

Visual Studio Codeを使うメリット/デメリットについて解説していきます。

メリットは開発効率の向上

上記のようにVisual Studio Codeは非常に自由度と拡張性が高いエディタであるため、慣れてくるととても作業効率が上がることを実感できます。

現在最も多く利用されているエディタだけあり、システム開発で使用されるバージョン管理やUI設計などのソフトウェアとの連携、クラウド環境との接続などをVisual Studio Code上で行うことが出来ます。

利用者が多いため、使用方法などについて多くの情報を得られることもメリットの1つです。

デメリットは機能を使いこなせない

逆にデメリットとして、あまりにも機能が豊富すぎるため、最初はメニュー構成や設定、拡張機能の導入などに戸惑うことも多いと思われます。

これらについてはインターネット上で多くの導入事例が提供されているため、自分の目的に合った開発環境を構築する情報を収集すると良いでしょう。

また、インターネットから切り離された環境の場合、拡張機能のインストールなどを手動で行う必要があり、やや運用が面倒に感じられるかもしれません。

ただ一度開発環境を構築してしまえば常時インターネット接続は必須ではないため、そのような環境でも十分に運用に耐えられることでしょう。

Visual Studio Codeの使い方

それでは具体的にVisual Studio Codeの使い方をご説明しましょう。

ダウンロード手順

Visual Studio Codeのダウンロードは公式サイトから行います。

「今すぐダウンロード」ボタンをクリックします。

Visual Studio Code

(画像出典：Visual Studio Code公式サイト)

オペレーティングシステムに合ったボタンをクリックします。

(画像出典：Visual Studio Code公式サイト)

Windowsの場合はインストーラーを実行します。そのまま「次へ」ボタンを押してインストールを進めると良いでしょう。

Macの場合はダウンロードファイルを解凍したファイルをアプリフォルダにドラッグ＆ドロップすればインストール完了です。

初期設定

インストールが終わったら初期設定を行いましょう。

特別な設定は必要なく、インストールするとすぐに使用することができます。

まずはメモ帳などの代わりにテキストファイルを編集してみると良いでしょう。

便利な拡張機能

Visual Studio Codeをインストールしたらぜひ追加したいのが拡張機能です。

ここでは便利な拡張機能をいくつかご紹介します。

Japanese Language Pack for Visual Studio Code

メニューなどを日本語化する拡張機能です。英語はちょっと苦手という方は導入すると良いでしょう。

(画像出典：Visual Studio Code拡張機能ページ)

Material Theme

見た目を変えるテーマの拡張機能です。

現在流行しているマテリアルデザインを取り入れたテーマやアイコンを使用することができます。

(画像出典：Visual Studio Code拡張機能ページ)

テーマのおすすめは「Material Theme High Contrast」です。適用すると以下のようになります。

Live Server

フロントエンドの開発を行う際に欠かせないのが開発環境用のWebサーバーです。

Live ServerはVisual Studio Codeで起動できる開発用Webサーバーであり、フロントエンドの開発を協力に後押ししてくれることでしょう。

(画像出典：Visual Studio Code拡張機能ページ)

Markdown All in One

Visual Studio Codeは文章の執筆環境としても優れています。

マークダウン形式の文章を執筆する時に欠かせない拡張機能がMarkdown All in Oneです。

Markdown All in Oneはマークダウン形式の文章を書く時の便利なキーボードショートカット機能を提供します。

マークダウン関連の拡張機能としてはこの他にPDFを作成する時に便利な「Markdown PDF」や数式をTex記法で記述できる「Markdown Math」など、多くの拡張機能が提供されているので探してみると良いでしょう。

(画像出典：Visual Studio Code拡張機能ページ)

Visual Studio Codeの料金

Visual Studio Codeは前述のとおりオープンソースソフトウェアであり、誰でも無償で利用することができます。

拡張機能もほとんどが無償で提供されています。なぜ、このような高機能な開発環境が無償で提供されているのでしょうか。

これは現在のプログラミングを取り巻く環境とも関係があります。

システム開発やプログラミング、それらを動作させるクラウド環境やサーバーなどを含めた全体を「エコシステム」と呼びます。

現在のソフトウェア関連産業はサービス提供型のビジネスモデルにシフトしつつあります。

代表的な例としてはAWSを始めとするクラウド環境でしょう。

クラウド環境は従来のオンプレミス型と比較して、自分でサーバー機器を購入して環境を立ち上げる初期コストと時間を節約できるメリットから急速に利用が伸びてきています。

これらサービス提供型のモデルをビジネスとして成功させるには「自社のサービスのエコシステムに利用者を呼び込む」必要があります。

Microsoft社はGitHubの買収やVisual Studio Codeのような高機能の開発環境を無償提供することで自社のエコシステムを支持する開発者を増やし、企業のエンタープライズ用途としてAzureなどのクラウドサービスを利用してもらうビジネスモデルを考えているのではないかと思われます。

ただしこれは悲観することではなく、開発者にとってはむしろ歓迎すべきことです。

エコシステムを上手に活用し、開発者としてのスキルを伸ばしていくことで多くのメリットが得られることでしょう。

Visual Studio Codeの評判

Visual Studio Codeは世界中で利用されているエディタです。

開発者の評判を図る指標の1つがGitHubのスターの数です。

現時点でのVisual Studio Codeのスターの数は約9万8千と、かなりの数を集めていることが分かります。

このようなことからもとても評判の良いエディタと言うことができるでしょう。

GitHub – microsoft / vscode

(画像出典：GitHub – microsoft/vscodeリポジトリ)

Visual Studio Codeを使うべき人

Visual Studio Codeは初心者から上級者まで、幅広く利用することが出来ます。もちろんエディタの選定は自由ですのでVimやAtom、Sublime Textなど好きなエディタを選択してかまいません。

ほとんどのエディタは無償で利用できるため、まずは利用してみて拡張性や相性の良さで選択すると良いでしょう。

まとめ

今回の記事ではVisual Studio Codeのインストールや使い方について説明しました。

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でも12週間で東京のIT企業へエンジニアとして転職を目指せるオンラインブートキャンプを開催しています。

現役エンジニアとキャリアカウンセラーが学習から転職までサポートいたします。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

独学はもう限界？6つのパターンから考えるプログラミングのベストな学び方とは

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、ソフトウェアデベロッパーのNatasha Post...

プログラミング

新潟のIT・情報系専門学校10選｜表での比較付き

新潟県でIT知識・スキルの向上のため情報専門学校を探している人のために、新潟県内の情報専門学校の情報をまとめました。下記の情報を参考にして、自分の進路の...

プログラミング

プログラマーがチームで働く上で大事なことは何？【メンターが回答】

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました大石ゆかり田島メンター！実際にプログラ...

プログラミング

働く上での必須知識！エンジニアになるための11ステップ

本記事は、EdTech.jp（エドテックドットジェーピー）から転載した記事になります。元記事はこちら広く信じられている神話にもかかわ...

プログラミング

大阪のIT・情報系専門学校18選｜自分に合った学校の選び方も解説

今回は大阪中心部のIT・情報系の専門学校をまとめました。資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。 ...

プログラミング

【手元でプログラミング学習！】Pocket Programming(ポケプロ)で「Ruby/Rails編」をや

Pocket Programming(ポケプロ)というプログラミングが学習できるスマホアプリをご存知でしょうか。有料アプリではありますが、iOS/Android...

プログラミング

あわせてよく読まれている記事

初心者向け！Visual Studio(Express)の使い方を現役エンジニアが解説

ソフトウェアを開発する際に使用すると大変便利な統合開発環境ですが、今回はその一つであるMicrosoft Visual Studio（ビジュアルスタジオ）の使い方を紹介します。 Visual Studioは通常10万円以上する比較的高価なソフトですが、無料版のCommunityも存在していますので、まずはそちらを体験してみるのがいいでしょう。インストール方法も説明するので、初心者でこれから入門したい方はこれを参考に使ってみてください。なお、今回の説明にはVisual Studio Community 2019 (Windows版)を使用していますが、基本的に今回の内容であればどのVisual Studioでも大した違いはありません。また、日本語にも対応しています。なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、プログラミングに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio(Express)の使い方について詳しく説明していくね！大石ゆかりお願いします！目次 Visual Studioとは Visual Studioを使うメリット Visual Studioのインストール Visual Studioでプロジェクトを作成する Visual Studioと一緒に使うと便利なツール Visual Studioとは Visual Studioは様々なプラットフォームのアプリケーションを開発できる総合開発環境です。 Visual Studioを使うと以下のようなアプリケーションを開発できます。 Webアプリケーション Webサーバー側で動作するバックエンドアプリケーションとフロントエンドの開発を両方行うことが可能です。ASP.NETと呼ばれるフレームワークを使用します。クラウドサービス Microsoftのクラウド環境であるAzure上で動作するサービスを開発できます。 Python、Node.jsのサポート Pythonは現在広く利用されているプログラミング言語です。またNode.jsはJavaScriptでサーバーサイドアプリケーションを構築するフレームワークです。これらもVisual Studioではサポートしています。 Windowsアプリケーション WindowsOSで動作するデスクトップアプリケーションを開発できます。スマートフォンのアプリ AndroidとiOS両方のアプリを開発できます。ゲームの開発：Unityという、広く利用されているゲーム開発プラットフォームをサポートしています。マルチプラットフォームサポート Xamarinという技術を使用して、WindowsやAndroid、iOSなど、複数のプラットフォームで動作するアプリケーションを開発できます。このように、とても幅広い開発を行えるのがVisual Studioの特徴です。またVisual Studioは以下のプログラミング言語をサポートしています。 C# バックエンドやWindowsアプリケーションの開発で使用されます。Unityを使用した開発でも用いられます。 C++ Windowsアプリケーションの開発で用いられます。Windows自体もC++で開発されており、Windowsの機能をフルに利用した高速なアプリケーションが開発できます。 HTML、CSS、JavaScript フロントエンドの開発で用いられているプログラミング言語です。その他 VB、F#、SQLなどをサポートしています。 [PR] プログラミングで挫折しない学習方法を動画で公開中Visual Studioを使うメリット Visual Studioは上記のように幅広いプラットフォームに対応しています。むしろ膨大すぎて最初は戸惑ってしまうことでしょう。 Visual Studioを使用すると以下のようなメリットがあります。強力な開発支援機能 Visual Studioは統合開発環境（IDE）と呼ばれる開発に必要なものが一式揃っているプログラミングツールです。アプリケーションのひな形作成、ソースコードを書く時にヒントなどを提示する支援機能、ソースコードのバージョン管理機能など、様々な開発支援機能が備わっています。充実したデバッグツールアプリケーションの開発で大変なのがデバッグです。 Visual Studioでは一般的なステップ実行やブレークポイントなどのデバッグ手法に加え、メモリ使用状況の解析や、遠隔の環境で動作しているアプリケーションのデバッグなど、現代の複雑な実行環境に対応したデバッグを行うツールが多く用意されています。 Windowsネイティブアプリケーションの開発が可能 Windows環境に特化したネイティブアプリケーションを開発するならVisual Studio一択です。 C++やC#を使用した高速なアプリケーションを開発できます。パソコンOSにおけるWindowsのシェアは依然として非常に高く、これからも各種ツールやドライバーなど、Windowsアプリケーションの開発にVisual Studioは用いられることでしょう。 Visual Studioのインストールまずはインストールを行います。 Visual Studio Communityのページにアクセスしましょう。「Visual Studio のダウンロード」と書かれているところをクリックします。するとダイアログ等が出現すると思いますので、そのままダウンロードを行います。ダウンロードしたセットアップファイルを起動すると以下のような画面になります。この中から必要なものにチェックを付けてInstallボタンをクリックするとインストールが行われます。 Webアプリケーションを開発するのであれば「ASP.NET and web development」、Windowsアプリケーションを開発するのであれば「.NET desktop development」にチェックをつけるといいでしょう。 ※Visual Studio Community 2019は、対応するOSがWindows10バージョン1703以上以上となっているので、ご注意ください。 Visual Studio 2019のシステム要件 Visual Studioでプロジェクトを作成する実際にVisual Studioを使ってプロジェクトを作成していきましょう。 Visual Studioを起動すると、サインインが求められます。サインインがなくても無料で使えますが、そのままでは30日で使用できなくなってしまいます。 Microsoftアカウントでサインインしておけばずっと無料で使えますので、素直にサインインしておきましょう。「サインイン」をクリックします。アカウント選択画面が表示されます。アカウントを選択します。「別のアカウントを使用する」をクリックすることで、別のアカウントでサインインすることも可能です。なお、Microsoftアカウントを持っていない場合は、別途作成しておきましょう。次に環境を設定する画面が表示されます。開発設定は「全般」、配色テーマは好きなものを選択すると良いでしょう。エンジニアの間ではダークモードが流行しているため、今回は濃色を選択しました。「Visual Studioの開始」をクリックします。以下のようにスタートページが表示されます。では、早速プロジェクトを作成してみましょう。「新しいプロジェクト」をクリックします。今回はWebアプリケーションを作成します。プロジェクトテンプレートから「ASP.NET Web アプリケーション(.NET Framework)」を選択し、「次へ」をクリックします。プロジェクト名などを設定する画面が表示されます。名前などは任意のものに変更できますが、今回は既定値まま「作成」ボタンをクリックします。どのようなWebアプリケーションを作成するか選択する画面が表示されます。実際の開発現場で多く使われているのはMVCやWebAPI、シングルページアプリケーションです。今回は「MVC」を選択して「作成」ボタンをクリックします。これで無事プロジェクトが作成されました。この状態で基本となるWebアプリケーションのテンプレートが作成されています。早速実行してみましょう。画面上部の「IIS Express(Google Chrome)」と書いてある部分をクリックします。このような画面が表示されれば成功です。みなさんも無償のVisual Studio Communityを使ってアプリケーションを開発してみてくださいね。 Visual Studioと一緒に使うと便利なツール最後にVisual

プログラミング

プログラミングに使える！フリーのテキストエディタ15選

プログラミングをこれから勉強する場合、「どのエディタを使ったらいいの？」という疑問を持つかもしれません。そこで、初心者にもおすすめのテキストエディタをピックアップしてみました。また、テキストエディタ以外に統合開発環境も一緒に紹介します。 Windows、Macそれぞれに使えるエディタで、できるだけ日本語に対応したものを選んでいます。紹介するテキストエディタを比較して自分に合ったものを探してみてください。そもそもテキストエディタとは何なのかよく分からないという人でも知っておいて損は無いでしょう。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。目次テキストエディタとは TeraPad(テラパッド) サクラエディタ Atom Notepad++（ノートパッドプラスプラス） CotEditor mi Sublime Text Brackets 秀丸エディタ Liveweave mou Visual Studio Xcode Eclipse vi(vim) / Emacs Visual S Visual Studio Code テキストエディタとはテキストエディタとは、パソコン上でメモやプログラムを書くことのできるソフトです。基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションがデフォルトで入っているかと思います。もちろんそのアプリケーションを使ってプログラミングをしたり、執筆作業をすることもできますが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができるのです。外部ツールを取り入れることができたり、画面を分割して複数のファイルを同時に確認することができるなど様々な機能が備わっています。フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。今回紹介するテキストエディタは、利用する人も多く人気のソフトが多いので、まだ使ったことがない人はぜひ選ぶ上での検討材料にしてもらえればと思います。 [PR] プログラミングで挫折しない学習方法を動画で公開中1. TeraPad（テラパッド） Windows用のテキストエディタです。国産のエディタですのでインタフェースが日本語です。シンプルさを特徴としており複雑な設定が必要ありません。ソースコードの色分け機能などが付いており初心者でも安心して使えます。英語のエディタでは分かりにくく、すべて日本語であってほしいという人にはおすすめです。機能面はそこまで充実してるとは言えませんが、使い勝手は良いでしょう。 TeraPadの使い方 2. サクラエディタ Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。こちらも国産エディタなのでインタフェースは全て日本語です。複数のファイルから同時に検索できるGrep機能や、キーボードマクロの登録などが可能で、豊富なカスタマイズ機能を持っています。サクラエディタの使い方 3. Atom 2014年にGitHubが公開したテキストエディタになります。とにかく便利なプラグインが多く、他のエディタを使っていたエンジニアもAtomに乗り換えた事例をよく耳にします。エディタのインターフェースが非常に見やすく、機能追加も無料でできるので初心者の方でもすぐ使い慣れるでしょう。Windows、Mac OS X、Linuxで利用できるので、誰でも手軽に使えます。特にテキストエディタを使ったことがないという人は、Atomを使うところから始めて見ても良いかもしれませんね。 Atomの使い方 4. Notepad++（ノートパッドプラスプラス）「メモ帳」に替わるエディタを目指して開発されたWindows用のエディタです。開発元は海外ですが、様々な言語に対応しており、日本語でも使うことができます。動作が軽快で、他のエディタよりもデフォルトで多くのプログラミング言語の色付けをサポートしています。 Notepad++の使い方 5. CotEditor（コットエディター） Mac用のテキストエディタです。国産のためインタフェースがすべて日本語で使えます。とてもシンプルで初心者でも使いやすく、様々なプログラミング言語の色付けも行ってくれます。Mac のテキストエディタの中でも人気がある定番エディタとなっています。軽量のアプリなので、PC自体の容量も特に気にせず利用できると思います。 CotEditorの使い方 6. mi（ミ） Mac用のテキストエディタです。国産のためインタフェースが日本語です。自動的に関数の一覧表や、ファイルの一覧表などを作成してくれるプログラマに嬉しい機能が付いています。また、エディタの背景画像を設定できるので見た目にこだわりたい方にもおすすめです。UTF-8といった文字コードも画面の上から簡単に変えることができます。 miの使い方 7. Sublime Text（サブライムテキスト） Windows、Mac、Linux対応のテキストエディタです。インタフェースは英語ですが、日本語の入力は可能です。使い勝手やデザインが良く、最近特に注目されています。シンタックスカラーリングや、ソースコード全体のマップ表示など便利な機能も揃っています。有料ソフトなのですが、現在はバージョン3の評価版が無料で無制限に使えます。気に入ったらそのまま購入することも可能です。エディタはタブの表示で使うこともできます。プラグイン機能も充実しており、使えば使うほど自分用にカスタマイズすることができます。 Sublime Textの使い方【初心者向け】 8. Brackets Bracketsは、Adobeが提供しているエディタで、クイックエディット機能など拡張性に優れており素早くコーディングすることができます。クイックエディット機能の例を紹介すると、HTMLファイル上である要素のCSSを編集したいと思ったらCSSファイルに移らずにその場で編集することができます。HTMLファイル上にCSSを書いていくのではなく、CSSファイルをポップオーバーとして表示され、選択した要素のスタイルのみ編集することができるのです。また、HTML/CSSだけでなくJavaScriptのコードヒントも質が高いので、まだプログラミングを始めたばかりでも詰まらずにコーディングすることができるでしょう。 Brackets 9. 秀丸エディタ Windows用の有料エディタになります。より作業を効率化させる機能が多く搭載されており、例えばマクロ機能やコードの折りたたみ機能など複雑なソースコードでもシンプルに見せることができるでしょう。タグの色分けも細かく行えるので、複数人で開発しても読みやすいコードを書くことができるかと思います。学生は無料で利用できるので、Windowsユーザーは試してみても良いかもしれませんね。秀丸エディタ 10. Liveweave Liveweaveは、HTML5、CSS3、JavaScriptをリアルタイムで確認できるテキストエディタです。自分で編集しながらその場で確認でき、かつ軽量なので、スペックの低いPCでも手軽に利用できるのが特徴です。 HTML/CSS、JavaScriptのみの対応ですが、静的ページを作成する際には便利でしょう。初心者の方は自分の勉強にも役立ててみてください。簡単なソースコードの確認などに向いています。 Liveweave 11. mou マークダウンで書くことができるMac専用のエディタです。記述用とプレビュー用の2画面をリアルタイムで確認することができるので、非常に便利でしょう。 Macユーザーしか利用できないアプリですが、マークダウンで書くことに慣れている人にはおすすめのエディタになるはずです。 mou 12. Visual Studio（ビジュアルスタジオ） Microsoft が提供するWindows用の統合開発環境です。テキストエディタも内部に含んでおり、Windows用のアプリケーションを開発するときや、Xbox 360 用のゲーム、Windows Phone 用のアプリケーションを開発するときなどに使います。多言語に対応しており日本語でも使うことができます。 WindowsやXbox360用のプログラムを開発したい方はこのソフトに慣れておくと良いでしょう。いくつかのエディションがあり、Expressエディションが無料になっています。また、Microsoftはオープンソースの無料IDEである、Visual Studio Codeを公開しています。 Visual StudioとVisual Studio Codeの差は、利用者数全体の割合からすると徐々に縮まってきています。そうはいっても、Visual Studioの方が、ソースコードの管理、バグトラッカー、デプロイメントツール等全部入りとも言える機能を保有しています。そういう意味でも、.Net開発者にとっては、単なるIDEというわけではなく、これ以上無い有益なソリューションと言えます。 Visual Studioの使い方 13. Xcode（エックスコード） Appleが提供するMac用の統合開発環境です。iPhone や iPad、Mac用のアプリ開発に必要な機能がそろっているため、 iPhone アプリを開発したい方は、使い方を覚えて損はないでしょう。もちろん、その他のアプリケーションを開発するためにも使えます。ただし、インタフェースは英語です。 iPhoneアプリ上に地図を表示したい、ボタンを表示したいといった際もソースコードを書く必要はなく、それ用のキットが多く揃っているので、簡単に設置することができます。エラー箇所も指示してくれるので、初心者でもスムーズに開発を進められるはずです。 Xcodeのインストール方法 14. Eclipse（エクリプス） IBMによって開発された、様々な用途に使用できるオープンソースの統合開発環境です。Windows、Mac、Linuxなど多くのOSに対応しています。 Androidアプリを開発するときには、Google が提供するADT Bundleという開発セットの中に入っているEclipseを使うこともあります。Androidアプリを開発したい方はEclipseの操作に慣れておくと良いでしょう。インタフェースは英語ですが日本語化も可能です。大規模なアプリケーションの開発にも向いているので、ファイル構造が複雑になっても操作しやすいでしょう。 Eclipseのインストール方法 15. vi(vim) / Emacs つぎに、viとEmacsを紹介します。こちらは主に CUI 環境で使われるエディタです。Linuxユーザやサーバエンジニアによって広く利用されています。 GUI のエディタに慣れたユーザにとってはキー操作が異なり取っ付きづらい部分もありますが、サーバの設定をしたりLinuxの操作をしたい方は慣れておくと良いでしょう。もちろんプログラミングにも使用できます。 GNU Emacs ※ viは多くのLinuxディストリビューションで最初から使用できます 16.

プログラミング

PythonのIDE（統合開発環境）でオススメなものは？現役エンジニアが解説【初心者向け】

PythonのIDE（統合開発環境）でおすすめなものについて解説します。目次 IDEとは PythonでのIDEにはどんなものがある？ Pythonでの開発の際にIDEを選ぶポイント IDEとは IDEとは、Integrated Development Environmentの略で、日本語では統合開発環境です。ソフトウェア開発では、コーディング、コンパイル、リンク、テスト、バージョン管理といった複数の作業を繰り返し行います。 IDEを使うことで、一つのソフトウェアでこれらの操作を行うことができ、ソフトウェア開発の効率や品質が向上します。最近では拡張機能(プラグイン)を用いて、後から対応言語や機能を増やせるものが一般的です。 [PR] プログラミングで挫折しない学習方法を動画で公開中PythonでのIDEにはどんなものがある？ PyCharm PyCharmはJetBrainsの販売している、有償のPython向けIDEです。 PyCharmはコーディングをインテリジェントに補佐することをうたっています。例えば、コード補完、検査、リアルタイムでのエラー指摘や修正、自動リファクタリングといった機能を持ちます。 PyCharmに関しては、次の記事も参考にしてみてくださいね。 PyCharmでAnacondaと連携してPython開発する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン Visual Studio Code Visual Studio Codeは、マイクロソフトが無料で公開しているエディタです。エディタですが、無料で利用できる拡張機能が非常に多いため、無料とは思えないほど使いやすいです。 Visual Studio Code（ビジュアル・スタジオ・コード）は、略してVSCode（ブイエスコード）と呼ばれています。 Azure や GitHub と統合された機能と拡張機能を使用して、すべてを 1か所で開発、デバッグ、デプロイできます。 Visual Studio Codeについては、こちらの記事も参考にしてみてください。 Visual Studio Codeとは？インストールや使い方も現役エンジニアが解説 | TechAcademyマガジン Visual Studio CodeでPythonを実行する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン PyScripter PyScripterはフリー、オープンソースのPython向けIDEです。有償のIDEに匹敵する機能の提供を目指しています。機能が豊富かつ無償のため、最初に試すPython向けIDEとして良い選択肢です。利用方法 ①PyScripterにアクセスし、緑色のDownloadをクリック。 ②PyScripter-3.6.4-x64-Setup.exe　のようなファイルがダウンロードされるので、ダブルクリックする。 ③インストール準備が開始されるので、基本的には標準設定の状態でOKや次へをクリックする。次へをクリックする。デスクトップにアイコンを作成する場合は、デスクトップ上にアイコンを追加するにチェックを入れて、次へをクリックする。 ④インストール準備が完了したら、インストールをクリックしてインストールを完了させる。 ⑤デスクトップ上にこのようなアイコンが生成されるのでダブルクリックしてPyScripterを起動してください。 Atom AtomはIDEというよりはエディタで、パッケージによる機能拡張を特徴にしています。パッケージにより、Pythonに限らず多数の言語に対応しています。複数のプログラミング言語を使い分ける場合、エディタをAtomで統一するのはーつの有効な手段です。以下でPythonのコーディングに便利なパッケージを紹介します。 atom-runner Atom内でスクリプトを実行できます。Pythonの他、JavaScriptやRubyにも対応しています。 autocomplete-python Pythonスクリプトのコーディングで自動補完を行います。変数、クラス、パッケージ名などのタイピングが楽になります。 atom-beautify プログラミング言語の構文にもとづき、コードを自動整形します。カッコの対応やインデントの間違いを見つけやすくなります。 Atomに関しては、次の記事も参考にしてみてくださいね。 AtomでPythonの開発環境を作る方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン Microsoft Visual Studio Microsoft Visual StudioはMicrosoft社の提供するIDEです。有償のProfessional, Enterprise版と、無償のCommunity版があります。 Pythonだけでなく、C++, C#, Visual Basicでのコーディングなどにも対応しています。 Visual Studioは巨大な製品群です。 VSCodeの場合、必要に応じて自分の好きな拡張機能を追加しながら利用していくことができます。しかし、それは大企業で利用する場合は管理上難しいことがあります。つまり、大企業で利用する場合セキュリティの安全性を保ったり、作業を管理するために開発環境をすべて統一することがあります。その場合、VSCodeではなく、VisualStudioを利用することで、有償サポートを利用したりもでき、結果的に大企業内での管理コストや開発コストを削減することにつながります。 VisualStudioの有償プラン Pythonでの開発の際にIDEを選ぶポイント会社(業務)で開発する際には、会社、部署、所属のプロジェクトなどで、IDEが規定されている場合があります。規定されていない場合も、周囲に特定のIDEユーザが多いようであれば、そのIDEを選択しておくのが無難です。 IDEごとにソースコード整形の規則が異なるため、別のIDEを使うと可読性を損なうケースがあります。また、IDEの利用方法で困った際に、周囲のサポートを受けやすいという面もあります。一方、個人で開発する際には、捻出できる費用も限られがちなので、まずは無償のIDEをいくつか試してみるのがおすすめです。開発するプログラムの性質や、個人の趣向により、IDEの向き不向きがあります。そのIDEをしばらく使ってみて、合うならば継続すればよいでしょう。合わなかったり機能の不足を感じたりするならば、別の無償IDEを試すか、有償IDEの購入を検討してみてはどうでしょうか。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ Pythonを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのPythonコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、人工知能（AI）や機械学習の基礎を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

Python

フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介

今回はエディタの解説をします。 HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。この問題を解決するために、HTMLエディタを利用することで、例えば要素、属性、値などで自動的に別の色で区別して表示してくれる機能があります。今回は、そのような機能を持つHTMLエディタを紹介していきます。ぜひ自分に合ったものを比較検討してみてください。目次エディタの選び方【前提条件】エディタの選び方【絞り込み】テキストエディタの紹介秀丸 GVIM Visual Studio Code TeraPad Atom Sublime Text 3 StyleNote5 Aptana Studio Crescent Eve Notepad++ まとめ（比較用の表）田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLを書けるおすすめのエディタ10選について詳しく説明していくね！大石ゆかりお願いします！エディタの選び方【前提条件】無料か有料か Windows/Mac/Linuxのどれか GUI/CUIかで最適なエディタが決まります。詳しく解説していきます。無料か有料かで選ぶエディタによっては無料・有料それぞれあります。無料だから使い悪いというわけではないです。無料であっても、寄付を募っていたり、法人で利用する場合のみ有料になるものなど様々です。作者ページ経由で別の仕事や別の製品を販売するためにあえて無料で提供しているものもあります。もちろん、有料のものは最初から必要な設定や機能が揃っているという理由で、有料だからこそのメリットを享受できます。手間と時間を節約したい場合は有料のエディタを利用することも選択肢に入れてみると良いです。 Windows/Mac/Linuxの対応OSで選ぶ現在利用しているPCのOSによって、Windows/Mac/Linuxどれかに分かれていると思います。この記事自体が初心者向けのため、基本的にはWindowsかMacのどちらかを利用されていると思います。エディタによってはWindowsかMacどちらかにしか対応していないものもあります。もし、利用したいエディタが利用中のOSに対応していたら、ぜひ使ってみてください。 GUI/CUIかで選ぶ GUI(Graphical User Interface)というのは、WindowsやMacを操作する時に、マウスでアイコンをダブルクリックしてアプリケーションを起動するような操作方法を意味します。 CUIとは、マウスを利用せずキーボードを利用して、コマンドでアプリケーションを起動するような操作方法を意味します。 CUIがなんの略語かに関しては、次のようにいくつかの種類があります。キャラクター・ユーザー・インターフェイス (character user interface) キャラクターベース・ユーザー・インターフェイス (character-based user interface) コンソール・ユーザー・インターフェイス (console user interface) コマンドライン・インターフェイス (command line interface) GUIのほうが初心者向きなので、GUIで利用できるエディタを選ぶと良いですよ。今回は、初心者でもわかりやすいGUIで利用するエディタを紹介します。 [PR] プログラミングで挫折しない学習方法を動画で公開中エディタの選び方【絞り込み】自分の用途に合っているか動作環境やOSは問題ないか日本語に対応しているか動作スピードは問題ないか他の言語にも使用できるか（HTMLオンリー）で使用エディタを絞り込みます。詳しく解説していきます。日本語への対応エディタによっては日本語に対応していないものもあります。英語が得意な人は良いですが、そうでない人は日本語に対応しているエディタを利用すると良いです。今回は初心者でもわかりやすい、日本語化が可能なエディタのみを紹介しています。動作スピードどんなに機能豊富なエディタであっても、動作スピードが遅い場合は使いづらいです。そのため、動作スピードが遅くないものを選ぶと良いです。今回紹介しているエディタは、どれも動作スピードが早いものばかりです。対応言語基本的にエディタはHTMLの編集をすることが可能です。そして、HTML以外の言語も編集可能なものも多いです。 HTML以外の言語も利用したい場合は、HTML以外の言語にも対応しているか調べると良いです。テキストエディタの紹介秀丸 HTMLエディタ以上の機能をもつ高速なエディタです。有料ソフトですが、試用可能です。ライブラリを追加することで、JavaScript、PHP、Ruby、Pythonなど非常に多くの言語で利用可能です。秀丸 GVIM GVIMはVIMというCUIで利用するテキストエディタをGUIで利用可能にしたものです。プラグインを利用することでHTML以外にもJavaScript、PHP、Ruby、Pythonなど、ほとんどの言語に対応しています。動作も非常に高速で、独自のキーバインドでキーボードだけで操作を完了できます。もちろん無料です。 GVIM Visual Studio Code マイクロソフトが公開している無料のエディタです。 Windows/Mac/Linuxで利用可能です。シンプルなエディタよりも高速だといわれることもありながら、JavaScript、PHP、Ruby、Pythonだけでなく、プラグインを利用してほとんどの言語に対応しています。 Visual Studio Codeez-HTML TeraPad 非常にシンプルな使いやすいテキストエディタです。余計な機能が付いていないので、機能が多すぎて使いにくいという事がなくなります。そのため、HTMLの勉強に集中したい初学者の方におすすめのエディタです。 Perl・PHP・CSS・Ruby・C++・Javaなどの言語でも利用できます。 TeraPad Atom かの有名なGithubが作成したテキストエディタです。 HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語に対応しており、これから先勉強の幅を広げていきたい方におすすめです。また、パッケージをインストールする事でどんどん自分好みにカスタマイズする事もできます。 Atom Sublime Text 3 Webデザイン界隈で非常によく使用されているエディタです。カスタマイズ性、機能性を兼ね備えており、誰にでもとっつきやすくなっています。 HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。また、多数の人が使用しているので、エディタの事で困った事があったら、ネットに情報が多く載っているので解決に戸惑いにくいのも良いポイントです。 Sublime Textの使い方 StyleNote5 StyleNote5はその名の通りとてもスタイリッシュなエディタです。カスタマイズ性はありませんが、初期の段階でHTMLコーディングに困らない機能が十分備わっています。 StyleNote5 Aptana Studio メジャーとは言えませんが愛用者の多いAptanaStudioです。 HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。エディタの内容的には少し中級者向けのところはありますがその分慣れればとても使用しやすいエディタです。 Aptana Studio Crescent Eve HTMLのみに対応していますが、とてもシンプルで使いやすいエディタです。タグの自動補完機能や、文法チェック機能など、シンプルな機能のみを使いやすく実装してあるため、非常に使用しやすいです。 Crescent Eve Notepad++ すっきりとしたインターフェイスで、動作が軽いエディタです。手書きでどんどんHTMLを書いていきたい方におすすめです。 HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。 Notepad++ まとめ（比較用の表）エディタ名 OS HTML以外の対応言語無料秀丸 Windows 拡張機能利用でほとんどの言語に対応有料(試用可) GVIM Windows 拡張機能利用でほとんどの言語に対応無料 VSCode Win/Mac/Linux 拡張機能利用でほとんどの言語に対応無料 TeraPad Windows Perl・PHP・CSS・Ruby・C++・Java 無料 Atom Win/Mac/Linux 拡張機能利用でほとんどの言語に対応無料 Sublime Text Win/Mac/Linux 拡張機能利用でほとんどの言語に対応無料 StyleNote5 Windows HTMLのみ無料 Aptana Studio Win/Mac 拡張機能利用でほとんどの言語に対応無料 Crescent Eve Windows HTMLのみ無料 Notepad++ Windows 拡張機能利用でほとんどの言語に対応無料以上、HTMLで使えるエディタをまとめて紹介しました。エディタによって使える機能も変わるので、自分に合ったものを選びましょう。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

Visual Studio CodeでPythonを実行する方法を現役エンジニアが解説【初心者向け】

Visual Studio CodeでPythonを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio CodeでPythonを実行する方法について詳しく説明していくね！大石ゆかりお願いします！ Pythonやその他の言語をプログラムしていく上で必須のツールとなるのが、テキストエディタです。今回は数あるエディタの中でも世界で最もよく使われてるエディタであるVisual Studio Codeについて紹介していきます。目次 Visual Studio Codeとは Extensionのインストール Pythonのパス設定の確認 Pythonプログラムを実行してみようまとめ Visual Studio Codeとは Visual Studio Code (以下「VS Code」と呼ぶ）はMicrosoft社が開発したソースコードエディタです。VS CodeはWindows, Linux, macOSにて使用することが可能です。Githubとの連携、コード補完機能、プログラムコードのチェックおよび自動補正機能等の拡張機能（エクステンション）をインストールできます。また、VS Codeは無料でインストール可能で、動作が軽いことでも知られています。そのため、Stack OverflowのDeveloper Survey Result2019では世界で一番人気のあるテキストエディタになっています。 VS Codeのインストールはvisualstudio公式サイトから行うことができます。 [PR] プログラミングで挫折しない学習方法を動画で公開中Extensionのインストール Extensionのインストールも非常に簡単に行うことができます。まずはExtensionのアイコンをクリックしてみましょう。一番左側にあるアイコンの並んでいるバーからExtensionアイコンを選択します。こちらがExtensionのアイコンになります。あとはお好きなツールをインストールするだけです。非常に簡単なのが分かると思います。せっかくなので、PythonのExtensionをインストールしてみましょう。まずは「Python」と検索してみてください。検索結果が表示されましたら、PythonのExtensionを選択してインストールしてみてください。たったこれだけでExtensionのインストールが完了しました。是非様々なExtensionをインストールしてみてください。 Pythonのパス設定の確認 Pythonのパスを設定するためにはSettingから変更可能です。「python.pythonpath」と検索してみてください。こちらからPythonのPathを設定可能です。macの場合ですとデフォルトはPython2になります。そこで最新のPythonをインストールしてそちらにPathを変更してみましょう。「/usr/bin/python3」(Macの場合）と入力またはコピペしてみてください。これでpythonのPathの設定が完了しました。 Pythonプログラムを実行してみよう早速Pythonのプログラムを実行してみましょう。まずは実行したいファイルのあるフォルダーを開きます。ターミナルを通常起動すると、ディレクトリの移動をしなくてはなりませんが、VS Codeでは選択したフォルダーでターミナルが起動するようになっています。次にターミナルから「新しいターミナル」を開きます。ターミナルウインドウが出てきましたら、実行したいファイルを指定します。この時どのディレクトリにいるかを注意してください。新しくフォルダを作成した場合にはそのフォルダへの移動もしくはパスの指定が必要となります。実行するときは普段ターミナルから実行する場合と変わりません。今回はtest.pyを実行してみましょう。試しにtest.pyには以下のコードを入力しておきます。 print('Hello World') それでは実行してみましょう。ターミナルに以下のように入力してみてください。 python3 test.py スクリプトは実行されましたでしょうか？ Hello World と出力されていればOKです。まとめ今回はVS CodeでPythonを実行する方法をみていきました。 VS Codeは非常にパワフルなツールとなっています。是非とも使いこなせるようになって、開発の効率化を計りましょう！！監修してくれたメンターメンターkatoさん学生時代に数値解析のためにプログラミングを始める。現在は企業にて専門職として働くかたわら、プログラムを書き業務効率化を図っている。現在のメイン言語はPython, JavaScript。また、企業内の希望者にPythonのメンターとして基礎から教えている。テックアカデミーではJavaScriptを教える。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

Python

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキストエディタはこれだ！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、10年以上リードエンジニアとして活躍するMatt Goldspink氏によって投稿されました。プログラム記述用テキストエディタが溢れる今日この頃ですが、そこから一つを選ぶとなるとそれは難しい問題でしょう。「開発者にとって最適なテキストエディタは何ですか？」という質問への回答はすぐには見つかりませんが、ここでは Atom, Sublime, Visual Studio Code, Vim という4つの人気のエディタについて比較してみます。ここでの比較が、読者のニーズに合ったエディタを選択をする一助になれば良いなと思います。お断り：ここでのいくつかの比較は主観的であり、ほとんどが私の個人的な好みに基づいています。私はMac用のSublimeを使用してWeb（HTML、CSS、JavaScriptなど）の記述を行なっています。そのため、評価の視点は使い慣れているものに多少傾いてはいますが、できる限り客観的に評価を行いました。目次 Atom Sublime Text Visual Studio Code Vim Atom Url: https://atom.io/ 費用：フリー(MIT Licence) 開発者：GitHub プラットフォーム：OSX, Windows, Linux Atomは21世紀に向けて改良可能なテキストエディタと言われています。 Atomは比較的新しいテキストエディタで、2014年に最初にリリースされて以来、多くの人気を集めています。では、メインの機能から見てみましょう。パッケージ編集機能を追加できることはたいへん重要ですが、このエリアはAtomが得意としています。標準でインストールされるパッケージマネージャがこの機能を果たし、全てのパッケージはGithubで管理されています。現在では、6,452個という多数のパッケージとテーマが利用できます。Atomにとってパッケージは基本的なものであり、プリインストールされたツリービューと設定ビューの機能でさえも単に最初から組み込まれたパッケージなのです。編集とワークフロー Atomでは全ての機能がスムーズに操作できます。では、最大の弱点はなんでしょうか。考えた末に出てきたのは、使い始めた際にどの追加パッケージをインストールすべきかを見つけるのに苦労する点です。例えば、私はファイルの一部分を視覚的にスキップできるミニマップを愛用しているが、この機能をセットアップするためには「オートコンプリート+」を使用して、自動補間機能を設定する必要がありました。私はよく複数のファイルを同時に開いて作業するので多くの場合、分割ペインの編集を設定する機能は必須ですが、これはAtomがうまくサポートしてくれている機能のひとつです。 Sublimeには無いAtomのもう1つの優れた機能は、ツリービューでのファイル/フォルダのドラッグ&ドロップのサポートです。私は周りのものをシフトできる機能がSublimeに無いことを知ってはいましたが、この機能はとても役に立つのです。最後に、gitとの統合は素晴らしいのではありますが、結局は GitHub側で構築された結果なのです。カスタマイズエディタを自分の開発フロー、およびスタイルに合うようにカスタマイズする機能は必須です。私は「保存する時に空白を取り除く」,「編集していないファイルを保存する」という設定をいつも使っていますが、これらを有効にしたり、無効にしたりすることは簡単に行うことができます。 Atomには優れたドキュメントが用意されており、そこにはスタイルを再設定する方法も書かれています。私は構成設定に優れたAtomを好んで使っています。ファイルの種類ごとに設定の上書きができる機能は素晴らしい。例えばJS, CSS, HTML に別々の設定をすることはAtomでは容易なのです。パフォーマンス Atomを選ぶ際に問題になるとすれば、それは処理速度です。ファイルを開いたり、タブを切り替える毎に生じるタイムラグは苦痛です。（本格的な開発の編集に使っている場合には特に気になります）Atomの最初のリリースではそこが問題点であり、最近ではかなり改善されてはいますが、まだまだ不十分です。まとめカスタマイズを簡単に行いたいというユーザーにとってはAtomは優れたツールです。修正、追加、拡張性の自由度は大きな力を与えてくれます。ドキュメントも優れています。私としてはやはりパフォーマンスの点が気になりますが、Atomはフリーのエディタとして光っているのは確かです。 Atomの使い方 [PR] プログラミングで挫折しない学習方法を動画で公開中Sublime Text Url：https://www.sublimetext.com/ 試用するにはライセンス費70ドルが必要開発者：Jon Skinner （前グーグル技術者）プラットフォーム：OSX, Windows, Linux Sublimeは2007年にリリースされ、ほぼ10年が経過しています。Stackoverflowの2016年の開発環境調査ではSublimeは第3位にランクされています。 V3Betaは最新バージョンで、長い間Betaバージョンのままです。気にすることはありませんが、新版はたいへん安定しています。パッケージ最初にインストールするSublimeのパッケージはコントロールプラグインであるようです。Sublime 3ではこれらがデフォルトで追加されていることを期待しています。 Atomと同様にSublimeでもたくさんのパッケージとテーマが用意されていますが、私にとって必要なのは次の3つです。 SideBarEnhancements：これを使わないとファイルのリネーム/移動/複製はできません。 SublimeLinter：異なるプログラム言語にlintを追加するのに必要です。 GitGutter：git 上の状態をラインナンバーの左に表示します。 Sublimeにおいても多くの(パッケージの)中から選択ことが出来ます。Sublimeのパッケージサポートは全体的によくできているのですが、最初に使い始める際に複雑な手続きがあるというのがちょっと残念な点です。編集とワークフロー重要なプロジェクトでは、Sublimeを使ってきました。ファイルの検索、ファイルの内容の検索は高速で簡単です。私は何百ものファイルからコードの断片を検索する作業をよく行いましたが、Sublimeの処理速度に不満を持つことはありませんでした。 Atomと同様に、Sublimeの本領はいくつかのキープラグインをインストールしてから発揮されます。正しい文法ハイライトを行うにはJSONフォーマッタ、LINTなどのインストールで時間が取られますが、一旦インストールしてしまえば再び触る必要はありません。カスタマイズ前述しましたが、SublimeはAtomと非常によく似ています。「フォーカスが無くなったら保存する」、「空白を取り除く」の設定も可能です。設定ファイルは簡単なJSONで書かれており、隠された全体のホストの設定があります。パフォーマンス SublimeがAtomより優れた点として、オープニング、クロージング、検索などがたいへんスムーズで速いことがあげられます。まとめ冒頭に述べたように、私は長年のSublimeユーザーなので、ここでの私の意見は少しだけSublime寄りではありますが、一般的にはSublimeは柔軟性があり高速なエディタであるとされています。 2016年の開発環境のトップ3に入るだけの理由はあるのです。 Sublime Textの使い方 Visual Studio Code Url: https://code.visualstudio.com/ 費用：フリー開発者：Microsoft Platforms：OSX, Windows, Linux Visual Studio Code(VSCode)は比較的新しいテキストエディタです。昨年(2015年4月)にリリースされていますが、すでに大きな牽引力を持っています。Microsoftはパワフルで柔軟性のあるクロスプラットフォームエディタを作り出すという大きな業績を残しました。そのプラグインは開発者からの注目を集めています。パッケージ他のエディタと同様に、VSCodeもよくできたプラグイン（エクステンション）を持っています。エクステンションの管理は内蔵されており、何百ものエクステンションが利用可能になっています。これがAtomでは、いくつかのものだけがデフォルトでインストールされています。自分のワークフローに最適なプラグインを選ぶのに多少の時間はかかります。私の好きな（そして私がVSCodeで興味深く思うのは） Chrome用のデバッガです。これを使ってVSCodeの中からブレークポイントをセットしてJSをデバッグできます。同じことはNoode.jsでもできます。つまり、JSCodeからブレークポイントをセットして、ターミナルのノードプロセスが走っている状態でステップ実行させることができるのです。編集とワークフロー VSCodeはAtomと似たやり方でElectron、Node、HTML/CSSを使っていますが、タイムラグもなく極めて高速です。私は、エディタを一週間使用してみて、かなり満足しました。Sublime,Atomに非常に親和性がありました。前述のデバッグ機能は拾い物でした。入力補間（最初は設定に苦労しましたが）が一日かそこらで利用できるようになりました。私はすでに引数を覚えていなくても、関数名を入力することに関しては達人になっていました。カスタマイズ前述の2つのエディタのようにVSCodeにもカスタマイズ機能はあります。wrapping, インデント、テーマなど必要な全ての機能が用意されています。パフォーマンス前述しましたが、VSCodeは(Atomと同様に)、Node.js, Electron, HTML, CSSを使って作られていますが(Atomとは違って)　明らかに高速です。起動、終了時のタイムラグも感じないし、検索も速いです。察するところ、AtomとVSCodeの違いはUIエディタがMonaco(Visual Studio Onlineより)で作られていることだと思われます。これがパフォーマンスの違いの理由だと思いますが、とにかくパフォーマンスはSublimeと同等なのです。まとめ全体を見て私はVSCodeの検討結果にたいへん感激し、より継続して使うことも考えました。私は完全に乗り換えるためのステップを踏んでいる状態ですが、Sublimeと同様の設定をしてみたこの休日は楽しいものとなりました。結局、私はSublimeを長く使い過ぎたようです。Gitとの統合、エディタ内デバッガーはすばらしい機能であり、私がSublimeを使って苦労していたことが、VSCodeを使うとあっと言う間にできてしまうのです。 Vim Url: http://www.vim.org/ 費用：フリー開発者：Bram Moolenaar プラットフォーム：OSX, Windows, Linux 私は開発者は成長するための通過点として、プロジェクトでVi、あるいはVimを使ってみるべきだと思う。ターミナルを通してリモートサーバ上のファイルを見たり編集できることは生産的で重要な機能です。私は多くの開発者が、SFTP、curlを使って、ファイルを再アップロードするのを見てきました。しかし、Vimについての厳しい意見は、Vimの愛好者を苛立たせ、さらには理屈の通った怒りを買うことを私は知っています。Vimを修得する事に時間を費やしている人にとって、Vimはたいへんに生産的な環境なのですから。パッケージ Vim　では　14,00ものパッケージを使うことができます。たとえば、木探索、文法のハイライト、テーマ設定、Gitとの統合などがあります。Vimは信じられないくらいの柔軟性を持ち、パワフルなのです。しかしながら、上で述べた他のエディタと同様に、インストールすべき最適なプラグインがどれかを知るには、インサイダーの知識とコメントが必要です。私は人気のあるプラグインはWebサイト(http://vimawesome.com/)を手がかりとして探しています。編集とワークフロー Vimに不慣れな人に最初に言っておきますが、Vimはコマンドラインのテキストエディタです。ダブルクリックしたり、移動のためにマウスを使うアプリとは違うのです。テキストを開く、編集する、閉じる、保存するという操作は全てショートカットを使って行います。私が学生の頃、Viだけを使うように教えられました。本当のVimのユーザーになるにはそれなりの覚悟が必要ですが、最後には「頭が良くなった」ような気分を味わうことができるでしょう。正直言って、私がVim をあまり使わなくなったのは、ショートカットを充分に覚えていなかったからです。ひとつのファイルなら、検索したり、置き換えたりすることが簡単にできるのですが、これが複数のファイルとなると、途端に操作が分からなくなります。カスタマイズ Vimは驚くほどカスタマイズできます。Googleで「.vimrc」を検索すれば、Vimの設定例をたくさん見つけることができます。Vimはいろんなことが可能なのです。パフォーマンス Vimのパフォーマンス上の障害となるのは「ユーザー」、つまり「あなた」なのです。原理的で高速でありますが、パフォーマンスとしては、あなたがいかに速くコマンドを打てるかにかかっています。あなたがVimのパワーユーザであればVimもすごく速くなるのです。まとめ Vimは原理的なエディタです。速い動作速度を持ち、開発環境としては充分です。ただし、辛抱強くコマンドを覚える必要があります。 VIM Adventuresというオンラインゲームがありますが、これを使ってファイル内を移動する h, i, k, l のような基本的なコマンドを覚えることができます。最終判断以上のエディタは各々長所、短所を持っています。個人的には私は、開発者のキャリアの中で各々のエディタについて最低1週間は何が役に立ち、何が役に立たないかを見極めるべきだと思います。これら人気のある4つのエディタを包括することは、エディターを選びなおす良い切っ掛けになると思います。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを始めようと思っている人はぜひご覧ください。

プログラミング

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説

目次

Visual Studio Codeとは