コードを書くのにテキストエディタは必須です。
もし、初学者の方が「どのエディタを使えばいいかわからない…」と悩んでいるなら、Bracketsをおすすめします。
Bracketsとは
Bracketsは、Adobeが開発したテキストエディタです。PhotoshopとかIllustratorを提供している会社ですね。
HTML、CSS、Javascriptを書くために開発されました。フロントエンドのコーディングにのみ特化しているので、動作が軽く、シンプルなデザインが特徴です。
そのかわり、他の言語を書く際には少し不便かもしれません。
Bracketsが初心者におすすめの理由
Visual Studio CodeやAtom、Sublime Textなど、無料で多機能なエディタはたくさんあります。
もちろん、他のものを使ってもいいのですが、Bracketsは初心者におすすめの理由があります。
デザインがシンプル
他の多機能エディタは、多機能のためにごちゃごちゃしている印象です。
使いこなしたら便利だと思うのですが、エディタを初めて使う人にはやさしくないのかな～と思います。
その点、Bracketsはいい意味で簡素なデザインで、直感で使えるエディタです。
ぼくも初めて使った時はすんなり使えました。
最初から日本語対応
最初から日本語対応されているということも、Bracketsが初心者の方におすすめの理由です。
英語がデフォルトの多機能エディタは日本語対応するのに拡張機能を入れたりしなきゃいけません。
ダウンロードしてきてプラグインやら入れないでそのまま使えるのは、初めて使う人にとって嬉しいことです。
動作が軽い
無駄を削ぎ落とし、HTML、CSS、Javascriptのコーディングに特化しているので、とても動作が軽いです。
動作が遅いと作業効率が下がり、モチベ低下にもなるので大事なことです。
Bracketsをインストールしよう
それでは、Bracketsをインストールしましょう。まずは、下記のBracketsの公式サイトにアクセスします。
■Brackets公式サイト
http://brackets.io/
「Bracketsx.xxをダウンロード」というボタンがあるのでクリックします。すると、インストーラーのダウンロードが始まります。
ダウンロードが完了したら、インストーラーを開きます。
Nextをクリック。
「Install」をクリックします。
この画面が出れば、インストール完了。「Finish」をクリックしてアプリケーション一覧からBracketsを探して起動しましょう。
Bracketsを開いてみよう
インストールが完了したら、さっそくBracketsを開いてみましょう。
アプリ一覧からBracketsを探します。
開くと、Bracketsのガイドが書かれているHTMLファイルが表示されます。
このままじゃ読みにくいので、右上の雷のようなアイコンをクリックしてみてください。ライブプレビューという機能で、プレビュー画面を開くことができます。
クリックすると上記のようなメッセージが表示されます。
Google Chromeをインストールしていない場合は、インストールしておきましょう。じゃないとおそらくエラーが出ます。
インストールが完了しているならOKをクリックします。
すると、Google Chromeが開いてプレビュー画面としてガイドを読むことができます。
これはBracketsの便利な機能の1つ、「ライブプレビュー」という機能です。
クリック1つでHTMLファイルのプレビューを表示することができるので、すぐにブラウザでのWebページの見え方や構成、デザインを確認することができます。
Bracketsで新規ファイルを作成
右上の[ファイル]をクリックし、[新規作成]をクリックします。
まっさらな新規ファイルが作成されます。
あとは自由にコーディングしていくだけです。
まとめ
Braketsは簡単にインストールでき、初期設定をあれこれせずにそのまま使うことができます。
この手軽さが初心者の方におすすめするポイント。
シンプルで使いやすいのもあって、多くのプロのWebデザイナーやフロントエンドエンジニアがメインで使っています。
まさに初心者から上級者まで愛されるエディタだと思います。
