Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Yoshihide Jimbo

May 24, 2014
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυΤϯδχΞ
    ͷͨΊͷ  Do$iles
    ਆอՅल  
    KAIZEN  pla$orm  Inc.  
    2014-­‐05-­‐24
    GRAND  FRONT_END  OSAKA

    View Slide

  2. ਆอՅल  
    ʢ͡Μ΅  Α͠ͻͰʣ

    View Slide

  3. Frontend  Engineer  
    @

    View Slide

  4. @jmblog

    View Slide

  5. λʔϛφϧ࢖ͬͯ·͔͢ʁ

    View Slide

  6. • Grunt  ΍  YeomanɺBowerɺ  Git  ͳͲɺϑϩϯτΤ
    ϯυΤϯδχΞ͕λʔϛφϧΛ࢖͏ػձ͸͜͜
    ਺೥Ͱٸʹ૿͖͑ͯͨͱײ͍ͯ͡Δɻ  
    • λʔϛφϧ͸ͪΐͬͱΧελϚΠζ͢Δ͚ͩͰ
    େ෯ʹੜ࢈ੑ͕͕͋Δɻ  
    • ʮࠇ͍ը໘ʯͱسΈݏΘͣλʔϛφϧͱ஥ྑ͘
    ͳΖ͏ʂ

    View Slide

  7. ໨࣍
    • ͩ͜ΘΓͷλʔϛφϧʹΧελϚΠζ͠Α͏  
    • γΣϧΛܶతʹ࢖͍΍͘͢͠Α͏  
    • Do

    View Slide

  8. લఏ
    • OS  X  
    • bash

    View Slide

  9. ͩ͜ΘΓͷλʔϛφϧʹ  
    ΧελϚΠζ͠Α͏

    View Slide

  10. ޷͖ͳΧϥʔεΩʔϜΛ  
    બ΅͏

    View Slide

  11. View Slide

  12. ςϯγϣϯ͕͋ΔͰ͠ΐʁ

    View Slide

  13. ඪ४ͷλʔϛφϧ.app  ʹ͸Χοί͍͍ͷ͕ͳ͍…

    View Slide

  14. λʔϛφϧ.app  ʹ͸͋·Γબ୒ࢶ͕ͳ͍ͷͰɺ  
    iTerm2  Λ࢖͏͜ͱΛΦεεϝ͠·͢ɻ

    View Slide

  15. hFps://github.com/mbadolato/iTerm2-­‐Color-­‐Schemes
    hFps://github.com/baskerville/iTerm-­‐2-­‐Color-­‐Themes
    iTerm2  ༻ΧϥʔεΩʔϜΛ഑෍͍ͯ͠Δ͓͢͢ΊαΠτ

    View Slide

  16. Tomorrow  Night  Bright  
    hFps://github.com/mbadolato/iTerm2-­‐Color-­‐Schemes

    View Slide

  17. ݟͨ໨ΛΑͯ͘͠ɺςϯγϣϯΛ͋͛Δ΂͠ʂ

    View Slide

  18. ίϚϯυϓϩϯϓτΛ  
    ΧελϚΠζ͠Α͏

    View Slide

  19. Yoshihide-­‐no-­‐Mac:~  jmblog$  cd  ~/Desktop  
    Yoshihide-­‐no-­‐Mac:Desktop  jmblog$
    ͜ͷ෦෼͕  ίϚϯυϓϩϯϓτ

    View Slide

  20. ·ͣɺxxxxxxx-­‐no-­‐Mac  ͕໠྽ʹμα͍
    Yoshihide-­‐no-­‐Mac:~  jmblog$  

    View Slide

  21. OS  X  ͷ  [γεςϜ؀ڥઃఆ]  -­‐  [ڞ༗]  ʹ͋Δ  
    ʮίϯϐϡʔλ໊ʯͰมߋͰ͖·͢

    View Slide

  22. ͱ͜ΖͰɺ͜Μͳܦݧ͸͋Γ·ͤΜ͔ʁ

    View Slide

  23. $  cd  ../site1  
    $  cd  styles/  
    $  cd  ../scripts/  
    $  cd  ../../site2  
    :
    cd  ίϚϯυͰ͋ͪͪ͜Ҡಈͯͨ͠Β…

    View Slide

  24. $  cd  ./scripts  
    $  cd  ..  
    $
    ͋ΕʁࠓͲ͜ʹ͍ΔΜ͚ͩͬʁʁ

    View Slide

  25. $  git  checkout  master  
    :  
    $  git  add  
    $  git  commit
    GitϒϥϯνΛ͍Ζ͍Ζ੾Γସ͑ͯͨΒ…

    View Slide

  26. commit  ͢Δϒϥϯνؒҧ͑ͯͨʂ
    $  git  branch  
    *  master  
       develop-­‐1

    View Slide

  27. $  git  add  
    $  git  add  
    :  
    $  git  commit  
    :  
    $  git  add  
    :
    add  ͱ  commit  Λ܁Γฦͯͨ͠Β…

    View Slide

  28. શ෦  commit  ͨͭ͠΋Γͩͬͨͷʹ࿙Εͯͨʂ
    $  git  status  -­‐s  
    ??  aa.txt

    View Slide

  29. શ෦ίϚϯυϓϩϯϓτͰղܾ͠·͢ʂ

    View Slide

  30. jmblog@mba:  ~/src/site1/styles  on  master  [!]  
    $  

    View Slide

  31. jmblog@mba:  ~/src/site1/styles  on  master  [!]  
    $  
    ↑  
    ৭͕͍ͭͯݟ΍͍͢ʂ

    View Slide

  32. jmblog@mba:  ~/src/site1/styles  on  master  [!]  
    $  
    ݱࡏͷҐஔ  

    ݱࡏͷϒϥϯν  

    ɹɹ↑  
    ϒϥϯνͷঢ়ଶ

    View Slide

  33. View Slide

  34. Ͳ͏΍ͬͯมߋ͢Δͷʁ

    View Slide

  35. ઃఆϑΝΠϧΛ༻ҙ͠·ͨ͠ʂ
    hFp://git.io/ZzZuww
    ࣍ͷϑΝΠϧͷத਎Λ  ~/.bash_profile  ʹ௥Ճ͢Δ͚ͩ

    View Slide

  36. ͜͜·Ͱͷ·ͱΊ
    • ·ͣ͸ࣗ෼޷ΈͷΧϥʔεΩʔϜΛݟ͚ͭͯݟͨ
    ໨ΛΑ͘͠Α͏ɻ  
    • ίϚϯυϓϩϯϓτΛΧελϚΠζͯ͠ɺλʔϛ
    φϧૢ࡞ΛΘ͔Γ΍͘͢͠Α͏ɻ

    View Slide

  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

    View Slide

  38. ..  on  master[+]
    ʲิ଍2ʳϒϥϯνͷঢ়ଶදهʹ͍ͭͯ
    ..  on  master[!]
    ..  on  master[?]
    ..  on  master[$]
    add  ͚ͨ͠Ͳ  commit  ͕·ͩ
    add  ͕·ͩ
    όʔδϣϯ؅ཧର৅֎
    git  stash  ͯ͋͠Δ

    View Slide

  39. γΣϧΛܶతʹ  
    ࢖͍΍͘͢͠Α͏

    View Slide

  40. ls  ίϚϯυΛ࢖͍΍͘͢

    View Slide

  41. ##  BSD  ls  (OS  X  ͸ͪ͜Β)  
    $  ls  -­‐G  
    !
    ###  GNU  ls  (Linux  ͳͲ͸ͪ͜Βʣ  
    $  ls  -­‐-­‐color=auto  
    ls  ͷ݁Ռʹ৭Λ͚ͭΔ

    View Slide

  42. View Slide

  43. View Slide

  44. #  Ӆ͠ϑΝΠϧΛؚΊ͢΂ͯදࣔ  
    $  ls  -­‐a  
    !
    #  `.`  ͱ  `..`  Ҏ֎͢΂ͯදࣔ  
    $  ls  -­‐A  
    !
    #  σΟϨΫτϦʹ͸  `/`  Λ͚ͭΔ  
    $  ls  -­‐F  
    !
    #  ৄࡉͳϑΥʔϚοτͰදࣔ  
    $  ls  -­‐l
    ls  ͷग़ྗ݁ՌΛΧελϚΠζ

    View Slide

  45. alias  ls="ls  -­‐GAF"  
    alias  ll="ls  -­‐l”  
    !
    if  [  $(uname)  =  "Linux"  ]  
      alias  ls="ls  -­‐-­‐color=auto  -­‐AF"  
    fi
    alias  Λ༻ҙ͓ͯ͘͠ͱΑ͍Ͱ͢
    .bash_profile

    View Slide

  46. cd  ίϚϯυΛ࢖͍΍͘͢

    View Slide

  47. $  cd  -­‐
    ௚લͷσΟϨΫτϦʹ໭Δ
    $  pwd  
    /Users/Yoshihide  
    $  cd  Projects/jmblog@github/dotfiles  
    $  cd  -­‐  
    $  pwd  
    /Users/Yoshihide

    View Slide

  48. cd  Ͱ  typo  ͯ͠΋ࣗಈతʹਖ਼͍͠ύεʹ  
    Ҡಈͯ͘͠ΕΔΑ͏ʹ͢Δ
    shopt  -­‐s  cdspell
    .bash_profile
    ྫ͑͹ɺDocuments  σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠
    $  cd  Document
    ͱೖྗͯ͠΋ Documents  ʹҠಈͯ͘͠ΕΔɻ

    View Slide

  49. ίϚϯυཤྺʢhistoryʣΛ࢖͍͓ͨ͢

    View Slide

  50. ্Լ໼ҹΩʔͰίϚϯυཤྺΛલํҰகαʔν
    ίϚϯυͷઌ಄਺จࣈ͚ͩଧ্ͬͯ໼ҹΩʔ࿈ଧ͢Δͱɺ  
    Ұகͨ͠ίϚϯυͷཤྺΛݕࡧͰ͖Δɻ

    View Slide

  51. $  (reverse-­‐i-­‐search)`':
    ίϚϯυཤྺͷΠϯΫϦϝϯλϧαʔν
    `Ctrl-­‐r`  Λԡͯ͠ݕࡧ͍ͨ͠ΩʔϫʔυΛೖྗɻ  
    `Ctrl-­‐r`  Λ࿈ଧ͢Δͱɺಉ͡ݕࡧޠͰͲΜͲΜḪΔɻ

    View Slide

  52. ॏෳ͢ΔίϚϯυΛཤྺʹ࢒͞ͳ͍
    export  HISTCONTROL=ignoreboth:erasedups
    .bash_profile

    View Slide

  53. ෆཁͳίϚϯυΛཤྺʹ࢒͞ͳ͍
    export  HISTIGNORE="ls:ls  *:ll:ll  *:cd:cd  -­‐:pwd"
    .bash_profile
    HISTIGNORE  ʹ  
    ཤྺʹ࢒ͨ͘͠ͳ͍ίϚϯυΛʮ:ʯ۠੾ΓͰઃఆ͢Δɻ  
    ls  ΍  cd  Λઃఆ͓ͯ͘͠ͱΑ͍ɻ

    View Slide

  54. ίϚϯυཤྺ਺Λ૿΍͢
    export  HISTFILESIZE=10000  
    export  HISTSIZE=10000
    .bash_profile
    σϑΥϧτ͸  500  ͳͷͰ޷͖ͳ਺ʹ૿΍͢ɻ  
    ଟ͗͢ΔͱύϑΥʔϚϯε͕௿Լ͢ΔͷͰ  
    10000  ఔ౓͕͓͢͢Ίɻ

    View Slide

  55. ೖྗิ׬Λݡ͘ར༻͢Δ

    View Slide

  56. bash-­‐compleVon  /  git-­‐compleVon  Λಋೖ͢Δ
    $  brew  install  bash-­‐completion  
    $  brew  install  git
    ίϚϯυͷೖྗ్தͰ    Λ  2ճԡ͢ͱ  
    ೖྗิ׬ͯ͘͠ΕΔΑ͏ʹͳΔɻ  
    !
    ʢzshͳΒඪ४Ͱڧྗͳೖྗิ׬͕࢖͑·͢ɻʣ

    View Slide

  57.  Λ  2ճԡ͢ͷ͕ΊΜͲ͍͘͞
    set  show-­‐all-­‐if-­‐ambiguous  on
    Λ1ճԡ͚ͩ͢Ͱೖྗิ׬͕ग़ΔΑ͏ʹͳΔɻ  
    !
    ʢ.bash_profile  Ͱ͸ͳ͘  .inputrc  ʹهड़͢Δ͜ͱʂʣ
    .inputrc

    View Slide

  58. େจࣈ/খจࣈΛແࢹ͢Δ
    set  completion-­‐ignore-­‐case  on
    .inputrc
    ྫ͑͹ɺDocuments  σΟϨΫτϦʹҠಈ͠Α͏ͱͯ͠
    $  cd  docu
    ͱೖྗͯ͠    Λԡ͢ͱɺDocuments  ͕ग़ΔΑ͏ʹͳΔɻ
    ʢ͜Ε΋  .inputrc  ʹهड़͢Δ͜ͱʂʣ

    View Slide

  59. ack  Λ࢖ͬͯςΩετݕࡧΛΑΓ؆୯ʹ

    View Slide

  60. ྫʣΧϨϯτσΟϨΫτϦͷ  *.scss  ͓Αͼ  *.css  ϑΝΠϧ͔Β  
     `#fff'  ؚ͕·ΕΔ΋ͷΛݕࡧ͍ͨ͠ɻ

    View Slide

  61. grep  Λ࢖ͬͨ৔߹
    $  find  .  \(  -­‐name  "*.scss"  -­‐o  -­‐name  "*.css"  \)  |  xargs  grep  '#fff'
    ແཧ…

    View Slide

  62. ack  Λ࢖ͬͨ৔߹
    $  ack  -­‐-­‐sass  -­‐-­‐css  '#fff'
    `ack  -­‐-­‐help-­‐type`  ͰରԠ͍ͯ͠ΔϑΝΠϧλΠϓ͕֬ೝͰ͖·͢ɻ

    View Slide

  63. ack  ͷΠϯετʔϧ
    $  brew  install  ack

    View Slide

  64. -­‐-­‐ignore-­‐dir=log  
    -­‐-­‐ignore-­‐dir=tmp  
    -­‐-­‐ignore-­‐dir=vendor  
    -­‐-­‐ignore-­‐dir=.sass-­‐cache  
    -­‐-­‐sort-­‐files
    .ackrc
    ແࢹ͍ͨ͠σΟϨΫτϦΛઃఆ͓ͯ͘͠ͱศརɻ
    ack  ͷ  ઃఆϑΝΠϧʢ.ackrcʣ

    View Slide

  65. ΩʔϦϐʔτͷઃఆΛมߋ͢Δ

    View Slide

  66. KeyRemap4MacBook  Λಋೖ͢Δ

    View Slide

  67. View Slide

  68. Delay  UnVl  Repeat  
    100  ~  300  (default  is  500)  ʹઃఆ͢Δ  
    ૣ͘͠ա͗Δͱίϐϖ͕ॏෳ͢ΔͷͰগ͠཈͑ؾຯʹ͢Δɻ  
    !
    Key  Repeat  
    10ʙ30ఔ౓ʢdefault  83ʣ

    View Slide

  69. ͜͜·Ͱͷ·ͱΊ
    • .bash_profile  ʹ͍Ζ͍ΖͳઃఆΛهड़ͯ͠γΣϧ
    ͷ࢖͍উखΛΑ͘͠Α͏  
    • ΩʔϦϐʔτͷઃఆΛม͑Δͱ࢓ࣄ͕ḿΔΑ

    View Slide

  70. Do$iles  Λ  GitHub  Ͱ  
    ؅ཧ͠Α͏

    View Slide

  71. Do$iles  ͱ͸ʁ
    • ͖͞΄Ͳ͔Βग़͖͍ͯͯΔ  .bash_profile  ͸  
    Do• ໊લ͕ʮ.ʢυοτʣʯͰ࢝·Δ֤छઃఆϑΝΠ
    ϧͷ͜ͱɻ  
    • ଟ͘͸ϗʔϜσΟϨΫτϦʹஔ͔ΕΔɻ

    View Slide

  72. View Slide

  73. ͳͥ  GitHub  Ͱ؅ཧͨ͠΄͏͕  
    ͍͍ͷ͔ʁ
    • ࣗ୐ͱձࣾͰಉ͡։ൃ؀ڥΛอ͓͖͍ͬͯͨ৔
    ߹΍ɺ৽͍͠  Mac  Λങͬͨ࣌ͳͲʹɺ؆୯ʹࣗ
    ෼ͷ։ൃ؀ڥΛҠߦ/ಉظ͢Δ͜ͱ͕Ͱ͖Δɻ  
    • DropBox  Ͱ΋͍͍͚ͲɺMac  Ҏ֎Ͱ΋؀ڥҠߦΛ
    ͍ͨ͠৔߹͸ɺGitHub  ͷ΄͏͕ศརɻ

    View Slide

  74. hFp://do

    View Slide

  75. Θ͔ΔΜ͚ͩͲɺͳΜ͔ΊΜͲͦ͘͞͏…  
    Կ͔Β࢝ΊΕ͹͍͍ͷ΍Β…

    View Slide

  76. ελʔλʔΩοτΛ༻ҙ͠·ͨ͠ʂ
    hFps://github.com/jmblog/do͜ΕΛϕʔεʹࣗ෼ͷ  Doগͣͭ͠ҭͯͯΈ͍ͯͩ͘͞ɻ

    View Slide

  77. શମͷ·ͱΊ
    • ϑϩϯτΤϯυͰλʔϛφϧΛ࢖͍͜ͳ͢ͷ͸ج
    ຊεΩϧʹͳΓͭͭ͋Δ  
    • ΤσΟλͱಉ༷ɺλʔϛφϧ΋ࣗ෼ͷखʹ͋ͬͨ
    ಓ۩ʹ࢓ཱ͍ͯͯ͜͏  
    • DoͰ΋ͦͷಓ۩Λ࢖͑ΔΑ͏ʹ͓ͯ͜͠͏

    View Slide

  78. [PR]  KAIZEN  pla$orm  Ͱ͸  
    ΤϯδχΞΛืू͍ͯ͠·͢
    WantedlyͰʮKAIZENʯͱݕࡧ

    View Slide