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

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

jonakp
January 10, 2020
36

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

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)