在宅「ママ×プログラミング」でライフステージに合わせた働き方を実現こんにちは!インストラクターの井上です。テキストエディタのATOMってとっても便利ですよね。「パッケージ」で機能を自分好みにカスタマイズできる点が素晴らしい。いざATOMのパッケージを使おうと思っても、パッケージが山ほどあってどれを選んで良いのかわからないですよね。そこで今回は、様々な立場にあわせて作業がはかどるパッケージを「計28種」ご紹介します!ぜひ使えそうなパッケージを導入し、快適なATOMライフをお送りください。まとめパッケージのインストールまずは、パッケージのインストール方法からです。そもそもATOMをインストールしていない方や、ATOMの基本を知りたい方は以下の記事を参考にしてください。2019年12月2日ATOMの日本語化については、以下の記事をご覧ください。2019年4月12日1つずつインストールするパッケージを1つずつインストールする操作を説明しましょう。ここでは、例として「web-search」をインストールしてみましょう。(1)「ファイル」をクリックし、「環境設定」をクリックします。(2)「インストール」をクリックし、「web-search」と入力して、「パッケージ」をクリックします。(3)「web-search」の「Install」をクリックします。インストールが完了すると、以下のように表示されます。一括インストールする次は、複数のパッケージを一括インストールする方法を説明します。この手順のとおりに操作すると、この記事で紹介されているパッケージをまとめてインストールできますよ。インストールするパッケージ名を記載したテキストファイルを作成します。(1)「ファイル」をクリックし、「新規ファイル」をクリックします。(2)以下の内容を入力します。web-searchdotinstall-panecolor-pickerpigmentsmaximize-panestaghighlight-columnemmetfile-iconsatom-beautifytabs-to-spaceshighlight-selectedgit-plusmerge-conflictsremote-editadvanced-open-fileautocomplete-pathsminimapselection-highlightproject-managerimdone-atomexposesplit-difflanguage-markdownmarkdown-table-formattermarkdown-toc※以下のパッケージは、このリストには含まれていません。必要な場合は個別にインストールしてください。autocomplete系:使用する言語で必要なパッケージが異なります。(3)「ファイル」をクリックし、「保存」をクリックして、任意のフォルダに保存します。私は、「D:\ATOM\packages.txt」に保存しました。OSの場合はターミナル、Ubuntuの場合は端末)を起動します。(1)以下のように入力し、Enterキーを押します。(テキストファイル名)私の場合は、(テキストファイル名)の部分は「D:\ATOM\packages.txt」と入力しました。パッケージのインストールが始まります。多くのパッケージをインストールする場合は、とても時間がかかりますが、じっくり待ちましょう。パッケージのインストールが終わったら、念のためATOMを再起動しておきます。プログラミング学習者向けプログラミング学習者向けのおすすめパッケージから紹介していきましょう。わからないことをすぐ検索できるパッケージweb-searchURL:https://atom.io/packages/web-searchATOM上で選択した単語などをWeb検索できるパッケージです。ソースコード中に出てくるキーワードなどを検索する手間が省けます。快適な学習環境を提供するパッケージdotinstall-paneURL:https://atom.io/packages/dotinstall-paneATOMを開きながらプログラミング動画学習サイト「ドットインストール」を見られるパッケージです。横に並べられるだけでなく、ショートカットで動画の再生&一時停止を行えるため、学習がはかどります。HTMLデザイナー向けHTMLコードを書くことが仕事になっている、HTMLデザイナー向けのおすすめパッケージです。望む色合いを一発で決められるパッケージcolor-pickerURL:https://atom.io/packages/color-pickerATOMで「rgb(235,26,13)」や「#39b813」などのカラーコードを入力するときに、「カラーピッカー」というパネルを表示して視覚的に色が選べる機能を追加するパッケージです。色合いの細かな調整がすぐにできるので色選びがはかどります。指定色が一目で分かるパッケージpigmentsURL:https://atom.io/packages/pigmentsカラーコードに色をつけるパッケージです。どのタグにどんな色を指定したのかすぐに分かるので、デザインの編集がはかどります。複数ファイル操作が快適になるパッケージmaximize-panesURL:https://atom.io/packages/maximize-panes複数パネルを開いているときに、開いているパネルの大きさをサッと変更できるパッケージです。複数ファイルを同時編集する機会の多いデザイナーにとっては、とても便利です。スムーズにコーディングできるパッケージtagURL:https://atom.io/packages/tagHTMLなどの閉じタグを自動的に入力するパッケージです。地味に面倒な作業や、タグの対応が分かりづらいといった心配もなくなるので安心です。highlight-columnURL:https://atom.io/packages/highlight-column字下げ(インデント)がわかりやすくなるパッケージです。いいコードは誰が見てもわかりやすいものです。字下げがしっかりしているか、していないかは見やすい、見やすくないに影響します。HTMLを素早く書けるパッケージemmetURL:https://atom.io/packages/emmet「Emmet」という省略記法をご存知でしょうか。id="header"><h1></h1></div>」に変換されるという便利な機能です。emmetパッケージは、この「Emmet」を利用するためのパッケージです。試しに「#hedader>h1」と入力し、Ctrlキーを押しながらEキーを押してみてください。以下のように表示されますね。HTMLのコーディング作業が、とてもはかどります。アイコンをカラフルにするパッケージfile-iconsURL:https://atom.io/packages/file-iconsデフォルトで入っている質素なデザインのアイコンに、色をつけるパッケージです。HTMLデザイナーはいろいろな形式のファイルを扱うことが多いので、色をつけてさらに見やすくなるでしょう。人間は五感の約80%を視覚に頼っている生き物です。色が違うだけで、0.5秒くらいは時間短縮できるかもしれないですね。プログラマー向けプログラムを書くことが仕事になっている、プログラマー向けのおすすめパッケージです。ソースコードを綺麗に保つパッケージatom-beautifyURL:https://atom.io/packages/atom-beautifyファイルの種類に応じて、字下げを自動的に行うパッケージです。字下げがしっかり行われていなくてもソースが読みやすい状態になるので便利です。tabs-to-spacesURL:https://atom.io/packages/tabs-to-spacesタブ文字を半角スペースに置き換えるパッケージです。複数人で開発する際は特に、綺麗に読める状態のソースコードを維持することはとても大切です。字下げを、スペースで行うかタブで行うかを決めて、統一した書き方で開発を進めましょう。一瞬で簡易検索できるパッケージhighlight-selectedURL:https://atom.io/packages/highlight-selected選択したテキストが同じファイル内にある時に、それらをハイライトするパッケージです。検索しなくても、同じ命令が画面内のどこにあるかが、すぐに分かるので便利です。ATOM上でGitが使えるパッケージgit-plusURL:https://atom.io/packages/git-plusATOM上でバージョン管理システムであるGitを扱うためのパッケージです。ATOMはGitHub製のエディタでもあるので、gti-plusは鉄板のパッケージと言えるでしょう。merge-conflictsURL:https://atom.io/packages/merge-conflictsGitを使用して編集箇所の競合状態のコンフリクトが発生したときに、その修正をサポートするパッケージです。git-plusと合わせて入れておきたいパッケージです。サーバ上のファイルを編集できるパッケージremote-editURL:https://atom.io/packages/remote-editATOMでサーバ上のファイルを編集するためのパッケージです。初期設定で接続先のサーバを指定しておけば、サーバ上のファイルを直接編集できます。毎回、手元のPCでファイルを保存してから、サーバにアップロードするという手順を踏まずに済みます。対象ファイルをすぐに開けるパッケージadvanced-open-fileURL:https://atom.io/packages/advanced-open-fileファイルのフルパスを入力するだけで、ATOMでファイルを開けるパッケージです。実は、Windows標準のファイルを選択する画面でも同じ機能を備えているので、非常に当たり前のように感じますが...。実はadvanced-open-fileでは、「D:/ATOM/packages.txt」(区切り文字がスラッシュ)でも、ファイルを開ける優れものなのです。このちょっとした違いにストレスを感じるあなたに、超おすすめのパッケージです!ファイルの場所を補完してくれるパッケージautocomplete-pathsURL:https://atom.io/packages/autocomplete-pathsソースコードにファイルのパスを入力する際、パスを補間するパッケージです。入力の手間が省けるだけでなく、綴りのミスも防げますよ。言語別に入力補完してくれるパッケージautocomplete系URL:https://atom.io/packages/search?q=autocomplete言語ごとの入力補完用のパッケージです。入力補完は、次に入力できる物を予測して、その候補を表示する機能です。Rubyのautocompleteは次のURLになります。URL:https://atom.io/packages/autocomplete-rubyソースの全体図を表示するパッケージminimapURL:https://atom.io/packages/minimapソースの全体図を画面内に表示してくれるパッケージです。今自分がソースのどの辺りを書いているのか把握でき、迷子になることを防ぎます。選択した単語をハイライトするパッケージselection-highlightURL:https://atom.io/packages/selection-highlight単語をダブルクリックすることで、選択した単語がハイライトされるパッケージです。ステータスバーに単語の出現回数を表示する機能も付いています。プロジェクトマネージャー向けプロジェクトを管理する、プロジェクトマネージャ向けのおすすめパッケージです。ファイル群をプロジェクト単位で扱うパッケージproject-managerURL:https://atom.io/packages/project-manager複数の「プロジェクト」を登録して、スムーズに切り替えられるパッケージです。ATOMでもプロジェクトの管理をスムーズに行えるようになります。ATOM上でタスク管理ができるパッケージimdone-atomURL:https://atom.io/packages/imdone-atomプロジェクトごとにカンバンという方式でタスク管理できる方法を追加するパッケージです。自分ひとりのタスク管理にも便利です。ファイル間の移動をスムーズにしてくれるパッケージexposeURL:https://atom.io/packages/exposeMacのExposéのように、ATOM上で現在開いているファイルの一覧を表示するパッケージです。複数のファイルを開いて作業をする場合でも、スムーズに編集するファイルを切り替えられます。変更箇所を比較しやすくしてくれるパッケージsplit-diffURL:https://atom.io/packages/split-diffパネル間で、ファイルの差分を抽出して、色分けして表示するパッケージ。レビューでファイルの差分などを見たいときに有用でしょう。Markdownが扱えるパッケージATOMは標準でMarkdownのプレビューに対応していて、それだけでも便利ですが、パッケージを追加してさらに便利にしてみましょう。ATOMでMarkdownを編集するときのおすすめプラグインは、以下の記事でも紹介しています。2019年5月28日language-markdownURL:https://atom.io/packages/language-markdownMarkdown記法で文書を簡単に書けるパッケージです。アプリの仕様書など、Markdown記法でドキュメントを作成するときにはかどります。Markdownのテーブルを綺麗にするパッケージmarkdown-table-formatterURL:https://atom.io/packages/markdown-table-formatterMarkdownのテーブルを綺麗に見えるようにしてくれるパッケージです。Markdownを使う際に入れておくと見栄えが良くなります。Contents)を自動生成するパッケージです。長い文章をMarkdownで記述する際に簡単に目次生成ができるので便利です。効率よくプログラミング学習を進めるならスクールへATOMはパッケージが豊富なので、駆使すればかなりプログラミングのしやすい環境作りはできると思います。プログラミング自体をもっと効率よく学習したい!一度独学してみたけど、このままでは仕事にできなさそうな気がして挫折しかけている・・・そんなあなたは、プログラミングスクールで経験者から教わりながら学んでいくのがおすすめです。スクールに通うとお金がかかってしまうのはデメリットですが、エンジニアの平均給与は右肩上がりかつ、今後需要が足りなくなる職種のため、市場価値は必然と上がっていくので、知識に先行投資をすると考えてスクールに通うのがもっとも効率よく習得する方法です。弊社「侍エンジニア塾」では、あなたの目標から逆算したオリジナルのカリキュラムと最適な講師によるマンツーマンレッスンを軸に完全個別型の実践的なプログラミング学習指導に取り組んでいます。集団型のスクールではどうしても些細な個別のニーズには対応できない部分まで対応するため、無駄なくあなたに最適なスキルだけを学ぶことが可能です。無料体験レッスンでは、あなたの現状やどんな理想を目指しているのかを聞かせていただいた上で、それを叶えるキャリアプランや学ぶべき言語とスキル、その学習方法と手順をお伝えするため、「これを学べば理想に確実に近づける」と自信を持ってプログラミング学習に取り組めるようになる内容となっています。下記のカレンダーより無料体験のご予約は承っております。オンラインでも受講可能なため全国各地よりお受けいただけます。プログラミングで人生を切り拓くための一歩目を共に歩み始めましょう。まとめこの記事では、様々な種類のATOMプラグインを紹介してきました。PCで作業をする人の「テキストエディタ」は、料理人で言うところの「包丁」、侍で言うところの「刀」のようなものです。テキストエディタの使い勝手もこだわりを持っていきたいですね。この機会に1つでも導入して、ATOMの使い勝手をあげてみてください。TweetPocket「プログラミング、右も左もわからない...」という方にオススメ当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。