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.7k
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
2
140
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Cache Me If You Can
ryunen344
2
4k
RDoc meets YARD
okuramasafumi
4
170
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
110
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
570
アセットのコンパイルについて
ojun9
0
130
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
為你自己學 Python - 冷知識篇
eddie
1
350
はじめてのMaterial3 Expressive
ym223
2
910
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
rage against annotate_predecessor
junk0612
0
170
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Bash Introduction
62gerente
615
210k
Designing for humans not robots
tammielis
253
25k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.8k
Into the Great Unknown - MozCon
thekraken
40
2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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