フロントエンドエンジニアのための Dotfiles

「フロントエンドエンジニアのための」というか「フロントエンド開発のための」です。

前半は超初心者向け、後半は中級者向けの内容です。

Transcript

1. ϑϩϯτΤϯυΤϯδχΞ ͷͨΊͷ  Do$iles ਆอՅल   KAIZEN  pla$orm  Inc.   2014-­‐05-­‐24 GRAND  FRONT_END  OSAKA
2. ਆอՅल   ʢ͡Μ΅  Α͠ͻͰʣ
3. Frontend  Engineer   @
4. @jmblog
5. λʔϛφϧ࢖ͬͯ·͔͢ʁ
6. • Grunt  ΍  YeomanɺBowerɺ  Git  ͳͲɺϑϩϯτΤ ϯυΤϯδχΞ͕λʔϛφϧΛ࢖͏ػձ͸͜͜ ਺೥Ͱٸʹ૿͖͑ͯͨͱײ͍ͯ͡Δɻ   • λʔϛφϧ͸ͪΐͬͱΧελϚΠζ͢Δ͚ͩͰ େ෯ʹੜ࢈ੑ͕͕͋Δɻ   • ʮࠇ͍ը໘ʯͱسΈݏΘͣλʔϛφϧͱ஥ྑ͘ ͳΖ͏ʂ
7. ໨࣍ • ͩ͜ΘΓͷλʔϛφϧʹΧελϚΠζ͠Α͏   • γΣϧΛܶతʹ࢖͍΍͘͢͠Α͏   • Do<iles  Λ  GitHub  Ͱ؅ཧ͠Α͏
8. લఏ • OS  X   • bash
9. ͩ͜ΘΓͷλʔϛφϧʹ   ΧελϚΠζ͠Α͏
10. ޷͖ͳΧϥʔεΩʔϜΛ   બ΅͏
12. ςϯγϣϯ͕͋ΔͰ͠ΐʁ
13. ඪ४ͷλʔϛφϧ.app  ʹ͸Χοί͍͍ͷ͕ͳ͍…
14. λʔϛφϧ.app  ʹ͸͋·Γબ୒ࢶ͕ͳ͍ͷͰɺ   iTerm2  Λ࢖͏͜ͱΛΦεεϝ͠·͢ɻ
15. hFps://github.com/mbadolato/iTerm2-­‐Color-­‐Schemes hFps://github.com/baskerville/iTerm-­‐2-­‐Color-­‐Themes iTerm2  ༻ΧϥʔεΩʔϜΛ഑෍͍ͯ͠Δ͓͢͢ΊαΠτ
16. Tomorrow  Night  Bright   hFps://github.com/mbadolato/iTerm2-­‐Color-­‐Schemes
17. ݟͨ໨ΛΑͯ͘͠ɺςϯγϣϯΛ͋͛Δ΂͠ʂ
18. ίϚϯυϓϩϯϓτΛ   ΧελϚΠζ͠Α͏
19. Yoshihide-­‐no-­‐Mac:~  jmblog$  cd  ~/Desktop   Yoshihide-­‐no-­‐Mac:Desktop  jmblog$ ͜ͷ෦෼͕  ίϚϯυϓϩϯϓτ
20. ·ͣɺxxxxxxx-­‐no-­‐Mac  ͕໠྽ʹμα͍ Yoshihide-­‐no-­‐Mac:~  jmblog$  
21. OS  X  ͷ  [γεςϜ؀ڥઃఆ]  -­‐  [ڞ༗]  ʹ͋Δ   ʮίϯϐϡʔλ໊ʯͰมߋͰ͖·͢
22. ͱ͜ΖͰɺ͜Μͳܦݧ͸͋Γ·ͤΜ͔ʁ
23. $  cd  ../site1   $  cd  styles/   $  cd  ../scripts/   $  cd  ../../site2   : cd  ίϚϯυͰ͋ͪͪ͜Ҡಈͯͨ͠Β…
24. $  cd  ./scripts   $  cd  ..   $ ͋ΕʁࠓͲ͜ʹ͍ΔΜ͚ͩͬʁʁ
25. $  git  checkout  master   :   $  git  add   $  git  commit GitϒϥϯνΛ͍Ζ͍Ζ੾Γସ͑ͯͨΒ…
26. commit  ͢Δϒϥϯνؒҧ͑ͯͨʂ $  git  branch   *  master      develop-­‐1
27. $  git  add   $  git  add   :   $  git  commit   :   $  git  add   : add  ͱ  commit  Λ܁Γฦͯͨ͠Β…
28. શ෦  commit  ͨͭ͠΋Γͩͬͨͷʹ࿙Εͯͨʂ $  git  status  -­‐s   ??  aa.txt
29. શ෦ίϚϯυϓϩϯϓτͰղܾ͠·͢ʂ
30. jmblog@mba:  ~/src/site1/styles  on  master  [!]   $  
31. jmblog@mba:  ~/src/site1/styles  on  master  [!]   $   ↑   ৭͕͍ͭͯݟ΍͍͢ʂ
32. jmblog@mba:  ~/src/site1/styles  on  master  [!]   $   ݱࡏͷҐஔ   ↓ ݱࡏͷϒϥϯν   ↓ ɹɹ↑   ϒϥϯνͷঢ়ଶ
34. Ͳ͏΍ͬͯมߋ͢Δͷʁ
35. ઃఆϑΝΠϧΛ༻ҙ͠·ͨ͠ʂ hFp://git.io/ZzZuww ࣍ͷϑΝΠϧͷத਎Λ  ~/.bash_profile  ʹ௥Ճ͢Δ͚ͩ
36. ͜͜·Ͱͷ·ͱΊ • ·ͣ͸ࣗ෼޷ΈͷΧϥʔεΩʔϜΛݟ͚ͭͯݟͨ ໨ΛΑ͘͠Α͏ɻ   • ίϚϯυϓϩϯϓτΛΧελϚΠζͯ͠ɺλʔϛ φϧૢ࡞ΛΘ͔Γ΍͘͢͠Α͏ɻ
37. ʲิ଍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
38. ..  on  master[+] ʲิ଍2ʳϒϥϯνͷঢ়ଶදهʹ͍ͭͯ ..  on  master[!] ..  on  master[?] ..  on  master[$] add  ͚ͨ͠Ͳ  commit  ͕·ͩ add  ͕·ͩ όʔδϣϯ؅ཧର৅֎ git  stash  ͯ͋͠Δ
39. γΣϧΛܶతʹ   ࢖͍΍͘͢͠Α͏
40. ls  ίϚϯυΛ࢖͍΍͘͢
41. ##  BSD  ls  (OS  X  ͸ͪ͜Β)   $  ls  -­‐G   ! ###  GNU  ls  (Linux  ͳͲ͸ͪ͜Βʣ   $  ls  -­‐-­‐color=auto   ls  ͷ݁Ռʹ৭Λ͚ͭΔ
44. #  Ӆ͠ϑΝΠϧΛؚΊ͢΂ͯදࣔ   $  ls  -­‐a   ! #  `.`  ͱ  `..`  Ҏ֎͢΂ͯදࣔ   $  ls  -­‐A   ! #  σΟϨΫτϦʹ͸  `/`  Λ͚ͭΔ   $  ls  -­‐F   ! #  ৄࡉͳϑΥʔϚοτͰදࣔ   $  ls  -­‐l ls  ͷग़ྗ݁ՌΛΧελϚΠζ
45. alias  ls="ls  -­‐GAF"   alias  ll="ls  -­‐l”   ! if  [  $(uname)  =  "Linux"  ]     alias  ls="ls  -­‐-­‐color=auto  -­‐AF"   fi alias  Λ༻ҙ͓ͯ͘͠ͱΑ͍Ͱ͢ .bash_profile
46. cd  ίϚϯυΛ࢖͍΍͘͢
47. $  cd  -­‐ ௚લͷσΟϨΫτϦʹ໭Δ $  pwd   /Users/Yoshihide   $  cd  Projects/jmblog@github/dotfiles   $  cd  -­‐   $  pwd   /Users/Yoshihide
48. cd  Ͱ  typo  ͯ͠΋ࣗಈతʹਖ਼͍͠ύεʹ   Ҡಈͯ͘͠ΕΔΑ͏ʹ͢Δ shopt  -­‐s  cdspell .bash_profile ྫ͑͹ɺDocuments  σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠ $  cd  Document ͱೖྗͯ͠΋ Documents  ʹҠಈͯ͘͠ΕΔɻ
49. ίϚϯυཤྺʢhistoryʣΛ࢖͍͓ͨ͢
50. ্Լ໼ҹΩʔͰίϚϯυཤྺΛલํҰகαʔν ίϚϯυͷઌ಄਺จࣈ͚ͩଧ্ͬͯ໼ҹΩʔ࿈ଧ͢Δͱɺ   Ұகͨ͠ίϚϯυͷཤྺΛݕࡧͰ͖Δɻ
51. $  (reverse-­‐i-­‐search)`': ίϚϯυཤྺͷΠϯΫϦϝϯλϧαʔν `Ctrl-­‐r`  Λԡͯ͠ݕࡧ͍ͨ͠ΩʔϫʔυΛೖྗɻ   `Ctrl-­‐r`  Λ࿈ଧ͢Δͱɺಉ͡ݕࡧޠͰͲΜͲΜḪΔɻ
52. ॏෳ͢ΔίϚϯυΛཤྺʹ࢒͞ͳ͍ export  HISTCONTROL=ignoreboth:erasedups .bash_profile
53. ෆཁͳίϚϯυΛཤྺʹ࢒͞ͳ͍ export  HISTIGNORE="ls:ls  *:ll:ll  *:cd:cd  -­‐:pwd" .bash_profile HISTIGNORE  ʹ   ཤྺʹ࢒ͨ͘͠ͳ͍ίϚϯυΛʮ:ʯ۠੾ΓͰઃఆ͢Δɻ   ls  ΍  cd  Λઃఆ͓ͯ͘͠ͱΑ͍ɻ
54. ίϚϯυཤྺ਺Λ૿΍͢ export  HISTFILESIZE=10000   export  HISTSIZE=10000 .bash_profile σϑΥϧτ͸  500  ͳͷͰ޷͖ͳ਺ʹ૿΍͢ɻ   ଟ͗͢ΔͱύϑΥʔϚϯε͕௿Լ͢ΔͷͰ   10000  ఔ౓͕͓͢͢Ίɻ
55. ೖྗิ׬Λݡ͘ར༻͢Δ
56. bash-­‐compleVon  /  git-­‐compleVon  Λಋೖ͢Δ $  brew  install  bash-­‐completion   $  brew  install  git ίϚϯυͷೖྗ్தͰ  <TAB>  Λ  2ճԡ͢ͱ   ೖྗิ׬ͯ͘͠ΕΔΑ͏ʹͳΔɻ   ! ʢzshͳΒඪ४Ͱڧྗͳೖྗิ׬͕࢖͑·͢ɻʣ
57. <Tab>  Λ  2ճԡ͢ͷ͕ΊΜͲ͍͘͞ set  show-­‐all-­‐if-­‐ambiguous  on <Tab>Λ1ճԡ͚ͩ͢Ͱೖྗิ׬͕ग़ΔΑ͏ʹͳΔɻ   ! ʢ.bash_profile  Ͱ͸ͳ͘  .inputrc  ʹهड़͢Δ͜ͱʂʣ .inputrc
58. େจࣈ/খจࣈΛແࢹ͢Δ set  completion-­‐ignore-­‐case  on .inputrc ྫ͑͹ɺDocuments  σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠ $  cd  docu ͱೖྗͯ͠  <Tab>  Λԡ͢ͱɺDocuments  ͕ग़ΔΑ͏ʹͳΔɻ ʢ͜Ε΋  .inputrc  ʹهड़͢Δ͜ͱʂʣ
59. ack  Λ࢖ͬͯςΩετݕࡧΛΑΓ؆୯ʹ
60. ྫʣΧϨϯτσΟϨΫτϦͷ  *.scss  ͓Αͼ  *.css  ϑΝΠϧ͔Β    `#fff'  ؚ͕·ΕΔ΋ͷΛݕࡧ͍ͨ͠ɻ
61. grep  Λ࢖ͬͨ৔߹ $  find  .  \(  -­‐name  "*.scss"  -­‐o  -­‐name  "*.css"  \)  |  xargs  grep  '#fff' ແཧ…
62. ack  Λ࢖ͬͨ৔߹ $  ack  -­‐-­‐sass  -­‐-­‐css  '#fff' `ack  -­‐-­‐help-­‐type`  ͰରԠ͍ͯ͠ΔϑΝΠϧλΠϓ͕֬ೝͰ͖·͢ɻ
63. ack  ͷΠϯετʔϧ $  brew  install  ack
64. -­‐-­‐ignore-­‐dir=log   -­‐-­‐ignore-­‐dir=tmp   -­‐-­‐ignore-­‐dir=vendor   -­‐-­‐ignore-­‐dir=.sass-­‐cache   -­‐-­‐sort-­‐files .ackrc ແࢹ͍ͨ͠σΟϨΫτϦΛઃఆ͓ͯ͘͠ͱศརɻ ack  ͷ  ઃఆϑΝΠϧʢ.ackrcʣ
65. ΩʔϦϐʔτͷઃఆΛมߋ͢Δ
66. KeyRemap4MacBook  Λಋೖ͢Δ
68. Delay  UnVl  Repeat   100  ~  300  (default  is  500)  ʹઃఆ͢Δ   ૣ͘͠ա͗Δͱίϐϖ͕ॏෳ͢ΔͷͰগ͠཈͑ؾຯʹ͢Δɻ   ! Key  Repeat   10ʙ30ఔ౓ʢdefault  83ʣ
69. ͜͜·Ͱͷ·ͱΊ • .bash_profile  ʹ͍Ζ͍ΖͳઃఆΛهड़ͯ͠γΣϧ ͷ࢖͍উखΛΑ͘͠Α͏   • ΩʔϦϐʔτͷઃఆΛม͑Δͱ࢓ࣄ͕ḿΔΑ
70. Do$iles  Λ  GitHub  Ͱ   ؅ཧ͠Α͏
71. Do$iles  ͱ͸ʁ • ͖͞΄Ͳ͔Βग़͖͍ͯͯΔ  .bash_profile  ͸   Do<iles  ͷҰͭɻ   • ໊લ͕ʮ.ʢυοτʣʯͰ࢝·Δ֤छઃఆϑΝΠ ϧͷ͜ͱɻ   • ଟ͘͸ϗʔϜσΟϨΫτϦʹஔ͔ΕΔɻ
73. ͳͥ  GitHub  Ͱ؅ཧͨ͠΄͏͕   ͍͍ͷ͔ʁ • ࣗ୐ͱձࣾͰಉ͡։ൃ؀ڥΛอ͓͖͍ͬͯͨ৔ ߹΍ɺ৽͍͠  Mac  Λങͬͨ࣌ͳͲʹɺ؆୯ʹࣗ ෼ͷ։ൃ؀ڥΛҠߦ/ಉظ͢Δ͜ͱ͕Ͱ͖Δɻ   • DropBox  Ͱ΋͍͍͚ͲɺMac  Ҏ֎Ͱ΋؀ڥҠߦΛ ͍ͨ͠৔߹͸ɺGitHub  ͷ΄͏͕ศརɻ
74. hFp://do<iles.github.io/
75. Θ͔ΔΜ͚ͩͲɺͳΜ͔ΊΜͲͦ͘͞͏…   Կ͔Β࢝ΊΕ͹͍͍ͷ΍Β…
76. ελʔλʔΩοτΛ༻ҙ͠·ͨ͠ʂ hFps://github.com/jmblog/do<iles-­‐starter-­‐kit ͜ΕΛϕʔεʹࣗ෼ͷ  Do<iles  Λ   গͣͭ͠ҭͯͯΈ͍ͯͩ͘͞ɻ
77. શମͷ·ͱΊ • ϑϩϯτΤϯυͰλʔϛφϧΛ࢖͍͜ͳ͢ͷ͸ج ຊεΩϧʹͳΓͭͭ͋Δ   • ΤσΟλͱಉ༷ɺλʔϛφϧ΋ࣗ෼ͷखʹ͋ͬͨ ಓ۩ʹ࢓ཱ͍ͯͯ͜͏   • Do<iles  ͸  GitHub  Ͱ؅ཧͯ͠ɺ͍ͭͰ΋Ͳ͔͜Β Ͱ΋ͦͷಓ۩Λ࢖͑ΔΑ͏ʹ͓ͯ͜͠͏
78. [PR]  KAIZEN  pla$orm  Ͱ͸   ΤϯδχΞΛืू͍ͯ͠·͢ WantedlyͰʮKAIZENʯͱݕࡧ