colo_js_ojisan

JSオジサンの発表資料 colo についての話

Transcript

1. colo @yosuke_furukawa
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa Real Name: Yosuke Furukawa
3. Node.js೔ຊϢʔβʔάϧʔϓ୅ද
4. console.log(“hoge”) ͯ͠·͔͢?
5. console.log(“hoge”) ʹ৭Λ෇͚Δํ๏஌ͬͯ·͔͢?
6. node.jsͰ͸?
7. 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');
8. browserͰ͸?
9. 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;’);
10. Node.jsͰͷํ๏
11. ͜ͷํ๏ͷ໰୊
12. 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');
13. 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'); ֮͑ΒΕͳ͍ɻ
14. 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');
15. 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͕`VTF
    TUSJDU`
 ҎԼͰ͸ౖΒΕΔ
16. ଞͷcolorizeϞδϡʔϧ
17. colors Stringͷprototype ֦ுͯ͠͠·͏ɻ //ίϯιʔϧ੺͘͢Δɿ console.log('Hello World’.red);
18. colorize ಠࣗߏจΛ֮͑Δඞཁ͕͋Δ //ίϯιʔϧ੺͘͢Δɿ console.log(colorize.ansify(“#red[Hello World]”));
19. ansi-color-stream શͯStreamͷsubstackۘ੡ //ίϯιʔϧ੺͘͢Δɿ a.pipe(colorize(“red”)).pipe(process.stdout);
20. chalk Ұ൪͍͚ͯΔ͚Ͳ
 ػೳ͕ଟͯ͘ɺґଘ͕ଟ͍ (browser͸αϙʔτͯ͠ͳ͍) //ίϯιʔϧ੺͘͢Δɿ console.log(chalk.red(“Hello World”));
21. chalk Ұ൪͍͚ͯΔ͚Ͳ
 ػೳ͕ଟͯ͘ɺґଘ͕ଟ͍ //ίϯιʔϧ੺͘͢Δɿ console.log(chalk.red(“Hello World”)); ͭ·Γɺ͋Μ·Γ
    ͍͚ͯΔͷ͕ͳ͍
22. colo
23. code examples
24. 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’));
25. 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’));
26. DSL like!
27. colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and UNDERLINE”);
28. colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and UNDERLINE”);
29. colo DSL colo.red("RED"); colo.red.bold("RED and BOLD"); colo.red.bold.underline("RED and BOLD and UNDERLINE”); QSPQFSUZΞΫηεͬΆ͘
    ॏͶ͕͚Ͱ͖Δɻ
30. Browser support! (Chrome, SafariͷΈ)
31. 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Λ࢖ͬͯ දࣔͰ͖Δɻ
32. DEMO
33. colo inside
34. colo inside Object.definePropertiesͷωετ __proto__Λ࢖ͬͯಈతʹprototype chainΛ࣮ݱ ґଘϞδϡʔϧθϩͰ࣮ݱ
35. colo code (github) https://github.com/yosuke-furukawa/colo