ハッピーメモメモ

私的備忘録

フロントエンド開発ツール

Node.js

・前提

 Javascript…ブラウザ上で動くために開発されたプログラング言語

 !JavaScriptはブラウザ上だけではなく、サーバサイドでも動く!

・Node.jsは、サーバサイド向けのJavaScript(その中でも代表的なもの!)

 

注目されている理由

「クライアントもサーバサイドも同じ言語で書けたら楽じゃない?」

 

周辺のエコシステム

f:id:n-moeko1966:20220228152355p:plain

npm

Javascript用のパッケージマネージャーのCLI

 

・パッケージマネージャ

コンピュータに何のソフトウェアがインストールされたかを記録し、新しいソフトウェアのインストール・新しいバージョンへのソフトウェアの更新・以前インストールしたソフトウェアの削除を容易に行えるようにするプログラムです。名前が示すように、パッケージマネージャはパッケージを取り扱います。パッケージとは、ファイル群を一つにし、インストールや削除をまとめてできるようにしたものです。

 

CLI

f:id:n-moeko1966:20220228152603p:plain

 

eng-entrance.com

 

TypeScript

JavaScript代替言語(AltJS)

f:id:n-moeko1966:20220228153158p:plain

JavaScriptの構文を維持し、型アノテーションなどで拡張された静的型付言語

・自身が持つ型システムを省いた記述も可能

 🙈静的型付言語の良さは失われないのか?

・静的型付言語であり、型チェックとJavaScriptへのコンパイルも担う

 cf)JavaScript:ブラウザというランタイムの中でコンパイルせずにすぐ実行できてしまう

・Vueで使うならvite経由で入れるのが楽チン(ByTT)

 

Angular

Googleが開発する、HTMLとTypeScriptでシングルページアプリケーションを開発するためのプラットフォームであり、フレームワークである

コンポーネントを指向するライブラリ

 

React

Facebookによって開発されているユーザーインターフェース構築のためのJavaScriptライブラリ

コンポーネントを指向するライブラリ

 

ESLint

・静的解析(実行せずにコードの欠陥を予測する)ツール

JavaScriptのリンター

・コードベース上で厳密にしたい箇所、緩やかにしたい箇所などのルールが設定可能

→口頭伝承やレビューでの人間による指摘が不要になる

→不要なコードスタイルの衝突を避けることができる

 🙈実際の開発・レビューでは、このチェックが必要・不要ということ以外に、

   このチェックは厳格・緩めでもいい、ということが発生するんだなあ

 

 

 

 

 

 

 

 

 

 

 

参考

https://www.amazon.co.jp/dp/B08SQQWPDW/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1