そうだ、typescriptはじめよう
可読性、保守性を高めるためにはやっぱりnode.jsではなく、typescriptです！！どうやら、tsはa part of node.jsらしい？ (そんなことないかもです。ただ単にnpmで入れられるだけ？)です。インストールの手順、使い方、その他、重要な点をまとめます。
node.jsのインストール方法
ref1 を参考に最新のnode.jsをインストール出来ます。まあ、ここでもまとめておきたいと思いますが。
aptでnodejsとnpmを入れる
$ sudo apt update
$ sudo apt install nodejs npm
$ sudo node -v
npm install で最新のnode.jsを入れる
$ sudo npm install n -g
古いnode.jsを削除する
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
typescriptのインストール方法
上のを参考にnode.jsがインストール可能ですね。んで、typescriptはなんとnpmで入れるんですよね。これ驚き。しかし、コンパイラはちゃんとbinaryなんですよね。packageとかではなく。これ面白い。 はい、refを参考にnpmからtypescriptをインストールして、コンパイラへのパスを通します。
$ mkdir sample
$ cd sample
$ npm init
$ npm install typescript
$ echo export PATH=\$PATH:`pwd`/node_modules/.bin >> ~/.bashrc
$ source ~/.bashrc
$ tsc --version
とりあえずチュートリアルをやろう
チュートリアルがかなり充実している。ビビるね。Reactがなぜいいのか、っていう部分も軽く書かれているから、参考にした方がいいですね。
大事だ思った点をメモる感じで行こう
typescriptはjavascript + 型定義あり
DOM(Document object model)とは、HTMLをJavaScriptから参照・操作するしくみです。定義の文。
Reactのすごいところは仮想DOMがあるところ。仮想DOMによって、DOMの管理が格段に簡単になるみたいです。
UIを宣言的にかけるところ。reactを使わないと命令的なUIになるね。確かになったね。
npm (node pacage manager)で、package.jsonふぃあるが生成されます。
npm install -gオプションでコマンドにパスを通す感じになります
node.jsのpackageマネージャーにはnpmとyarnがある。yarnのメリットとしては、npm寄りインストールが早い、npmより厳密にモジュールのバージョンを固定できる、npmと一緒に使える。
JSXはJavaScriptを拡張した言語で、JavaScriptの中にXMLを直接書けるようにしたものです。XMLとHTMLは厳密には異なりますが、ここでは同じものと考えてください。
JSXを戻り値にする関数をReact用語で「関数コンポーネント」と言います。Reactを使ったフロントエンドアプリケーション開発では、関数コンポーネントをうまく使うことがポイントになります。画面の部品をコンポーネントにしておくと、再利用できたり変更が一箇所で済んだりと、開発や保守がしやすくなります。
reactで書いたファイルたちはコンパイルされて、最終的には純粋なhtml + css + jsに還元される。で、reactは内部でwsとか使ってる。まあ、なんていうか、今までフロントエンドの人たちが頑張って書いてた面倒くさい工程を簡単にするのがreactって感じだな。ただ、最終的にはhtml + css + jsに還元されるってのは忘れないでほしいな。で、デフォルトでwsとかが使われているね、reactは。
オブジェクト型とマップ型は、論理的には同じだが、ソフトウェア的には別のもの。typescriptにはMap型もあって、これはc++みたいに、キーバリューの型をプログラマが決めることができる。
c++のvectorの代わりにはArrayを使おう
Set型もあります。これはc++のsetとほとんど同じです。
これはatcoder用のメモなんですけど、標準有力の終わりはctrl + zです。