エンジニアHubPowered by エン転職

若手Webエンジニアのための情報メディア

[保存版]Atomエディタ 便利なパッケージ一覧! 全23社のWebエンジニア・デザイナーがおすすめを紹介

Web開発で人気のAtomエディタ。便利なパッケージがたくさんありますが、必ずインストールしておきたいのは何でしょう? IT企業23社にアンケート調査を実施しました。一番人気だったのは……?

使い勝手の良さと汎用性の高さから、Webエンジニアやデザイナーの人気を集めているAtomエディタ。愛用している読者も多いのではないでしょうか。登場が2014年と比較的新しいエディタにもかかわらずシェアを急速に伸ばしており、人気の高さをうかがわせます。

Atomエディタを使う際に必ずインストールしておきたいのが、パッケージです。これはデザインテーマや、プログラミングの便利機能などをエディタに追加できるプラグインのようなもの。快適に効率よく開発を進めるには必要不可欠です。

しかし、Atomエディタのパッケージは、世の中に数えきれないほどあります。その中から、どれを使えばいいのでしょうか? そんな悩みを解決すべく、IT企業23社にアンケートを実施。各社トップのエンジニアやデザイナーがお勧めするパッケージを5つまで紹介してもらいました。ぜひ参考にしてください!

株式会社ウィルゲート

www.willgate.co.jp

PHPに関係するもので2つ、PHP関係なく3つを挙げました。

php-integrator

複数のパッケージによって構成されています。PHPプロジェクトの静的解析を実施し、オートコンプリートやジャンプ、リンターの機能を提供します。
オートコンプリートやジャンプを実施できるパッケージはほかにもありますが、このパッケージは静的解析を行い、より正確な動作をしてくれます。リンターにおいては、ほかのリンターと被らない「不明な関数、クラスではないか」「PHPdocがちゃんとか書かれているか」などを確認します。非常に便利なパッケージです。

aligner-php

PHPでよく使う=>などを揃えてくれるパッケージです。揃えたほうが見え方が良いのだけど、揃えるにはなかなか苦労が……、というときにとても心強いです。

toggler

例えばtruefalse===!==など、単語や記号をトグルすることができます。たかだか数文字ですし、使う機会も多くないのでパッと書き換えればよいのですが、あると便利なものです。

hydrogen

Pythonを使っていると便利なJupyter Notebookを、Atom上でそのまま利用できます。Jupyter Notebookと同様の出力結果やグラフの表示に加えて、Kernelを登録すればPython以外の言語でも利用できるようになります。
コードを選択して気軽に実行できる「script」というパッケージもありますが、こちらのパッケージでは、よりインタラクティブに実行・結果確認ができるようになり、非常に便利です。

activate-power-mode

プログラミングはパワー。
プログラミング時のコードの見やすさをちょっと犠牲に、爽快感が大幅アップします。無機質なプログラミングに色がつき、キーを打つ行為が楽しくなっていきます。

株式会社ウエディングパーク

www.weddingpark.co.jp

特に細かな設定をしなくても使いやすくなるパッケージを選ぶようにしています。

atom-beautify

多彩なファイル形式に対応しており、ソースコードを綺麗にしてくれます。

platformio-ide-terminal

Macのターミナルを開かなくても、エディタ内でターミナルが使えて、かつ邪魔になりません。

file-icons

サイドバーからファイルを選択する際に、少し見つけやすくなります。

ウォンテッドリー株式会社

site.wantedly.com

atom-beautify

コードを整形するのに利用。

linter

各言語に対して、初歩的なミスを減らすためにlinterを入れている。

language-*

各言語やミドルウェアのサポートしてくれる。例えば、language-reviewは、Re:VIEWの校正機能。

show-ideographic-space

Markdownを書く際に、全角スペースがハイライトされるので、うっかり追加した場合に気づきやすい。

atom-material-ui

プラグインではないけど、使ってるテーマ。

株式会社エウレカ

eure.jp

  • 主な運営サービス:Pairs
  • 回答者:木村寛(Principal Engineer)

エウレカで、Pairsのグローバル版iOSアプリ開発を担当している木村です。
普段はXcodeでiOSアプリを開発していますが、リファクタリングや、スクリプトを書くときにはAtomを使用しています。パッケージは、細かいものを含めるといろいろインストールしていますが、中でもよく使用しているものを紹介します。

