2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ

tricken（手術後復帰チャレンジ中） @tricken

node.js が何者なのかようやくわかったわ……フロントエンド側のJavaScriptじゃなくて、PythonやPHPと同じように書いてはバイナリ実行＆サーバサイド実行できるタイプのJavaScriptってことか……Python3.8 と同じ感じでJavaScriptファイルが扱えることがわかって驚いている。

tricken（手術後復帰チャレンジ中） @tricken

「記法が（2009年以前の）JavaScriptにそっくり」っていうだけで、実質的には記法がJavaScriptなだけのPython/PHPと同じ扱いのできる言語だってわかれば、安心してインストールして練習できる。$ python3 ... と同じように $ node すりゃええのね。

tricken（手術後復帰チャレンジ中） @tricken

でもPHPも、html組み込みで実行できるやつと、バイナリ実行やサーバサイド実行できるやつとが同じ記法でも役割違うか。でもphpの「ブラウザ実行」「サーバ実行」「ターミナル実行（バッチ処理とか）」はわかりやすいけど、ブラウザ上のJSとサーバやバッチ処理としてのnode.jsはそれよりわかりづら。

tricken（手術後復帰チャレンジ中） @tricken

javascript系の入門、入り口というか実行環境の準備が簡単だからって最初なんでも手持ちのブラウザで表示させるじゃん、でもあれに従ってるとなんで現代のJSがpython3やPHP7に並ぶ言語扱いになってるのか全然わからんかった。はっきりnode.js（$ node etc.）のおかげじゃん。やっとわかった。

tricken（手術後復帰チャレンジ中） @tricken

JavaScript: 言語。元はブラウザ言語だがnode.jsの発明でブラウザ以外で活躍できるように node.js: jsのための実行環境。フレームワークではない React: node.jsと併用する人気のライブラリ。SPA作るためにWebフレームワークのように活用する勢もいるがあくまでフロントサイドレンダリング。

tricken（手術後復帰チャレンジ中） @tricken

Next.js/Nuxt.js/Gatzby.js: いずれも狭義のWebフレームワーク。言語はJavaScript前提だがしばしばnode.js導入を前提としないと意味がわからない（Python3とDjango、PHP7とLaravelの二項関係のようにスッキリしてない）。 TypeScript: 上記流行りと並行して使われるようになった新しいjs向け記法。

tricken（手術後復帰チャレンジ中） @tricken

という区分をもっと早くわかればよかったんだけど、(a)「入口手前すぎるJavaScript（ほぼ素朴なブラウザ実行の話しかない）と、(b)トンネルの後半&出口に深入りしすぎているReact/Vue.js/Angular やNext.js/Nuxt.js/Gatzby.js の両極端すぎて、(c)中間のコア技術であるところのnode.js が視えなかった

tricken（手術後復帰チャレンジ中） @tricken

Python3, PHP7 JavaScript ECMAと並べれば理解できるわけじゃなかった。自分にとって理解できた並びはこれではなくて $ python3 ... $ php ... $ node ... だった。この3つの中でjsだけ言語としての来歴と現代の展開が細切れ&多層化しすぎて、node.jsがどういう位置にある技術なのか見えづらかった…

tricken（手術後復帰チャレンジ中） @tricken

いや、node.jsからいきなり飛び込むのがいいよ……それだけで全然Pythonの使い方と並ぶから……個人的に一気にjs関係の視界がひらけた……

tricken（手術後復帰チャレンジ中） @tricken

プログラミング全然上手くならないんだけど、「実行環境を自分でrunできるところまで持っていった言語」は遅々なりに学習を始められる傾向がある（Python3がそう）。でもJSはブラウザ実行から流行りのSPA等までの距離が遠く見え、なんじゃあれと思ってた。実行環境=node.jsの挙動を見たら一発だった。

tricken（手術後復帰チャレンジ中） @tricken

ブラウザも実行環境の一種ではあるけど、「ターミナルでコマンドラインとして実行するタイプの実行環境」で考えるのがめちゃ大事。jsのそれにあたるnode.jsに早く辿りつきたかった。もう一年くらいブラウザ実行の縁でちゃぷちゃぷ遊んでるところだった。（業務と無関係なので有害な無知ではなかったが

tricken（手術後復帰チャレンジ中） @tricken

ブラウザ実行だけで考えるJavaScriptも有用ではあるけど（実際FM19のjs機能ではその考えでもいけるし）。でも今活躍してるjs系のエンジニアの人の話がマジでわからんかった理由はReactやNext.jsやTypeScriptの手前にある「絶対外せない中継地点/転換地点」であるnode.jsだったわ……

tricken（手術後復帰チャレンジ中） @tricken

（IT素人が知らない言語について調べるとここまで回り道する、という実例として笑ってください……）

