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
7k
우아한 자바스크립트 개발
자바스크립트 코딩을 좀더 우아하게 하는 방법을 고민합니다.
nigayo
April 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
530
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
520
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
310
Cracking the KubeCon CfP
inductor
2
250
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
In The Pink: A Labor of Love
frogandcode
138
21k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Why Our Code Smells
bkeepers
PRO
331
56k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Writing Fast Ruby
sferik
621
60k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Documentation Writing (for coders)
carmenintech
60
3.9k
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