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.2k
우아한 자바스크립트 개발
자바스크립트 코딩을 좀더 우아하게 하는 방법을 고민합니다.
nigayo
April 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
120
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
1
120
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
310
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
410
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
180
EKS Pod Identity における推移的な session tags
z63d
1
200
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
320
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Producing Creativity
orderedlist
PRO
347
40k
Being A Developer After 40
akosma
90
590k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Applications with DynamoDB
mza
96
6.6k
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