今すぐ実践できる！エディタAtomの使い方【初心者向け】

初心者向けにテキストエディタのAtom(アトム)の使い方について解説しています。Sublime Textと一番を争うほど人気のエディタでエンジニアで利用している人も多くいます。これからプログラミングを始める人はぜひ参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

テキストエディタ「Atom」の使い方について解説しています。

エンジニアなどプログラミングの作業をする上でAtomを利用している人は大勢います。Sublime Textと一番を争うほど利用ユーザーは多いでしょう。

理由として、無料でもカスタマイズが豊富で誰にでも使いやすいように設定できるという点でしょう。これから使い始める人はぜひ参考にしてみてください。

なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。

Atomとは

AtomはGitHubが開発した無料のテキストエディタです。

パッケージ機能による多様なカスタマイズが可能で、使用者個人の用途によって使いやすい環境に自由に設定することができます。

Atomの使い方

まず、以下のリンクにアクセスします。

https://atom.io/

AtomはWindowsとMacの両方に対応しています。ダウンロードのボタンをクリックします。

atom_p_1

ダウンロードしたファイルを解凍し実行すると自動でアプリケーションがインストールされます。

各種ファイルは「File」メニューから管理する他に、直接Atomのウィンドウ内にドラッグ＆ドロップすることですぐ編集を行うことができます。

atom_p_2

[PR] プログラミングで挫折しない学習方法を動画で公開中

Atomでパッケージ設定/日本語化してみる

日本語化パッケージのインストール方法

Atomには「パッケージ」と呼ばれる様々な拡張機能が追加できるようになっています。

例えば初期設定では各種メニュー項目は英語に設定されていますが、これを「japanese-menu」というパッケージをインストールすることで日本語化することができます。

「File」→「Settings」を選択します。(Macの場合は「Atom」→「Preference」)

atom_p_3

「Install」を選択します。

atom_p_4

使用したいパッケージの名前を入力し「Packages」をクリックします。今回は「japanese menu」と入力します。

atom_p_5

「japanese-menu」パッケージが検索結果一覧に表示されます。「Install」をクリックします。

atom_p_6

メニューが日本語に変更されました。

atom_p_7

その他便利なパッケージの例

atom-html-preview

HTMLファイルをその場でプレビューするパッケージです。

画像ファイルやCSS・JavaScriptなどの動作もまとめて確認することができます。

atom_p_8

color-picker

カラーピッカーから使用したい色を選択するだけで、該当の色コードをエディタ内に入力することができる拡張機能です。デザインにこだわりたいときにも役立ちます。

atom_p_9

以上、エディタAtomの使い方について解説しました。

Atomは、拡張機能が豊富で自分の作業に合わせてカスタマイズすることができるので、ぜひ自分の使いやすいように設定してみましょう。