<エディタのUIをキレイにするパッケージ>

Atomの魅力のひとつとして、Electronで作られているためWebの技術を使ったUIのカスタマイズが行いやすいことが挙げられます。パッケージ開発者でも、Webのフロントエンドに経験があれば容易にカスタムUIを作れるでしょう。このあたりが、デザイナーにも人気が出ている要因だと考えています。

file-icons

ファイルの拡張子に応じて、ファイルのアイコンを変更してくれるパッケージです。
ファイルがたくさん存在するディレクトリで、見分けがつきやすくなります。カラフルに作られているのでエディタが華やかになるのも良いですね! きっとデザイナーさんも喜ぶことでしょう!

<開発を効率化するパッケージ>

vim-mode-plus

Atom上でVimキーバインドを実現するパッケージです。Vimのキーバインドは便利で、リファクタリングの際にとても役に立ちます。
Atom公式パッケージにあったvim-modeはdeprecated(非推奨)になっており、このvim-mode-plusを使用するように案内されていました。サードパーティパッケージがデファクトスタンダードになるとは、すごい!

document-outline

Markdownのアウトラインをエディタの右側に表示するパッケージです。ドキュメントを書く際に重宝しています。
現在編集している場所がアウトライン上でハイライトされたり、アウトラインをクリックするとその場所までスクロールすることができます。大きなドキュメントを編集するときに、迷子にならずに済みますよ! 表示する階層の深さは、パッケージの設定で変更可能です。

script

開いているファイルやバッファ上で、指定した行数を実行できるパッケージです。スクリプトを簡単に実行したいときに、とてもお世話になっています。Vimでいうならquickrunというプラグインが近いと思います。
実行環境がファイルタイプに応じて自動的に決定されるので、ファイルを保存しなくても、ファイルタイプさえ決めてしまえば即実行できます(AtomのファイルタイプはShift+Ctrl+Lで変更できます!)。その場で簡単に実行するほか、実行環境の設定や、引数を指定して実行する設定も用意されているので、実際にスクリプトが実行される状況を想定しながら書けるのもポイントです。nvmやrbenvを使用している場合にパスがうまく通らない! というときにも有効です。

git-time-machine

Git管理されているファイルの差分を表示するパッケージです。Xcodeでは対応してないgit-worktreeでも問題なく表示できるので、前の実装と比較したいときにとても助けられているパッケージです。
起動すると、画面の下部分に日付から選択できるUIが表示されるため、おおまかな日付にすぐに移動できます。「具体的な日付はわからないけど、この辺りだった気がする……」というときに、クリックしながら過去にさかのぼれるのがとても楽です(コンフリクトの解消はvim-diff派です)

Atomのコミュニティは今も活発で、多くパッケージが開発されており、最近ではGitHubとの連携も強化されるなど、GitHub製であることを活かしたエディタとなりつつあります。まだまだ改善されるべきポイントも残っていますが、今後の進化に期待できるエディタなのではないでしょうか。

株式会社Emotion Tech

www.emotion-tech.co.jp

  • 主な運営サービス:Emotion Tech
  • 回答者:子安輝

まず、私のAtomの用途ですが、開発のコーディングでバリバリ使っているわけではなく(IDE派なので……)、作業ログや、ドキュメントのドラフトなど、ちょっとしたメモを書くのに使っています。ですのでプロジェクト管理とかコンソール連携するような大きなパッケージではなく、便利ツールみたいなものを入れています。

atom-beautify

テキスト整形のためのパッケージです。改行やインデントがまったくないコードも、きれいに整形してくれます。例えば圧縮されたJSONを読み解くときなど(よくありますよね?w)に便利です。

regex-railroad-diagram

正規表現を構文図にして見せてくれるパッケージです。少し複雑な正規表現でも、視覚的に捉えられるので断然分かりやすくなります。正規表現を読み書きするときには必須のパッケージだと思います。

language-plantuml & plantuml-viewer

2つのパッケージをセットで使っています。UMLをテキストで記述できるPlantUMLという書式があるのですが、そのシンタックスハイライトとプレビューができるようになります。テキストで記述しておけばバージョン管理もしやすいですし、PlantUMLに対応したドキュメンテーションツールも増えていますので、ぜひ試してみてほしいです。ただし、plantuml-viewerはGraphvizに依存しているので、別途インストールする必要があります。

