Togetter/min.tを安心してお使い頂くためのガイドラインを公開しました。
@mizchi さんのアンサー記事「プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法」 もこの後にあわせてどうぞ。 https://zenn.dev/mizchi/articles/3789a101dae388d98159 Python3とPHP7をちょぼちょぼとやっている個人がJavaScript(2016年以降)/node.js/JS系ライブラリ/JS系Webフレームワーク/TypeScript等を攫っている中で一つ思ったことをメモった。JavaScriptやるなら絶対node.jsの実行環境揃えてからがいい、そうしないでJSやるくらいなら汎用性信じてPython3一択に絞った方がいい、と思ったという件です。 具体的には、以下の構成のみでJavaScriptの開発演習をすればいいんじゃないか、という話です。 続きを読む
4
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 17:13:35
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 17:15:27
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 17:23:59
リンク Hirooooo’s Labo MacにNode.jsをインストールしてnpmを使えるようにする(Nodebrew利用) MacにNode.jsをインストールしたいNodeのバージョン管理や切替を行いたいNodebrewって?npmってどうやって使えるようにするの?今回は開発環境の構築において、Node.jsのインストールについて書きます。AngularJSや 1 user 1
リンク Qiita nodebrewでNode.jsをインストールする。 - Qiita 最近のJavaScript 以前、プログラミングスクールでjQueryを少し学んでいたが、当時はJavaScriptの基礎文法も覚えずに使用していたため、全く身につかなかった。 最近サーバーサイドでLaravelを使用している...
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 17:42:31
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:21:25
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:23:54
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:27:33
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:34:13
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:39:13
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:45:06
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:47:15
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:52:18
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:53:33
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:57:08
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 19:58:46
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:11:50
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:16:50
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:22:01
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:25:47
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:27:06
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-11 20:31:33
tricken/ #FalettinSouls で曲紹介 @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エピあるよね……

2020-11-12 02:26:18
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 02:28:57
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 02:32:47
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 02:33:51
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 09:42:31
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 09:43:00
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 10:29:25
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 10:31:38
tricken/ #FalettinSouls で曲紹介 @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

2020-11-12 11:14:54
拡大
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:33:38
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:36:03
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:38:37
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:44:33
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:48:45
OSSタダ乗りおじさん @mizchi

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

2020-11-12 12:50:11
リンク jsprimer.net JavaScript Primer - 迷わないための入門書 #jsprimer JavaScriptの基本的な書き方からアプリケーションの作成などのユースケースを学ぶための入門書です 849 users 171
OSSタダ乗りおじさん @mizchi

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

2020-11-12 12:52:25
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-12 12:57:10
OSSタダ乗りおじさん @mizchi

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

2020-11-12 12:58:53
OSSタダ乗りおじさん @mizchi

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

2020-11-13 12:21:56
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-13 12:31:44
OSSタダ乗りおじさん @mizchi

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

2020-11-13 12:33:34
tricken/ #FalettinSouls で曲紹介 @tricken

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

2020-11-13 12:51:10
4
まとめたひと

コメント

コメントがまだありません。感想を最初に伝えてみませんか?