【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

こんにちは、はるおです。最近、記事の最初に挨拶するのを忘れてました。

礼儀は大事ですよね、以後気をつけます。ということで、

 

 

プログラミング初心者の皆さん、いきなりですが、プログラミングを始めるにはどんなものが必要か考えたことがありますか?

プログラミングをするなら必ず必要なツールとして、「エディタ」というものがあります。

その中で特におすすめなのが「Atomエディタ」と呼ばれるエディタです。

 

 

 

本記事ではこの「Atomエディタ」について基本的な使い方を説明していきます。

 

 

 

初心者向けに以下のリンクに「学習前に身につけて欲しい基礎知識について」の記事を貼っておきます。全3回+1記事で書いてますので、参考にどうぞ。

 

プログラミング初心者向け、学習前の必要知識【part1/3】

 

また、以下の記事ではプログラミング初心者の学習の「心構え」について説明しています。

この記事は僕の考え以外に、多くの先輩方からの教訓を話しているのでおすすめです。

プログラミング初心者の独学におすすめの学習方法とは?【心構えも解説します】

 

 

本記事では、下記の内容を解説します。

 

 

この記事でわかること

・「Atomエディタ」についてわかる。

・基本的な使い方がわかる。

 

この記事を書いている僕は、プログラミング学習歴7ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

LPとはランディングページの略称で、商品をセールスする際などに使われる縦長の単一1ページのことです。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

 

 

 

「Atomエディタ」について

今からAtomについて説明していきます。

Atomは初心者が使いやすいエディタですが、それと同時に上級者の方々も使っているエディタです。

なぜそこまでAtomが使われているのか、Atomの特徴などについてお話ししていきます。

Atomの特徴

Atomエディタが初心者から上級者まで愛されている理由はこのような特徴から来ています。

・無料なのに高性能

・カスタマイズできる

・世界中で使われていて、安定している

無料なのに高性能

 

 

 

Atomは無料で使えるエディタです。なので初心者の人が「ちょっとやってみよっかな」と気軽にインストールして始めやすい手軽さがあります。

そして無料だからと言って使いにくいとかエラーが起きるとかそういったことはなく、むしろ中身は高性能で、開発に必要な機能はほぼほぼそろっています

 

 

 

また、使用言語をあらかじめ指定することにより、その言語に合わせて文字色が変わり、その処理が反映されているかどうか、変な記述がないかなどが、少し見ただけで分かるようになってます。

さらに、指定した言語に合わせて、「Tabキー」を押すことでショートカットが使えて、作業効率を高めることができます。例えば、

これがAtomの画面です。

Atomを起動して、↓の位置にある「Plain Text」をクリック

するとこのような画面が出てくるので、そこに使用する言語を入力する。

ここでは「html」と入力しています。

予測変換で言語名が下に表示されるのでクリックします。

そして元の画面に戻るので、一番上で「html」と入力して、「Tabキー」を押す。

すると、、、、

 

このような感じでHTMLに毎回表記する長々とした文章が自動的に入ってくれます

これは便利ですよね。

その他にも、「h1」(見出し1)と打つと、「<h1></h1>」と自動で出たり、「a」(リンク)と打つと、「<a></a>」と自動で出たりします。

とても便利ですね。

※初心者の方は最初はこの機能に頼らずに、自分で1文字1文字書いていきましょう。その方がタグを覚えるのも速くなりますし、エラーに気づきやすくなります。

カスタマイズできる

最初から使い勝手の良いAtomですが、上級者はさらにそれを自分流に使いやすくカスタマイズしていきます。

Atomには「パッケージ」と呼ばれる拡張機能が備わっており、パッケージをインストールして使用することでさらに高機能にすることができます。

世界中で使われていて、安定している

Atomは世界中で使われているエディタです。

そのためYoutubeなどでAtomと検索すると、外国語で説明している動画とかも出てきます。

そしてもちろん日本でも使っている人が多いです。

