【超便利】「Atom」を使ってみよう!

2020年8月27日

皆さんは、テキストエディタは何を使っていますか?
私が書いている、「メモ帳でプログラミング」シリーズでは、タイトルにもある通り、テキストエディタには「メモ帳」を使っています。

「メモ帳」はみなさんご存じの通り、どのWindowsパソコンにも絶対入っていて、初心者の方でも使うことができます。

ですが、プログラミングをしていると、スペースを開けたり改行をしたりして、見やすく整える時にいちいちスペースや改行を連打するのは面倒くさいですよね。

そんな時に便利になってくるのが、「Atom」です!

Atomを使えば、HTMLのタグを自動で打ち込んでくれたり、自動で改行やスペースを入れてくれたり、タイプミスがあったら教えてくれたり、様々な便利な機能を使うことができます!

なので、ぜひAtomをインストールして使いこなせるようになりましょう!


Atomのインストール方法

Atomのインストールは非常に簡単です!

まずはAtomの公式ホームページに飛びましょう!

こちらから
https://atom.io/ に直接飛べます。)

そしたら以下の画像の通りに、ダウンロードボタンを押しましょう!

矢印のボタンですね

ダウンロードが終わったら、ダウンロードした「AtomSetup.exe」を起動して、
あとはただひたすら待つだけです!笑

インストールが自動で行われるはずです。

そして、インストールが終わると自動でAtomが開きます。

インストールは完了です!
ダウンロードするだけなので、メチャクチャ簡単だったはずです!

ここからは、Atomでよく使う便利機能を見ていきたいと思います!


Atomの便利な機能たち

HTMLファイルを作る

まずは左上の「ファイル」から「新規ファイル」を選択しましょう。

そうすると何も書かれていない、「untitled」というタブが開かれるはずです。

今回は、試しにHTMLファイルを作っていきます。

まずは、右下の「Plain Text」となっているところをクリックして、検索バーに名前を入力したり、スクロールして、HTMLを探してクリックしましょう。

これで設定は完了です。

ここで試しに、「html」と打って、エンターを押してみましょう。

するとHTMLを作るのに必要なタグがすべて自動で挿入されたはずです!

こんな感じ

(lang="en" dir="ltr" は要らないので消しておきましょう!)

あとはタイトルを入力したりするだけで完成ですね!

いつも手で入力していたものが自動で入力してくれるので、メチャクチャ楽ですね!

JavaScriptのコードを書く

先ほど作ったHTMLファイルに、JavaScriptのコードを入力してみましょう。

<script>タグで囲んで、その中に今回は let a = 0; と書いて見ました。

ですがこのままでは文字に色がついていないので、うまくJavaScriptと認識されていません。

なのでここで一度、右下の「HTML」と書いてある部分をクリックして、先ほどと同様に今回は「JavaScript」を探してクリックしてください。

そしてもう一度、右下の「JavaScript」と書かれた部分をクリックして、「HTML」に戻してみましょう!

そうすると、先ほどは色がついていなかった、let a = 0; の部分に色がついているはずです!

画像のようになればうまくできています!

では次に、適当な場所に「if」と入力してエンターを押してみましょう。

するとif文に必要な括弧が自動で入力されます。
これは if だけでなく、switch や for などほかのものでも自動で入力してくれます!


パッケージ機能について

Atomには「パッケージ」という、Atomをより便利にする追加機能といったものがあります。

今回のこの記事では詳しく説明しませんが、パッケージには隅から隅まで手の届くような細かで便利な機能を追加することができます。

詳しく知りたい方は、「Atom パッケージ」で調べてみましょう!

いつかこのブログでも便利で有名なものをいくつか紹介したいと思いますので、その記事が上がるまでお待ちください。


最後に

今回はプログラミングをするときに非常に便利なソフトウェア、「Atom」を紹介しました!

今回は主にHTMLとJavaScriptを例に挙げましたが、ほかのプログラミング言語でも活用することはできるので、どんどん使っていきましょう!

最後まで読んでくださり、ありがとうございます!
Twitterもやっているのでよければフォローお願いします!

Twitter開設しました!

ただの大学生のブログが更新されたときや、様々な情報を載せるためのTwitterを開設しました!ブログの裏側を載せたり、読者の方の質問に応えたりします! TwitterのIDはこちらです。@Daigakusei_blog […]