tricken（手術後復帰チャレンジ中） @tricken

いや……JavaScriptを学び始めようとする人間が、最前線のReact×Next.js×Typescript系でもなく、良い意味で枯れた技術であるブラウザ向けJavaScript入門でもなく、しかし最もPython3やPHP7と同じ目線で恩恵を受けられるnode.jsを入り口として発見した上でゼロスタートするの、難易度高くない！？

tricken（手術後復帰チャレンジ中） @tricken

俺暫くPython3（+Django）とPHP7（+WordPress）とも一つ+αで忙しいと思いますけど、それら終わった後に改めてJavaScriptやるときは絶対いきなりnode.jsからやりますよ、だってそれが一番わかるもん。

tricken（手術後復帰チャレンジ中） @tricken

「2020年の今、JavaScriptで演れることの前線に向かって歩き出すのにおそらく最適な第一歩、その入り口はおそらくブラウザ言語としてのJavaScriptの位置付け“なんかすっとばし”、いきなりnode.jsをインストールし、（Python3などでそうやるように）ターミナル上で練習することだろう」ってことですね。

tricken（手術後復帰チャレンジ中） @tricken

自分はこれが、JavaScriptを始める際に一番いい学び始め方だと今晩いきなり理解（誤解？）したんですが、この仮説に至るまですごい長い時間かかった。それこそ、node.jsができる前のダササイト御用達のjsと、いまココフォリアみたいなイケてるSPAがjsが実在する事実との中間地点が不明だったから。

tricken（手術後復帰チャレンジ中） @tricken

@afunai たぶん、jsで食べてる開発者の皆さんは、「すでにAngularでやってる」とか、現在進行形の堆積したプロジェクトの中で、それぞれの部品の理解に苦心しつつやってるんだろうな……ということも、同時に理解しました……（いや、node.js以降の戦国時代ぶりやばいだろこれ……

tricken（手術後復帰チャレンジ中） @tricken

いやだって、ブラウザonlyでJavaScriptいくらやってもhtmlファイルにJavaScript埋め込むしかできないけど（それでも便利なはもちろんあるけど）、node.jsをいきなり始めれば他のPython3やPHP7で出来ること一通りJavaScriptで描けてWebアプリも動的Webサイトも（理論的には）作れるんだから全然違うよ！

tricken（手術後復帰チャレンジ中） @tricken

そのことをちゃんとシーンに合わせて紹介してるJavaScript入門書、なくない？　普通にnode.js入門を「これがマトモな、2020年に読むべき本当のJavaScript開発の第一入門書だ」と信じて読んだ方が絶対いいよ。それがダメって言うなら普通に俺はPython3入門書人に勧めてしまうわ。

tricken（手術後復帰チャレンジ中） @tricken

だって「JavaScriptでもPythonみたいに科学的計算や流行りの機械学習できますよ」みたいな出口を話すとき、バッチ処理しないわけないでしょ。ならPyhonと並ぶべきは「（言語としての）JavaScript」でなくて「（実行環境の基盤としての）node.js」でしょ。Python3, PHP7, node.js 15 が正しい並びだわ。

tricken（手術後復帰チャレンジ中） @tricken

これの続きだけど、JavaScriptって Episode 0: Webブラウザ内プログラミング言語 Episode I: node.js 登場（2009-） Episode II: React, Vue.js, Angular ライブラリ/フレームワーク三国志（2013-201X?） Episode II外伝: React vs Vue 派生フレームワーク代理戦争時代（-2020） の4エピあるよね……

tricken（手術後復帰チャレンジ中） @tricken

で、たぶんPython3, PHP7, Ruby2あたりと比較できるような意味でのJavaScriptの基礎は、ep.0ではなく、ep.2以降でもなく、ep.1にあるんだよな。でもep.1をテコにep.2,ep.3がここ11年盛り上がり過ぎて、初学者から見て何がep.0から変わったのかまるで意味わからんのだよな。ep.1が見えないからだよ。

tricken（手術後復帰チャレンジ中） @tricken

で数時間前に自分が気づいた上で苛立ったのは、「世の中のJavaScript初学者情報、ep.0とep.2&3が人気すぎてep.1をどいつも「事実上ep.0と変わらない話で終わらせる」か「ep.2以降の大前提に過ぎない」扱いするかのどっちかで、めちゃめちゃ振り回されたってことなんですよ。ep.1の話をしてよ……

tricken（手術後復帰チャレンジ中） @tricken

ep.3は適宜「ep.2外伝」と読み替えてください（間違えた）。

tricken（手術後復帰チャレンジ中） @tricken

