普段のプログラミングのツールは「VS Code」もしくは「Cloud9」でプログラミング学習を進めております。
ですがあるメンターの方が「html」「css」をコーディングするのに【Brackets】を使用しておりました。
理由は「ライブコーディング」機能が優れているとのことでした。
【Brackets】に興味を持ちましたのでセットアップし試してました。
【Brackets】とは Adobe Systemsが開発しテキストエディタのことで、GitHub上に公開されています。 オープンソースエディタで無料で使うことができます。
また拡張機能をインストールしれば、自分好みにカスタマイズすることも可能です。
Brackets
【Brackets】のダウンロード・インストール
まずは【Brrackets】をダウンロードします。
赤枠内の「Brackets をダウンロード」をクリックします。
※この記事を書いている時のバージョンは「1.14.2」でした
ダウンロードしたセットアップファイルを実行します。
「Next」をクリックします。
「Install」をクリックします。
インストールが始まりますので、しばらくお待ちください。(当方の環境では1分ほどで終わりました)
完了しましので「Finish」をクリックします。これでインストールは終わりです。
【Brackets】を起動します。
【Brackets】が起動しました。
拡張機能「Emmet]のインストール
次に拡張機能で「Emmet」をインストールしたいと思います。
※「Emmet」とは HTML・CSSをコーディングする際に、ショートカットキーを使用して補完してくれるプラグインのことです。使用することでコーディングの作業効率を上げてくれます。
「ファイル」をクリックし、ドロップメニューから「拡張機能マネージャー」をクリックします。
「拡張機能マネージャー」 画面が表示されますので、右上の検索欄に「emmet」と入力します。
「Emmet」が絞り込まれますので、赤枠内のインストールをクリックしてください。
インストールが始まります。環境にはよりますが数秒ほどで完了すると思います。
インストールが完了しました。閉じるボタンを押し、「拡張機能マネージャー」画面を閉じてください。
上部メニューに「Emmet」が追加されました。
「Emmet」をクリックすると、「Enable Emmet」にチェックがはいっていると思いますので、これで「Emmet」が有効になっています。
それでは「Emmet」が有効になっているか確認したいと思います。
「Emmet」機能の確認
メニューより「新規作成」をクリックします。
標準では「Text」になっていますので、赤枠内をクリックして「HTML」に変更します。
「！」を入力して「Tab」を押してください。
HTML の雛型に変換されたと思います。
「Emmet」のショートカットについてはここでは省略しますが、とても便利ですのでぜひ使ってみてください。
<一例>
「p」 ⇒ <p></p>
「p.test」 ⇒ <p class=”test”></p>
テーマの変更
初期設定のテーマでは、エディタ編集画面の背景色が白色になっています。
好みの話になってしましますが、私は黒色が好みですのでテーマを変更します。
上部メニューの「表示」をクリックして「テーマ」を選んでください。
「テーマ設定」画面が表示されますので、「現在のテーマ」より「Brackets Dark」を選んでください。右下の「完了」ボタンをクリックして画面を閉じてください。
これでテーマが変更されて、背景色が黒色に変更しました。
「テーマ」は初期では「２」個しか入っていませんが、「拡張機能マネージャー」画面の「テーマ」から追加することが可能です。
お好みでテーマをインストールして変更してみてください。
初期インデントの変更
初期のインデントのスペース数は「４」となっています。
これも好みにはなってしまいますが、私はスペース数が「２」にしたいので変更します。
エディタ画面の右下に「スペース」がありますので、そこの「４」(初期)をクリックして任意の値に変更してください。
これでスペース数が「２」に変更されました。
ライブコーディング機能
ライブコーディング機能を実際に使ってみたいと思います。
※ライブコーディングをするためには事前に「Google Chrome」をインストールしてください。現在のバージョンでは「Google Chrome」のみの対応です。
エディタ画面にてコーディングを行い、赤枠内のマークをクリックしてください。
「Google Chrome」が起動し、コーディングをした内容が表示されます。
編集を行い、「上書き保存」をすると上記のようにすぐさまにプレビュー画面に反映されます。
使用感
ライブコーディング機能はボタンをクリックするだけで使用することができ、また上書き保存をすることですぐさまに編集した部分が反映してくれます。
とても簡単で便利です。
HTML と CSS のコーディングはこちらを使って形を作成する
そしてRails は 今まで通り「VS Code」や「Colud9」を使ってプログラミングをし、HTML と CSS を【Brackets】より貼り付ける。
このような使い方をすると作業効率が上がりそうな感じを受けました。
みなさんも一度【Brackets】を使ってみてください。
無料ですので一度使ってみても損はないと思います(^^)
コメント