JavaScript メモ

JavaScriptについて

JavaScript

• JavaScriptとはWebページに動きをつけるための言語です。
• ボタンに触れると形や色が変わる機能や、スライドショー、ポップアップウィンドウ、ログインなど、さまざまな機能の実装に用いられます。
• 基本変数はconstで定義します。
• JavaScriptの変数宣言は基本的にconstを使用します。constは再宣言と再代入ができないため意図せず値を書き換えられるエラーを未然に防ぐことができます。
• 繰り返し構文ではブロックスコープで管理がしやすいletを使用します。
• 古い記載方法であるvarは変数名や再代入をチェックする範囲が広くなるため使用しないほうが無難です。
• 公式サイト
• GitHub

TypeScript

• TypeScriptとは型がついたJavaScriptです。
• プログラミングにおいて型があることの恩恵は大きいので、近年人気を集めています。
• 公式サイト
• GitHub

jQuery

• jQueryは、高速で小さく、機能が豊富なJavaScriptライブラリです。
• どんなブラウザでも使えるのがjQueryの一番の特徴です。
• ブラウザの違いを吸収して、どのブラウザでも同じコードで動作するようにしてくれ る。
• 主に商用のホームページやECサイトなどで使われることが多い。
• Webアプリケーションでは、小中規模のものにはだいたい使われている。
• jQueryは、さまざまなプラグインで機能を拡張することが可能です。
• プラグインを使えば、Webサイト上でよく見られる表示や機能を簡単に実装できる。
• 公式サイト

Json(JavaScript Object Notation)

• 人間と機械で読み取り可能なオープンデータ交換形式です。
• JSONはプログラミング言語に依存せず、さまざまなアプリケーションで一般的なAPI出 力です。
• SONは2つの方法でデータを表します。
• 公式サイト
• 公式ドキュメント

JWT(JSON Web Tokens)

• JSON形式の認証トークンのことを指します。
• 電子署名により改ざん検知できます。
• 認証用のトークンなどで用いられます。
• 公式サイト

ECMAScriptの誕生について

• JavaScriptの誕生は1995年になります。
• Netscape社が、当時最も流行していたWebブラウザ「Netscape Navigator」にJavaScriptを搭載したのが始まりです。
• その後Microsoft社が、Webブラウザ「Internet Exploler」にJavaScriptを搭載しました。
• 当時、「Netscape Navigator」ブラウザに使われるJavaScriptと「Internet Explorer」ブラウザに使われるJavaScriptはそれぞれ違う仕様でした。
• そのため、Webブラウザ毎に仕様の異なるJavaScriptが乱立している状態でした。
• その問題を解決するために、Netscape社は「ECMA International」という機関にJavaScriptの標準化規格を構築するように依頼しました。
• その結果、JavaScriptの標準化仕様として定義した言語ECMAScriptが誕生します。
• そして以後は、ECMAScriptがJavaScriptの標準規格として採用されました。
• 公式サイト

ES2015(ES6)について

• ES2015(ES6)とはECMAScriptのバージョンを指します。
• ES2015(ES6)とは2015年6月に発行された、ECMAScriptの6th Editionです。
• ES2015(ES6)から多くの機能や構文が追加され、JavaScriptでのプログラムがより効率よく書きやすくなりました。

Common.JSの誕生について

• JavaScriptの使用範囲を、ブラウザにとどまらずもっと広範囲に広めていこうという動きが起こりました。
• JavaScriptはmodule機能が欠如していたので、広範囲では使用出来ませんでした。
• 2009年頃、新しいJavaScriptの仕様を策定する動きが発足しました。こうして生まれたのがCommon.JSです。
• Common.JS はあくまで仕様であり、Common.JS というライブラリが存在するわけではありません。
• 公式サイト

Babel

• ES2015(ES6)での新しい構文に、既存のブラウザが追いつかない問題が発生します。
• そこで、Babelを取り入れることでES2015(ES6)の構文で書かれたJavaScriptをES5に変換してコードをブラウザ上で動かすことが出来るようになりました。
• BabelはES2015で書かれたJavaScriptを、ES5の記法に変換してくれるツールになります。
• 公式サイト

