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
우아한 자바스크립트 개발
Search
nigayo
April 13, 2018
Technology
11
7.1k
우아한 자바스크립트 개발
자바스크립트 코딩을 좀더 우아하게 하는 방법을 고민합니다.
nigayo
April 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
140
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
220
ビギナーであり続ける/beginning
ikuodanaka
3
690
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
280
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
300
怖くない!はじめてのClaude Code
shinya337
0
360
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
200
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
5k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
560
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
430
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A better future with KSS
kneath
239
17k
A designer walks into a library…
pauljervisheath
207
24k
Why Our Code Smells
bkeepers
PRO
337
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
It's Worth the Effort
3n
185
28k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
RailsConf 2023
tenderlove
30
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Transcript
ইೠ߄झ݀ѐߊ ٘झ௪٘ ਮࣻ
٘झ௪٘݃झఠૉझੌ࢚ 13$PEF3FWJFX
const msnia = Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:40}).map(Function.call,
Number).map((v)=> ++v); எ࠭౭j
֙ IUUQTXXXTMJEFTIBSFOFUKJTVZPVODMFBOGSPOUFOEEFWFMPQNFOU
ইೣۆޖੋо جইр
ܽ ܻ؊࠶_ ޥঌѢ э Բ х࢚ೞҊ र ױࣽೞӝ Ӓহח ࢚غח
ಬ ঋח ળࢎی ߓ۰ೞח
ಿઓղ ੌৈਬ ѐߊইೠ
ӒۢীبࠛҳೞҊ ইೠ߄झ݀ѐߊ
ܽ٘оޤীਃ ӒրաীೞݶऔѱೡѢэӒѪ
ই ӵ Ֆ ೧ ӵՖೠѪજ݅ ӒѪইੌࠗ࠙ ޤ۠Ѣ
߸҃ਸਤೠ٬ 6*חખ؊बೠ٠
ஹೊఠо೧ೞח٘ ߡӒহח٘ ѱоࢎۈऔѱ೧ೞח٘$ খਵ۽بߡӒহח٘
Ѿۿ
оةࢿGJSTU
Ӓۢ ࢿמन҃উॳջ ࠂೠޙઁоইפۄݶ ରରೞחѦ۽ ਃೡٸೞחѦ۽j оةࢿGJSTU
ܽ٘ۚ ઁөਬೞחࢲ࠺झীਃ যڃӝמ୶оؼભ ࢎਊחযڃࢎۈٜભ যڃജ҃ীࢲزೞભ ־о۽ਬࠁࣻೠؘਃ
դউೠ
Ӓী ܽࢸ҅ ׯইפջ
ࢎਊೞחଃ٘ܳݢҳഅೞӝ const modal = new Modal({..}); const slider = new
Slider({..}); const service = new ServiceMain(); service.addPlugin(modal, slider); service.on({//do something}); য࢝ೞঋਸٸөೠ ݈ ੌೠѢ
ࢸ҅ѐߊೠ Ӓ۠࠺ਯহ ࢎҊܴীݏ٣ੋೞӝ рױೞҊ ݺഛೠҳઑоաৢٸө҅ࣘࢸ҅
ೣࣻࣻળࢸ҅ ܴ݅ੜਵݶррࢸ҅ ࢸ҅оউજਵݶજܴաৢࣻহ ۄఠ৬߈ജী ҳഅറীחࢸ҅ഥҊ جইࠁפܴҗ߈ജ׳ۄj
GPP ઃ ־оܴખয
WTDPEFীࢎ۞Ӓੋਃೞ
ҳੋ NFBOJOH ܳࠗৈೞ time => currentTime data => addressData
ҳੋ NFBOJOH ܳࠗৈೞ const splitted = input.split('$')[0]; const studentName =
input.split('$')[0];
ೣࣻ sޖਸೞs calculate => calculateNextValue
HFU999 HFUޤӡযঠ ࢚ೡࣻחߧਤীࢲزೞب۾
ডযইצডযبডয async function async() { const int = 3; var
array = await resolveAfter2Seconds(); console.log(array); }
circle = 3.14 * r * r; d = _erx
* 999; হחंחઁߊj
//ೣࣻࢶ function execSomething({ width, height }) { console.log(width, height); }
//ࠗܰӝ execSomething({ width: 20, height: 400, maxNumber: 300, minNumber: 100 }); PCKFDUMJUFSBMܳਊೠݒѐ߸ࣻ׳
ಞউೠ٘ ೠ׀хҊ੍ח
ӛࢶ٘դӛੋੋр if(! (typeof data === “string”)) else … )
ઑѤޙೣࣻܳજই೧ਃ if( n % 1 === 0 ) { console.log(“ࣻ
”) } if( isInt(n) ) { console.log(“ࣻ ”) } +
ࠛਃೠݒೝহগӝ var todo = { "todo" : “todo", "done" :
“done”, , :- }
ܻ݅࠺ methodA(obj.methodA()[3], obj.methodB()[2]);
ա־ݶӝࢄߓоظਃ const data = []; [1,2,3,4,5].forEach((v,i) => { if(v%2) {
data.push(v); console.log(`${v} is added`); } }); [1,2,3,4,5].filter(v => v%2).forEach(v=>console.log(`${v} is added`)); ߹۽ જই
ೠ ܻ࠙աܻ࠙ݽইفӝ ݃աܻ࠙೧ঠೡө
эੑ۱ূ טэ۱ਵ۽߈ജ 3FGFSFOUJBMUSBOTQBSFODZ average([10,20,30,40]); //25 పझоएਕѤؒ
࢚కܳऔѱ࢚ೞӝ оәJNNVUBCMF let arr = [5,1,23,52,2]; const sortedArr = [...arr].sort((a,b)
=> a-b); console.log(arr, sortedArr);
ࢎҊܴਵ۽زೞחѤજ DIBJOJOH DPNQPTJUJPO const ArrayParser = str => { return
pipe(splited, _map(trimed), _map(removeBracket), resultToObj)(str) }
୭Ӕળਵ۽؊উೞҊಞউೠ٘ܳ DPOTUҗMFUਵ۽ਤӝ EFGBVMUQBSBNFUFS۽r]]sೞӝ BSSPXGVODUJPOਵ۽рױҊରೣࣻഅೞӝ &4
function Animal(name) { this.name = name; } Animal.prototype.speak = function()
{ console.log(this.name + ' makes a noise.'); } function Dog(name) { Animal.call(this,name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.speak = function() { console.log(this.name + ' barks.'); } var myDog = new Dog("ൟو"); myDog.speak(); class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } var d = new Dog('ൟو'); d.speak(); Ӓؘ۠ QSPUPUZQFঌҊॳӝਃ` ׳ೞ
addEventListener('fetch', event => { event.respondWith(async function() { const cache =
await caches.open(‘v1'); const cachedResponse = await cache.match(event.request); if (cachedResponse) { return cachedResponse;} const fetchedResponse = await fetch(event.request); const fetchObj = await cache.put(event.request, fetchedResponse.clone()); return fetchedResponse; }()); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.open('v1').then(function(cache) { return cache.match(event.request).then(function (response) { return response || fetch(event.request).then(function(response) { cache.put(event.request, response.clone()); return response; }); }); }) ); }); ҡଳই ؊જই 0 оә؊աইࠁחޙߨࢎਊ
٘ࣻয۵ݶ tӒېܻীѲࢳয” ঌӝয۰۽ਸഅ ۽Ӓ۔ܴഅ ҊѢܻ৬ೠ҅١хਸӝ ܲѐߊীѱ׳೧חݒࢎ೦
ࠂೞפफఠۄ ੌࠗ۞ۧѱҊщա
function run(arg) { if(arg !== 10) return; //do something… }
ইצѤ ࡈܻ߈ജೞӝ ߈ࠂޙীࢲחࡈܻDPOUJOVF FMTFޙبਃহ
for (let i = range - 1; i < d.length;
i++) { let sum = 0; for (let j = (i - range + 1); j <= (i); j++) { sum += d[j]; } result.push(sum); } for(var i=0; i<range; i++) { sum += d[i]; } for(var j=i-1; j<d.length; j++) { if(j === (range-1)) { console.log(j + "ө "+ range + "ѐ : ", sum); continue; } let start = j-(range); sum += d[j] - d[start]; console.log(j + 1 + "ө" + range + "ѐ : ", sum); } …. Ӓրշف݈ӝ ߹۽ જই ଵҊߓৌ<j/>ө ୭Ӕ.ѤಣӐਸҳೞח۽Ӓ۔
ࠂೞݶ ա־ࣁਃ return Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:
40}).map(Function.call, Number).map((v)=> ++v); ٣ߡӦएਕחѤؒ
ࠂೠ֗ࢳਸऀѹߡܻӝ const checking =/^(([^<>()\[\]\\.,;:\s@“]+(\.[^<>()\ [\]\\.,;:\s@“]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\. [0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] {2,}))$/.test(str); ࢎਊغחѤؒ const validEmail
= isValidEmail(eMail); ࣗࢎ
attr = (el, ...attr) =>(attr.some((k, i)=>{ eif(i % 2) return;
econst v = attr[i + 1]; eif(typeof el[k] == 'function') el[k](...(Array.isArray(v)? v :[v])); eelse if(k[0] == '@') el.style[k.substr(1)] = v; eelse el[k] = v; }), el); //ࢎਊ attr(sel(`#btn1`), e'@background', 'red', //झఋੌ e'innerHTML', 'write', //ࣘࢿ e'addEventListener', ['click', _=>post()] //߮ ); য٣ࢲࠌ؊ۄ ࠂೠ֗ࢳਸऀѹߡܻӝ
ёҙ҅ܳాೠઑѤޙহগӝ const moveCharacter = ({character, cmd, step}) => { //actionsਸ
ҙ҅۽ ࢸ೧فӝ. const Actions = { run(character,step) { return `${character} run ${step} meter`; }, jump(character, step) { return `${character} jump ${step} meter`; }, swim(character,step) { return ` ${character} swim ${step} meter`; } }; return Actions[cmd] && Actions[cmd](character, step); } moveCharacter({character:"crong", cmd:"jump", step:300}); moveCharacter({character:"codesquad", cmd:"run", step:10}); moveCharacter({character:"crong", cmd:"swim", step:1000});
ੌҙؽ ցоযڌѱૢդ࢚ػפө
୭ࣗೠ٬ஶ߮࣌ਬೞӝ য٣ীޙܳॶ @৬חઁॶ &4 &4
jӝఋ١١ OBNJOHSVMF݅ੜٜযبޤ
߈ࠂܻܳ݃ҳ߈ࠂೞ݈ tGPSGPS&BDISFEVDFNBQGJMUFSGPSPGXIJMFju ޖਸઁॶѪੋо DIBJOJOHਵ۽അೡѪੋо Ҋରೣࣻࢶয٣ীࢲೡѪੋо
फযبਸਤ೧ ݏ୶ۄ
001 ୶࢚ച ङച ࢚ࣘ ഋࢿjޖࢲߡ
40-*% ੜݽܰѷਵݶ ߸҃ীੜೞחٜ٘ܳ݅যࠁ
ېझҳઑܳױࣽೞѱਬ ࠂೠ࢚ࣘjஞݎೠ JNBHFIUUQNPOLFZTJNBHJOBSZSFBMJUJFTDPNJNBHFTGG+BWBHJG
ٸۿ ࢚ࣘन NJYJOաࢿ DPNQPTJUJPO //Super class const Character =
class { constructor(name) { this.name = name; } } //methods function walk() { console.log(this.name, "is walking")} function run() { console.log(this.name, "is running")} function jump() { console.log(this.name, "is jumping")} function swim() { console.log(this.name, "is swimming:")} function fly() { console.log(this.name, "is flying")} let man = new Character("caly"); walker = Object.assign(man, {walk, run}); let spyderMan = new Character("robert"); walker = Object.assign(spyderMan, {walk, run, jump}); let ironMan = new Character("caly"); walker = Object.assign(walker, {walking}, {running}, {jumping}, {fly}); spyderMan.run();
ࢲ࠳ӝמ߄Ոٜ ݫੋӝמӒ۽ ઓࢿਸੑೞҊ ࠺तೠزੌҙػ"1*۽ز %* 0$1 MPDBMTUPSBHF JOEFYFE%# const A
= class { … getDage(data) { //ࢲ࠳ӝמ ݽف getDataܳ ࢎਊ return this.repo.getData(); } } const a = new A(new idxDBStrorage());
ࣻоইפݶ ২࣌ਵ۽ઁҕ var options = { tooltip: { grouped: true,
template: function(category, items, categoryTimestamp) { var head = '<div>' + category + '</div>', body = tui.util.map(items, function(item) { return '<div>' + item.value + ':' + item.legend + '</div>' }),join(''); return head + body; } } }; tui.chart.lineChart(container, data, options); DPEFIUUQTHJUIVCDPNOIOFOUUVJDIBSUCMPCQSPEVDUJPOEPDTXJLJGFBUVSFTUPPMUJQNEFYBNQMF
ېझী উ݃۲ೞӝ const privateMethods = { privateMethod () { console.log(this.say);
} } export default class Service { constructor () { this.say = "Hello"; } publicMethod () { privateMethods.privateMethod.call(this); } } DPEFIUUQTNFEJVNDPN!EBWJESIZTXIJUFQSJWBUFNFNCFSTJOFTECDDEB 4ZNCPMTਸਊೡࣻبೣ
ী۞ܻ ѐߊٜীѱо٘ܳ೧ࠁ
ী۞ܻڙڙೠݒ
ࢎਊۄ࠳۞ۄݶ DVTUPNFSSPSبݧ class MyError extends Error { constructor(message) { super(message);
this.message = message; this.name = '[FOO Service Error]'; } } class FooTypeError extends MyError { constructor(message) { super(message); this.message = message; this.name = '[FOO Service Type Error]'; if (Error.captureStackTrace) { Error.captureStackTrace(this, FooTypeError)} } } function setName(name) { if(typeof name !== "string") throw new FooTypeError("setName() : string ఋੑ݅ ೲਊפ"); //do something } function run() { try { setName(12345); }catch (e) { if(e instanceof MyError) { console.log(` ${e.stack}`); } else { console.log(e); } } } run(); VM922:28 [FOO Service Type Error]: setName() : string ఋੑ݅ ೲਊפ
Ѥ୷ ܻಂష݂ইѤ୷җܰ
ࠂೠ٘оաয়ӝী ૣӝܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ
ܻಂష݂ ࢸ҅ ѐߊ ಂష݂
ܻಂష݂दࠂਸহগחѪࠗఠ JNBHFIUUQXXXTFFEPGUPNPSSPXDPNXQDPOUFOUVQMPBETDMPOFKQH ❌ ❌ ❌
ӝ݅ৈաоب߈ࢿҕ✌ ېझ ೣࣻ
৻۽ੜޅೞח ੋݒѐ߸ࣻੜॳӝ ё ֎झಕझ ېझࢎਊ ߸ࣻઁѢ
ղࠗܳࠁഐೞۄ const _ = (function CodeSquadUtil() { let innerValue =
""; const print = function(msg) {console.log(msg)} const min = function() { return 'min'}; const sumBy = function() {}; const round = function() {}; return {min, sumBy, round} })(); console.log(_.min());
ݯߡ߸ࣻח߸ࣻ৬ޤоܲо class Todo { constructor(id, task){ this.id = id; this.task
= task; this.state = ‘todo; this.time = {}; this.Seconds = 1000; this.resultList = 1000; this.lastTime = 1000; this.buffer = 1000; } update(state){ this.state = state; } …
ۄ࠳۞ܻо٘
WBOJMMB"1* হחѪٜ݅যࠁӝ ۄ࠳۞ܻॳӝ
class smartCollection extend Array { exec() { …} } Ѥ٧ࣻҊ
Ѥ٘۰ঠೞחѤইפ OBUJWF"1*ա ۄ࠳۞ܻחખ؊উೞѱഛೞӝ
ۨਕоܻ٘ܳܽೞѱ೧ঋ؊ۄ MJGFDZDMF߸ചܳળ3FBDU MJGFDZMFਸٜ݅ਵա بೠѪۢੜॳޅೞ؊ۄj
જبҳبॳӝաܴ 'SBNFXPSLח୭ࣗೠࣻળਸਬ೧ળ ࠺زӝܻחযוदীೡѪੋо যڌѱUFNQMBUJOHসਸೡѪੋо ܴਸযڌѱਸѪੋо ஹನքӝחযוب۽ೡѪੋо
ؘఠܻחযڃݫࢲ٘ܳॳݶࢲܻೡѪੋо ஹನքрؘఠ׳যڌѱೡѪੋо ۨਕоܻ٘ܳܽೞѱ೧ঋ؊ۄ
݄݃ਵ۽
ܽ٘חթਸߓ۰ೞח٘ Ӓؘ۠ ѾҴ աܳߓ۰ೞח٘ӝبೞ
tܽ٘חѐߊޙചѾҗޛ Րহࢸٙೞۄ աܳਤ೧ u ܻ࠭ޙച ಕয۽Ӓې߁ ೣԋࢿೞӝ ಿࢶ
݆ଵҊ೮Ҋ ഴܯೠܐٜ IUUQTHJUIVCDPNSZBONDEFSNPUUDMFBODPEFKBWBTDSJQU IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU
хࢎפ ٘झ௪٘ ਮࣻ DSPOH!DPEFTRVBELS