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
290
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
2.8k
オンプレ to オンプレした話/on-premises2on-premises
blue0513
0
2.8k
GitもCIもテストもないプロジェクトでデプロイを自動化するまでの道 / rebuild of DevOps
blue0513
0
3k
Git & GitLab & コードレビューって? / about Git, GitLab, CodeReview
blue0513
0
200
ElectronでSlackをさらに便利にしちゃう / Slack with Electron
blue0513
3
760
GitHub の README をいい感じにする / Cool Readme
blue0513
3
1.6k
Emacs × Sound やってみた / Emacs with Sound
blue0513
1
930
Slack を TweetDeck にしてみた件 / slackdeck-proto
blue0513
0
2.8k
知ってるとお得な iTerm2 と zsh/bash の小技
blue0513
2
770
Other Decks in Programming
See All in Programming
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
macOS でできる リアルタイム動画像処理
biacco42
6
1.7k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.2k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Outline View in SwiftUI
1024jp
1
110
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
820
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
31
1.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Making Projects Easy
brettharned
115
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Your Own Lightsaber
phodgson
102
6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Documentation Writing (for coders)
carmenintech
65
4.4k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 ͍͍ͧ