JavaScriptにまつわるエトセトラ

JavaScriptに関連する技術用語をまとめました。

個人的な主観も含まれます。

間違いがあれば教えて下さい。

JavaScript

ブラウザ上で動くプログラミング言語。Javaとは全然別モノ(お約束)

JS

JavaScriptの略

jQuery

JavaScriptライブラリ。JavaScriptのコードをより容易に記述できるようなる。document.querySelector(“div”)が$(“div”)で表現できるようになる。悪魔的に便利。

DOM

ドキュメントオブジェクトモデルの略。簡単に言うとHTMLのタグ要素をプログラミングにおけるオブジェクトのように扱うこと。JavaScript側からHTMLを解釈すると、各タグ要素はDOMというオブジェクト扱いとなる。

Ajax

Asynchronous JavaScript + XML の略。JS上の非同期処理。JSはインタプリタ言語なので、処理の実行は記述順に「A→B→C」と順番に処理される。しかし、非同期処理を組み込むとBだけを順番の流れから外して処理を走らせる、といったことができる。「A→C」処理を行いつつ、同時に「B」の処理も行う、という動作を非同期処理という。この時、Cの処理はBの結果に依存させてはいけない(Promiseなどの話はここではしない)。「jQueryを使う＝Ajaxを使う」と思っていた時期が私にもありました。

VanillaJS

純粋なJavaScriptのこと。PureJSともいう。主に「jQueryに依存してませんよ」の意で使われる。

ECMAScript(エクマスクリプト)

JavaScriptの言語仕様のこと。各ブラウザごとにそれぞれ独自の言語仕様が存在したので、それを標準化するために生まれた。

ES

ECMAScriptの略

ES5

ECMAScriptのバージョン5。IEで動く。世間一般的に「JavaScript」といえばこの仕様を指す場合が多い。

ES6(ES2015)

2015年に採択されたJavaScriptの仕様。IEが対応してない。おじさんたちから見れば「JavaScript 2.0」みたいな存在。

Polyfill

ES5に存在しない関数やライブラリの代替コードのこと。ES6で書かれたコードをES6未対応のブラウザ上で動かせるように挙動をサポートしてくれるライブラリ。関数やライブラリ単位でpolyfillのモジュールが存在する。

トランスコンパイラ(トランスパイラ)

とあるプログラミング言語を別のプログラミング言語に変換するツール。主にES6をES5に変換したり、altJSをJavaScriptに変換することを指す。

Babel

ES6のコードをES5に変換するツール。トランスパイラ。雑に表現するとBabelはソースに対するサポートでPolyfillはバイナリ(実行)に対するサポートを行う。

ActionScript

今は亡きFlash内で使われていたECMAScriptを拡張した太古の言語。ブラウザ上で動いているJavaScriptとは全く別モノ。

altJS

alternative JavaScriptの略で代替JavaScript言語のこと。独自の言語仕様を策定して、より実装しやすい言語を目指したもの。最終的にトランスパイラを使ってJavaScriptに変換する。

CoffeeScript

altJSの一種。簡素さと可読性の高い構文を採用したJavaScript。ES6の登場によりイニシアチブが薄れた。

TypeScript

altJSの一種。ES5を拡張した言語。静的型付けを持ったJavaScript。Microsoft産。2020年現在一番波に乗ってる感がある。

Dart

altJSの一種。FlutterというSDKを使えばReactNativeみたいにネイティブアプリの開発用言語としても使える。Google産。

Elm

altJSの亜種。言語仕様とフレームワーク(ReactやVueに当たる部分)がセットになっている。コンパイルでHTMLとCSSとJSのフロンエンド一式を吐き出す。マイクロサービスが徹底されていない限り採用できなさそう。

Node

Node.jsとも言う。サーバーサイドで動くJavaScript。バックエンドもJavaScriptにすれば全部JavaScriptで書けるっしょ？ってノリから生まれた、知らんけど。

CommonJS

ブラウザ以外(サーバーサイド)で動くJavaScriptの仕様を定めることを目標としたプロジェクト。≒Nodeの言語仕様という位置づけっぽいがNodeの作者からは「お前の仕様なんて気にしないよ？」と言われているらしく、この言葉自体もあまり聞かないのでオワコン扱いでいいと思う。

Bower

npm的なやつ。オワコンらしいのであまり知る必要はない。

npm

Node(JavaScript上)で利用するパッケージを管理するツール。RailsにおけるBundler的な存在。

yarn

npmをラッピングしてより使いやすくしたnpm。npmよりコマンドのタイピング量が少なくて済む。lockファイル登場によりBundler感が増した。

Express

Node.js用のWebアプリケーションフレームワーク。

Angular

一昔前に流行ったJavaScriptのフレームワーク。ReactとVueの登場により影を潜めた感がある。

