Emacs で Web サービスを開発して8ヶ月が経ちました

Slide for m3 tech talk

Transcript

1. Emacs Ͱ Web αʔϏεΛ։ൃͯ͠ 8ϲ݄͕ܦͪ·ͨ͠ @blue_1617
2. Who Am I ‣ VTuber ͱ Emacs ޷͖ͷ׽ ‣ ࣾձਓ 8ϲ݄໨ ͷεʔύʔΤϯδχΞ blue (@blue_1617) ‣ ࠷ۙͷ Emacs ʹؔ͢Δ։ൃ https://github.com/blue0513
3. ͸͡Ίʹ JavaScriptɺRuby on Rails ౳Ͱߏ੒͞ΕΔ Web αʔϏεͷ Emacs Ͱͷ։ൃख๏Λ঺հʂ Syntax Check Linter ิ׬ ఆٛࢀর Spell Check ຊεϥΠυ͸ΤϜεϦʔ Advent Calendar Day 16 ͷهࣄΛݩʹ͍ͯ͠·͢ɻ https://www.m3tech.blog/entry/emacs-web-service
4. ڞ௨ઃఆɿิ׬ http://company-mode.github.io/ company.el ͍Θͣͱ͠ΕͨEmacsͷΠϯςϦηϯε༻ package ͷେޚॴͰ͢ɻ 3rd party ੡ͷ package ։ൃ΋੝ΜͰɺLSPʢLanguage Server ProtocolʣͳͲ΁ͷରԠ΋ɻ ࣗಈิ׬ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ׬&ݕࡧΛ௒ڧԽ͢Δ
5. ڞ௨ઃఆɿݕࡧ https://github.com/abo-abo/swiper ivy.el & counsel.el & swiper.el ͍ΘΏΔΠϯΫϦϝϯλϧαʔνΛࢧԉͯ͘͠ΕΔ package Ͱ͢ɻ ىಈՄೳͳίϚϯυΛ ΠϯΫϦϝϯλϧʹݕࡧͰ͖Δ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ׬&ݕࡧΛ௒ڧԽ͢Δ
6. ڞ௨ઃఆɿఆٛࢀর https://github.com/jacktasia/dumb-jump dumb-jump.el ProfileStat ͷఆٛʹඈ΂Δ ͲͷݴޠͰ΋ ͍͍ײ͡ʹ ఆٛՕॴ·ͰίϚϯυ̍ͭͰͷҠಈΛՄೳʹ͢Δ package Ͱ͢ɻ ։ൃޮ཰͕30%Ҏ্͸޲্͢Δͱࢥ͍·͢ɻ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ׬&ݕࡧΛ௒ڧԽ͢Δ
7. ڞ௨ઃఆɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ֤ݴޠ͝ͱʹඪ४૷උ͞Εͨʢ·ͨ͸ 3rd party ͕։ൃͨ͠ʣSyntax Check Program ΍ Linter ͱ ࿈ܞͯ͠ϦΞϧλΠϜͰ Warning ΍ Error Λు͍ͯ͘Ε·͢ɻ
8. ڞ௨ઃఆɿSpell Check http://www-sop.inria.fr/members/Manuel.Serrano/flyspell/flyspell.html flyspell.el flycheck ͱಉ༷ʹϦΞϧλΠϜͰεϖϧϛεΛగਖ਼ͯ͘͠ΕΔ༗ೳ package Ͱ͢ɻ ϢʔβఆٛͷࣙॻϑΝΠϧͷ࡞੒΋ՄೳͳͷͰɺϓϩμΫτಛ༗ͷ୯ޠͰ΋໰୊ͳ͘νΣοΫՄೳɻ
9. ڞ௨ઃఆɿVisualize https://github.com/nonsequitur/git-gutter-plus git-gutter-plus.el Git ؅ཧԼͷ project ͰมߋՕॴΛ fringe Ͱදࣔͯ͘͠ΕΔ༏Ε΋ͷɻ
10. ڞ௨ઃఆɿVisualize https://github.com/ankurdave/color-identifiers-mode colo-identifiers-mode.el ม਺͝ͱʹ৭෼͚͠දࣔͯ͘͠ΕΔͷͰɺಛఆม਺ͷ࢖༻ՕॴͳͲ͕Ұ໨ͰΘ͔Γ·͢ɻ ಉҰม਺͸ಉ৭ʹͳΔ
11. ڞ௨ઃఆɿVisualize https://github.com/Fanael/rainbow-delimiters rainbow-delimiters.el ରԠ͢ΔΧοίΛͦͷείʔϓ͝ͱʹ৭෼͚ͯ͘͠Ε·͢ɻ ෆ޾ʹ΋Χοί͕ଟ͘ͳͬͯ͠·ͬͨͱ͖ͳͲʹศརɻ
12. JavaScriptɿMode https://github.com/fxbois/web-mode web-mode.el web-mode ͸ ଟ͘ͷ web template engineʢERB, React/JSX, Angularjs, Go Template etcʣʹ ରԠ͍ͯ͠Δ major mode ɻReact ΍ AngularJS ͕ࠞࡏ͍ͯͯ͠΋͍͍ײ͡ʹऔΓѻͬͯ͘ΕΔɻ text-mode web-mode
13. JavaScriptɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ։ൃ͍ͯ͠ΔϓϩμΫτͰ͸ Linter ͱͯ͠ eslint ΛɻܕνΣοΫͱͯ͠ flowtype Λ ಋೖ͍ͯ͠ΔͷͰɺͦΕΒ΋ϦΞϧλΠϜʹνΣοΫ͠·͢ɻ
14. JavaScriptɿOthers https://gist.github.com/blue0513/f503c26bf5cb8a1b6fb6e75f1ec91557 eslint-auto.el ։͍͍ͯΔ buffer ʹରͯ͠ eslint --fix ʢLint Error ͷࣗಈमਖ਼ʣΛඇಉظͰ࣮ߦͯ͘͠Ε·͢ɻ flycheck ͰΤϥʔ͕ग़͍ͯΔ෦෼͕ ....... ʢΦϨϯδͷ෦෼ʣ
15. Ruby on RailsɿMode ruby-mode.el & rspec-mode.el & rinari.el ruby-mode ͸౰વͱͯ͠ɺrails ಛ༗ͷ Syntax Highlight ΍ Snippet Λޮ཰Α͘ར༻͍ͨ͠ͷͰɺ ͍͍ײ͡ͷ Minor Mode Λઃఆ͠·͢ɻ text-mode ruby-mode
16. Ruby on RailsɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ruby ͷ Syntax Checker & Linter ͩͬͨΒ rubocop Ұ୒Ͱ͢ͷͰɺͦΕΛ flycheck ͱ࿈ܞͤ͞Δɻ
17. Ruby on RailsɿOthers https://github.com/blue0513/rubocop-fix-file.el rubocop-fix-file.el eslint-auto.elͷ rubocop ൛Ͱ͢ɻඞཁʹۦΒΕͯ࡞Γ·ͨ͠ɻ flycheck ͰΤϥʔ͕ग़͍ͯΔ෦෼͕ ....... ʢΦϨϯδͷ෦෼ʣ
18. Ruby on RailsɿOthers https://github.com/blue0513/rspec-on-iterm.el rspec-on-iterm.el Rspec Λ࣮ߦ͢Δͱ͖ʹɺҰʑࢦఆ͢ΔϑΝΠϧ໊Λଧ࣮ͬͯߦ͢ΔߦΛॻ͍ͯ...... ͱ͢Δͷ͸໘౗ͳͷͰ࡞Γ·ͨ͠ɻ
19. Ruby on RailsɿOthers https://github.com/blue0513/spec-jump.el spec-jump.el Model ϑΝΠϧ͔Β Spec ϑΝΠϧΛ୳ͨ͠Γ.....ͱ͢Δͷ͸ετϨεͩͬͨͷͰ࡞Γ·ͨ͠ɻ
20. ࠷ޙʹ ‣ Emacs ͸ੌ͍ ‣ Emacs ͸ҭͯΒΕΔ ‣ جຊػೳΛؚΊͨѹ౗తΧελϚΠζੑ ‣ 3rd Party ੡ͷ package ͷॆ࣮͞ ‣ ඞཁͳ package Λඞཁͳ͚ͩ Install Ͱ͖Δ ‣ ࣗ෼Ͱಠࣗ package Λ։ൃͰ͖Δ Emacs ͸͍͍ͧ