Polyfill

• polyfillは未対応のブラウザでも関数や構文を機能を使えるようにするためのライブラリです。
• ES2015(ES6)で追加された構文がPolyfillに用意されているため、それを使用すれば本体のコードが書き換えずに対応することが可能です。
• 公式サイト
• 公式ドキュメント

Webpack

• Webpackは、複数のファイルを1つにまとめてくれるものです。
• 最も多い使用の仕方は、JavaScriptファイルをバンドルすることですが、他にもcssや 画像ファイルなどもまとめることができます。
• バンドルする際にBabel を用いることによって、ES2015(ES6)をES5に変換すること ができる。
• 公式サイト

Turbopack

• Turbopackは、Rust で記述されたJavaScriptとTypeScript用に最適化されたビルドシステムです。
• Turbopackはオープンソースであり今後はあらゆるフレームワークに対応していきます。
• 公式サイト

browserify

• Node.jsのコアモジュールやnpmのモジュールをブラウザでも利用できるようにするのが目的です。
• モジュール間の依存解決やファイルの結合を行うためのビルドツールとして使われることが多いです。
• browserifyは単一のjsの依存関係の解決し、モジュールを生成することにフォーカスする機能に特化しています。
• 公式サイト

Ajax

• Ajaxは、Asynchronous JavaScript+XMLの略です。
• ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法になります。
• サーバーとデータのやり取りを非同期で処理しています。

Gatsby.js

• Gatsby.jsは、React向けの静的サイトジェネレータでありGraphQLと相性が良い。
• Gatsby.jsを使うと、表示が高速でモダンなUIのReact製サイトを、SEOに強くサーバ ー代がかからない静的サイトを作成できる。
• 静的サイトジェネレータは、何らかの言語で書いたコードから、HTML/CSS/JavaScriptによる静的なウェブサイトを生成するツールのことです。
• データベース不要、複雑なコーディング不要、爆速サイトを構築できる。
• 公式サイト

GraphQL

• GraphQL は、API 向けのクエリ言語とサーバーサイドランタイムの両方を指します。
• クライアントがリクエストしたデータだけを提供することを優先します。
• 1回のリクエストで多くのリソースを取得するので、GraphQLを使用するアプリは、低速のモバイルネットワーク接続でも高速になる。
• 公式サイト

JavaScript/TypeScriptフレームワークについて

Vue.js

• Vue.jsではシングルページアプリケーション開発に使われていることが非常に多いです。
• 従来のWebページではページ遷移の時に全体を切り替える必要があったので、シングルページアプリケーションによって新しいUIの実現やスピードの向上を実現することが可能になりました。
• 公式サイト

Nuxt.js

• Nuxt.jsはVue.jsをさらに効果的に使うためのもので、Vue.jsの欠点でもあった SSR(サーバサイドレンダリング)を行えるフレームワークです。
• SSRとは、本来Webブラウザ上で実行されるJavaScriptをサーバ内部で実行して HTMLを生成する仕組みです。
• 公式サイト

React

• React.jsはWebサイトよりもアプリケーション開発に使われることが多いです。
• 勤怠のfreeeやSNSのTwitterやFacebookで使われています。
• 公式サイト

JSX (Javascript ＋XML)

• XML構文をJavascriptに変換して、プログラマがJavascriptを使用する代わりにXML構文でReactJSをコーディングできるようにします。
• XML要素や属性やおよび子はReact.createElementに渡された引数に変換されます。
• 公式

Redux

• Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。
• 1か所で、状態管理をしておくと楽なため開発されました。
• 状態管理とは各状態によって作業内容が変更されることです。
  • レストラン
    • レストランでお客様がメニューを見ている状態: 店員は待つ。
    • レストランでお客様がメニューを申し込む状態: 店員はご注文をお伺いに行く。
  • Twiiter
    • ログインしていない状態: ログイン画面を表示します。
    • ログインしている状態: プロフィール画面を表示します。
• 公式サイト

React Hooks

• React Hooksは、React 16.8 で追加されたReactの新機能です。
• 公式サイト

