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
colo_js_ojisan
Search
Yosuke Furukawa
PRO
September 16, 2014
Programming
0
1.6k
colo_js_ojisan
JSオジサンの発表資料 colo についての話
Yosuke Furukawa
PRO
September 16, 2014
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
21
8.1k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.8k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
980
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.6k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.2k
Deep Dive International Conference
yosuke_furukawa
PRO
0
98
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.8k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
new_urlparser.pdf
yosuke_furukawa
PRO
1
430
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
210
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
28
10k
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
620
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
350
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
31
21k
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
200
Elm 0.19.0 Changes
bkuhlmann
0
480
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Teambox: Starting and Learning
jrom
127
8.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
The Brand Is Dead. Long Live the Brand.
mthomps
48
27k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Navigating Team Friction
lara
177
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Transcript
colo @yosuke_furukawa
Twitter: @yosuke_furukawa Github: yosuke-furukawa Real Name: Yosuke Furukawa
Node.jsຊϢʔβʔάϧʔϓද
console.log(“hoge”) ͯ͠·͔͢?
console.log(“hoge”) ʹ৭Λ͚Δํ๏ͬͯ·͔͢?
node.jsͰ?
Node.jsͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log('\033[31m' + 'Hello World'+ '\033[39m'); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log('\033[33m'+
'Hello World'+ '\033[39m'); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log('\033[36m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log('\033[90m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log('\033[32m ' + 'Hello World'+ ' \033[39m');
browserͰ?
browserͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log(‘%cHello World’, ‘color : red;’); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log(‘%cHello
World’, ‘color : yellow;’); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log(‘%cHello World’, ‘color : blue;’); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log(‘%cHello World’, ‘color : grey;’); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log(‘%cHello World’, ‘color : green;’);
Node.jsͰͷํ๏
͜ͷํ๏ͷ
Node.jsͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log('\033[31m' + 'Hello World'+ '\033[39m'); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log('\033[33m'+
'Hello World'+ '\033[39m'); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log('\033[36m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log('\033[90m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log('\033[32m ' + 'Hello World'+ ' \033[39m');
Node.jsͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log('\033[31m' + 'Hello World'+ '\033[39m'); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log('\033[33m'+
'Hello World'+ '\033[39m'); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log('\033[36m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log('\033[90m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log('\033[32m ' + 'Hello World'+ ' \033[39m'); ֮͑ΒΕͳ͍ɻ
Node.jsͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log('\033[31m' + 'Hello World'+ '\033[39m'); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log('\033[33m'+
'Hello World'+ '\033[39m'); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log('\033[36m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log('\033[90m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log('\033[32m ' + 'Hello World'+ ' \033[39m');
Node.jsͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log('\033[31m' + 'Hello World'+ '\033[39m'); ! //ίϯιʔϧԫ৭͘͢Δɿ console.log('\033[33m'+
'Hello World'+ '\033[39m'); ! //ίϯιʔϧ੨৭ʹ͢Δɿ console.log('\033[36m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧփ৭ʹ͢Δɿ console.log('\033[90m' + 'Hello World' + '\033[39m'); ! //ίϯιʔϧ৭ʹ͢Δɿ console.log('\033[32m ' + 'Hello World'+ ' \033[39m'); a͕`VTFTUSJDU` ҎԼͰౖΒΕΔ
ଞͷcolorizeϞδϡʔϧ
colors Stringͷprototype ֦ுͯ͠͠·͏ɻ //ίϯιʔϧ͘͢Δɿ console.log('Hello World’.red);
colorize ಠࣗߏจΛ֮͑Δඞཁ͕͋Δ //ίϯιʔϧ͘͢Δɿ console.log(colorize.ansify(“#red[Hello World]”));
ansi-color-stream શͯStreamͷsubstackۘ //ίϯιʔϧ͘͢Δɿ a.pipe(colorize(“red”)).pipe(process.stdout);
chalk Ұ൪͍͚ͯΔ͚Ͳ ػೳ͕ଟͯ͘ɺґଘ͕ଟ͍ (browserαϙʔτͯ͠ͳ͍) //ίϯιʔϧ͘͢Δɿ console.log(chalk.red(“Hello World”));
chalk Ұ൪͍͚ͯΔ͚Ͳ ػೳ͕ଟͯ͘ɺґଘ͕ଟ͍ //ίϯιʔϧ͘͢Δɿ console.log(chalk.red(“Hello World”)); ͭ·Γɺ͋Μ·Γ ͍͚ͯΔͷ͕ͳ͍
colo
code examples
coloͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log(colo.red(‘colo colo’)); ! //ίϯιʔϧΛcyan + boldʹ͢Δɿ console.log(colo.cyan.bold(‘colo colo’));
! //ίϯιʔϧΛgreen + underlineʹ͢Δɿ console.log(colo.green.underline(‘colo colo’)); ! //ίϯιʔϧΛmagenta + italicʹ͢Δɿ console.log(colo.magenta.italic(‘colo colo’)); ! //ίϯιʔϧΛgrey + inverseʹ͢Δɿ console.log(colo.grey.inverse(‘colo colo’));
coloͰͷํ๏ //ίϯιʔϧ͘͢Δɿ console.log(colo.red(‘colo colo’)); ! //ίϯιʔϧΛcyan + boldʹ͢Δɿ console.log(colo.cyan.bold(‘colo colo’));
! //ίϯιʔϧΛgreen + underlineʹ͢Δɿ console.log(colo.green.underline(‘colo colo’)); ! //ίϯιʔϧΛmagenta + italicʹ͢Δɿ console.log(colo.magenta.italic(‘colo colo’)); ! //ίϯιʔϧΛgrey + inverseʹ͢Δɿ console.log(colo.grey.inverse(‘colo colo’));
DSL like!
colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and
UNDERLINE”);
colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and
UNDERLINE”);
colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and
UNDERLINE”); QSPQFSUZΞΫηεͬΆ͘ ॏͶ͕͚Ͱ͖Δɻ
Browser support! (Chrome, SafariͷΈ)
colo supports browser // DEMO colog(colo.red(“colo colo")); colog(colo.cyan.bold("colo colo")); colog(colo.green.underline("colo
colo")); colog(colo.magenta.italic.bold("colo colo")); colog(colo.grey.bold.italic.underline("colo colo")); #SPXTFSͰDPMPHΛͬͯ දࣔͰ͖Δɻ
DEMO
colo inside
colo inside Object.definePropertiesͷωετ __proto__Λͬͯಈతʹprototype chainΛ࣮ݱ ґଘϞδϡʔϧθϩͰ࣮ݱ
colo code (github) https://github.com/yosuke-furukawa/colo