Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアのための Dotfiles
Search
Yoshihide Jimbo
May 24, 2014
Programming
53
8.5k
フロントエンドエンジニアのための 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
32
27k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.2k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.4k
わかりやすいグラフを作ろう
jmblog
3
1.3k
Web Components で 社内 UI ライブラリを作っている話
jmblog
11
4.2k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.6k
PostCSS とは何か
jmblog
38
9.8k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
Other Decks in Programming
See All in Programming
PHP で学ぶ OAuth 入門
azuki
1
190
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
150
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
110
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
640
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
280
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
810
Chrome Extension Techniques from Hell
moznion
1
160
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
140
Unlock the Potential of Swift Code Generation
rockname
0
250
DataStoreをテストする
mkeeda
0
290
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GraphQLとの向き合い方2022年版
quramy
46
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
For a Future-Friendly Web
brad_frost
176
9.7k
Documentation Writing (for coders)
carmenintech
69
4.7k
Speed Design
sergeychernyshev
29
900
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Gamification - CAS2011
davidbonilla
81
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Scaling GitHub
holman
459
140k
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ʯͱݕࡧ