Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Emacs で Web サービスを開発して8ヶ月が経ちました
Search
Taiju Aoki
December 14, 2018
Programming
1
330
Emacs で Web サービスを開発して8ヶ月が経ちました
Slide for m3 tech talk
Taiju Aoki
December 14, 2018
Tweet
Share
More Decks by Taiju Aoki
See All by Taiju Aoki
本番運用中 Oracle を破壊してしまった話 ~ 破壊と創世 ~ / Oracle Destruction and Creation
blue0513
0
3k
オンプレ to オンプレした話/on-premises2on-premises
blue0513
0
3.1k
GitもCIもテストもないプロジェクトでデプロイを自動化するまでの道 / rebuild of DevOps
blue0513
0
3.3k
Git & GitLab & コードレビューって? / about Git, GitLab, CodeReview
blue0513
0
240
ElectronでSlackをさらに便利にしちゃう / Slack with Electron
blue0513
3
860
GitHub の README をいい感じにする / Cool Readme
blue0513
3
1.7k
Emacs × Sound やってみた / Emacs with Sound
blue0513
1
1k
Slack を TweetDeck にしてみた件 / slackdeck-proto
blue0513
0
3k
知ってるとお得な iTerm2 と zsh/bash の小技
blue0513
3
850
Other Decks in Programming
See All in Programming
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
120
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
110
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
私はどうやって技術力を上げたのか
yusukebe
43
18k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
530
Le côté obscur des IA génératives
pascallemerrer
0
140
チームの境界をブチ抜いていけ
tokai235
0
160
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
810
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
380
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Making Projects Easy
brettharned
119
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Applications with DynamoDB
mza
96
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
It's Worth the Effort
3n
187
28k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
190
11k
For a Future-Friendly Web
brad_frost
180
9.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
Emacs Ͱ Web αʔϏεΛ։ൃͯ͠ 8ϲ݄͕ܦͪ·ͨ͠ @blue_1617
Who Am I ‣ VTuber ͱ Emacs ͖ͷ ‣ ࣾձਓ
8ϲ݄ ͷεʔύʔΤϯδχΞ blue (@blue_1617) ‣ ࠷ۙͷ Emacs ʹؔ͢Δ։ൃ https://github.com/blue0513
͡Ίʹ JavaScriptɺRuby on Rails Ͱߏ͞ΕΔ Web αʔϏεͷ Emacs Ͱͷ։ൃख๏Λհʂ Syntax
Check Linter ิ ఆٛࢀর Spell Check ຊεϥΠυΤϜεϦʔ Advent Calendar Day 16 ͷهࣄΛݩʹ͍ͯ͠·͢ɻ https://www.m3tech.blog/entry/emacs-web-service
ڞ௨ઃఆɿิ http://company-mode.github.io/ company.el ͍Θͣͱ͠ΕͨEmacsͷΠϯςϦηϯε༻ package ͷେޚॴͰ͢ɻ 3rd party ͷ package
։ൃΜͰɺLSPʢLanguage Server ProtocolʣͳͲͷରԠɻ ࣗಈิ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ&ݕࡧΛڧԽ͢Δ
ڞ௨ઃఆɿݕࡧ https://github.com/abo-abo/swiper ivy.el & counsel.el & swiper.el ͍ΘΏΔΠϯΫϦϝϯλϧαʔνΛࢧԉͯ͘͠ΕΔ package Ͱ͢ɻ
ىಈՄೳͳίϚϯυΛ ΠϯΫϦϝϯλϧʹݕࡧͰ͖Δ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ&ݕࡧΛڧԽ͢Δ
ڞ௨ઃఆɿఆٛࢀর https://github.com/jacktasia/dumb-jump dumb-jump.el ProfileStat ͷఆٛʹඈΔ ͲͷݴޠͰ ͍͍ײ͡ʹ ఆٛՕॴ·ͰίϚϯυ̍ͭͰͷҠಈΛՄೳʹ͢Δ package Ͱ͢ɻ
։ൃޮ͕30%Ҏ্্͢Δͱࢥ͍·͢ɻ https://qiita.com/blue0513/items/c0dc35a880170997c3f5 cf. Emacsͷิ&ݕࡧΛڧԽ͢Δ
ڞ௨ઃఆɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ֤ݴޠ͝ͱʹඪ४උ͞Εͨʢ·ͨ 3rd party ͕։ൃͨ͠ʣSyntax
Check Program Linter ͱ ࿈ܞͯ͠ϦΞϧλΠϜͰ Warning Error Λు͍ͯ͘Ε·͢ɻ
ڞ௨ઃఆɿSpell Check http://www-sop.inria.fr/members/Manuel.Serrano/flyspell/flyspell.html flyspell.el flycheck ͱಉ༷ʹϦΞϧλΠϜͰεϖϧϛεΛగਖ਼ͯ͘͠ΕΔ༗ೳ package Ͱ͢ɻ ϢʔβఆٛͷࣙॻϑΝΠϧͷ࡞ՄೳͳͷͰɺϓϩμΫτಛ༗ͷ୯ޠͰͳ͘νΣοΫՄೳɻ
ڞ௨ઃఆɿVisualize https://github.com/nonsequitur/git-gutter-plus git-gutter-plus.el Git ཧԼͷ project ͰมߋՕॴΛ fringe Ͱදࣔͯ͘͠ΕΔ༏Εͷɻ
ڞ௨ઃఆɿVisualize https://github.com/ankurdave/color-identifiers-mode colo-identifiers-mode.el ม͝ͱʹ৭͚͠දࣔͯ͘͠ΕΔͷͰɺಛఆมͷ༻ՕॴͳͲ͕ҰͰΘ͔Γ·͢ɻ ಉҰมಉ৭ʹͳΔ
ڞ௨ઃఆɿVisualize https://github.com/Fanael/rainbow-delimiters rainbow-delimiters.el ରԠ͢ΔΧοίΛͦͷείʔϓ͝ͱʹ৭͚ͯ͘͠Ε·͢ɻ ෆʹΧοί͕ଟ͘ͳͬͯ͠·ͬͨͱ͖ͳͲʹศརɻ
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
JavaScriptɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ։ൃ͍ͯ͠ΔϓϩμΫτͰ Linter ͱͯ͠ eslint
ΛɻܕνΣοΫͱͯ͠ flowtype Λ ಋೖ͍ͯ͠ΔͷͰɺͦΕΒϦΞϧλΠϜʹνΣοΫ͠·͢ɻ
JavaScriptɿOthers https://gist.github.com/blue0513/f503c26bf5cb8a1b6fb6e75f1ec91557 eslint-auto.el ։͍͍ͯΔ buffer ʹରͯ͠ eslint --fix ʢLint Error
ͷࣗಈमਖ਼ʣΛඇಉظͰ࣮ߦͯ͘͠Ε·͢ɻ flycheck ͰΤϥʔ͕ग़͍ͯΔ෦͕ ....... ʢΦϨϯδͷ෦ʣ
Ruby on RailsɿMode ruby-mode.el & rspec-mode.el & rinari.el ruby-mode વͱͯ͠ɺrails
ಛ༗ͷ Syntax Highlight Snippet ΛޮΑ͘ར༻͍ͨ͠ͷͰɺ ͍͍ײ͡ͷ Minor Mode Λઃఆ͠·͢ɻ text-mode ruby-mode
Ruby on RailsɿSyntax Check & Lint https://github.com/flycheck/flycheck flycheck.el ruby ͷ
Syntax Checker & Linter ͩͬͨΒ rubocop ҰͰ͢ͷͰɺͦΕΛ flycheck ͱ࿈ܞͤ͞Δɻ
Ruby on RailsɿOthers https://github.com/blue0513/rubocop-fix-file.el rubocop-fix-file.el eslint-auto.elͷ rubocop ൛Ͱ͢ɻඞཁʹۦΒΕͯ࡞Γ·ͨ͠ɻ flycheck ͰΤϥʔ͕ग़͍ͯΔ෦͕
....... ʢΦϨϯδͷ෦ʣ
Ruby on RailsɿOthers https://github.com/blue0513/rspec-on-iterm.el rspec-on-iterm.el Rspec Λ࣮ߦ͢Δͱ͖ʹɺҰʑࢦఆ͢ΔϑΝΠϧ໊Λଧ࣮ͬͯߦ͢ΔߦΛॻ͍ͯ...... ͱ͢Δͷ໘ͳͷͰ࡞Γ·ͨ͠ɻ
Ruby on RailsɿOthers https://github.com/blue0513/spec-jump.el spec-jump.el Model ϑΝΠϧ͔Β Spec ϑΝΠϧΛ୳ͨ͠Γ.....ͱ͢ΔͷετϨεͩͬͨͷͰ࡞Γ·ͨ͠ɻ
࠷ޙʹ ‣ Emacs ੌ͍ ‣ Emacs ҭͯΒΕΔ ‣ جຊػೳΛؚΊͨѹతΧελϚΠζੑ ‣
3rd Party ͷ package ͷॆ࣮͞ ‣ ඞཁͳ package Λඞཁͳ͚ͩ Install Ͱ͖Δ ‣ ࣗͰಠࣗ package Λ։ൃͰ͖Δ Emacs ͍͍ͧ