PReact

• Reactのサブセットライブラリとして、Preactというものがあります。
• より軽量なReactという位置付けで、ダウンロードするjsファイルのサイズが肥大しがちなSPAサイトにおいて、パフォーマンスを向上させるための有効な選択肢の一つです。
• 公式サイト

Remix

• Reactを魔改造して色々できるようにしようぜ、という昨今のモダンフレームワークに習うように、RemixもReactに厚化粧をした"React"フレームワークです。
• 書き心地はそのままReactですが、気づいたらサーバーサイドのコードを書いており、気づいたらデータベースをいじっているというなんとも不思議な経験ができるフレームワークです。
• フルスタックフレームワークを使っているというよりは、Reactで開発しながら、サーバーサイドの処理も同時に書けるのがRemixです。
• 公式サイト

Next.js

• ZEIT社によって開発されたJavaScriptフレームワークです。
• Reactと組み合わせてウェブアプリ開発を強化するフレームワークである。
• Reactアプリのサーバーサイドレンダリング(SSR)を可能にします。
• Next.jsは、最も人気があり、戦いが強化されたWebフロントエンドライブラリReact に基づいて構築されています。
• Next.jsは、卓越したSEOサポートと高速起動を備えたクラス最高のサーバーサイドレン ダリングを提供します。
• 公式サイト

AngularJS

• AngularJSとは、Googleが開発しているフレームワークです。
• AngularJSは、動的Webアプリの構造フレームワークです。
• 双方向データバインディングにより、HTMLをテンプレート言語として使用できる。
• HTMLの構文を拡張して、アプリケーションのコンポーネントを明確かつ簡潔に表現できます。
• 公式サイト

MVWの採用

• Angularは、MVWを採用している。
• MVW とは、Model(データ)、View(画面)、Whatever(何もかも)という言葉の 頭文字を合わせた言葉で、アプリケーション設計の考え方のひとつです。
• データ、画面、コントローラそれぞれの役割が分けられており、混在することがないめ、スムーズなアプリケーション設計を実現できます。
• マスターメンテナンスなどのような「CRUD系アプリ」「業務系アプリ」といった、各機能が独立した画面のアプリ開発に用いられる。
• フォームを使ってデータなどの送受信を行うようなアプリの開発に向いている
• シングルページアプリケーションと呼ばれる、AjaxやWebSocket通信を使い、画面が 遷移しないWebアプリなどの開発にはあまり向いていない。

Angular CLI

• Angular CLIは、コマンドシェルから直接Angularアプリケーションを初期化、開発、 スキャフォールディング、および保守するために使用するコマンドラインインターフェイ スツールです。
• 公式サイト

Three.js

• ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画するクロスブラウザ対応の軽量なJavaScriptライブラリおよびAPIである。
• 公式サイト

Nue.js

• ユーザーインターフェイスを構築するための小さな (2.3kb minzip 圧縮された) JavaScript ライブラリです。
• React/Vue に似ていますが、フック、エフェクト、プロップ、その他の珍しい抽象化はありません。
• 公式サイト

Riot.js

• シンプルで軽量なコンポーネント指向のUIライブラリで、フロントエンドの開発で人気を集めている。
• Riot.jsはHTMLに似た文法を採用しているので、比較的使いやすいJSライブラリである。
• 公式サイト

Electron

• Webの技術(HTML5, CSS, JavaScript)で作ったものをデスクトップアプリケーション化できるフレームワークです。
• これらのアプリケーションは、パッケージ化してmacOS、Windows、またはLinuxで 直接実行するか、Mac AppStoreまたはMicrosoftStoreを介して配布できます。
• GitHubがテキストエディタのAtomを開発する過程でオープンソースとして公開されました。
• 公式サイト

Node.jsについて

Node.JS

• Node.js はV8 JavaScriptエンジン上に構築されたJavaScript実行環境の1つです。
• イベント化された入出力を扱うサーバサイドJavaScript環境です。
• Webサーバなどのスケーラブルなネットワークプログラムの記述を意図しています。
• 公式サイト
• GitHub

Package.json