[お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを身につけたい、エンジニアとして活躍したいという方はぜひご覧ください！

【後編】スキル・実績だけでは転職は成功しない？納得したキャリアチェンジをする秘訣とは！

クリエイターのような専門的な職種の転職は、「スキルと実績さえあれば成功する」、そう考えている人が多いのではないだろうか？しかし、現実は大きく違うらしい。 ...

プログラミング

【どこでも手軽に！】プログラミングを学べるスマホアプリ5選

プログラミングを学びたい人や学習サービスがどんどん増えてきていますね。最近では、PCだけでなくスマホで学習できるプログラミングサービスも多く出てきていま...

プログラミング

プログラミングが学べる！IT・パソコンスクール10選

プログラミングを独学で勉強したけど挫折した・・という人はスクールに通って学ぼうと検討するかもしれません。そこで今回はプログラミングが学べるスクールをまと...

プログラミング

プログラマーとSEの年収を政府データから調べてみた【過去10年間の推移】

先日のWebデザイナーの年収についての記事が好評だったので、プログラマーとシステムエンジニア（SE）の年収についても同じように調べてみました。使用したデ...

プログラミング

HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説

プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。サクラエディタはとても高機能...

プログラミング

仙台のパソコン教室6選｜自分にあった教室の選び方も解説

今回は仙台中心部の通いやすいパソコン教室をピックアップしました。スキルや資格など自分にあったパソコン教室を探す際に参考にしてみてください。 &nb...

プログラミング

あわせてよく読まれている記事

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキストエディタはこれだ！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、10年以上リードエンジニアとして活躍するMatt Goldspink氏によって投稿されました。プログラム記述用テキストエディタが溢れる今日この頃ですが、そこから一つを選ぶとなるとそれは難しい問題でしょう。「開発者にとって最適なテキストエディタは何ですか？」という質問への回答はすぐには見つかりませんが、ここでは Atom, Sublime, Visual Studio Code, Vim という4つの人気のエディタについて比較してみます。ここでの比較が、読者のニーズに合ったエディタを選択をする一助になれば良いなと思います。お断り：ここでのいくつかの比較は主観的であり、ほとんどが私の個人的な好みに基づいています。私はMac用のSublimeを使用してWeb（HTML、CSS、JavaScriptなど）の記述を行なっています。そのため、評価の視点は使い慣れているものに多少傾いてはいますが、できる限り客観的に評価を行いました。目次 Atom Sublime Text Visual Studio Code Vim Atom Url: https://atom.io/ 費用：フリー(MIT Licence) 開発者：GitHub プラットフォーム：OSX, Windows, Linux Atomは21世紀に向けて改良可能なテキストエディタと言われています。 Atomは比較的新しいテキストエディタで、2014年に最初にリリースされて以来、多くの人気を集めています。では、メインの機能から見てみましょう。パッケージ編集機能を追加できることはたいへん重要ですが、このエリアはAtomが得意としています。標準でインストールされるパッケージマネージャがこの機能を果たし、全てのパッケージはGithubで管理されています。現在では、6,452個という多数のパッケージとテーマが利用できます。Atomにとってパッケージは基本的なものであり、プリインストールされたツリービューと設定ビューの機能でさえも単に最初から組み込まれたパッケージなのです。編集とワークフロー Atomでは全ての機能がスムーズに操作できます。では、最大の弱点はなんでしょうか。考えた末に出てきたのは、使い始めた際にどの追加パッケージをインストールすべきかを見つけるのに苦労する点です。例えば、私はファイルの一部分を視覚的にスキップできるミニマップを愛用しているが、この機能をセットアップするためには「オートコンプリート+」を使用して、自動補間機能を設定する必要がありました。私はよく複数のファイルを同時に開いて作業するので多くの場合、分割ペインの編集を設定する機能は必須ですが、これはAtomがうまくサポートしてくれている機能のひとつです。 Sublimeには無いAtomのもう1つの優れた機能は、ツリービューでのファイル/フォルダのドラッグ&ドロップのサポートです。私は周りのものをシフトできる機能がSublimeに無いことを知ってはいましたが、この機能はとても役に立つのです。最後に、gitとの統合は素晴らしいのではありますが、結局は GitHub側で構築された結果なのです。カスタマイズエディタを自分の開発フロー、およびスタイルに合うようにカスタマイズする機能は必須です。私は「保存する時に空白を取り除く」,「編集していないファイルを保存する」という設定をいつも使っていますが、これらを有効にしたり、無効にしたりすることは簡単に行うことができます。 Atomには優れたドキュメントが用意されており、そこにはスタイルを再設定する方法も書かれています。私は構成設定に優れたAtomを好んで使っています。ファイルの種類ごとに設定の上書きができる機能は素晴らしい。例えばJS, CSS, HTML に別々の設定をすることはAtomでは容易なのです。パフォーマンス Atomを選ぶ際に問題になるとすれば、それは処理速度です。ファイルを開いたり、タブを切り替える毎に生じるタイムラグは苦痛です。（本格的な開発の編集に使っている場合には特に気になります）Atomの最初のリリースではそこが問題点であり、最近ではかなり改善されてはいますが、まだまだ不十分です。まとめカスタマイズを簡単に行いたいというユーザーにとってはAtomは優れたツールです。修正、追加、拡張性の自由度は大きな力を与えてくれます。ドキュメントも優れています。私としてはやはりパフォーマンスの点が気になりますが、Atomはフリーのエディタとして光っているのは確かです。 Atomの使い方 [PR] プログラミングで挫折しない学習方法を動画で公開中Sublime Text Url：https://www.sublimetext.com/ 試用するにはライセンス費70ドルが必要開発者：Jon Skinner （前グーグル技術者）プラットフォーム：OSX, Windows, Linux Sublimeは2007年にリリースされ、ほぼ10年が経過しています。Stackoverflowの2016年の開発環境調査ではSublimeは第3位にランクされています。 V3Betaは最新バージョンで、長い間Betaバージョンのままです。気にすることはありませんが、新版はたいへん安定しています。パッケージ最初にインストールするSublimeのパッケージはコントロールプラグインであるようです。Sublime 3ではこれらがデフォルトで追加されていることを期待しています。 Atomと同様にSublimeでもたくさんのパッケージとテーマが用意されていますが、私にとって必要なのは次の3つです。 SideBarEnhancements：これを使わないとファイルのリネーム/移動/複製はできません。 SublimeLinter：異なるプログラム言語にlintを追加するのに必要です。 GitGutter：git 上の状態をラインナンバーの左に表示します。 Sublimeにおいても多くの(パッケージの)中から選択ことが出来ます。Sublimeのパッケージサポートは全体的によくできているのですが、最初に使い始める際に複雑な手続きがあるというのがちょっと残念な点です。編集とワークフロー重要なプロジェクトでは、Sublimeを使ってきました。ファイルの検索、ファイルの内容の検索は高速で簡単です。私は何百ものファイルからコードの断片を検索する作業をよく行いましたが、Sublimeの処理速度に不満を持つことはありませんでした。 Atomと同様に、Sublimeの本領はいくつかのキープラグインをインストールしてから発揮されます。正しい文法ハイライトを行うにはJSONフォーマッタ、LINTなどのインストールで時間が取られますが、一旦インストールしてしまえば再び触る必要はありません。カスタマイズ前述しましたが、SublimeはAtomと非常によく似ています。「フォーカスが無くなったら保存する」、「空白を取り除く」の設定も可能です。設定ファイルは簡単なJSONで書かれており、隠された全体のホストの設定があります。パフォーマンス SublimeがAtomより優れた点として、オープニング、クロージング、検索などがたいへんスムーズで速いことがあげられます。まとめ冒頭に述べたように、私は長年のSublimeユーザーなので、ここでの私の意見は少しだけSublime寄りではありますが、一般的にはSublimeは柔軟性があり高速なエディタであるとされています。 2016年の開発環境のトップ3に入るだけの理由はあるのです。 Sublime Textの使い方 Visual Studio Code Url: https://code.visualstudio.com/ 費用：フリー開発者：Microsoft Platforms：OSX, Windows, Linux Visual Studio Code(VSCode)は比較的新しいテキストエディタです。昨年(2015年4月)にリリースされていますが、すでに大きな牽引力を持っています。Microsoftはパワフルで柔軟性のあるクロスプラットフォームエディタを作り出すという大きな業績を残しました。そのプラグインは開発者からの注目を集めています。パッケージ他のエディタと同様に、VSCodeもよくできたプラグイン（エクステンション）を持っています。エクステンションの管理は内蔵されており、何百ものエクステンションが利用可能になっています。これがAtomでは、いくつかのものだけがデフォルトでインストールされています。自分のワークフローに最適なプラグインを選ぶのに多少の時間はかかります。私の好きな（そして私がVSCodeで興味深く思うのは） Chrome用のデバッガです。これを使ってVSCodeの中からブレークポイントをセットしてJSをデバッグできます。同じことはNoode.jsでもできます。つまり、JSCodeからブレークポイントをセットして、ターミナルのノードプロセスが走っている状態でステップ実行させることができるのです。編集とワークフロー VSCodeはAtomと似たやり方でElectron、Node、HTML/CSSを使っていますが、タイムラグもなく極めて高速です。私は、エディタを一週間使用してみて、かなり満足しました。Sublime,Atomに非常に親和性がありました。前述のデバッグ機能は拾い物でした。入力補間（最初は設定に苦労しましたが）が一日かそこらで利用できるようになりました。私はすでに引数を覚えていなくても、関数名を入力することに関しては達人になっていました。カスタマイズ前述の2つのエディタのようにVSCodeにもカスタマイズ機能はあります。wrapping, インデント、テーマなど必要な全ての機能が用意されています。パフォーマンス前述しましたが、VSCodeは(Atomと同様に)、Node.js, Electron, HTML, CSSを使って作られていますが(Atomとは違って)　明らかに高速です。起動、終了時のタイムラグも感じないし、検索も速いです。察するところ、AtomとVSCodeの違いはUIエディタがMonaco(Visual Studio Onlineより)で作られていることだと思われます。これがパフォーマンスの違いの理由だと思いますが、とにかくパフォーマンスはSublimeと同等なのです。まとめ全体を見て私はVSCodeの検討結果にたいへん感激し、より継続して使うことも考えました。私は完全に乗り換えるためのステップを踏んでいる状態ですが、Sublimeと同様の設定をしてみたこの休日は楽しいものとなりました。結局、私はSublimeを長く使い過ぎたようです。Gitとの統合、エディタ内デバッガーはすばらしい機能であり、私がSublimeを使って苦労していたことが、VSCodeを使うとあっと言う間にできてしまうのです。 Vim Url: http://www.vim.org/ 費用：フリー開発者：Bram Moolenaar プラットフォーム：OSX, Windows, Linux 私は開発者は成長するための通過点として、プロジェクトでVi、あるいはVimを使ってみるべきだと思う。ターミナルを通してリモートサーバ上のファイルを見たり編集できることは生産的で重要な機能です。私は多くの開発者が、SFTP、curlを使って、ファイルを再アップロードするのを見てきました。しかし、Vimについての厳しい意見は、Vimの愛好者を苛立たせ、さらには理屈の通った怒りを買うことを私は知っています。Vimを修得する事に時間を費やしている人にとって、Vimはたいへんに生産的な環境なのですから。パッケージ Vim　では　14,00ものパッケージを使うことができます。たとえば、木探索、文法のハイライト、テーマ設定、Gitとの統合などがあります。Vimは信じられないくらいの柔軟性を持ち、パワフルなのです。しかしながら、上で述べた他のエディタと同様に、インストールすべき最適なプラグインがどれかを知るには、インサイダーの知識とコメントが必要です。私は人気のあるプラグインはWebサイト(http://vimawesome.com/)を手がかりとして探しています。編集とワークフロー Vimに不慣れな人に最初に言っておきますが、Vimはコマンドラインのテキストエディタです。ダブルクリックしたり、移動のためにマウスを使うアプリとは違うのです。テキストを開く、編集する、閉じる、保存するという操作は全てショートカットを使って行います。私が学生の頃、Viだけを使うように教えられました。本当のVimのユーザーになるにはそれなりの覚悟が必要ですが、最後には「頭が良くなった」ような気分を味わうことができるでしょう。正直言って、私がVim をあまり使わなくなったのは、ショートカットを充分に覚えていなかったからです。ひとつのファイルなら、検索したり、置き換えたりすることが簡単にできるのですが、これが複数のファイルとなると、途端に操作が分からなくなります。カスタマイズ Vimは驚くほどカスタマイズできます。Googleで「.vimrc」を検索すれば、Vimの設定例をたくさん見つけることができます。Vimはいろんなことが可能なのです。パフォーマンス Vimのパフォーマンス上の障害となるのは「ユーザー」、つまり「あなた」なのです。原理的で高速でありますが、パフォーマンスとしては、あなたがいかに速くコマンドを打てるかにかかっています。あなたがVimのパワーユーザであればVimもすごく速くなるのです。まとめ Vimは原理的なエディタです。速い動作速度を持ち、開発環境としては充分です。ただし、辛抱強くコマンドを覚える必要があります。 VIM Adventuresというオンラインゲームがありますが、これを使ってファイル内を移動する h, i, k, l のような基本的なコマンドを覚えることができます。最終判断以上のエディタは各々長所、短所を持っています。個人的には私は、開発者のキャリアの中で各々のエディタについて最低1週間は何が役に立ち、何が役に立たないかを見極めるべきだと思います。これら人気のある4つのエディタを包括することは、エディターを選びなおす良い切っ掛けになると思います。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを始めようと思っている人はぜひご覧ください。

プログラミング

Pythonコードのデバッグに便利なAtomのプラグインについて現役エンジニアが解説【初心者向け】

Pythonコードのデバッグに便利なAtomのプラグインについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonコードのデバッグに便利なAtomのプラグインについて詳しく説明していくね！大石ゆかりお願いします！目次 Atomとはデバッグに便利なAtomのプラグイン実際に使ってみようまとめ Atomとは Atomとは、Githubが開発したオープンソースのテキストエディタです。 2014年に招待制のβ版としてMac向けにリリースされました。その後MITライセンスでソースコードが公開され、2015年にバージョン1.0がリリースされました。主にHTML、CSSといったフロントエンドエンジニアを中心に人気の高いエディタです。エディタ本体はElectronを使ったデスクトップアプリとなっており、インターフェースはJavaScriptやCSSを使ってカスタマイズをすることができます。そのため、現在では自分好みの見た目にできるように様々なテーマがパッケージとしてが公開されています。さらにコードを書くときに便利な拡張機能もインストールすることもできるので、自分で使いやすいエディタにさせることもできます。 [PR] プログラミングで挫折しない学習方法を動画で公開中デバッグに便利なAtomのプラグイン Atomはフロントエンド開発で人気のエディタですが、Pythonで開発するときにもよく使われます。ここではAtomでPythonのコードを書くときに便利なプラグインを紹介します。 autocomplete-python Pythonでコード入力を保管する拡張機能です。通常、Atomのデフォルトの補完機能ではコード内で設定した変数の入力補完が行われますが、この拡張機能ではインストールしたライブラリ、モジュール名を保管するだけではなく、メソッドについては括弧の補完もするので、エラーを減らすことができます。Pythonを書くときには入れておきたいプラグインです。 Python-Debugger Atomはテキストエディタであって、統合開発環境(IDE)ではないので、書いたコードをその場で実行するデバッグ機能は最初から入っていません。ただ、AtomはプラグインをインストールすることでIDEのように各言語に合わせたデバッグ機能をつけることができます。もちろんPythonにもデバッガーが用意されており、それがPython-Debuggerです。このデバッガーはSwift-DebuggerをPython向けに変更されたものです。実際に使ってみようそれでは、実際にプラグインをインストールしてみましょう。プラグインのインストール方法は同じなので今回はPython-Debuggerを例にインストール方法を紹介します。まずはAtomを起動して「File」→「Settings」から設定画面を起動します。設定画面の左側にある「Install」タブをクリックしてプラグインのインストール画面を開きます。検索欄にPython-Debuggerと入力してPython-Debuggerを検索します。もし見つからない場合は検索欄の右側の検索オプションをPackagesを選択すると出てきます。検索を行い、以下のプラグインが表示されたら、右側のInstallをクリックしてプラグインをインストールします。インストールには少し時間がかかります。インストールが終わり、以下の表示に変わったらインストールは正常に行われています。もしインストールができない場合はAtomのバージョンの問題があるかもしれませんので、最新版にアップデートして再度お試しください。使い方最後に簡単な使い方を説明します。デバッガーはデバッグをかけたいコードを選択した状態でAlt+R(Macの方はoption+R)と入力すると起動します。そしてコード内でデバッグをかけたい行でAlt+Shift+R(Macのかたはoption+Shift+R)と入力すると指定した行をブレイクポイントとしてデバッグを行うことができます。なお、ブレークポイントは複数設定できます。デバッグをスタートするときは、下のデバッガービューのrunをクリックしてデバッグをスタートします。複数ブレークポイントを設定した場合はnextをクリックすることで次のデバッガーまでのデバッグを実行できます。まとめ今回は、Atomのプラグインでデバッグを行う方法を紹介しました。 Atomは自分の好みのデザインを設定することができて、さらにプラグインを充実させることで快適なコードエディタにカスタマイズできます。ただし、あまり多くのエディタを入れすぎると動作が重くなるので、使うプラグインは必要最小限で設定することをおすすめします。監修してくれたメンターメンター三浦モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

AtomでPythonの開発環境を作る方法を現役エンジニアが解説【初心者向け】

AtomでPythonの開発環境を作る方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 AtomでPythonの開発環境を作る方法について詳しく説明していくね！大石ゆかりお願いします！ Atomとは？ Atomはエディタの一つで、拡張性と利便性の両立を志向しています。 Atomの特徴は、パッケージにより柔軟に機能を拡張できることです。公式のパッケージレポジトリで多数のパッケージが公開されています。 Atomを使うメリット Atomの本体は単なるエディタなので、プログラミング言語を問わずに利用できます。複数のプログラミング言語を併用する場合、各言語向けIDEを使い分けるのも良いですが、エディタ(コーディング作業)はAtomに統一するというのも選択肢です。既存のパッケージで機能が不足していたり、好みに合わなかったりする場合、自身で新規にパッケージを作成したり、既存のパッケージをカスタマイズしたりできます。公式サイトの紹介によれば、プログラミング初学者でも迷わずに使えると同時に、熟練するほどに生産性が向上するとうたっています。 [PR] プログラミングで挫折しない学習方法を動画で公開中Atomのインストール手順公式サイトからインストーラをダウンロードし実行するのみです。他のインストーラ形式が必要な場合、リリースページでダウンロードできます。 (注)リンクは本稿執筆時点の最新版である1.37.0のものです。動作環境の確認と各種便利機能の設定方法インストール直後の状態でも、下図のようにPythonのコーディングを行えます。シンタックスハイライト機能も標準で備えています。 atom-runnerは、Atom内でスクリプトを実行できるようにするパッケージです。 Pythonに限らず、JavaScriptやRubyなど複数の言語に対応しています。以下のようにパッケージの検索とインストールを行います。「alt+r」と入力すると、Pythonスクリプトを実行します。 python-docstringは、Pythonスクリプトに簡易なドキュメントを付与するパッケージです。 atom-runnerと同様に、パッケージの検索とインストールを行います。「alt+ctrl+d」と入力すると、下図のようなドキュメント文字列テンプレートを出力します。その他にもコーディングを支援する多数のAtomパッケージがあります。監修してくれたメンター橋本紘希システムインテグレータ企業勤務のシステムエンジニア。開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

Atomエディタで快適にJavaScriptの開発を行うための設定を現役エンジニアが解説【初心者向け】

Atomエディタで快適にJavaScriptの開発を行うための設定について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Atomエディタで快適にJavaScriptの開発を行うための設定について詳しく説明していくね！大石ゆかりお願いします！目次 Atomとは JavaScript開発のための設定 JavaScript開発のためのプラグインの導入まとめ Atomとは Atomとはオープンソースで開発、提供されているエディターです。公式サイトからダウンロードできます。ご自身の環境に合わせたインストーラーをダウンロードして、インストールをして下さい。 Atomはサードパーティーにより沢山のプラグインが開発されているので、自身の目的に合わせてカスタマイズを自由に出来るところが魅力です。 [PR] プログラミングで挫折しない学習方法を動画で公開中JavaScript開発のための設定 Atomには、JavaScript開発に適したプラグインも沢山出ていますのでご紹介してきたいと思います。まずは、日本語化から行いましょう。「File」→「Settings」をクリックし、表示されたページの「Install」を選択右側の『Search packages』に”japanese Menu”を入力して「Packages」をクリックして検索「japanese Menu」が出てきますので「Install」をクリックこれでメニューの日本語化が完了します。標準でHTML/CSS⁺JavaScriptの編集は十分に行うことが出来ますので、まずは初めて見ましょう。 JavaScript開発のためのプラグインの導入標準で十分ではあるのですが、さらに便利になるプラグインを紹介したいと思います。 HTML/CSS⁺JavaScriptを単独でそれぞれの編集を行うのは標準で十分ですが、IDEとして利用するには便利なプラグインがありますのでご紹介したいと思います。「atom-ide-ui」をインストール（AtomでIDEのプラグインを利用するための基本になるもの）「atom-ide-JavaScript」をインストールこれで利用できるようになります。このほかにも「ide-html」「ide-css」もインストールしておくことをお勧めします。おまけに「Minimap」をインストールしましょう。右側にコード全体が表示され今現在どのあたりを修正しているのかが一目でわかります。まずは、このあたりから始めてみてください。まとめ Atomはとても使いやすく人気のエディターです。是非利用してプログラミングを効率的に行いましょう。筆者プロフィール小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

PythonのIDE（統合開発環境）でオススメなものは？現役エンジニアが解説【初心者向け】

PythonのIDE（統合開発環境）でおすすめなものについて解説します。目次 IDEとは PythonでのIDEにはどんなものがある？ Pythonでの開発の際にIDEを選ぶポイント IDEとは IDEとは、Integrated Development Environmentの略で、日本語では統合開発環境です。ソフトウェア開発では、コーディング、コンパイル、リンク、テスト、バージョン管理といった複数の作業を繰り返し行います。 IDEを使うことで、一つのソフトウェアでこれらの操作を行うことができ、ソフトウェア開発の効率や品質が向上します。最近では拡張機能(プラグイン)を用いて、後から対応言語や機能を増やせるものが一般的です。 [PR] プログラミングで挫折しない学習方法を動画で公開中PythonでのIDEにはどんなものがある？ PyCharm PyCharmはJetBrainsの販売している、有償のPython向けIDEです。 PyCharmはコーディングをインテリジェントに補佐することをうたっています。例えば、コード補完、検査、リアルタイムでのエラー指摘や修正、自動リファクタリングといった機能を持ちます。 PyCharmに関しては、次の記事も参考にしてみてくださいね。 PyCharmでAnacondaと連携してPython開発する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン Visual Studio Code Visual Studio Codeは、マイクロソフトが無料で公開しているエディタです。エディタですが、無料で利用できる拡張機能が非常に多いため、無料とは思えないほど使いやすいです。 Visual Studio Code（ビジュアル・スタジオ・コード）は、略してVSCode（ブイエスコード）と呼ばれています。 Azure や GitHub と統合された機能と拡張機能を使用して、すべてを 1か所で開発、デバッグ、デプロイできます。 Visual Studio Codeについては、こちらの記事も参考にしてみてください。 Visual Studio Codeとは？インストールや使い方も現役エンジニアが解説 | TechAcademyマガジン Visual Studio CodeでPythonを実行する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン PyScripter PyScripterはフリー、オープンソースのPython向けIDEです。有償のIDEに匹敵する機能の提供を目指しています。機能が豊富かつ無償のため、最初に試すPython向けIDEとして良い選択肢です。利用方法 ①PyScripterにアクセスし、緑色のDownloadをクリック。 ②PyScripter-3.6.4-x64-Setup.exe　のようなファイルがダウンロードされるので、ダブルクリックする。 ③インストール準備が開始されるので、基本的には標準設定の状態でOKや次へをクリックする。次へをクリックする。デスクトップにアイコンを作成する場合は、デスクトップ上にアイコンを追加するにチェックを入れて、次へをクリックする。 ④インストール準備が完了したら、インストールをクリックしてインストールを完了させる。 ⑤デスクトップ上にこのようなアイコンが生成されるのでダブルクリックしてPyScripterを起動してください。 Atom AtomはIDEというよりはエディタで、パッケージによる機能拡張を特徴にしています。パッケージにより、Pythonに限らず多数の言語に対応しています。複数のプログラミング言語を使い分ける場合、エディタをAtomで統一するのはーつの有効な手段です。以下でPythonのコーディングに便利なパッケージを紹介します。 atom-runner Atom内でスクリプトを実行できます。Pythonの他、JavaScriptやRubyにも対応しています。 autocomplete-python Pythonスクリプトのコーディングで自動補完を行います。変数、クラス、パッケージ名などのタイピングが楽になります。 atom-beautify プログラミング言語の構文にもとづき、コードを自動整形します。カッコの対応やインデントの間違いを見つけやすくなります。 Atomに関しては、次の記事も参考にしてみてくださいね。 AtomでPythonの開発環境を作る方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン Microsoft Visual Studio Microsoft Visual StudioはMicrosoft社の提供するIDEです。有償のProfessional, Enterprise版と、無償のCommunity版があります。 Pythonだけでなく、C++, C#, Visual Basicでのコーディングなどにも対応しています。 Visual Studioは巨大な製品群です。 VSCodeの場合、必要に応じて自分の好きな拡張機能を追加しながら利用していくことができます。しかし、それは大企業で利用する場合は管理上難しいことがあります。つまり、大企業で利用する場合セキュリティの安全性を保ったり、作業を管理するために開発環境をすべて統一することがあります。その場合、VSCodeではなく、VisualStudioを利用することで、有償サポートを利用したりもでき、結果的に大企業内での管理コストや開発コストを削減することにつながります。 VisualStudioの有償プラン Pythonでの開発の際にIDEを選ぶポイント会社(業務)で開発する際には、会社、部署、所属のプロジェクトなどで、IDEが規定されている場合があります。規定されていない場合も、周囲に特定のIDEユーザが多いようであれば、そのIDEを選択しておくのが無難です。 IDEごとにソースコード整形の規則が異なるため、別のIDEを使うと可読性を損なうケースがあります。また、IDEの利用方法で困った際に、周囲のサポートを受けやすいという面もあります。一方、個人で開発する際には、捻出できる費用も限られがちなので、まずは無償のIDEをいくつか試してみるのがおすすめです。開発するプログラムの性質や、個人の趣向により、IDEの向き不向きがあります。そのIDEをしばらく使ってみて、合うならば継続すればよいでしょう。合わなかったり機能の不足を感じたりするならば、別の無償IDEを試すか、有償IDEの購入を検討してみてはどうでしょうか。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ Pythonを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのPythonコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、人工知能（AI）や機械学習の基礎を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

Python

アップデートの方法！npm updateの使い方【初心者向け】

今回はnpm updateについて解説します。パッケージをアップデートする方法について説明しているので、ぜひコマンドを打ちながら行っていきましょう。 npm updateとは、Node.jsのパッケージをアップデートする操作です。なぜアップデートする必要があるかというと、最新のバージョンにする場合やチーム開発などで、依存性の解決のために特定バージョンにアップデートする必要があるためです。 npm updateを知っていると、実務でnpmを利用したフロントエンド開発などに役に立ちますよ。目次 npm updateについて npmをアップデートする npmを使用してパッケージをアップデートする npmでグローバルのパッケージを更新する npmで複数パッケージを一括でアップデートする田島悠介今回はnpm updateコマンドを使ってみようか。大石ゆかり田島メンター！npm updateは何をするんですか〜？田島悠介 npm updateはnpmやそのパッケージをアップデートするときに使うコマンドだよ。基本の使い方を見てみよう。大石ゆかり分かりました！ npm updateについて npm updateとはnpmパッケージをアップデート、つまり更新するコマンドです。 npmとは、Node.jsで使用されているパッケージ管理システムです。 npmについて詳しく書いた記事も参考にしてみてください。 Node.jsはコマンドラインで操作するのが一般的です。そのため、パッケージの更新もupdateを使用します。実務上でも開発環境を最新状態に保つためにupdateを使用します。 [PR] プログラミングで挫折しない学習方法を動画で公開中npmをアップデートする npm自体をアップデートするコマンドは次のとおりです。 npm update npm npmを使用してパッケージをアップデートする npmコマンドを使用することでパッケージをアップデートすることができます。 npmのインストール方法についての記事も参考にしてみてください。コマンド npm update パッケージ名 npm up パッケージ名 npm update パッケージ名@バージョン npm upgrade パッケージ名解説 1行目のnpm updateは更新を意味するnpmコマンドです。これにより、npmのパッケージをアップデートすることが可能です。具体的には、パッケージ名の部分にアップデートするパッケージ名を記載することでアップデートが可能です。 2行目のnpm upはupdateコマンドの省略形です。 3行目のnpm update パッケージ名@バージョンでは、バージョンで指定したバージョンのパッケージのアップデートが可能です。なぜ、最新版にアップデートせず特定のバージョンにアップデートするかというと、依存性とチーム開発の問題があります。依存性とは、利用しているパッケージがほかのパッケージの特定バージョンを前提に動作していることがあるということです。つまり、いたずらに最新版に更新してしまうと、それが原因で動作しなくなる事があるため、チーム開発では動作しているバージョン同士の依存性を考慮して、バージョンを指定してパッケージをインストール、アップデートします。 4行目のnpm upgradeはnpm updateコマンドと同じようにnpmパッケージを更新することができます。 npm up のような省略形のほうが記載が少ないため良さそうにも見えます。また、npm upgradeのほうがかっこいいと感じるかもしれません。ただ、一般的にはupdateを使用します。 1人で開発することもあれば、チームで開発することもあるため、使用するコマンドはよく使われるupdateを使うようにするほうが良いかもしれません。田島悠介 npm本体とパッケージ、それぞれをアップデートするときの基本の書き方だね。大石ゆかりパッケージの場合は「パッケージ名」の部分に、アップデートしたいパッケージの名前を入れたらいいんですね。田島悠介次にオプションを付けた場合、複数インストールする場合の例を見てみよう。 npmでグローバルのパッケージを更新するグローバルとは使用しているコンピュータのどこからでも使用できるディレクトリ（ファイル）です。コマンド npm update -g パッケージ名解説 -を付けたコマンドがオプションです。 -gと記載することでグローバルを意味します。グローバルにインストールされたパッケージはこのコンピュータのどこからでも使用できます。つまり、このコマンドで、このコンピュータのどこからでも利用できていたパッケージをアップデートすることができます。 -gを指定しない場合は、現在操作をしているディレクトリ（ファイル）内のパッケージのみアップデートします。 npmで複数パッケージを一括でアップデートする複数パッケージを一括でアップデートすることも可能です。コマンド npm update パッケージ名パッケージ名解説パッケージ名を羅列することで、複数パッケージを一括でアップデートできます。今回の更新方法のほかにも、npmパッケージを更新する方法としては、npm-check-updatesを使用して依存関係にあるパッケージを調べながら一括更新する方法もあります。今回は、npmのupdateについて解説しました。パッケージをアップデートする際に、今回説明した手順を参考にしてみてください。 Node.jsの学習サイトもまとめているので、合わせて参考にしてみてください。田島悠介グローバルのパッケージを更新する方法、パッケージをまとめて更新する方法を紹介したよ。大石ゆかりなるほど、npm-check-updatesは特に便利そうですね。田島悠介 npm updateはnpm installなどと同じように、頻繁に使用するコマンドなのでよく把握しておこう。大石ゆかりそうですね、忘れないようにしたいです。ありがとうございました！執筆してくれたメンター中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 Node.jsを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのNode.jsコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、Node.jsを使ったWebアプリケーション開発を完全オンラインでしっかり習得できます。

Node.js

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

今すぐ実践できる！エディタAtomの使い方【初心者向け】

Atomとは

Atomの使い方