Backbone.js

一昔前に流行ったJavaScriptライブラリ。ReactとVueの登場により影を潜めた感がある。

React

JavaScriptライブラリ。UI描画管理(HTML)も含まれるのでフレームワークに近い役割をこなす(SPAだとReactだけでMVCをすべて実装することになる)。FaceBook産。

Redux

JavaScriptライブラリ。主にReactと併用して利用される。Reactをフレームワークっぽく使うために便利なので、だいたいReact+Reduxというセットで扱われる。Fluxという設計思想をもとに作られている。

JSX

altJSの一種。HTMLも記述できるJavaScriptの拡張構文。ReactやVueのソースコードとして主に採用される。UIを管理するライブラリの性格上、コードがcreateElement()地獄になるので、それを回避するためにHTMLを直接書けるように拡張したらしい。Babelを使ってJSにコンパイルする。

Vue

Vue.jsとも言う。JavaScriptのフレームワーク。指定したIDの中のHTMLをハイジャックして、<span>{ hoge.name }}</span> や <li v-for="item of items"> など既存のHTMLソースコードにVue独自の構文を差し込むことが可能。拡張子が.vue のやつはコンパイルが必要。

Vuex

Vue上で利用するJavaScriptライブラリ。ReactにおけるRedux的なもの。

Nuxt.js