• Node.jsプロジェクトにおける依存関係管理やスクリプトの定義に必要なファイルです。
• 外部パッケージの管理、バージョンの指定、プロジェクトの情報の記述が定義されております。
• 公式ドキュメント

タスクランナー

• タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプロ グラムで作業の効率化に使われています。
• 2013年頃からWebのフロントエンド開発のトレンドとなっています。
• 開発の現場では主にオープンソースのGrunt(グラント)とGulp(ガルプ)がよく使わ れています。

Grant(グラント)

• Gruntは、Node.js上で動作するオープンソースのタスクランナーです。
• 主にWeb開発に関わるタスクを自動化するために使われています。
• Gruntのほうがプラグインが多いです。
• ファイルの複製には「grunt-contrib-copy」というプラグインを使用します。
• 公式サイト

Gulp(ガルプ)

• gulpはNode.jsをベースとしたタスクランナーの一つです。
• Gulpは、主にWeb開発で発生するタスクを自動化できるオープンソースのタスクランナーです。
• 一度セットアップするだけで、毎回手作業で行っていた作業を自動的に実行できるようになります。
• Node.jsで作られており、Gulpと公開されている多数のプラグインを組み合わせること で、様々なタスクを実行することが可能です。
• Gulpのほうが処理が速いです。
• Gulpの場合ファイルの複製にプラグインの追加は不要です。
• 公式サイト

Node.jsフレームワークについて

express.js

• サーバーサイドJavaScriptのNode.jsのWebアプリケーションフレームワークです。
• シングルページ／マルチページ／混在の各種Webアプリケーションの構築のためにデザインされています。
• 公式サイト

Nest

• すぐ利用可能なアプリケーションアーキテクチャを持っています。
• 高度にテスト可能でスケーラブルなアプリケーションを簡単に作成します。
• Nest.jsアプリケーションの生成にNest CLIが使用されます。
• 公式サイト

Meteor

• より大きなプロジェクトを管理するための能力があります。
• 豊富で整理されたドキュメントコミュニティが存在します。
• Facebook GraphQLデータスタックを利用しています。
• 公式サイト

Koa

• コールバックを管理し処理するために必要なジェネレータを利用できます。
• 強力で効率的なエラー処理プロセスがあります。
• コンポーネントに基づいたビルディングブロックがあります。
• 公式サイト

LoopBack.js

• 動的なe2eのREST APIsを迅速に作成 します。
• さまざまなデバイスやブラウザの中でより良い接続ができます。
• オンプレミスでもクラウドでも実行可能 です。
• 公式サイト: https://loopback.io/

Derby.js

• クライアントサイドとサーバーサイド両方のためのMVCアーキテクチャがあります。
• モバイルおよびWebアプリケーションの作成に最適です
• WebページやHTMLテンプレートを高速ロードするためのサーバーレンダリングおよび検索エンジンのサポートがあります。
• 公式サイト: https://derbyjs.com/

Total.js

• 高度に拡張可能で非同期のフレームワークがります。
• RESTfulなルーティングメカニズムをフルサポートします。
• Web Socketとメディアストリーミングのフルサポートします。
• 公式サイト: https://www.totaljs.com/

Sails.js

• 数多くの自動ジェネレータがあります。
• 追加ルーティングが不要です。
• 様々なフロントエンドテクノロジーとの素晴らしいフロントエンド互換性があります。
• Web Socketに対する明確なサポートがあります。
• 全データベースに対応 しています。
• 公式サイト: https://sailsjs.com/

api .js

• 構成ベースの機能があります。
• キャッシングの実装機能があります。
• 改善されたエラー処理があります。
• 公式サイト: https://hapi.dev/

Adonis.js

• SQLデータベースで構成されているORMをサポートしています。
• アクティブレコードのアイデアに基づいた効率的なSQLクエリ作成します。
• 簡単なクエリをすばやく作成できる、わかりやすいクエリビルダーがあります。
• MongoDBのようなNoSQLデータベースへの良いサポートを提供します。
• 公式サイト: https://adonisjs.com/

Denoについて

Deno

