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

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

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

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

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

May 24, 2014
Tweet

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. ޷͖ͳΧϥʔεΩʔϜΛ   બ΅͏

  11. None
  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  [!]   $   ݱࡏͷҐஔ  

    ↓ ݱࡏͷϒϥϯν   ↓ ɹɹ↑   ϒϥϯνͷঢ়ଶ
  33. None
  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  ͷ݁Ռʹ৭Λ͚ͭΔ
  42. None
  43. None
  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  Λಋೖ͢Δ

  67. None
  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  ͷҰͭɻ  

    • ໊લ͕ʮ.ʢυοτʣʯͰ࢝·Δ֤छઃఆϑΝΠ ϧͷ͜ͱɻ   • ଟ͘͸ϗʔϜσΟϨΫτϦʹஔ͔ΕΔɻ
  72. None
  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ʯͱݕࡧ