Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドエンジニアのための Dotfiles
Yoshihide Jimbo
May 24, 2014
Programming
53
8k
フロントエンドエンジニアのための 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
30
24k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
4.4k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
5.5k
わかりやすいグラフを作ろう
jmblog
3
840
Web Components で 社内 UI ライブラリを作っている話
jmblog
10
3.2k
gulp: The Good Parts
jmblog
29
5k
CSS in JS と CSS Modules
jmblog
25
4.1k
PostCSS とは何か
jmblog
38
8.7k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
5.7k
Other Decks in Programming
See All in Programming
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
500
Opsしかやってこなかった私が DevOpsが根付いたチームにJoinした話
yhamano
1
100
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
170
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
heyにおけるCI/CDの現状と課題
fufuhu
3
560
模組化的Swift架構(二) DDD速成
haifengkao
0
390
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
5
260
Node-RED 3.0 新機能紹介
utaani
0
140
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
設計の学び方:自分流のススメ
masuda220
PRO
10
7.5k
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
410
Featured
See All Featured
Become a Pro
speakerdeck
PRO
3
850
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Web Components: a chance to create the future
zenorocha
303
40k
Code Reviewing Like a Champion
maltzj
506
37k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Designing the Hi-DPI Web
ddemaree
272
32k
Web development in the modern age
philhawksworth
197
9.3k
Done Done
chrislema
174
14k
Teambox: Starting and Learning
jrom
123
7.7k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Building an army of robots
kneath
299
40k
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ʯͱݕࡧ