• Node.JSの後悔から生まれた新しい実行環境のことをDenoといいます。
• Denoには、npmが不要でありnode_modulesやpackage.jsonが存在しないです。
• Node.jsと違いDenoは、ファイル、ネットワーク、環境変数等を明示的に有効にしない限りアクセスすることができません。
• そのため、プログラム実行時に必要な権限を指定する必要があります。
• 公式サイト: https://deno.land/
• GitHub: https://github.com/denoland

Denoフレームワークについて

Fresh

• [Preact]をベースにしたDenoの公式フレームワークです。
• 元々は、「https://github.com/lucacasonato Luca Casonato」氏個人のプロジェクトでしたが、v1リリースで「https://github.com/denoland denoland organization」に移行されました。
• GitHubのスター数が多いDeno製フレームワークです。
• コンポーネントのSSRやTwindによるスタイリングなどがサポートされています。
• deno lintの公式サイトである[https://deno.land/ deno.land]や[lint.deno.land]でも利用されています。
• スタムハンドラーを実装することで、APIエンドポイントを作成することもできます。
• 公式サイト

Aleph.js

• Next.jsに影響を受けたReact & Denoベースのフレームワークです。
• Deno Deploy のサポートが提供されています。
• プラグインシステムが実装されており、これによって様々なフレームワークやファイル形式(MDXなど)をサポートすることも可能です。
• 公式ではYewの使用例があります。
• 以前までは、Vue.jsやSolid向けの公式プラグインが提供されていました。
• 公式サイト
• GitHub

Ultra

• ReactとDenoをベースに実装されたフレームワークです。
• Aleph.jsと比較すると、拡張性ではやや劣るものの、よりシンプルな印象です。
• React v18やAPIルートなどをサポートしています。
• deno vendor コマンドとは異なる、独自のベンダリングシステムを提供しています。
• Honoとの統合しています。
• MDXのサポートしています。
• GitHub

Dext.ts

• Next.jsに影響を受けたDeno製フレームワークです。
• こちらはReactではなくPreactがベースです。
• 前述のFreshと同様に「https://github.com/lucacasonato Luca Casonato」氏によって開発されています。
• 更新ペースが落ちている印象で、今後はFreshの開発に注力されていくのではないかと予想しています。
• GitHub

vno

• DenoでVue.jsを使ったアプリを開発するためのツール/フレームワークです。
• Aleph.jsやDext.tsと同様に、SSR・SSGなどの機能をサポートしています。
• 現在は、開発がやや滞っているようです。
• GitHub

Snel

• DenoでSveleteアプリを開発するためのツール/フレームワークです。
• v0.5.0現在、SSRやSSGなどの機能はサポートされていないものの、将来的には実装される予定のようです。
• GitHub

Nano JSX

• DenoとNode.jsの両方をサポートする軽量・高速なフレームワークです。
• コンポーネントはJSXで記述します。
• SSRサポートを提供しています。
• DenoのAPIドキュメンテーションサイトであるdoc.deno.landやWinterCGのWebサイトなどで利用されています。
• nanossrという、このライブラリとTwindを使用してSSRをするためのラッパーライブラリがあります。
• 公式サイト
• GitHub

SVELTE KIT

• SvelteKit は、コンパイラを使用する UI フレームワークである Svelte に基づいて構築されています。
• HTML、CSS、JavaScript などのすでに知っている言語を使用して、ブラウザ内で最小限の作業を実行する驚くほど簡潔なコンポーネントを作成できます。
• 公式サイト

Deno静的サイトジェネレーター

Lume

• Denoで実装されたシンプルなスタティックサイトジェネレータです。
• MarkdownとJSXだけでなく、NunjucksやYAMLなど様々なフォーマットをサポートです。
• GitHub

Pagic

• DenoとReactをベースにしたスタティックサイトジェネレータです。
• ページをmarkdownやtsx形式で記述できます。
• プラグインシステムやテーマ機能などによって、柔軟にカスタマイズすることができます。
• 公式サイト

Astro

• AstroはSnowpackベースのスタティックサイトジェネレータです。
• 公式サイト
• GitHub