いやー、node.js の環境構築、最後の最後でシェルが bash 前提だから、Macの zsh 前提のプロファイル設定と噛み合わなくて1時間無駄にした。 .bashrc や .bash_profile じゃなくて .zshrc でいいんだよ……。bashとzsh両方に目配せする優しいコメントはQiitaとかには少なめ。

tricken（手術後復帰チャレンジ中） @tricken

いまMacOSでやってるのでzshなんですよね。

tricken（手術後復帰チャレンジ中） @tricken

TypeScriptの導入も $ npm install -g typescript で終わらせた。（基本コマンドは $ tsc ... ） より本格的に開発するには実質Webpack必須らしいですが、TypeScriptとECMA JavaScript の間をみるには当面Webpack要らんですね。tscだけ入ってればいい。

tricken（手術後復帰チャレンジ中） @tricken

つまりモダン（2009年以降の、PythonやPHPに比肩する用途として見なされる種類の、くらいの意味）JavaScriptを練習するなら、nodebrew, node, npm, tsc の4つがターミナルで叩ければおしまい、それ以上の本格的な開発環境（Reactとかnuext.jsとかWebpackとか）は当面不要と。

tricken（手術後復帰チャレンジ中） @tricken

Python 3.9 (pip / pipenv), node.js 15.2 (nodebrew), Ruby 2.7.2 (rbenv), perl 5.32 (homebrew), php7.4.11 (homebrew) がMacOS上で一通り試せるようになった様子 pic.twitter.com/EiBFTwQnQ5

拡大

tricken（手術後復帰チャレンジ中） @tricken

だいぶ理解が進み、どれやってもどれかの構文の理解が進むだろうと言う気持ちになってきた。今まではどれに専念するかで困ってたが、そう言う気持ちがnode.jsの位置付け理解のおかげで吹っ飛んだ。今日は以前に挫折した退屈Python本を序盤から速読してる。

tricken（手術後復帰チャレンジ中） @tricken

どうも2013年くらいまでは「CommonJSという理念や仕様イメージがあって、それを限定的に叶えてるのがnode.jsと（以下略）だけどCommonJS自体はまだなくて〜」みたいな勉強会が散見された。ところがブラウザ以外で輝くCommonJS相当物は実質「node.jsになんか盛り付ける」ことで実装していくようになった

tricken（手術後復帰チャレンジ中） @tricken

ただ、JavaScript × TypeScript × Webpack × React × Next.js みたいな話をする前に、やっぱりシンプルに「JavaScriptがブラウザ限定言語でなくなったということ」を、ECMAとnode.jsだけで語る本が、自分は欲しかったな……と思った。（なおTypeScript導入は意外と難しくなかったのでこれは含めて良し

tricken（手術後復帰チャレンジ中） @tricken

言語1: JavaScript (ECMA) 言語2: TypeScriptビルドツール（tscコマンド） 実行環境: node.js (nodeコマンド) pkg管理ツール: nodebrew nodeバージョン管理ツール: nodeenv（ndenvコマンド） ターミナル: Linux (zsh基準） このあたりだけで退屈Python本みたいなこと書いた本が編纂されてほしいが？？

tricken（手術後復帰チャレンジ中） @tricken

退屈Python本に書いてあるような自動化処理にはAngularもReactもVue.jsも要らないでしょ……

mizchi @mizchi

@tricken 一応こういう本がある(自分もレビュワーでちょっと関わった)んですが、一応ある程度わかってる人のショートカットという位置付けの本です jsprimer.net

mizchi @mizchi

@tricken 一応これがep1~3のつなぎの部分が変化してきた、という内容の発表になります speakerdeck.com/mizchi/huronto…

tricken（手術後復帰チャレンジ中） @tricken

@mizchi 各種ありがたーい（こないだのコメンタリも今回の理解に至るにあたり大変役に立ちました、ありがとうございます）。

mizchi @mizchi

@tricken 僕も初心者向けの JavaScript/Node.js 本を書こうとして、構想で止まってるんですが、tricken さんの学習過程はとても参考になってて助かってます

mizchi @mizchi

.@tricken さんのブログへのアンサー記事？を書いてる

tricken（手術後復帰チャレンジ中） @tricken

ついに単なるmintまとめがブログになってしまった（ありがとうございます楽しみです） twitter.com/mizchi/status/…

mizchi @mizchi

書きました / 1件のコメント b.hatena.ne.jp/entry?url=http… “プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法” htn.to/4t7eqRm6dq

tricken（手術後復帰チャレンジ中） @tricken

@mizchi ありがとうございます。自分は開発系スクールとは縁がないので「そんなにRoR強いの！？」ということがまずカルチャーショックでした。Primer本はnode.jsについては割と最低限に抑えてるなと言う印象でした。ECMA2015以前以降で言語と教材の信頼度がハッキリわれてることも再確認できてありがたかった。