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.7k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
Other Decks in Programming
See All in Programming
なぜselectはselectではないのか
taiyow
2
310
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
350
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3k
List とは何か? / PHPerKaigi 2025
meihei3
0
550
eBPF Updates (March 2025)
kentatada
0
130
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.7k
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
190
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
320
Featured
See All Featured
Scaling GitHub
holman
459
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Navigating Team Friction
lara
184
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Embracing the Ebb and Flow
colly
85
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Code Review Best Practice
trishagee
67
18k
Docker and Python
trallard
44
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Orchestrator
shlominoach
187
10k
How to train your dragon (web standard)
notwaldorf
91
5.9k
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ʯͱݕࡧ