color-picker

名前そのまま、カラーピッカーです。新規で色を選択するのにも重宝しますが、指定されている色から少しだけ明度や色相を変更したいときに、ほかのアプリケーションを立ち上げる必要がないのでとても便利です。RGB(A)やHSL(A)など5つの書式に対応していて、それらを相互に変換できるのも嬉しいですね。

line-jumper

これも地味な機能なのですが、単純にカーソルを10行ずつジャンプできるようになります。AtomはもともとCtrl+Gで任意の行に移動することができますが、「ちょっとだけ移動したい! でも、1行ずつの移動はだるい!」というニーズに答えるステキなパッケージです。

エン・ジャパン株式会社

corp.en-japan.com

  • 主な運営サービス:エン転職engage
  • 回答者:たてぽん(プログラマ)

file-icons

直感的にファイルの種類が分かるのが便利です。実用性よりも見た目が鮮やかになる所が○。

highlight-selected

地味に便利です。選択した文字列と同じものがあればハイライトしてくれます。

minimap

単体だとファイルの構造がざっくりと把握できる程度ですが、コレに付随するパッケージに便利なものがたくさんあります。

minimap-highlight-selected

前述のハイライトをminimapに表示してくれます。ハイライト自体の問題か、こちらのminimap絡みの問題か、巨大なCSVの頻出単語をセレクトするとAtomが固まりました……。そういった特殊なケースを除けば便利です。

株式会社カカクコム

