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
28k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.3k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.5k
わかりやすいグラフを作ろう
jmblog
3
1.4k
Web Components で 社内 UI ライブラリを作っている話
jmblog
11
4.3k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.7k
PostCSS とは何か
jmblog
38
9.9k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
Other Decks in Programming
See All in Programming
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
はじめてのMaterial3 Expressive
ym223
2
170
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
rage against annotate_predecessor
junk0612
0
160
1から理解するWeb Push
dora1998
7
1.8k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
800
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
170
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
720
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
TanStack DB ~状態管理の新しい考え方~
bmthd
2
490
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Context Engineering - Making Every Token Count
addyosmani
1
17
Faster Mobile Websites
deanohume
309
31k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building an army of robots
kneath
306
46k
Documentation Writing (for coders)
carmenintech
74
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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ʯͱݕࡧ