【モダンJavaScript #3】歴史から学ぶJavaScript後編① Node.jsとパッケージ管理システムnpm【フロントエンドエンジニア講座】
Вставка
- Опубліковано 21 лип 2024
- 今日はJavaScriptの歴史後編①です。Node.jsの誕生やCommonJSとの関係について、そして「パッケージとは」「パッケージ管理システムとは」といった説明からnpmの解説・実践までを収録しています。難しい用語も多いですが、なるべく丁寧に解説を心がけています。いっぱい学んでいきましょう！👨💻
📙 もくじ
0:00 前回のおさらい
1:10 今回伝えたいこと
2:35 学ぶべきもの、学ぶべきでないもの
3:27 Node.js の誕生
4:49 Node.js と CommonJS
6:54 パッケージとは
10:51 パッケージ管理システムとは
14:10 パッケージの依存関係の怖さ
17:01 npm の誕生
18:28 npm を実際に使ってみる
21:52 Node.js がどんどん盛り上がる話
23:13 次回予告
📚 参考文献
・UA-cam. 2012. 『Ryan Dahl: Original Node.js presentation』
• Ryan Dahl: Original No... (参照2020-06-12)
・自分の感受性くらい. 2011. 『Node.jsとCommonJSについて』
meso.hatenablog.com/entry/2011... (参照2020-06-12)
・GitHub. 2013. 『Breaking the CommonJS standardization impasse』
github.com/nodejs/node-v0.x-a... (参照2020-06-12)
・Wikipedia. 2019. 『CommonJS』
en.wikipedia.org/wiki/CommonJS (参照2020-06-12)
・npmjs. 2020. 『About packages and modules』
docs.npmjs.com/about-packages... (参照2020-06-12)
・Wikipedia. 2020. 『npm (パッケージ管理ツール)』
ja.wikipedia.org/wiki/npm (パッケージ管理ツール) (参照2020-06-12)
・Wikipedia. 2020. 『パッケージ管理システム』
ja.wikipedia.org/wiki/パッケージ管理... (参照2020-06-12)
・npm.js. 2020. 『npm | build amazing things』
www.npmjs.com/ (参照2020-06-12)
・GitHub. 2010. 『Releases · npm/npm』
github.com/npm/npm/releases?a... (参照2020-06-12)
・Software Brothers Blog. 2019. 『16 COMPANIES WHICH APPS WERE WRITTEN USING NODE.JS』
softwarebrothers.co/blog/comp... (参照2020-06-12)
🔥モダンJavaScript講座
#1 新章開幕！最も独学が難しい分野を徹底解説していきます！
• 【モダンJavaScript #1】新章開幕...
#2 歴史から学ぶJavaScript前編。
ECMAScript、CommonJS、モジュール、名前空間を知ろう
• 【モダンJavaScript #2】歴史から...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#JavaScriptの歴史 #nodejs #npm - Навчання та стиль
ようやく出せました・・・先週は本業が忙しくなったり風邪をひいたりで動画は休んでおりました。💦
今日以降またバンバン講座を出していこうと思っていますので、また一緒に学んでいきましょう〜！
後編を作ってたらスライドが100近くになってしまって、動画1つにしたら1本分の映画ぐらいの時間になっちゃいそうなので細かく分けて出します。
皆さんの学びになる動画になっていたら幸いです。分かりにくいところ・質問など何でもコメントくださいね🙏
動画作成お疲れ様です！
ゆっくりと動画を楽しみに待っていますので無理せず頑張ってください!!
23:12の真面目な解説すこ
待ってましたよー！！
いつも動画ありがとうございます！今回も学ばせてもらいます！
ありがとうございます！待たせてしまいましたm(__)m
これからバンバン学び動画だしていきますね！😊
JavaScriptの入門より先の内容をわかりやすく扱ってくれているのがめちゃくちゃありがたいです！
JSの歴史が簡単にわかるのここだけだし、とても面白いです👍
待ってました！！
Node.js のことわかった気になっていたので助かります！
モジュールの話、どの言語でも 疎結合 は大事ですね。
たいへんお待たせしました😂
疎結合は非常に大事ですね〜！
「密です」はプログラミングの世界でも使えそうですね😏笑
楽しみにしていました。
アップロードありがとうございます。
長く待たせてしまったのが心苦しかったのですが、そう言ってくださって本当に嬉しいです🤣
今後は休まずがんばります！！💪
しまぶーのIT大学 他のお仕事もしながら、継続的に動画を出されるのは大変なことだと思います。今後も無理せず頑張ってください^ ^
訳もわからず使っていたnode.jsについて一番知りたいことが聞けました！ありがとうございました。
ありがとうございます。Node.jsについて深く知れました。次回もよろしくお願いします。
今回の動画はNode.jsはCommonJS形式のモジュールを使っているのとパッケージ管理システムnpmが特に見どころです👀
次の歴史も学びになると思うので楽しみにしてくださいね✌✨
めちゃくちゃ待ってました！
見る前から高評価押しちゃった😍
ありがとうございます！！待たせてしまい非常に申し訳ない気持ちでいっぱいですが、今後動画をあげまくって挽回します！やる気に満ち溢れています😎🔥
そして高評価嬉しいです、ありがとうございます！🙏✨
しまぶーのIT大学 いえいえとんでもない！
これからも楽しみにしております🙇♂️
このチャンネルで一番面白いし、
UA-camで一番面白い講座だと思って見てます！
最優先で続きが見たいです！
今更ですが、マジですかー！！
UA-camイチはさすがに私には早いです・・・！💦
完結編まで出ているのでよかったらどうぞ😁
（既に見られているかも・・・！？笑）
何度も見てわからなかった箇所が理解できました。
モダンJS講座待ってました☺️
風邪を引かれたそうですが、お体に気をつけてください！
通知オンにして動画待ってます！
今更ですが通知オンにしていただける方いたーーー！！
私のチャンネルは通知オン率が少ないみたいで、、、
嬉しいです、ありがとうございます！🙏✨
歴史についての動画は
音声だけでも頭に入ってくるのでありがたい
いつも出勤時に車で流して聴いてます😌
音声だけで理解するのは凄い・・・
出勤時に車とかイヤホンで聞く人も多いから、それ向けの動画も出したいなーって思っているんですが、なかなか時間が取れず・・・いやはや💦
@@shimabu_it
それだけしまぶーさんの説明が分かりやすいってことですよ😉
これからも楽しみにしているので、よろしくお願いします！
顔だけじゃなくて声までイケメンなんだよなこの人
🥺ｳﾙｳﾙ（嬉しすぎて涙）
今回の投稿もとても分かりやすく、大変勉強になりました！！
Node.jsのことをサーバーサイドで使えるJavaScriptくらいにしか知らなかったので、これまでの動画と合わせて、何故・どのように違うのかが分かって来て混乱が解消されました！歴史を学ぶこともとても重要なんですね。それだけでなく、なんとなく曖昧な言葉でしか理解できていなかった「パッケージ管理ツール」というものも理解できてきたので、本当に勉強になります。さっそくNode.jsに触れてみたいと思います！
いつも例などを交えて具体的で詳しく、大切な内容に凝縮していて、それでいて面白いプログラミングの動画を投稿してくださって、本当にありがとうございます。しまぶー先生のおかげで自分の勉強の方向性が見えていて安心しております。
動画投稿や準備は大変だと思いますが、どうか体調優先で、無理のない範囲で続けていただければと思います。
有料版であっても私は視聴し続けたいくらいです…！
良かったです😂
プログラミングは歴史を学ばないと「何故必要なのか」が実感できないと思うので、そういう意味で大事だと思っています。動画の意図が伝わったようでたいへん嬉しいです。私はNode.jsはこれからも需要が増えると思っているのでオススメです。是非学んでみてくださいね！！👍
今後もたくさん動画アップしていきますよー！身体だけは壊さないようにはします！有料版にはしない予定ですが、有料級の動画を量産し続けますので今後もお時間のあるときにご視聴くださいませ😁✨
いつも勉強になる動画ありがとうございます。
プログラムの仕組みをわかりやすく解説している動画はここ数年で増えましたけど、
今回のようなモダンな開発環境の説明や
そこに至るまでの歴史の解説動画はないので本当に助かります。
開発環境は独学だとイメージしにくいです。
本を読んでも文字ばかりや意味のわからない単語が多く出てくるので
挫折しそうになります。
今回のようなわかりやすい動画にまとめてもらえると学習が進みます。
その分まとめているしまぶーさんは大変だと思いますが…
そうなんですよね！私もフロントエンドの学習時にめちゃくちゃ困っていたので、それを解決できるようにと作っております！
モダンな開発環境になぜ変わっていったのかとか、各ツールの生まれた背景やメリットがまったく分からなくて（しかも調べても余計に混乱するので）、そういった問題を解決できる動画にしようと歴史の講座から作りました。
動画制作は少しだけ大変ですが、私が頑張れば皆が助かると思えばめちゃくちゃモチベーションが上がります。次の動画も難しいんですけど、絶対に他のブログや文献を見るよりは分かりやすいと思うので、ぜひ楽しみにしていてくださいね😁
神チャンネルなっていく匂いがする。。。
神チャンネルと呼ばれるように、これからも学び動画を発信し続けます！
🔥👨💻🔥
超大作の編集、構成お疲れ様です！😌
まだまだ勉強足りないので日々学びですね😃
動画を出していなかった間もずっと見てましたよ👀
というのは冗談で笑
動画制作に膨大な時間がかかってしまいました。労いのお言葉がすごく嬉しいです😂
ヤバい、勉強の仕方がブレてたのがバレるwww やはり何事も体が資本ですもんね😌 いつも助かってますが、無理だけはしないで下さいね！
勉強の仕方はぶれますよね〜それは仕方ないです。私も今でもぶれることはあるので笑。ぶれつつも方向修正して少しずつ進むのが正解だと思います（ぶれて萎えるのが１番NGですね）
なるべく無理せずに頑張りますね😊
しまぶーさんでもブレるなら、初学者がブレるのは当たり前かもですねwww それ聞いて心が軽くなりました🤣 少しずつでも、目標に向かって頑張ります！
CUIの動画ぜひ作ってください！いまいちよくわからないのですごく助かります！
首を長ーくして待ってました！
期待通りの内容と説明のテンポは毎度感動しております。
ところでサーバーサイドJSについては開発経験がないのですが、他の言語(例えばPythonとか)との棲み分けが気になります。
他言語と比較したNode.jsの強みはどういったものかか知りたいところです。
私自身がNode.jsばかりで色んなサーバー側言語の特徴を正確に伝えられるほど詳しくないので比較は難しいですねー。
言語によって得手不得手はありますが、たいがいのところはチームメンバーが得意な言語が用いられますね。PHPの人が多かったらPHPとかJavaのスペシャリストがいたらJavaとか。言語というよりは人で決められている部分がほとんどです。相当リクエストが多いとかの規模じゃないと言語自体の特性が活きることは少ないように思います（これは色んなサーバー側の言語を触ってきた人にむしろ聞きたいです）。
このプレゼン資料すごく素敵ですね！なんのツール使ってるんですか？
とっても分かりやすく楽しく学べました！
１つ伺いたいのですが、スライドは何のスライドを使われているのでしょうか？
（とてもみやすく気になりました）
npm便利ですよね😊
自分はyarnを使ってます笑
私はyarn派です！仲間ですね😁
ありがとうございます。
JavaScript、サーバーの方が著しい進歩を遂げているのか…
Node.jsを使ったサーバーとデータベース(MySQL)の連携方法が難しく感じているので、もしよかったら教えていただきたいです。
2009年頃からはサーバー側のほうが進化は顕著でしたね。次回はブラウザ側の話もしていきますので比較してみてくださいね✌
データベースとの連携方法というのが具体的にどの部分か分からないので難しいのですが、おそらくORMで解決できる話かなと思います。生でSQLを叩くのは開発効率的にもリーダビリティ的にも基本は無いかと思うので、ORMというものを使います。Node.jsから生SQLを書くのではなくORMで叩く感じですね。Node.jsだとsequelizeが人気かなと思います。（TypeScriptを使っていればTypeORMとかも使われますが）
github.com/sequelize/sequelize/
ドキュメントのGetting Startedあたりが参考になるかと思うので是非見てみてくださいね👍
sequelize.org/v5/manual/getting-started.html
しまぶーのIT大学 ありがとうございます😊
しまぶーさん！
動画と関係ないのですが、windowsしか持っていなくて、お金もないのでwindows でこのまま進めても良いですか？
いずれはmac買わなきゃなあと思っているんですが。
windowsで進めても問題ないです！
基本はwindowsでも同じように進められるので、windowsじゃ無理だ・・・っていうポイントが来ない限り、買い換える必要はないかと最近は思っています（マイクロソフトのCEOが変わって以降のwindowsは目をみはるほど進化が早く、私もwindowsに興味が湧いていたりします👀）
しまぶーのIT大学 本当ですか！ありがとうございます🥺しまぶーさんの動画見て勉強してモチベ上げて頑張ります！
前回、質問した内容の解答で質問なのですが、pythonでweb apiを作れるところまでいけたら良いとおっしゃられたのですが、これはポートフォリオになるのでしょうか
人によって意見は異なると思いますので主観でお伝えします！
ポートフォリオになると私は考えていますが、ハイレベルかというとそうではないと思います。最低限はできているな〜！という感じの評価ですね。
ステップアップするとしたら、例えばテストを書くとか、またはWeb APIを作るとなるとDBから取り出した値をJSONにして作ると思いますが、そのDBに入れているデータをどういう風に入れるか等を工夫するのも面白いかもですね。例えば公開されているAPIをbatch処理で叩いてDBに格納するとか、スクレイピングしてきたデータをDBに格納するとかも面白いかもです（あんまり人様のサイトを高頻度でスクレイピングするのはよくないですが💦）
と、少しハイレベルに感じるかもしれませんが、とりあえずはWebAPIをしっかり実装できることですね。いきなり難しいところにいきすぎるよりは、本当に一歩ずつステップアップしていくのが良いかと思います✌
しまぶーのIT大学 もし、しまぶーさんがweb apiを作成するならどのような手順で勉強されますか？
今過去のコメント見返し中ですが、他の動画で返しちゃいましたね！笑
しまぶーのIT大学 過去のコメント見返しお疲れ様です。
htmlやjavascriptの限界を感じます。できればhtmlに換わるUIの共通言語とそれを解読するブラウザ的なクライアントの開発が進むことを願います。
もちろん今のhtmlやjavascriptが普及しており有用な過去資産が存在していることは理解しています。
現在、大学3回生の文系で最近プログラミングの勉強を始めて新卒でフロントエンドエンジニアかiOSアプリ開発のエンジニアになりたいと思っているのですが、今からでも間に合いますか。
間に合うというのは就職に、という意味でしょうか。就職までに間に合うかは分かりかねますが、私は大学4年（3年の後半）からエンジニアになることを目指して、およそ1年でヤフーに就職することができました。就職時期としては卒業して1年後だったので就活浪人のような感じかと思いますが、とにかく大学4年からでもエンジニアになることができました。
エンジニアとして働くのであればもちろん間に合います。次の就活は本気で学べば私は間に合うと考えていますし、もしそのタイミングが難しかったとしても私と同じような就活浪人の形なら間に合います。もちろん最終判断はご自身になりますが、私はエンジニアの道はオススメはしています。ぜひご検討してみてくださいね👍✨
しまぶーのIT大学 返信頂きありがとうございます。ここ1ヶ月ずっといろんなエンジニアUA-camrさんの動画を見たり、色々な意見を聞いてやっぱり自分はエンジニアになりたいと思いました。最初にエンジニアを目指そうと考えたのは、しまぶーさんの動画です。本気でエンジニアを目指して1年頑張ってみます！動画は8割ほど見さして頂いてとても勉強になりいつも楽しみにしているんでお仕事諸々頑張ってください！またわからないことがあれば質問さして頂きたいです🙇♂️
ありがとうございます。私の動画が他の方の意思決定に影響を及ぼすのは若干怖くて恐々としていますが、私も視聴者の方がエンジニアになれるよう最大限サポートしたいと思います。たくさん動画を見てくださっているのも嬉しいですし、今後はもう少し具体的なサポートまで考えています。楽しみにしていてください😁
そして一緒にスキルアップしていきましょうね。また何でもお聞きください。ただ嬉しい悩みですが最近コメントをたくさんいただきすぎて、私の目に止まる範囲でしか見れていません。最新の動画アップ後の数時間は必ず見るようにしているので、なるべく通知オンにしてコメントしていただけると私も気づけるので良いかと思います！🙏
🍍🍎🍐🍉🍌しまぶーのIT大学🍇🍓🍈🍒🍑
ここは天国かな？😇
え？じゃあもうPHPは必要無い時代だってこと？