corporate.kakaku.com

  • 主な運営サービス:価格.com食べログキナリノyoyaQ.comスマイティなど
  • 回答者:田中龍一(株式会社カカクコム システム本部システム開発1部、価格.comの通信系カテゴリに関するシステム設計・開発、部内自動化推進を担当

local-history

ローカルに履歴を自動的に取ってくれるため、いざというときに簡単にファイルを以前の状態に戻せる安心感がある。

term3

Atomタブでターミナル操作ができる。「コードを見ながらコマンドを打ちたい」など、ウインドウを切り替えるのが面倒なときにお勧め。

docblockr

docコメントを補完してくれる。クラスやメソッドのドキュメントコメントを書くとき活躍。

useful-context-menu

今開いているファイルに対して、コンテキストメニューからファイルのフルパスを取得したり、エクスプローラを開いたりできる。

show-ideographic-space

Atom上で全角スペースをわかりやすく表示できるため、テキストやHTMLで全角スペースが入ってくる場合の確認などで便利。

株式会社クラウドワークス

crowdworks.co.jp

  • 主な運営サービス:CrowdWorks
  • 回答者:飯田意己(プロダクトDiv.)

rails-transporter

Railsのcontroller-view間、model-spec間などの面倒なファイル移動がショートカットで行えるようになるパッケージです。大規模なRailsプロダクトだと便利です。

rails-i18n-autocomplete

RailsのI18nのキー名のサジェスト・補完を行ってくれるパッケージです。translation missingエラーに気付きやすくなります。

rspec

RailsのテストフレームワークであるRspecを、エディタ上から実行できるようにするパッケージです。その場でテスト実行できるため、TDD向けです。

goto-definition

メソッドの呼び出し先から定義にジャンプできるようにするパッケージです。どこで定義されているメソッドなのか探すのが大変な場合に便利です。

activate-power-mode

キータイプ数に応じてゲームのようなコンボ数を表示するパッケージです。おふざけパッケージですが、モブプロなどで使用すると盛り上がります。

コネヒト株式会社

connehito.com

  • 主な運営サービス:ママリ
  • 回答者:安達稜(エンジニア)

pigments

カラーコードに背景色がつくので、エディタ上でどんな色なのか確認ができます。

docblockr

/**まで打ってEnterを押すとブロックを生成してくれたり、@paramや@returnなどを補完してくれます。

project-manager

複数のPJやリポジトリを分けて、簡単に切り替えられるようになります。

file-icons

拡張子やファイル、ディレクトリ名から自動でアイコンをつけてくれます。ぱっと見でも分かりやすくなります。

auto-update-packages

インストール済みのパッケージを自動でアップデートしてくれます。

株式会社ジモティー

jmty.co.jp

atom-clock

コーディング中でも時計が欲しかった。

linterとその関連プラグインたち

成果物の整形を助けてくれる。

regex-railroad-diagram

ちょっと難解な正規表現文字列を可視化して、どのように処理されるのか理解しやすい。

tablr

表計算ソフトを開くまでもないときに、すぐに確認できて便利。

株式会社スタディスト

www.studist.jp

  • 主な運営サービス:Teachme Biz
  • 回答者:坂野元紀(エンジニア、社員番号10番。役職はないが、ほぼ創業メンバーばかりのところに飛び込んだ1人目の社員。入社後すぐに新機能の開発を任され、連携企業との調整も含めてやり遂げた非常に優秀な人材です。

pigments

カラーコードをエディタ上でハイライトしてくれるので、イメージしやすいし、変なミスをしなくて済むので入れています。

date

Atomにはデフォルトで現在の日時をいれるショートカットキーがないですが、メモなど取る際には日時を入れられると便利なので。

show-ideographic-space

Atomのデフォルト設定では全角スペースを可視化できないので、半角スペースと区別するために入れています。

goto-definition

Atomにはデフォルトで関数の定義場所へのジャンプ機能がないので。

split-diff

Atomにはデフォルトでファイル差分チェックがないため入れています。

共通して、Atomアップデート時など必要があればそれぞれちゃんとメンテナンスされていそうなので使っています。

株式会社Speee

www.speee.jp

linter-eslint

ESLintはCIでも走らせていますが、書きながら確認できるほうが圧倒的に速いので重宝しています。

platformio-ide-terminal

作業中はコードを書いているウィンドウから出たくないため使用しています。

file-icons

ファイルタイプを、ファイル名でなくアイコンの色・形で判別できるのが便利です(MacBook Proを使用しているのですが、最高解像度で使っていると文字が細かくて読むのが大変なので)

株式会社スペースマーケット

spacemarket.com

ruby-block

ifやendにカーソルが重なったときに、対応するifやendが薄くハイライトされる。

autocomplete-ruby

自動補完されるようになる。

linter-rubocop

文法をチェックしてくれる。

rubocop-auto-correct

コードを整形してくれる。

atom-runner

Atom上でスクリプトを実行し、結果を表示してくれる。

この5つのパッケージは、特にRubyエンジニアにオススメのものです。理由としては、関連のパッケージを導入することで「キレイなRubyのコードを素早く書ける環境」を作ることができるからです。

ruby-blockで見やすくなったAtomエディタで、autocomplete-rubyを活用しながらコードを書いていき、文法ミスなどはlinter-rubocopとrubocop-auto-correctで検知・自動修正し、出来上がったRubyファイルをatom-runnerによってサクッと実行確認するという、開発の一連の流れに必要な環境を整えることができます。

株式会社SmartHR

smarthr.co.jp

  • 主な運営サービス:SmartHR
  • 回答者:芹澤雅人(VPoE)

file-icons

Atomを使っているとタブを多用すると思いますが、たくさんタブを開いていると目的のファイルを見つけるのに苦労することがあります。
File Iconsを、入れるとタブとツリーのファイル名の横に拡張子に応じたアイコンを表示してくれるので、目視によるファイルの検索性が向上して使いやすくなります。拡張子によって色分けされるのも嬉しいポイントです。

pigments

アプリケーションを開発していると、カラーコードを扱うことが多いと思います。ただし、特殊な訓練を積まない限り、コードを見ただけではどんな色なのか想像がつかず、少なからず不安な気持ちを抱きながらのコーディングになります。
Pigmentsを入れると、カラーコードの文字列にいい具合にその色を付けてくれるので、安心してコーディングができます。

minimap

某テキストエディタでおなじみのアレです。ファイルの全体像をつかむのに役立ちますが、僕はもっぱら「大きなスクロールバー」として使っています。

株式会社Zehitomo

www.zehitomo.com

  • 主な運営サービス:Zehitomo
  • 回答者:Duong Thanh Dat(デベロッパー)

nuclide

An open IDE for web and native mobile development, by Facebook.

monokai

Theme.

editorconfig

Maintain code style consistency.

react

Syntax highlighter.

2014年にAtomを使っていたときには、ほかのエディタ、例えばSublime Text 3やCodaと比較すると、やや遅かったイメージがありますが、最近のAtomはスピードも速く、また、ほかの開発者とも簡単に共有できるようになった気がします。

Atomがお勧めできる理由は、無料、オープンソースであること、そしてコミュニティを助けようとするカルチャーがあることかなと思います。また、クロスプラットフォームのデスクトップアプリケーションフレームワークであるElectronに基づいているため、HTML・CSS・JavaScriptに対応しているところもポイントです。シンタックスハイライト、コードコンプリート、Gitなどのツールやビルトイン機能も充実しているので、UI観点から考えても使いやすいです。

Atomは、誰もが使いやすいエディタの一つだと思います。エンジニアの方、特にジュニアエンジニアには、ぜひ活用していただきたいです。

株式会社ソニックガーデン

www.sonicgarden.jp

  • 主な運営サービス:Remotty
  • 回答者:aki77 & mat_aki(CTO)

以下で紹介するパッケージは、どれも自分自身の不便を解消することが目的で作ったものなので、自信をもってオススメできます!

clipboard-plus

クリップボードの履歴を画面上で絞り込みながらペーストできます。Atomの公式ブログでも紹介されています。

emacs-plus

EmacsからAtomに乗り換えたい人には必須! 自分自身がAtomに乗り換えるために作りました。

expand-region

選択範囲をインタラクティブに広げてくれます。

autocomplete-rails-partial

Railsのパーシャルビュー名を自動補完してくれます。Rails用便利パッケージを、ほかにもいくつか作っています。
i18nやpartial view、schema.rb、routes.rbと華麗に連携するAtomパッケージを作った - Qiita

sequential-command

Emacsのsequential-command.elをAtomに移植しました。例えば、Ctrl+Aを繰り返し押した場合には、以下の動作になります。
まず「行頭に飛ぶ」→次に「ファイル先頭に飛ぶ」→次に「元の場所に戻る」

ピクシブ株式会社

www.pixiv.co.jp

お勧めのAtomパッケージということで、社内Slackでアンケートを実施し、Atomエディタを使っているエンジニアにapm ls -iの結果を貼ってもらい、インストール数順に集計しました。そのため、単純に使っているユーザー数が多いパッケージに偏っていますが、ご容赦ください。
なお、「language-*」や「linter-*」といった言語ごとのパッケージは除いています。

linter

ほとんどのlinterのベースとなっているパッケージです。Atomでlinterを使っている方はほとんどインストールしていると思います。
今回の集まったデータでは、linter-eslint、linter-ruby、linter-stylint、linter-rubocop、linter-sass-lintあたりがよく使われていました。ちなみに自分は、Goを書くのにAtomを使っています。

pigments

CSSやHTMLで指定している色をハイライトしてくれます。CSSだけでなくLESSやSass、StylusといったCSSプリプロセッサにも対応しているため、変数で指定されている色も、わかりやすく視覚的に判断できます。

file-icons

ファイルの種類別にアイコンを変えてくれるパッケージです。ポップなカラーで表示してくれるので、ツリービューもにぎやかになります。

atom-beautify

各種フォーマッターを動かしてくれるパッケージです。各種プログラミング言語のフォーマッターに対応しています。

merge-conflicts

Atom上でGitのコンフリクトをマージするためのツールです。コンフリクト箇所にジャンプしたり、差分をわかりやすく表示してくれます。

株式会社ビズリーチ

www.bizreach.co.jp

AtomはMarkdown編集環境として便利に使用しているため、Markdown編集用のプラグインを選んでみました。ブログや雑誌記事、書籍の原稿などもAtomでMarkdownで書いています。

document-outline

サイドバーにMarkdownの見出しをツリー状に表示してくれるプラグインで、Markdownで長文を記述する際に文章の構造を把握するのに便利です。以前はリフレッシュが重かったのですが、高速化されてからは長文でも使えるようになりました。

markdown-writer

Markdownの編集時に便利な、ちょっとした機能を提供してくれるプラグインです。例えば、箇条書きの末尾で改行すると行頭に自動で-を挿入してくれたり、そこでTabキーを押して箇条書きをネストさせたりできます。

markdown-scroll-sync

Markdownのプレビューを、エディタの表示位置にあわせて自動的にスクロールしてくれるものです。Markdownに慣れてくるとプレビューはあまり使わなかったりするので、使用頻度はさほど高くありませんが……。逆に、プレビューをスクロールするとエディタも自動でスクロールしてくれるプラグインが欲しいな、と思うこともあります。

atom-csv-markdown

CSVを範囲選択して、Markdownの表に変換するものです。自作のプラグインなのですが、Markdownの表の記法はけっこう面倒なので、CSVで記述してサクッと変換できるのはなかなか便利です。

markdown-table-editor

Markdownの表の編集を強力にサポートしてくれるプラグインです。表を編集すると自動的にセル幅を調節してくれたり、タブキーでセルを移動できたり、とても便利なプラグインです。大きな表を編集するなどで敢えてフォーマットしたくないときには、適さない場合もあります。

株式会社マネーフォワード

corp.moneyforward.com

linter

その書き方のどこが危険なのか、どうするのが美しいとされているのか、それがなぜなのか、などの説明があるリンクに飛べるのが良い。

goto-definition

ジャンプ機能がないと、何をするにしてもいずれ辛くなる。

platformio-ide-terminal

ターミナルをいじるたびにウィンドウや画面を切り替える必要がなくなる。guardやdaemonを動かしておくと、落ちた瞬間・直った瞬間がわかりやすくていいかも。

show-ideographic-space

全角スペースを信じられないくらい目立たせることが可能。

file-icons

なんか可愛いから(特に.goファイル)。あとはファイルツリーも見やすくなるかも。

株式会社Misoca

info.misoca.jp

個別の理由は省略しますが、以下に挙げるものはどれも、私にとって「なるべくAtom内で完結させたい」「キーボードで操作したい」「軽量である」ということを実現するために必要なパッケージです。

メドピア株式会社

medpeer.co.jp

linter-rubocop

プロジェクトでrubocopを導入しているなら、ぜひ入れたほうが良いパッケージです。コマンドを打ってチェックする手間が省けます。eslintやscss-lintなども導入しているなら、linter-eslintやlinter-scss-lintを入れるのもお勧めです。

rails-snippets

Railsの記述を、いい感じに補完してくれます。

rails-open-rspec

現在開いているファイルに対応するspecファイルを、ショートカットキーで開いてくれます。別ペインで開いてくれるのが地味にいいです。

browser-plus

Atom内でブラウザを開けます。保存すると変更を反映してくれるライブプレビュー機能があるので、フロントエンド作業の際にはよく使います。

open-recent

最近開いたファイル一覧をメニューに追加してくれます。いつの間にかファイルを開き過ぎて「さっき開いたファイルどこだっけ?」となると使います。

ラクスル株式会社

corp.raksul.com

linter-rubocop

linter-rubocopと、別途RuboCopのgemをインストールして設定しておくことで、コードを書きながらでもRubyのコード規約に沿うように指摘してくれます。その場で間違いに気付けるので、開発効率がアップしました。

Retty株式会社

corp.retty.me

  • 主な運営サービス:Retty
  • 回答者:渡辺映介(UXエンジニア)

project-manager

プロジェクトを簡単にスイッチングできて便利。

highlight-column

列をハイライトしてくれて、自分の記述している位置はもちろん、インデントのズレや、スペースが全角なのか半角なのかも把握しやすく、作業中に間違いに気づきやすい。

autocomplete-paths

ファイルパスを補完してくれるパッケージ。
担当している業務では、素早く複数のプロジェクトや施策に対応する必要があり、コーディングの癖で誤りやすい部分などを補完してくれたり、間違いに気づけたり、ミスを少なくしてくれる。自分用にエディタを最適化させていく工程も楽しい。

トップエンジニアの意見を参考に、快適な開発環境を

さまざまなパッケージをインストールするほど、Atomエディタは便利になっていきます。各社のトップエンジニアが挙げたパッケージの中からお気に入りのものを見つけ、あなたの開発環境をより快適にしていきましょう。

付録 - よく使われているパッケージ一覧

複数の企業で挙げられたパッケージを一覧表にまとめました。参考にしてください。

パッケージ
8 file-icons
4 atom-beautify
4 goto-definition
4 linter
4 pigments
4 platformio-ide-terminal
4 show-ideographic-space
3 linter-rubocop
2 activate-power-mode
2 docblockr
2 document-outline
2 minimap
2 project-manager
2 regex-railroad-diagram
2 vim-mode-plus

関連記事

employment.en-japan.com

編集:中薗昴(サムライト)