Upgrade to Pro — share decks privately, control downloads, hide ads and more …

なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for jonakp jonakp
January 10, 2020
41

 なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?

Avatar for jonakp

jonakp

January 10, 2020
Tweet

Transcript

  1. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJS 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑ

    3. ϑϩϯτΤϯυ ଆͷ໰୊Λղܾ͢ΔNode.js੡ͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓ 4. Node.js੡ͷπʔϧΛར༻ͨ͠ϑϨʔϜϫʔΫͷొ৔(2013೥ࠒ?ʙ) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)
  2. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJS 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑ

    3. ϑϩϯτΤϯυଆͷ໰୊Λղܾ͢ΔNode.jsͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓ 4. Node.js੡ͷπʔϧΛલఏͱͨ͠ɺϑϩϯτଆͷಈ͖(2013೥ࠒʙ?) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)
  3. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJS 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑ

    3. ϑϩϯτΤϯυଆͷ໰୊Λղܾ͢ΔNode.jsͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓ 4. Node.js੡ͷπʔϧΛલఏͱͨ͠ɺϑϩϯτଆͷಈ͖(2013೥ࠒʙ?) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)
  4. • ཧ༝͸৭ʑ͋Γ͗ͯ͢Α͘෼͔Βͳ͍ɻɻɻ Node.js͸ྲྀߦͬͯීٴͨ͠(2010೥ - 2015೥ࠒ) 7ʹΑΓߴ଎ +BWB4DSJQUͳΒ࢖͑ Δʂ ͱ͍͏ਓ͕ଟ͍ͨ͘ ϑϩϯτ΋

    όοΫ΋
 ͭͷݴޠͰʂʁ /1. /PEF1BDLBHF. BOBHFS ͷଘࡏ +BWB4DSJQU ʹແ͍ Ϟδϡʔϧػೳ γϯάϧεϨουඇಉظ *0؀ڥˍΠϕϯτۦಈ
 ͳΞʔΩςΫνϟ
 $,͸͜͜ʹؔ࿈
  5. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJS 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑ

    3. ϑϩϯτΤϯυଆͷ໰୊Λղܾ͢ΔNode.js੡ͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓ 4. Node.js੡ͷπʔϧΛલఏͱͨ͠ɺϑϩϯτଆͷಈ͖(2013೥ࠒʙ?) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)
  6. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJS 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑ

    3. ϑϩϯτΤϯυଆͷ໰୊Λղܾ͢ΔNode.jsͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓ 4. Node.js੡ͷπʔϧΛલఏͱͨ͠ɺϑϩϯτଆͷಈ͖(2013೥ࠒʙ?) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)
  7. 1. Node.js͕஀ੜ͢Δ(2009೥) -> αʔόαΠυJSʂ 2. Node.js͕ྲྀߦΔˍීٴ࢝͠ΊΔ(2010೥ - 2015೥ࠒ) -> ཧ༝͸৭ʑʂ

    3. ΫϥΠΞϯτଆͷ໰୊Λղܾ͢ΔNode.js੡ͷπʔϧ͕ग़ͯ͘Δ
 (2012-2015೥ࠒ?) -> ओʹϏϧυπʔϧपΓʂ 4. Node.js੡ͷπʔϧΛલఏͱͨ͠ɺϑϩϯτଆͷಈ͖(2013೥ࠒʙ?) -> React/Vue౳ͷϑϩϯτΤϯυϑϨʔϜϫʔΫ΍Rails(v6.0Ҏ߱)ʂ
  8. ࢀߟࢿྉ ## JavaScriptͷྺ࢙/ϑϩϯτΤϯυͷ࿩୊ͷ૯·ͱΊ [wise9 › JavaͱJavaScriptͷ20೥ઓ૪](http://wise9.jp/archives/2245) [JavaScriptͷྺ࢙Λͬ͘͟Γ·ͱΊͨΑ! - Qiita](https://qiita.com/DeployCat/items/c900a6f62862954d62e0) [ࠓ࣌ͷϑϩϯτΤϯυ։ൃ2017

    (1. ۪ஒฤ) - Qiita](https://qiita.com/hiroiku/items/ 783a972bace33002455c#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82javascript%E3%81%8C%E3%83%A4%E3%83%90%E3%81%84) [JavaScript͕ḷͬͨมભ - Qiita](https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f) [Javascriptͷྺ࢙ - Qiita](https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22) [͜͜਺೥લ͔Β2015/5·ͰͷϞμϯϑϩϯτΤϯυΛ૯·ͱΊͯ͠Έͨ - Qiita](https://qiita.com/okmttdhr/items/1caff5a36c8468779a64) [ϨτϩΤϯδχΞͷͨΊͷۙ୅WebϑϩϯτΤϯυࣄ৘ - Qiita](https://qiita.com/uctakeoff/items/ce8da368d020273c6064) [ʢલฤʣJavaScript ʙਐԽ͠ଓ͚ΔϑϩϯτΤϯυΤϯδχΞʙ֤छϑϨʔϜϫʔΫͷҐஔ෇͚ͱTypeScriptͷ୆಄ \| flexyʢϑϨΩγʔʣ](https://flxy.jp/article/8093) [npm ͱ͔ bower ͱ͔ҰମԿͳΜͩΑʂJavascript ք۾ͷจ຺Λཧղ͠Α͏ - Qiita](https://qiita.com/megane42/items/2ab6ffd866c3f2fda066) -> 2015೥ [৽ਓʹυϠإͰઆ໌Ͱ͖Δ͔ɺࠓ෩ϑϩϯτΤϯυ։ൃϋϯζΦϯ(Git/Node.js/ES6/webpack4/Babel7) - Qiita](https://qiita.com/riversun/items/ 29d5264480dd06c7b9fb#webpack%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B) -> 2019೥ɻͳͥ˓˓͕ඞཁ͔ʁͷ͋ͨΓ [ϑϩϯτΤϯυ։ൃͷجຊ஌ࣝʢ2017೥Նʣ - Qiita](https://qiita.com/norioxkimura/items/1dc1cea1c0a8ea7adf31) ## Node.jsͱ͸ [Node.jsೖ໳](https://www.slideshare.net/forest1040/nodejs-7658878) [Node.js ͱ͸ \| Node.js](https://nodejs.org/ja/about/) [InfoQʮRyan Dahlʹ45෼ؒNode.jsͷ͜ͱΛ㘤͖·ͬͨ͘ʯ - ҎԼࣼΊಡΜͩ಺༰](http://vwxyz.hateblo.jp/entry/20101215/1292401661) [nginxͬͯΑ͘ฉ͚͘ͲApacheͱͲ͏ҧ͏͔Α͘Θ͔Βͳ͍ͷͰௐ΂ͯΈΔɻ - ۚ୔Ͱ͸ͨΒ͘৽ถΤϯδχΞͷ೔ه](http://hayatan.hatenablog.com/entry/2015/01/28/001658) [node.js ͱ͸Կ͔ - I am bad at math](https://badatmath.hatenablog.com/entry/20101020/1287587240) [node.js ͱ͸Կ͔ (2) - I am bad at math](https://badatmath.hatenablog.com/entry/20101022/1287701281) [node.jsͱ͸Կ͔(3) - I am bad at math](https://badatmath.hatenablog.com/entry/20101026/1288109275) [ʲNode.jsʳͦͷNode.jsͷೝࣝͪΐͬͱҧ͏Μ͡Όͳ͍ͷʁͬͯࢥͬͯௐ΂ͯߟ͑ͯΈͨʲJavaScriptʳ \| SCAITY(εέΠςΟʔ)](http://edutainment-fun.com/hidemaru/it/web/%E3%81%9D%E3%81%AEnode- js%E3%81%AE%E8%AA%8D%E8%AD%98%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E9%81%95%E3%81%86%E3%82%93%E3%81%98%E3%82%83%EF%BC%9F_2845.html) [Node.js ͱ͸Կ͔ʁ - Qiita](https://qiita.com/kobalab/items/e0c2a3d5a9f4c172bad0) [ීٴظΛऴ͑੒ख़ظʹೖͬͨʮNode.jsʯ͸͜Ε͔ΒͲ͏ͳΔʁʵίϛολʔ͕ޠΔݱঢ়ͱະདྷʲલฤʳɿCodeZineʢίʔυδϯʣ](https://codezine.jp/article/detail/10942) [Node.jsͰͭ͘ΔNode.js - ΋͘͡ - Qiita](https://qiita.com/massie_g/items/3ee11c105b4458686bc1)
  9. ࢀߟࢿྉ ## Node.jsͱωοτϫʔΫϓϩάϥϛϯά΍Webαʔό [When using node.js, do you still need

    Nginx or Apache? - Quora](https://www.quora.com/When-using-node-js-do-you-still-need-Nginx-or-Apache) [C10K໰୊ͱ͸ - ablog](https://yohei-a.hatenablog.jp/entry/20120504/1336157667) [ٕज़৘ใͷڞ༗Խ: Node.js͸C10K໰୊Λղܾ͢Δۜͷ஄ؙ͔](https://tech-public.blogspot.com/2012/12/nodejsc10k.html) ## JavaScriptͷϞδϡʔϧػೳ [Node.jsͷϞδϡʔϧґଘղܾϝιουΛϒϥ΢βͰ΋࢖͑ΔBrowserify (1/3)ɿCodeZineʢίʔυδϯʣ](https://codezine.jp/article/detail/9370) [JavaScriptͷϞδϡʔϧ؅ཧ(CommonJSͱ͔AMDͱ͔Browserifyͱ͔webpack) \| tsuchikazu blog](https://tsuchikazu.net/javascript-module/) [Brief history of JavaScript Modules - sungthecoder - Medium](https://medium.com/sungthecoder/javascript-module-module-loader-module-bundler-es6-module-confused- yet-6343510e7bde) [JavaScript ͷ Module System ͷྺ࢙ - tasuwo's notes](https://scrapbox.io/tasuwo/JavaScript_%E3%81%AE_Module_System_%E3%81%AE%E6%AD%B4%E5%8F%B2) [ϒϥ΢βͰ֮͑ΔES Modulesೖ໳ - JavaScriptͰϞδϡʔϧΛ࢖͏࣌୅ - ICS MEDIA](https://ics.media/entry/16511/) [JavaScriptͷϞδϡʔϧγεςϜʹؔ͢Δ·ͱΊ - Qiita](https://qiita.com/kami_zh/items/f093c34906d14ba65ad3) [[ҙ༁]ॳֶऀͷͨΊͷJavaScriptϞδϡʔϧߨ࠲ Part2 - Qiita](https://qiita.com/chuck0523/items/c88abe4fac828b7b5f4e) [JavaScriptͷϞδϡʔϧγεςϜͷྺ࢙ͱݱঢ় - Qiita](https://qiita.com/mizchi/items/6b569cc75dbcc26a1f15) ### ಛʹNode.jsͷϞδϡʔϧػೳͷ࿩ [Node.js ͷ exports ͱ require() ΛͳΜͱͳ͘ཧղ͢Δ - खଓ͖ܕԻָͷ೔ৗ](https://yuzutan-hnk.hatenablog.com/entry/2019/02/18/002217) ## Node.js͸ͳͥͦΜͳʹਓؾ͕͋Δ͔ʁ [ੜ·ΕมΘͬͨJavaScript/ECMAScript \| Think ITʢγϯΫΠοτʣ](https://thinkit.co.jp/article/13993) -> ಛʹɺNode.jsͱnpmΤίγεςϜͷ͋ͨΓ [Why is Node.js so Popular? - DZone Web Dev](https://dzone.com/articles/why-nodejs-so-popular) [Why Node.Js Is So Popular Amongst Developers? - socPub](https://www.socpub.com/articles/why-nodejs-so-popular-amongst-developers-16039) [6 Main Reasons Why Node.js Has Become a Standard for Enterprise-Level Organizations](https://www.monterail.com/blog/nodejs-development-enterprises) [Why Node.js is so popular \| TMS](https://tms-outsource.com/blog/posts/node-js/) [Carl Byström](http://cgbystrom.com/articles/six-reasons-why-node-js-is-so-popular/) [ELI5: What is Node.js and why is it so popular? : explainlikeimfive](https://www.reddit.com/r/explainlikeimfive/comments/380eo2/eli5_what_is_nodejs_and_why_is_it_so_popular/) [Node.js͸ͳͥΦʔϓϯιʔείϛϡχςΟͷ ໛ൣ ͱͳΕͨͷ͔ - ϥΠϒυΞχϡʔε](https://news.livedoor.com/article/detail/11452680/) [ʰNode.js in Actionʱ̍ষʮ΢Σϒ͕nodeΛඞཁͱͨ͠ཧ༝ʯ - ҎԼࣼΊಡΜͩ಺༰](http://vwxyz.hateblo.jp/entry/20110825/1314256566)
  10. ࢀߟࢿྉ ## Node.js੡πʔϧͷ࿩ [ݡ͘࢖͏Browserify - Browserifyͱ͸ \| CodeGrid](https://app.codegrid.net/entry/browserify-1) [webpack-contrib ·

    GitHub](https://github.com/webpack-contrib) -> css-loader΍style-loader͕webpackؔ࿈Ͱ͋Δ͜ͱ͕Θ͔Δ(?) [Bower͸ͳͥΦϫίϯԽͨ͠ͷ͔ - Qiita](https://qiita.com/jonghyo/items/ e931f7b6357995314599#bower%E3%81%8C%E3%82%AA%E3%83%AF%E3%82%B3%E3%83%B3%E5%8C%96%E3%81%97%E3%81%9F%E7%90%86%E7%94%B1) [ݡ͘࢖͏Browserify - Browserifyͱ͸ \| CodeGrid](https://app.codegrid.net/entry/browserify-1) [Reactʹ͓͚ΔτϥϯεύΠϥʔʲBabelʳͷ໾ׂ - Qiita](https://qiita.com/micropig3402/items/064394428791144f5488) ## altJSͷ࿩ [altJS(୅ସJavaScriptݴޠ)ͱ͸ʁબͼํͱ஫ҙ఺Λపఈൺֱʂ](https://persol-tech-s.co.jp/hatalabo/it_engineer/222.html#_Dart) [CoffeeScriptͰֶͿJSͷઃܭ - CoffeeScriptͱ͸ͳʹ͔ \| CodeGrid](https://app.codegrid.net/entry/coffee-intro) ## npmͷ࿩ [npm ͱ͸Կ͔ / Package ͱ module ͷҧ͍ – ̍೔ͻͱͭɺڧ͘ͳΔɻ](http://better-than-i-was-yesterday.com/what-is-npm/) ## ReactΛγϯϓϧͳߏ੒Ͱ࡞Δ࿩ [ੜͷReactΛ஌Ζ͏ – JSXɺFluxɺES6ɺWebpackΛ࢖Θͣ… \| POSTD](https://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/) [Creating a React App… From Scratch. - Noteworthy - The Journal Blog](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) [৽͍͠ React ΞϓϦΛ࡞Δ – React](https://ja.reactjs.org/docs/create-a-new-react-app.html#creating-a-toolchain-from-scratch) [ϑϩϯτΤϯυ։ൃʹ Babel ΋ Webpack ΋ඞཁͳ͍ ※ - KAYAC engineers' blog](https://techblog.kayac.com/pure-js-app) -> ͜Ε͸Reactؔ܎ͳ͍͕ࣅͨΑ͏ͳࢼΈͱ͍͏͜ͱͰɻɻɻ [Node.js΋ES2015΋࢖Θͳ͍Reactೖ໳ - Qiita](https://qiita.com/ShinyaKato/items/98be579f648d9ca0674a) ## ςετϑϨʔϜϫʔΫʹ͍ͭͯ [JavaScriptςετࣗಈԽΩϗϯͷΩ - Qiita](https://qiita.com/ysktsuna/items/6b8b824e444030070754) ## Rails͕JSΛͲ͏ѻ͍ͬͯΔ͔ʁͷ࿩ [ΞηοτύΠϓϥΠϯ - RailsΨΠυ](https://railsguides.jp/asset_pipeline.html) [Make Webpacker the default JavaScript compiler for Rails 6 by dhh · Pull Request #33079 · rails/rails · GitHub](https://github.com/rails/rails/pull/33079)