「フロントエンドエンジニアのための」というか「フロントエンド開発のための」です。
前半は超初心者向け、後半は中級者向けの内容です。
ϑϩϯτΤϯυΤϯδχΞͷͨΊͷ Do$ilesਆอՅल KAIZEN pla$orm Inc. 2014-‐05-‐24GRAND FRONT_END OSAKA
View Slide
ਆอՅल ʢ͡Μ΅ Α͠ͻͰʣ
Frontend Engineer @
@jmblog
λʔϛφϧͬͯ·͔͢ʁ
• Grunt YeomanɺBowerɺ Git ͳͲɺϑϩϯτΤϯυΤϯδχΞ͕λʔϛφϧΛ͏ػձ͜͜Ͱٸʹ૿͖͑ͯͨͱײ͍ͯ͡Δɻ • λʔϛφϧͪΐͬͱΧελϚΠζ͢Δ͚ͩͰେ෯ʹੜ࢈ੑ͕͕͋Δɻ • ʮࠇ͍ը໘ʯͱسΈݏΘͣλʔϛφϧͱྑ͘ͳΖ͏ʂ
࣍• ͩ͜ΘΓͷλʔϛφϧʹΧελϚΠζ͠Α͏ • γΣϧΛܶతʹ͍͘͢͠Α͏ • Do
લఏ• OS X • bash
ͩ͜ΘΓͷλʔϛφϧʹ ΧελϚΠζ͠Α͏
͖ͳΧϥʔεΩʔϜΛ બ΅͏
ςϯγϣϯ͕͋ΔͰ͠ΐʁ
ඪ४ͷλʔϛφϧ.app ʹΧοί͍͍ͷ͕ͳ͍…
λʔϛφϧ.app ʹ͋·Γબࢶ͕ͳ͍ͷͰɺ iTerm2 Λ͏͜ͱΛΦεεϝ͠·͢ɻ
hFps://github.com/mbadolato/iTerm2-‐Color-‐SchemeshFps://github.com/baskerville/iTerm-‐2-‐Color-‐ThemesiTerm2 ༻ΧϥʔεΩʔϜΛ͍ͯ͠Δ͓͢͢ΊαΠτ
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 commitGitϒϥϯνΛ͍Ζ͍ΖΓସ͑ͯͨΒ…
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 [!] $ ݱࡏͷҐஔ ↓ݱࡏͷϒϥϯν ↓ɹɹ↑ ϒϥϯνͷঢ়ଶ
Ͳ͏ͬͯมߋ͢Δͷʁ
ઃఆϑΝΠϧΛ༻ҙ͠·ͨ͠ʂ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 ͷ݁Ռʹ৭Λ͚ͭΔ
# Ӆ͠ϑΝΠϧΛؚΊͯ͢දࣔ $ ls -‐a !# `.` ͱ `..` Ҏ֎ͯ͢දࣔ $ ls -‐A !# σΟϨΫτϦʹ `/` Λ͚ͭΔ $ ls -‐F !# ৄࡉͳϑΥʔϚοτͰදࣔ $ ls -‐lls ͷग़ྗ݁ՌΛΧελϚΠζ
alias ls="ls -‐GAF" alias ll="ls -‐l” !if [ $(uname) = "Linux" ] alias ls="ls -‐-‐color=auto -‐AF" fialias Λ༻ҙ͓ͯ͘͠ͱΑ͍Ͱ͢.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_profileHISTIGNORE ʹ ཤྺʹͨ͘͠ͳ͍ίϚϯυΛʮ:ʯ۠ΓͰઃఆ͢Δɻ ls cd Λઃఆ͓ͯ͘͠ͱΑ͍ɻ
ίϚϯυཤྺΛ૿͢export HISTFILESIZE=10000 export HISTSIZE=10000.bash_profileσϑΥϧτ 500 ͳͷͰ͖ͳʹ૿͢ɻ ଟ͗͢ΔͱύϑΥʔϚϯε͕Լ͢ΔͷͰ 10000 ఔ͕͓͢͢Ίɻ
ೖྗิΛݡ͘ར༻͢Δ
bash-‐compleVon / git-‐compleVon Λಋೖ͢Δ$ brew install bash-‐completion $ brew install gitίϚϯυͷೖྗ్தͰ Λ 2ճԡ͢ͱ ೖྗิͯ͘͠ΕΔΑ͏ʹͳΔɻ !ʢzshͳΒඪ४Ͱڧྗͳೖྗิ͕͑·͢ɻʣ
Λ 2ճԡ͢ͷ͕ΊΜͲ͍͘͞set show-‐all-‐if-‐ambiguous onΛ1ճԡ͚ͩ͢Ͱೖྗิ͕ग़ΔΑ͏ʹͳΔɻ !ʢ.bash_profile Ͱͳ͘ .inputrc ʹهड़͢Δ͜ͱʂʣ.inputrc
େจࣈ/খจࣈΛແࢹ͢Δset completion-‐ignore-‐case on.inputrcྫ͑ɺDocuments σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠$ cd docuͱೖྗͯ͠ Λԡ͢ͱɺ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 Λಋೖ͢Δ
Delay UnVl Repeat 100 ~ 300 (default is 500) ʹઃఆ͢Δ ૣ͘͠ա͗Δͱίϐϖ͕ॏෳ͢ΔͷͰগ͑͠ؾຯʹ͢Δɻ !Key Repeat 10ʙ30ఔʢdefault 83ʣ
͜͜·Ͱͷ·ͱΊ• .bash_profile ʹ͍Ζ͍ΖͳઃఆΛهड़ͯ͠γΣϧͷ͍উखΛΑ͘͠Α͏ • ΩʔϦϐʔτͷઃఆΛม͑Δͱࣄ͕ḿΔΑ
Do$iles Λ GitHub Ͱ ཧ͠Α͏
Do$iles ͱʁ• ͖͞΄Ͳ͔Βग़͖͍ͯͯΔ .bash_profile Do• ໊લ͕ʮ.ʢυοτʣʯͰ࢝·Δ֤छઃఆϑΝΠϧͷ͜ͱɻ • ଟ͘ϗʔϜσΟϨΫτϦʹஔ͔ΕΔɻ
ͳͥ GitHub Ͱཧͨ͠΄͏͕ ͍͍ͷ͔ʁ• ࣗͱձࣾͰಉ͡։ൃڥΛอ͓͖͍ͬͯͨ߹ɺ৽͍͠ Mac Λങͬͨ࣌ͳͲʹɺ؆୯ʹࣗͷ։ൃڥΛҠߦ/ಉظ͢Δ͜ͱ͕Ͱ͖Δɻ • DropBox Ͱ͍͍͚ͲɺMac Ҏ֎ͰڥҠߦΛ͍ͨ͠߹ɺGitHub ͷ΄͏͕ศརɻ
hFp://do
Θ͔ΔΜ͚ͩͲɺͳΜ͔ΊΜͲͦ͘͞͏… Կ͔Β࢝ΊΕ͍͍ͷΒ…
ελʔλʔΩοτΛ༻ҙ͠·ͨ͠ʂhFps://github.com/jmblog/do͜ΕΛϕʔεʹࣗͷ Doগͣͭ͠ҭͯͯΈ͍ͯͩ͘͞ɻ
શମͷ·ͱΊ• ϑϩϯτΤϯυͰλʔϛφϧΛ͍͜ͳ͢ͷجຊεΩϧʹͳΓͭͭ͋Δ • ΤσΟλͱಉ༷ɺλʔϛφϧࣗͷखʹ͋ͬͨಓ۩ʹཱ͍ͯͯ͜͏ • DoͰͦͷಓ۩Λ͑ΔΑ͏ʹ͓ͯ͜͠͏
[PR] KAIZEN pla$orm Ͱ ΤϯδχΞΛืू͍ͯ͠·͢WantedlyͰʮKAIZENʯͱݕࡧ
jmblog
ogiwarat
itsmedreamwalker
rabbitmagician1
tomokusaba
jmatsu
gmvalentino8
zachklipp
tonkotsuboy_com
dunglas
subomi
kazuhitoyokoi
kumamotone
ammeep
holman
yeseniaperezcruz
bkeepers
hannesfritz
chriscoyier
mthomps
kneath
searls
rocio
lara