{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"4991411f-1b25-5a1b-9739-fe69caf8f920","html":"

普段よく書く言語が、HTML, CSS, JavaScriptなどの場合、ライトウェイトなテキストエディタが非常に重宝します。
\n主観ですが、ここ近年の私の界隈での人気のエディタは、Sublime Text, Atom, VSCode[VisualStudioCode]と遷移してるように感じます。今はVSCodeで収まっているのかなという印象です。しかし、それでもやはりSpacemacsはいいと思います。この記事ではその魅力をご紹介したいと思います。

\n

\n \n \n \n \n \n \n \nSpacemacsとは

\n

Spacemacsとは、Emacs(GNU Emacs)というエディタの拡張機能セットです。
\nEmacsはLisp(Emacs Lisp)という言語でエディタ自体を自分で拡張することも、他の人が書いた拡張機能を自分のエディタに設定することもできます。
\nしかし、いざ設定してみると、うまく動かなかったり、時間がかかったり、使いづらいショートカットキーになったります。
\nそこで、みんなのベスト機能を選別して、さらに使いやすくチューンナップしてあげよう！といったのがSpacemacsになります。

\n

このエディタを使うメリットはたくさんあります。

\n

\n \n \n \n \n \n \n \nメリット

\n\n

\n \n \n \n \n \n \n \nデメリットは特殊なキーバインド？

\n

もちろんデメリットもあります。それは特殊なショートカットキーです。
\nCtrl + Y で貼り付け, Ctrl + W で切り取りといった具合です。一旦覚えると非常に早くコードがかけるのですが、他のソフトを触った時にご作動が多発します。
\n正直これはなれるしかないです、、、ただなれた先には爆速コーディングがまっています。

\n

\n \n \n \n \n \n \n \nインストールしてみよう

\n

\n \n \n \n \n \n \n \n前提条件

\n\n

\n \n \n \n \n \n \n \nEmacsのインストール

\n

まずはhomebrewからGUI版のEmacsをインストールします。すでにインストールされているなら不要です。

\n
brew install emacs-plus
\n

他のアプリケーションと同じように起動できるようにシンボリックリンクを作っておきましょう。

\n
ln -s /usr/local/opt/emacs-plus/Emacs.app /Applications/Emacs.app
\n

\n \n \n \n \n \n \n \nSpacemacsの設定のインストール

\n

Spacemacsのメインとなる設定を適用していきます。
\nもし、すでにemacsを起動していたら既存の設定を退避するか、削除してください。

\n
cd ~/\n\n# .emacs.d.bakというフォルダに既存の設定を退避します。\nmv .emacs.d .emacs.d.bak\n\n# 既存の設定を削除します。\nrm -rf .emacs.d
\n

次にSpacemacs本体を落とします。

\n
git clone https://github.com/syl20bnr/spacemacs ~/.emacs.d
\n

この状態でEmacsを起動するとSpacemacsとして起動できます。

\n

\n \n \n \n \n \n \n \n初期設定を変更してみよう

\n

一度Spacemacsを起動するとホームフォルダ以下に.spacemacsというファイルが生成されます。
\nこのファイルがSpacemacsの命です!

\n

ファイルを開いて中身を確認しましょう。\n場所がわからない人は、以下のコマンドをターミナルで実行すると開きます。

\n
open ~/.spacemacs
\n

このファイルの大事な箇所は以下です。

\n
(defun dotspacemacs/layers ()\n  (setq-default\n   dotspacemacs-configuration-layers\n   '(\n    ;; ここにSpacemacsでデフォルトで用意されているパッケージを追加します。\n    ;; 例えばjavascriptを追加すると\n    ;; https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Blang/javascript\n    ;; にかかれている設定が適用されます。\n    ;; 設定可能なパッケージ(レイヤーと呼びます)は\n    ;; https://github.com/syl20bnr/spacemacs/tree/master/layers\n    ;; で確認してください。\n    )\n    dotspacemacs-additional-packages\n    '(\n    ;; ここではelpa(パッケージレジストリ)に公開されているような他の外部パッケージを読み込ませたい場合はここに設定します。\n    )\n  )\n)\n\n(defun dotspacemacs/init ()\n  (setq-default\n   ;; ここでspacemacsで用意されている初期設定を変更できます。フォントサイズやテーマの設定など、基本的な部分です。\n  )\n)\n\n(defun dotspacemacs/user-config ()\n   ;; このエリアに自分だけの設定を書いていきます。\n   ;; 各モード時の設定変更やキー設定など、ここですべてカスタマイズしていきます。\n)
\n

実際に自分で好きなパッケージをインストールして自分好みにカスタマイズしていきましょう。
\nこの部分が一番の醍醐味で、このエディタの楽しいところです。

\n

参考までに私のインストールしているパッケージを載せておきます。
\n普段フロントエンドでマークアップやJS書いているタイプの人に向いています。\nここにかかれているパッケージの内容はすべて~/.emacs.d/layersに保存されているものです。
\nhttps://github.com/syl20bnr/spacemacs/tree/master/layers
\nを眺めて、自分に合うパッケージがあったらどんどん試してみましょう。
\n一つ一つが厳選されているので、自分に合うものがあれば絶対に役立つはずです。

\n
dotspacemacs-configuration-layers内のパッケージ
\n
csv\nphp\nyaml\ngit\ngithub\ncolors\nbetter-defaults\nhelm\nemacs-lisp\nmarkdown\norg\nosx\nhtml\njavascript\nreact\ntypescript\ncscope\n(gtags :variables gtags-enable-by-default t)\nspell-checking\nsyntax-checking\nemoji\ndash\nruby\nwakatime\npython\nipython-notebook\nhaskell\nshaders\ndocker\ncsharp\nimenu-list\nrust\nversion-control\nplantuml\n(shell :variables\n       shell-default-shell 'shell\n       shell-default-term-shell \"/usr/local/bin/zsh\"\n       shell-default-height 30\n       shell-default-position 'bottom)\n(auto-completion :variables\n                 auto-completion-enable-help-tooltip t\n                 auto-completion-complete-with-key-sequence-delay 0.2\n                 auto-completion-enable-snippets-in-popup t)
\n

Spacemacs以外のパッケージでは以下を導入しています。

\n
dotspacemacs-additional-packages内のパッケージ
\n
bind-key\nquickrun\nall-the-icons\nall-the-icons-dired\neditorconfig\nprocessing-mode\nscad-mode\nhelm-chrome\nvue-mode\nconfluence\ndotnet\nindium\nimport-js
\n

\n \n \n \n \n \n \n \nおすすめのキー練習方法

\n

とは言え、このエディタはまずはキーバインドが特殊すぎて毛嫌いする人もいるかと思います。
\n僕もこれで習得したのですが、まずは公式のチュートリアルをおすすめします。
\nあとは、ちょっとしたメモ書きからemacsなどで徐々に書いていき、業務では余裕があるときに導入していきましょう

\n

公式のチュートリアルはEmacsを起動したあとに、
\noptionキー(メターキーをcommandにしていたらcommandキー) + xをおして
\nhelp-with-tutorial-spec-languageを選択してください。
\n次にJapaneseを選択します。
\nすると日本語のEmacsチュートリアルが始まります。

\n

\n \n \n \n \n \n \n \n意外と大事なモチベーションあげる

\n

私はよく動画とかみて憧れて、こんな風になりたいという動機をバネに勉強したりします。\nバーチャルな世界観がかっこいいTRON: LegacyのワンシーンでEmacsが使われているのはご存知ですか？

\n

\n

00:42あたりの画面は完全にemacsですね。

\n

みなさんも、ぜひ自分ならではのEmacsの良さを見つけて楽しくコーディングをしていきましょう\"emoji-smile\"

","fields":{"slug":"/2019-07-06_人生のパートナーとなるテキストエディタspacemacs/"},"tableOfContents":"","frontmatter":{"date":"2019.07.06","title":"人生のパートナーとなるテキストエディタSpacemacs!","cover":"https://res.cloudinary.com/mwrote/image/upload/v1562429989/bauhausify/spacemacs.png","category":"Coding","excerpt":"近年VSCode[VisualStudioCode]というエディタが私の界隈では人気ですが、10年以上前から生存し、今もなお進化し続けるエディタSpacemacsがとてもおすすめなのでご紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"4991411f-1b25-5a1b-9739-fe69caf8f920","next":{"path":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/","title":"Webで簡単にコードで絵を描くp5.js","category":"Coding"},"prev":{"path":"/2019-07-10_UIデザインの原則デザインガイドライン/","title":"UIデザインの原則デザインガイドライン","category":"Design"},"relatedPosts":[]}}