これはAtomに限らずですが、

「たくさんの人が使っている=やり方を調べたらすぐにわかる」

ということになります。

たくさんいるAtomユーザーが悩んだ分だけ攻略法が出ていると考えると、心強いですよね。

とはいえ僕はAtomを使い始めて7ヶ月ですが、今のところ分からなくて困ったところはなかったですね。

Atomはそれだけ初心者にも直感的にわかりやすく、使いやすいと言うことですね。

あと、色合いがお洒落

基本的な使い方

 

 

 

ここまではAtomの特徴について解説してきましたが、ここからは実際に使い方について説明します。難しい説明は省いて、ひとまず使えるようになることを目標に説明していきます。

新規作成

 

 

 

 

 

 

 

 

 

 

 

まずはデスクトップ上で右クリックをして、「新規作成(X)」→「フォルダー(F)」をクリックして、これから作っていくものの名前を決めます。

名前は自由ですが、一目で何か分かるような名前をつけると良いですね。

ここではこのあと、「test」というフォルダを作りました。

 

 

※フォルダのことを「ディレクトリ」とも呼ぶので、聞いたときに混乱しないように覚えておきましょう。

 

 

次にAtomを起動して、何でも良いのでなにかしら書いていきます

画像ではHTMLを書いていくことを前提に、コードを書きました。

すると↑のところをみてください。青い●がありますよね。

これは「まだ保存してないですよ」という意味になります。保存をすればあの青い●は消えます

そして始めて保存をする場合は、自動的に「名前をつけて保存」になります。なので、先に作ったフォルダの中に、ファイルの名前をつけて保存しましょう。

だいたいHTMLの最初のファイルは「index.html」とする慣習があるため、僕はそうしています。

すると保存完了です。

また、既存のフォルダを編集したい場合などは、「プロジェクトフォルダを追加」で追加することができます。

すると画面左側にフォルダ等をまとめた欄が表示されます。これは「ツリービュー」と呼ばれるものです。

こちらからもフォルダやファイルの作成ができます。

ツリービューで、「test」の中に新規作成する場合、「test」を右クリックします。

そして「新規ファイル」または「新規フォルダ」を選択すると、このような画面が出てきます。

ここに作りたいフォルダ名、ファイル名を記入してEnterするだけで新規作成ができます。

こんな感じですね。

ここではcssという名前のフォルダを作り、さらにその中に「style.css」という名前のファイルを作成しました。

これは、「test」フォルダの中に「css」フォルダと「index.html」ファイルが入っていて、「css」フォルダにはさらに「style.css」ファイルが入っているという意味になります。

このように段々となっていることを「階層」といいます。「階層」についてはまた次回以降記事に書いていこうと思います。

基本的な使い方については以上になります。

便利なショートカットキー

 

「Ctrl」 + 「S」:保存・上書き保存

「Ctrl」 + 「F」:検索

「Ctrl」 + 「A」:全選択

「Ctrl」 + 「↑」もしくは「↓」:任意の方向へテキストを移動

「Ctrl」 + 「\」:ツリービュー

「Ctrl」 + 「O」:開く

「Ctrl」 + 「PgUp」もしくは「PgDn」:タブを移動

 

※Macの場合は「Ctrl」の代わりに「command」キーを押します。

 

 

 

まとめ

・Atomエディターは初心者から上級者まで幅広く愛されている

・無料

・パッケージをインストールすることで自分好みにカスタマイズできる

・多くの人が使っているため、ググればすぐに疑問を解決できる

・お洒落

以上がAtomエディターの紹介になります。エンジニア志望の方もデザイナー志望の方も、エディターは必ず使うことになるので、インストールしておきましょう。

 

 

ちなみに最近はエンジニアの「未経験可」という企業も増えているため、思い切って飛び込んでみるのもアリですね。

というかそれが一番早くてお金ももらえておすすめです。

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗

だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。

わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です