WEB開発で使えるフリーのテキストエディタ、厳選ベスト3!

どうもこんばんわ、@It_is_Rです。RはRevolutionのRです。

WEBページを作る上で必須になるのがテキストエディタ。
これがあると、HTMLを書くときにミスが大幅に減ります。

テキストエディタはかなりたくさんあるので、その中でも厳選いたしました。
見易さと、機能面、そしてフリーである事を条件に選びました。

ではでは、WEBページ制作で使えるテキストエディタを紹介していきましょう。

テキストエディタを選ぶ目的として、Javascriptでのゲーム開発をやりやすくしたいというのがありました。
なので今回は、自分がたった今作っているゲームのソースを実際に表示して比べてみようと思います。

見やすく、使いやすい。Atom!!

Atom
まずはAtomの紹介をしていきましょう。

Atomについて

Atomはとても見やすく、とても使いやすいテキストエディタだと思います。
では、実際にソースを表示してみましょう。

まずはHTMLファイルからです。

Atom画像
Atom画像

特に設定は行っていません。
が、ただ読み込んだだけで文字に色がつき、左側にフォルダ内のファイルが表示されます。

では、Javascriptファイルも読み込んでみます。

Atom画像
Atom画像

これはゲーム制作も捗りそうだ!

Atomの機能

Atomには便利な機能があります。
まずは、画面を分割して表示できるということですね。

Atom画像
Atom画像

これでHTMLファイルを確認しながら、Javascriptファイルがいじれる!ってワケです。

また、パッケージをインストールするという方法もあります。
例えば、color-pickerを使うと、右クリックから色を選択するパネルを表示することができます。

Atom画像
Atom画像

このようにパッケージをインストールすると、様々な機能を追加することができます。
わざマシンでモンスターに技を覚えさせる様なものですね。

努力なしで技を覚える。。。素晴らしい世界だ。
まだまだ多数の機能がありますが、それはいずれまた。

こちらも機能満載。Brackets

Brackets
次に、Bracketsの紹介といきましょう。

Bracketsについて

こちらもとても見やすいテキストエディタとなっております。

Brackets画像
Brackets画像

Bracketsの機能

BracketsもAtom同様、便利な機能がたくさんでございます。
まずは、画面の分割ですね。

Brackets画像
Brackets画像

今回は、PHPファイルとCSSファイルを表示してみました。

Bracketsでライブプレビューを使ってみました。
ちなみにこれは、PHPファイルなのでMAMPなどのアプリを使わなければ開けません。。。

Brackets画像
Brackets画像

また、WEB上で使用する色を確認することもできます。

Brackets画像
Brackets画像

こちらもマウスカーソルをコードの上に合わせることで画像をなどを確認できたり、新たに機能を追加したりできるようです。

WEB上で使用可能。Liveweave

Liveweave
最後に、Liveweaveを紹介したいと思います。

Liveweaveについて

LiveweaveはWEB上でHTMLやCSSなどを編集することができるので、とてもお手軽です。
しかし、便利ゆえに欠点が多い気が。。。

Liveweave画像
Liveweave画像

Liveweaveの機能

これは、簡単なWEBサイト制作に向いています。
画像は多分読み込めなさそうなので、自分のサーバーにアップされているものを絶対パスで入力する形になります。

また、HTML、CSS、Javascript、プレビューと、4つに分かれているので使いやすいのですが、Javascriptファイルを2つ読み込みたい時などには不便です。

なので、これでちゃんとしたサイトを作ろうと思うのは間違っています。。。
今回、このLiveweaveをベスト3に入れた理由としては、やはりWEB上で編集できるので、手軽だというだけですね。

というわけで以上、WEB開発に役立つテキストエディタベスト3でした。

スポンサードリンク

おすすめの記事♪

software

【Mac可】CrossFTPを使ってサーバーとデータを送受信する方法!!

[email protected][email protected]。だって痛いじゃん。 いままでサーバーとのファイルのやり取りにはDWを使っていたのですが、少し使い勝手

software

【Android対応】SoundCloud Pulseが公開。アカウントを取得してダウンロード!!

上を見上げればソラがある様に、大阪の隣にはナ[email protected]_is_Rです。 今はネットがここまで普及したかという程に普及しましたね。曲を作ったらYouTubeなどにアップロードして、すぐに誰か

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

[email protected]_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

Medibang Paint

MediBang Paint Proで漫画を1ページだけ描いてみた。

こんばんは。おひさしぶりです。日本は最強だと[email protected]_is_Rです。 さて皆様、漫画はお好きでしょうか。Rは漫画が大好きです。……実は私、小学生の頃は漫画家に憧れていまして、こっそり漫画を描

Mocashamo browser

モカシャモブラウザでAndroidがまるでパソコンみたいに!?

スマホは持ち運びには便利だけど、やっぱり使いにくい!@It_is_Rです。 スマホが使いにくい最もな原因は、ウィンドウをいくつも表示させることができないからだと思っています。 例えば、twit

JCNews

JC Newsってアプリの、アニメゲームニュースが最強ww

世の中のニュースがすべて明るいニュースになれ[email protected]_is_Rです。 JC Newsは、アニメやゲーム、声優などのニュースに特化したニュースアプリ(サイトもあり)で

newsdigest

NewsDigest Android版リリース。災害に備える速さを追求したニュースアプリ。

[email protected]_is_Rです。 株式会社JX通信社は、2015年1月に提供を開始した「NewsDigest」iPhone版の20万ダウンロードを受け、昨日12月10日「N

RezerGo

【RazerGo使い方】ポケモンGO専用チャットが神がかっててヤバイ!!

[email protected]_is_Rです。 ポケモンの場所をリアルタイムで特定できる地図アプリが多く出回りましたが、サービスが止まっているものが続出していますね。 今まで使えたアプリが使用でき

LINE

LINE着せかえ販売がもうすぐ可能!クリエイター必見!!

[email protected]_is_Rです。 数年前、スマートフォンアプリである「LINE」が誕生し、メールよりもLINEを使うひとも多くなりました。 LINEで特徴的なのが、

Smartphone

AndroidやiPhoneで最新のニュースを確認。おすすめニュースアプリ。

皆様は最新のニュースをどのようにチェックしているのでしょうか。Googleニュース、Yahooニュースなどが王道だと思います。 様々なニュースサイトがありますが、やっぱりパソコンでニュースをチェック


コメントを残す

メールアドレスが公開されることはありません。


Category

Games