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
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
190
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
450
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
160
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
350
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Applications with DynamoDB
mza
96
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Scaling GitHub
holman
463
140k
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