VueとNodeを使ったWebアプリケーションフレームワーク(SSR=サーバーサイドレンダリング)。マイクロサービスが徹底されｔ(ry

Next.js

ReactとNodeを使ったWebアプリケーションフレームワーク。Nuxt.jsのReact版。 マイクロサーｂ(ry

WebRTC

Web Real-Time Communicationの略。ブラウザとブラウザ間でP2P通信を行うための仕組み。主にそれを利用するために用意されたAPI群のこと。ブラウザからカメラやマイクなどのデバイスにアクセスするAPIも用意されている。APIはブラウザが提供しているので、特になんの前準備もなく手元のHTMLに実装していける。IE？知らない子ですね。

Grunt

JavaScript(Node)製のタスクランナー。make的なやつ。複数のファイルをまとめたり、Minifyしたり、トランスパイルを行うために使う。gulpの登場により影を潜めた感がある。

gulp

Gruntをより早く簡潔にしたやつ。

Browserify

Nodeのモジュールをブラウザで動くJSに変換するツール。

Webpack

JS、CSS、画像ファイルをまとめる高機能なモジュールバンドラー。コンパイル言語で言うところのビルダー(コンパイラ＋リンカ)に近いイメージ。最終的に一つのバイナリ(実行)ファイルが出来上がるのと同じように、最終的に一つのJSファイルが出来上がる。トランスパイラだとaltJSをJavaScriptに変換するだけだが、これだとさらにCSSと画像も取り込んで一つのファイルにまとめることができる。

Minify

ファイルサイズを軽量化すること。ソースコードからスペースや改行、コメントなどを取り除く。Minify後のファイルは人類には読めなくなる。MinifyされたJSライブラリは*.min.jsといった拡張子で表現される。

ESLint

JavaScriptの静的検証ツール。構文チェックやコード規約のチェックなどに使う。RailsでいうRubocop的なやつ。

Tag: プログラミング

技術に対する興味

技術に対する興味は大きく分けて2パターンある。

• 一つは「それがどのように成り立っているのか構造を突き詰めたいタイプ(A型)」
• もう一つが「それでどんな事ができるかを試してみたいタイプ(B型)」

A型が科学的アプローチで細部に深堀りしていくタイプで、B型があらゆる可能性を広く追求していくタイプ。

A型は狭くて深く、B型は広くて浅い視野となる。

世間一般的に「技術に興味がある」といった場合、B型を指すことが多い。

なぜB型が多いかというと、A型と比べてB型は他人が評価しやすいからだ。

むしろA型は「技術に興味がある」とすら思われていないし、自分から進んで「技術に興味がある」とも言わない、多分。

A型はある疑問を発見したら、それについて究明する内向きのムーブになるので他人の関心に引っかかりにくい。

「ある疑問」に出会うまでは興味そのものが表出しないので、より観測しづらい。

ひるがえってB型は、世間で認知されている一般概念に対しての興味なので、外向きのムーブになりやすく他人の関心に引っかかりやすい。

今目の前で起きた原因不明のバグの原因究明は(他の人に投げない限りは)自分にしか対応はできないけど、Rustの勉強やハッカソンであれば他人を巻き込めるし、その過程で自分の興味が相手に伝わりやすい。

新しい言語やフレームワーク、Webサービスが出るごとにそれに飛びつくのは明らかにB型の特徴で、それらを駆使してどんな事ができるかを試してみたいという好奇心で動いている。

それとは別に、A型の人は何をしているかというと、" ‘a’ < ‘b’ "みたいなコードを動かしてみた後で「なんで文字で比較できるの？そして、なんでbの方がでかいんだろ？」と不思議に思ってしまって、言語のソースコードを読みにいったりASCIIコードを確認しにいったりしている。

B型は業界の流行に直結するから評価しやすいけど、A型はあまり表面上には現れてこない。

「Rustを使ってみたい」は聞けるけど「==と===の違いが気になる」というのはあまり聞けない。

QiitaのランキングやLGTMによる評価もA型とB型だと圧倒的にB型がもてはやされる。

しかし、Qiitaの価値はランキング上位やLGTMが多い記事ではない。

実務で今から実装しようとしている内容の具体的なやり方や実装例を書いた記事だったり、

問題が起きた時に、似た事例をググってでてきた、解決法をまとめてくれている記事などがQiitaの真の価値だ。(Stack Overflowのほうが〜、とか公式ドキュメントのほうを〜云々の話は一旦横に置いといて)

しかし、こういった記事は実際の作業中に疑問や問題がでてこないと出会うことはない。

ランキングの上位記事やLGTMが多い記事は仕事の合間の気分転換ぐらいの価値しかなくて、現実に我々を助けてくれるのはLGTMが少なくとも、目の前の疑問や問題をピンポイントに解決してくれる記事だ。

そこをLGTM数だけで評価してしまうと、ほとんどB型の人しか評価されなくなるし、現にそうなっている。

実務で役に立つ「技術に対する興味」はA型なのに、現実にはB型の人たちだけが「技術に対する興味」を持っていると評価されてしまっている。

バグが起きた時にライブラリのソースコードまでしっかり確認しにいける人もA型の人だ。

前にも少し書いたけど、目に見える熱意や興味だけで評価してしまうと、いざ実務をさせた時に使い物にならないということが起きてしまう。

普段は「別に」とやる気のなさそうな感じでも、A型の人は気になる挙動や問題を見つければ、その原因を探らずにはいられなくなる。

そして「自分も今までいろんな記事に助けられているし、今回の件も誰かの役に立つかもしれないから記事にまとめておこう」となる。

B型はB型で大事なのも分かるけど、A型の人がいることにも思いを馳せて欲しい。

ちなみに、今回は分かりやすくあえて型を定義して分類しているけど、当然、一個人の中でもA型とB型は同居している。

そのどちらの傾向が強いかという話で、別に一人の個人が完全にA型の興味しかないとか、B型の興味しかない、という話じゃないです、念のため。

Tag: プログラミング

知識と意思決定

教育が思考力を鍛えるというのは嘘です。(ここでの教育は以前のエントリにおける「教与(教え)」の方の意味として捉えてください)

教育で伝授される知識や情報はあくまで思考や行動の為の道具であって、自身の考えや、成果そのものではありません。

現実世界で必要なのは要所要所における具体的な判断とそれに伴う行動、そして成果だけです。

いくら有能な農具を取り揃えたとしても、実際に種をまき、育て、実を収穫するところまでしなければ、明日を凌ぐパンを賄うことはできません。

選びぬかれた種、栄養満点の肥料、高性能な農耕具、広大な土地、先人がまとめた栽培方法、それら一つ一つは素晴らしいものですが、ただそれらがあるだけではなんにもなりません。

それぞれの要素から自分にあったものを取捨選択し、実際に自分で栽培収穫して初めて価値を生むのです。

授かった知識をいくら有用な価値があるように嘯こうとも、知識そのものだけではなんの価値にもなりません。

「99％の確率でこの馬券が当たる」という情報を持っていても、実際に馬券を買わなければ1円も儲かりません。

そして、1％は外れるわけですから、実際に買ったとしても下手をすると大損してしまう可能性もあります。

情報を持っていたとしても、それが100％良い結果を約束してくれるわけでもありません。

知識や知恵、情報やリテラシーはあればあるほど素晴らしいと無条件に思い込んでいると思いますが、それこそが思考力の欠如だと思います。(このことについても以前のエントリで書きました)

50年前のオイルショックが起きた時代と2020年になった現代では圧倒的に現代のほうが知識やリテラシーの質、情報量も格段に優れているといえます。

しかしオイルショックから半世紀を経た現代でも、デマ情報からトイレットペーパーの買い占め騒ぎが起きてしまいました。

これは別に庶民がバカなのではなく「トイレットペーパーが不足だというのはデマだが、お店の商品が品切れになっている現実を目の当たりにし、実際に入手困難になりつつあると判断して、今のうちに買っておく」といった冷静な判断の連鎖により実際に市場から商品が消え去っていったのです。

メーカーからの「ほとんどが海外に依存しない国内生産であり、工場も平常稼働しており供給量も問題なく、在庫も潤沢にある」と聞かされていても、実際に空っぽになった商品棚を見ると不安に思ってしまうのが人情なのです。

いくら知識や情報を持っていたとしても現実を目の当たりにしたときの不安には勝てないのです。

知識や正確な情報を専門家から入手していたとしても、現実の行動においてはその場の感情が優先されてしまうのです。

現実で起きるムーブメントは知識やリテラシーの質、情報量で決まるのではなく、個々人のその場の感情の連鎖で決まるのです。

知識や情報が社会活動を正常にできないのであれば、いくら知識や情報があったとしても暖簾に腕押しでしょう。

そして、情報や知識を多く持つことにもデメリットがあります。

それは意思決定が難しくなることです。

情報はあるばあるほど良い判断ができる可能性は上がるとは思います。

しかし、決断行為自体の難易度が上がって、判断そのものがしづらくなります。

逆に情報が少なければ判断自体は簡単にできます。

例えば「勇者と魔王」という情報だけだと「まぁ勇者は善で魔王は悪でしょ」と簡単に判断できます。

しかし、魔王が魔王になるまでの顛末を知ったり、勇者の町中における破壊と窃盗行為を冷静に考慮すると、一概に互いを善と悪とにきっぱり分けて判断できなくなってきます。

政府や専門家がしっかりとした方向性を提示できずに、微妙にあやふやな対応になってしまうのは、情報が多いがゆえに起きる意思決定の困難さが原因だと考えられます。

上記の例のように、いろんな知識や情報を得れば得るほど判断の境目があやふやになってきます。

そうなってくると簡単に「これが正しい！」ときっぱり言い切れなくなってくるのです。

民家の不法侵入を棚に上げて「勇者は正義」と断定できないように…。

あらゆる方向性に対しての考慮はもちろんしていると思いますが、それと同時に、どの方向性で進むとしても一長一短があり、「これが唯一無二の正解だ」という選択肢は存在しないのです。

結果が確定しているのであれば、そこから逆算して最適な答えを出せますが、現在進行形の当事者からすれば結果がどう転ぶかは全く予想できません。

どの結果に転んだとしても、みんなが納得できるような都合のいい選択肢は存在しないのです。

それでも何かしらの意思決定を下さなければならない人たちは大変だなあ、と思います。

さらに、教育や知識を得ること自体にもデメリットがあります。

信じられないと思いますが、教育や知識そのものが人から思考力を奪っているのです。

教育には「他人から得た知識が無条件に正しいことだと思い込んでしまう習慣」を身に付けさせる作用があります。

周りの人の喋っている内容だったり、自分の喋っている内容をよくよく思い返してみてほしいのですが、それは自分が思考した末出した結論なのでしょうか？

ただ、他人の意見をオウム返ししているだけなのではないでしょうか。

ここでいう他人の意見というのは、TVのコメンテーターの発言であったり、メディアやブログで目にした著名人の語りや書いた内容のことです。

その中で自分の感性にあったものや、世間に流れているニューマ(空気感)と合っていると思われるものをすくいあげて、それをそのまま無意識に自分の意見としているだけなのです。

色んな情報を取捨選択したり、そこから自分なりに考えを発展させたりなどはしていないのです。

人々が「考え」を持っているのは嘘で、自分が気に入ったオピニオンリーダーをみつけて、その意見を自分の主張としているだけで、実は何も考えていないのです。

答えの用意された教育に慣れてしまっているせいで、それっぽい答えを世間から拾ってきて、それをそのまま回答するしかできなくなってしまっているのです。

確定した未来は存在しないですし、現実社会に絶対の正解は存在しません。

それなのに「正しい」という絶対的な概念が存在しないと平穏を保てない脳みそになってしまったのです。

存在しない正解をひたすら追い求めるだけのゾンビみたいな思考回路になってしまっているのです。

正解のように思える他人の意見をそのまま自分の意見としてしまう、これこそが教育の持つ負の側面といえます。

絶対の正解はそもそも存在しないという認識をちゃんと持てば、色んな意見がある中で、そこから自分なりの能動的な意見を見いだせるようになるのではないでしょうか。

なぜなら、答えがない前提においては、一番正解に近いであろうものを自分で取捨選択するか、それらを組み合わせて自分なりの考えを導き出すしかないからです。

それらが意思決定と思考力だと思います。

今回の話をまとめると…

• 知識は持ってるだけでは無意味で実践して初めて価値を生む
• 情報や知識があるからといって必ずしも良い結果を生むわけではない
• 情報や知識が多いほど意思決定は難しくなる
• 教育には他人から受動的に意見を植え付けられてしまう悪癖がつくデメリットがある

といったところでしょうか。

Tag: 哲学