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
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
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
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
650
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
150
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
310
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
840
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
470
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
270
Laravel Boost 超入門
fire_arlo
2
210
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
RailsConf 2023
tenderlove
30
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Rails Girls Zürich Keynote
gr2m
95
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
100
5.8k
Code Reviewing Like a Champion
maltzj
525
40k
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