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
フロントエンドエンジニアのための Dotfiles
Search
Yoshihide Jimbo
May 24, 2014
Programming
53
8.5k
フロントエンドエンジニアのための Dotfiles
「フロントエンドエンジニアのための」というか「フロントエンド開発のための」です。
前半は超初心者向け、後半は中級者向けの内容です。
Yoshihide Jimbo
May 24, 2014
Tweet
Share
More Decks by Yoshihide Jimbo
See All by Yoshihide Jimbo
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
jmblog
32
28k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.3k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.5k
わかりやすいグラフを作ろう
jmblog
3
1.4k
Web Components で 社内 UI ライブラリを作っている話
jmblog
11
4.3k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.7k
PostCSS とは何か
jmblog
38
9.9k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
Other Decks in Programming
See All in Programming
Kiroで始めるAI-DLC
kaonash
2
620
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
print("Hello, World")
eddie
2
530
Ruby Parser progress report 2025
yui_knk
1
460
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
220
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
アセットのコンパイルについて
ojun9
0
130
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How GitHub (no longer) Works
holman
315
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cult of Friendly URLs
andyhume
79
6.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
ϑϩϯτΤϯυΤϯδχΞ ͷͨΊͷ Do$iles ਆอՅल KAIZEN pla$orm Inc. 2014-‐05-‐24
GRAND FRONT_END OSAKA
ਆอՅल ʢ͡Μ΅ Α͠ͻͰʣ
Frontend Engineer @
@jmblog
λʔϛφϧͬͯ·͔͢ʁ
• Grunt YeomanɺBowerɺ Git ͳͲɺϑϩϯτΤ ϯυΤϯδχΞ͕λʔϛφϧΛ͏ػձ͜͜ Ͱٸʹ૿͖͑ͯͨͱײ͍ͯ͡Δɻ •
λʔϛφϧͪΐͬͱΧελϚΠζ͢Δ͚ͩͰ େ෯ʹੜ࢈ੑ͕͕͋Δɻ • ʮࠇ͍ը໘ʯͱسΈݏΘͣλʔϛφϧͱྑ͘ ͳΖ͏ʂ
࣍ • ͩ͜ΘΓͷλʔϛφϧʹΧελϚΠζ͠Α͏ • γΣϧΛܶతʹ͍͘͢͠Α͏ • Do<iles Λ
GitHub Ͱཧ͠Α͏
લఏ • OS X • bash
ͩ͜ΘΓͷλʔϛφϧʹ ΧελϚΠζ͠Α͏
͖ͳΧϥʔεΩʔϜΛ બ΅͏
None
ςϯγϣϯ͕͋ΔͰ͠ΐʁ
ඪ४ͷλʔϛφϧ.app ʹΧοί͍͍ͷ͕ͳ͍…
λʔϛφϧ.app ʹ͋·Γબࢶ͕ͳ͍ͷͰɺ iTerm2 Λ͏͜ͱΛΦεεϝ͠·͢ɻ
hFps://github.com/mbadolato/iTerm2-‐Color-‐Schemes hFps://github.com/baskerville/iTerm-‐2-‐Color-‐Themes iTerm2 ༻ΧϥʔεΩʔϜΛ͍ͯ͠Δ͓͢͢ΊαΠτ
Tomorrow Night Bright hFps://github.com/mbadolato/iTerm2-‐Color-‐Schemes
ݟͨΛΑͯ͘͠ɺςϯγϣϯΛ͋͛Δ͠ʂ
ίϚϯυϓϩϯϓτΛ ΧελϚΠζ͠Α͏
Yoshihide-‐no-‐Mac:~ jmblog$ cd ~/Desktop Yoshihide-‐no-‐Mac:Desktop jmblog$ ͜ͷ෦͕ ίϚϯυϓϩϯϓτ
·ͣɺxxxxxxx-‐no-‐Mac ͕ʹμα͍ Yoshihide-‐no-‐Mac:~ jmblog$
OS X ͷ [γεςϜڥઃఆ] -‐ [ڞ༗] ʹ͋Δ ʮίϯϐϡʔλ໊ʯͰมߋͰ͖·͢
ͱ͜ΖͰɺ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ
$ cd ../site1 $ cd styles/ $ cd
../scripts/ $ cd ../../site2 : cd ίϚϯυͰ͋ͪͪ͜Ҡಈͯͨ͠Β…
$ cd ./scripts $ cd .. $ ͋ΕʁࠓͲ͜ʹ͍ΔΜ͚ͩͬʁʁ
$ git checkout master : $ git add
$ git commit GitϒϥϯνΛ͍Ζ͍ΖΓସ͑ͯͨΒ…
commit ͢Δϒϥϯνؒҧ͑ͯͨʂ $ git branch * master
develop-‐1
$ git add $ git add :
$ git commit : $ git add : add ͱ commit Λ܁Γฦͯͨ͠Β…
શ෦ commit ͨͭ͠Γͩͬͨͷʹ࿙Εͯͨʂ $ git status -‐s ?? aa.txt
શ෦ίϚϯυϓϩϯϓτͰղܾ͠·͢ʂ
jmblog@mba: ~/src/site1/styles on master [!] $
jmblog@mba: ~/src/site1/styles on master [!] $ ↑
৭͕͍ͭͯݟ͍͢ʂ
jmblog@mba: ~/src/site1/styles on master [!] $ ݱࡏͷҐஔ
↓ ݱࡏͷϒϥϯν ↓ ɹɹ↑ ϒϥϯνͷঢ়ଶ
None
Ͳ͏ͬͯมߋ͢Δͷʁ
ઃఆϑΝΠϧΛ༻ҙ͠·ͨ͠ʂ hFp://git.io/ZzZuww ࣍ͷϑΝΠϧͷதΛ ~/.bash_profile ʹՃ͢Δ͚ͩ
͜͜·Ͱͷ·ͱΊ • ·ͣࣗΈͷΧϥʔεΩʔϜΛݟ͚ͭͯݟͨ ΛΑ͘͠Α͏ɻ • ίϚϯυϓϩϯϓτΛΧελϚΠζͯ͠ɺλʔϛ φϧૢ࡞ΛΘ͔Γ͘͢͠Α͏ɻ
ʲิ1ʳ.bash_profile Λ GUI ΤσΟλͰฤू͢Δํ๏ # ϗʔϜσΟϨΫτϦʹҠಈ $ cd ~
#.bash_profile ͕ͳ͚ΕۭϑΝΠϧͰ࡞ $ [ ! -‐f .bash_profile ] && touch .bash_profile # CotEditor Ͱ։͘ $ open -‐a coteditor .bash_profile # ฤू͕ऴΘͬͨΒಡΈࠐΉ $ source .bash_profile # alias Λ࡞͓ͬͯ͘ͱศར $ alias coteditor="open -‐a coteditor" $ coteditor .bash_profile
.. on master[+] ʲิ2ʳϒϥϯνͷঢ়ଶදهʹ͍ͭͯ .. on master[!] .. on master[?]
.. on master[$] add ͚ͨ͠Ͳ commit ͕·ͩ add ͕·ͩ όʔδϣϯཧର֎ git stash ͯ͋͠Δ
γΣϧΛܶతʹ ͍͘͢͠Α͏
ls ίϚϯυΛ͍͘͢
## BSD ls (OS X ͪ͜Β) $ ls -‐G
! ### GNU ls (Linux ͳͲͪ͜Βʣ $ ls -‐-‐color=auto ls ͷ݁Ռʹ৭Λ͚ͭΔ
None
None
# Ӆ͠ϑΝΠϧΛؚΊͯ͢දࣔ $ ls -‐a ! # `.`
ͱ `..` Ҏ֎ͯ͢දࣔ $ ls -‐A ! # σΟϨΫτϦʹ `/` Λ͚ͭΔ $ ls -‐F ! # ৄࡉͳϑΥʔϚοτͰදࣔ $ ls -‐l ls ͷग़ྗ݁ՌΛΧελϚΠζ
alias ls="ls -‐GAF" alias ll="ls -‐l” ! if
[ $(uname) = "Linux" ] alias ls="ls -‐-‐color=auto -‐AF" fi alias Λ༻ҙ͓ͯ͘͠ͱΑ͍Ͱ͢ .bash_profile
cd ίϚϯυΛ͍͘͢
$ cd -‐ લͷσΟϨΫτϦʹΔ $ pwd /Users/Yoshihide $
cd Projects/jmblog@github/dotfiles $ cd -‐ $ pwd /Users/Yoshihide
cd Ͱ typo ͯࣗ͠ಈతʹਖ਼͍͠ύεʹ Ҡಈͯ͘͠ΕΔΑ͏ʹ͢Δ shopt -‐s cdspell .bash_profile
ྫ͑ɺDocuments σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠ $ cd Document ͱೖྗͯ͠ Documents ʹҠಈͯ͘͠ΕΔɻ
ίϚϯυཤྺʢhistoryʣΛ͍͓ͨ͢
্ԼҹΩʔͰίϚϯυཤྺΛલํҰகαʔν ίϚϯυͷઌ಄จࣈ͚ͩଧ্ͬͯҹΩʔ࿈ଧ͢Δͱɺ Ұகͨ͠ίϚϯυͷཤྺΛݕࡧͰ͖Δɻ
$ (reverse-‐i-‐search)`': ίϚϯυཤྺͷΠϯΫϦϝϯλϧαʔν `Ctrl-‐r` Λԡͯ͠ݕࡧ͍ͨ͠ΩʔϫʔυΛೖྗɻ `Ctrl-‐r` Λ࿈ଧ͢Δͱɺಉ͡ݕࡧޠͰͲΜͲΜḪΔɻ
ॏෳ͢ΔίϚϯυΛཤྺʹ͞ͳ͍ export HISTCONTROL=ignoreboth:erasedups .bash_profile
ෆཁͳίϚϯυΛཤྺʹ͞ͳ͍ export HISTIGNORE="ls:ls *:ll:ll *:cd:cd -‐:pwd" .bash_profile HISTIGNORE ʹ
ཤྺʹͨ͘͠ͳ͍ίϚϯυΛʮ:ʯ۠ΓͰઃఆ͢Δɻ ls cd Λઃఆ͓ͯ͘͠ͱΑ͍ɻ
ίϚϯυཤྺΛ૿͢ export HISTFILESIZE=10000 export HISTSIZE=10000 .bash_profile σϑΥϧτ 500 ͳͷͰ͖ͳʹ૿͢ɻ
ଟ͗͢ΔͱύϑΥʔϚϯε͕Լ͢ΔͷͰ 10000 ఔ͕͓͢͢Ίɻ
ೖྗิΛݡ͘ར༻͢Δ
bash-‐compleVon / git-‐compleVon Λಋೖ͢Δ $ brew install bash-‐completion $
brew install git ίϚϯυͷೖྗ్தͰ <TAB> Λ 2ճԡ͢ͱ ೖྗิͯ͘͠ΕΔΑ͏ʹͳΔɻ ! ʢzshͳΒඪ४Ͱڧྗͳೖྗิ͕͑·͢ɻʣ
<Tab> Λ 2ճԡ͢ͷ͕ΊΜͲ͍͘͞ set show-‐all-‐if-‐ambiguous on <Tab>Λ1ճԡ͚ͩ͢Ͱೖྗิ͕ग़ΔΑ͏ʹͳΔɻ ! ʢ.bash_profile
Ͱͳ͘ .inputrc ʹهड़͢Δ͜ͱʂʣ .inputrc
େจࣈ/খจࣈΛແࢹ͢Δ set completion-‐ignore-‐case on .inputrc ྫ͑ɺDocuments σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠ $ cd docu
ͱೖྗͯ͠ <Tab> Λԡ͢ͱɺDocuments ͕ग़ΔΑ͏ʹͳΔɻ ʢ͜Ε .inputrc ʹهड़͢Δ͜ͱʂʣ
ack ΛͬͯςΩετݕࡧΛΑΓ؆୯ʹ
ྫʣΧϨϯτσΟϨΫτϦͷ *.scss ͓Αͼ *.css ϑΝΠϧ͔Β `#fff' ؚ͕·ΕΔͷΛݕࡧ͍ͨ͠ɻ
grep Λͬͨ߹ $ find . \( -‐name "*.scss" -‐o -‐name
"*.css" \) | xargs grep '#fff' ແཧ…
ack Λͬͨ߹ $ ack -‐-‐sass -‐-‐css '#fff' `ack -‐-‐help-‐type` ͰରԠ͍ͯ͠ΔϑΝΠϧλΠϓ͕֬ೝͰ͖·͢ɻ
ack ͷΠϯετʔϧ $ brew install ack
-‐-‐ignore-‐dir=log -‐-‐ignore-‐dir=tmp -‐-‐ignore-‐dir=vendor -‐-‐ignore-‐dir=.sass-‐cache -‐-‐sort-‐files .ackrc
ແࢹ͍ͨ͠σΟϨΫτϦΛઃఆ͓ͯ͘͠ͱศརɻ ack ͷ ઃఆϑΝΠϧʢ.ackrcʣ
ΩʔϦϐʔτͷઃఆΛมߋ͢Δ
KeyRemap4MacBook Λಋೖ͢Δ
None
Delay UnVl Repeat 100 ~ 300 (default is 500)
ʹઃఆ͢Δ ૣ͘͠ա͗Δͱίϐϖ͕ॏෳ͢ΔͷͰগ͑͠ؾຯʹ͢Δɻ ! Key Repeat 10ʙ30ఔʢdefault 83ʣ
͜͜·Ͱͷ·ͱΊ • .bash_profile ʹ͍Ζ͍ΖͳઃఆΛهड़ͯ͠γΣϧ ͷ͍উखΛΑ͘͠Α͏ • ΩʔϦϐʔτͷઃఆΛม͑Δͱࣄ͕ḿΔΑ
Do$iles Λ GitHub Ͱ ཧ͠Α͏
Do$iles ͱʁ • ͖͞΄Ͳ͔Βग़͖͍ͯͯΔ .bash_profile Do<iles ͷҰͭɻ
• ໊લ͕ʮ.ʢυοτʣʯͰ࢝·Δ֤छઃఆϑΝΠ ϧͷ͜ͱɻ • ଟ͘ϗʔϜσΟϨΫτϦʹஔ͔ΕΔɻ
None
ͳͥ GitHub Ͱཧͨ͠΄͏͕ ͍͍ͷ͔ʁ • ࣗͱձࣾͰಉ͡։ൃڥΛอ͓͖͍ͬͯͨ ߹ɺ৽͍͠ Mac Λങͬͨ࣌ͳͲʹɺ؆୯ʹࣗ
ͷ։ൃڥΛҠߦ/ಉظ͢Δ͜ͱ͕Ͱ͖Δɻ • DropBox Ͱ͍͍͚ͲɺMac Ҏ֎ͰڥҠߦΛ ͍ͨ͠߹ɺGitHub ͷ΄͏͕ศརɻ
hFp://do<iles.github.io/
Θ͔ΔΜ͚ͩͲɺͳΜ͔ΊΜͲͦ͘͞͏… Կ͔Β࢝ΊΕ͍͍ͷΒ…
ελʔλʔΩοτΛ༻ҙ͠·ͨ͠ʂ hFps://github.com/jmblog/do<iles-‐starter-‐kit ͜ΕΛϕʔεʹࣗͷ Do<iles Λ গͣͭ͠ҭͯͯΈ͍ͯͩ͘͞ɻ
શମͷ·ͱΊ • ϑϩϯτΤϯυͰλʔϛφϧΛ͍͜ͳ͢ͷج ຊεΩϧʹͳΓͭͭ͋Δ • ΤσΟλͱಉ༷ɺλʔϛφϧࣗͷखʹ͋ͬͨ ಓ۩ʹཱ͍ͯͯ͜͏ •
Do<iles GitHub Ͱཧͯ͠ɺ͍ͭͰͲ͔͜Β Ͱͦͷಓ۩Λ͑ΔΑ͏ʹ͓ͯ͜͠͏
[PR] KAIZEN pla$orm Ͱ ΤϯδχΞΛืू͍ͯ͠·͢ WantedlyͰʮKAIZENʯͱݕࡧ