JavascriptとReactによるフロントエンド開発

Javascriptの概要とライブラリ、フレームワークとAltJSについて

JavaScript（通称JS）は、Webページの動的な動作を実現するために使用されるプログラミング言語で、1995年にNetscapeで最初に開発され、現在ではWebアプリケーションやモバイルアプリケーション、デスクトップアプリケーション、サーバーサイドの開発など、幅広い用途で使用されているものとなる。

JavaScriptの動作の基本は、WebページのDOM（Document Object Model）を変更し、ユーザーとのインタラクションやWebサイト上でのデータ処理、アニメーション、画像のスライドショー、フォームのバリデーションなどを実現するものとなる。JavaScriptはまた、Webページの外部ファイルを読み込んだり、サーバーとの通信を行ったり、データベースにアクセスすることもできる。

JavaScriptは、標準化されたECMAScript仕様に基づいており、現在の最新版はECMAScript 2022で、2021年にリリースされた。また、JavaScriptには多数のライブラリやフレームワーク、またAltJSと呼ばれるJavaScriptの代替として開発されたプログラミング言語がある。以下にそれらについて述べる。

JavaScriptのライブラリは以下にその一例を示すように多数存在し、Web開発をより効率的にするために使用されている。

• jQuery：最も人気のあるJavaScriptライブラリの1つで、DOMの操作やイベント処理などを簡単に行うことができる。また、Ajaxの実装やアニメーションの作成にも使用される。
• Underscore.js：JavaScriptの標準機能を補完する汎用的なユーティリティライブラリで、配列、オブジェクト、関数、テンプレートなどの操作に使用される。
• Lodash：Underscore.jsに似たライブラリで、Underscore.jsよりも高速であり、より多くの機能を提供する。
• Moment.js：日付や時間の処理に特化したJavaScriptライブラリで、パース、フォーマット、操作などを簡単に行うことができる。
• D3.js：データ可視化のためのJavaScriptライブラリで、グラフやチャート、マップなどを作成することができる。
• Three.js：3DグラフィックスのためのJavaScriptライブラリで、WebGLを使用して高品質な3Dモデルの作成やアニメーションを実現することができる。

次に、Javascriptのフレームワークについて述べる。JavaScriptには以下に示すように多数のフレームワークが存在し、Web開発をより迅速かつ簡単にするために使用されている。

• React.js：Facebookが開発したJavaScriptライブラリで、Webアプリケーション開発に広く使用されている。React.jsは、仮想DOMを使用し、高速なレンダリングを実現する。
• Angular.js：Googleが開発したJavaScriptフレームワークで、モバイルアプリケーションやWebアプリケーションの開発に使用される。Angular.jsは、MVC（Model-View-Controller）のパターンを採用している。
• Vue.js：Evan Youが開発したJavaScriptフレームワークで、ReactとAngularの中間的な選択肢として人気があるものとなる。Vue.jsは、シンプルで学習しやすいという特徴がある。
• Ember.js：Webアプリケーションの開発に使用されるJavaScriptフレームワークで、豊富な機能を持ち、高度なWebアプリケーションの構築に向いている。
• Backbone.js：MVCフレームワークの一種で、シンプルで軽量なJavaScriptライブラリとなる。Backbone.jsは、単一ページアプリケーションの開発に向いている。

最後に、AltJSについて述べる。AltJSとは、JavaScriptの代替として開発されたプログラミング言語の総称であり、JavaScriptの構文を拡張した言語や、JavaScriptをコンパイルして生成された言語などが含まれる。以下にいくつかの代表的なAltJSについて述べる。

• TypeScript：Microsoftが開発したJavaScriptのスーパーセットで、静的型付けをサポートしている。TypeScriptはJavaScriptと互換性があり、JavaScriptのコードをそのまま使用できる。
• CoffeeScript：RubyやPythonのようなシンタックスを持つJavaScriptの拡張言語で、コードを簡潔に書くことができる。CoffeeScriptはJavaScriptにコンパイルされ、Webブラウザーでも実行可能となる。
• Dart：Googleが開発したJavaScriptに代わるプログラミング言語で、クライアントサイドのWebアプリケーション開発に使用される。DartはJavaScriptにコンパイルされ、Webブラウザーでも実行可能となる。
• Elm：関数型プログラミング言語で、JavaScriptの構文を拡張したものとなる。Elmは、Webアプリケーションの開発に特化しており、JavaScriptにコンパイルされる。
• ClojureScript：Clojureのコンパイラを使用してJavaScriptに変換されるLisp方言となる。ClojureScriptはJavaScriptと互換性があり、Webブラウザーでも実行可能となる。

本ブログではこのJavascriptに関するライブラリやフレームワーク、AltJS等の様々な活用事例について以下に述べる。

Javascriptとは

Javascriptは、親やすく感じられる様に設計されている。この言語の構文はJavaに似ているし、関数、配列、ディクショナリ(あるいは連想配列)、正規表現などの構造は、多くのスクリプト言語と共通している。よってJavascriptは、少しでプログラムを書いた経験のある人なら、誰でも素早く学習できそうに見える。また、言語の核を形成するコンセプトの数が少ないので、初心者プログラマでも少ない訓練で実際にプログラムを書き始めることができる。

このように近づきやすいJavascriptだが、本当に熟達するには、長い時間をかけて、この言語のセマンティクスや、特異性や、最も効果的なイディオム(慣用句)を、深く理解する必要がある。

成功した技術が、たいがいそうであるように、Javascriptも時間をかけて進化してきた。最初は対話的なWebページをプログラミングできるよう「Javaを補強するもの」として宣伝されていたJavascriptだが、結局はWebで最も有力なプログラミング言語としてJavaの一を奪ってしまった。このように普及してきたJavascriptには1997年にみ臭い的な標準規格(公式にはECMAScriptと呼ばれる)が定められた。いまでは、このECMAScriptの様々なバージョンに準拠するJavascriptの実装が数多く存在する。

このECMAScript標準規格の第3版(ES3)が、1999年に確定され、現在のJavascriptのベースとなっている。この標準規格で、その次に進化したのが、2009年にリリースされた第5版(ES5)で、この版では、すでに広くサポートされていたのに仕様に含まれていなかった機能の一部が標準化された他、かなりの新機能が導入されている。

標準規格に複数の版が存在するだけでなく、Javascriptの実装によってサポートがあったりなかったりする非標準の機能も、かなりある。たとえば、多くのJavascriptエンジンは、変数定義用にconstキーワードをサポートしているが、ECMAScript標準企画は、constの構文や振る舞いを、全く定義していない。しかも、constの振る舞いは実装によって異なっていて、ある場合には、const変数は更新されない

const PI = 3.141592653;
PI = "modeified!";
PI;   // 3.141592653

ところが他の実装はconstをvarの同義語として扱う

const PI = 3.141592653;
PI = "modified!";
PI;  // "modified"

長い歴史があり実装も多様なJavascriptでは、どの様なプラットフォームで、どの機能を利用できるかを追跡管理をするのが難しいし、Javascriptの主な生態系(エコシステム)であるWebブラウザには、コードを実行するために使えるJavascriptのバージョンをプログラマが制御する方法が存在しない理で、問題はより複雑になる。エンドユーザーは、さまざまなWebブラウザの様々なバージョンを使うので、webプログラムは、すべてのブラウザで一貫した動作をする様に慎重にコーですングする必要がある。

JavascriptはクライアントサイドのWebプログラミングに使われるだけではなく。その他の用途としては、サーバーサイドのプログラム、ブラウザエクステンション、そしてモバイルアプリケーションやデスクトップアプリケーションのスクリプティング等多様なものが含まれる。これらの場合には、利用できるJavascriptのバージョンがより特定されるケースもあり、Javascriptの特定の実装に固有な追加機能を活用する意義も出てくる。

実装

• JavascriptとReactの概要と実装例

JavaScriptは、Web開発やアプリケーション開発において広く使用されているプログラミング言語であり、JavaScriptを使用することで、Webページやアプリケーションに対して動的な振る舞いやインタラクティブな要素を追加することが可能な言語となる。Reactは、Facebookによって開発されたJavaScriptのライブラリであり、ユーザーインターフェース（UI）の構築に特化したフレームワークとなる。Reactは、コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI要素を作成することができる。

ここでは、このJavascriptとReactの概要と様々な実装について述べている。

• ワイヤレスIOT制御の各種言語での実装例

一般的に、IoTデバイスはセンサーやアクチュエータを備えた小型のデバイスであり、ワイヤレス通信を使用してセンサーデータを収集し、アクチュエータを制御する形態となる。ワイヤレスでのIoT制御にはさまざまな通信プロトコルや技術が使用される。ここでは、このワイヤレス技術を用いたIoTを様々な言語で実装した例について述べている。

• D3やReactを用いたナレッジグラフ(関係データ)の可視化

グラフデータ等の関係データを可視化するツールとしてJavascriptをベースとしたD3.jsやReactを利用したものを用いることができる。今回はグラフ表示形態として2D、3Dのグラフ表示および、関係データの表示形態としてヒートマップのそれぞれに対して、主にD3やReactでの具体的な実装について述べる。

• タイムライン上でグラフスナップショットを表示したり、アニメーション化する手法

タイムライン上でグラフスナップショットを表示したり、アニメーション化することは、時間的な変化を視覚化し、グラフデータの動的な特性を理解するのに役立ち、グラフデータを解析する上で重要な手法となる。ここではこれらに用いられるライブラリ及び実装例について述べている。

• Cytoscape.jsを用いたデータの可視化について

Cytoscape.jsは、JavaScriptで書かれたグラフ理論ライブラリであり、ネットワークやグラフデータの可視化を行うために広く使用されているものとなる。Cytoscape.jsを使用することで、ウェブアプリケーションやデスクトップアプリケーションに対してグラフやネットワークデータの可視化を追加することが可能となる。

• Sigma.jsを用いたグラフデータの可視化について

Sigma.jsは、Webベースのグラフ可視化ライブラリで、対話的なネットワーク図を作成するのに役立つツールとなる。ここではSigma.jsを使用してグラフデータを可視化するための基本的な手順と機能について述べる。

Javascript概要

• web技術の現在(1) Javascript,Node,React,SPA,etc

ウェブの技術を調べていると、様々なフレームワークが登場して何を選択すれば良いの?と感じる時がある。今回はそれらの複雑なウェブ技術の世界の概要について、ReactとHTML,SPAについて述べる。

• web技術の現在(2) AltJavascript

前回のウェブアプリの構成に続いて、開発ツールとAltaJavascriptの概要について述べる。開発ツールとしてはWebpack、Browserify、Rollup.js等のモジュールハンドラー、Babel等のトランスコンパイラ、Grunt.jsとGulp.js等の開発ツール、そしてTypeScript、Reason、Elm、PureScript、Clojurescript等のAltJavascriptについて述べる。

• 非同期処理 各種言語の比較
• 繰り返し処理と再帰(C,Java,JavaScript,Clojure)

Javascriptの実装

• 各種言語でのコード開発環境の作り方

プログラミングを行うためには、それぞれの言語に合わせた開発環境を作る必要がある。ここでは、本ブログに述べているPython、Clojure、C、Java、R、LISP、Prolog、Javascript、PHPそれぞのケースでの具体的な開発環境の立ち上げについて述べている。個々の言語では、開発を容易にするためのプラットフォームが準備されており、それらを用いると容易な環境設定が可能となるが、ここでは最もシンプルなケースでのものを中心に述べている。

• 各種言語でのデータファイルの入出力実装例

プログラミングを行う際にファイルの入出力機能は最も基本的で必須なものとなる。またファイルの入出力機能は、手続き的な命令となるため、各言語ごとに実現の仕方も異なってくる。以下に様々な言語でのファイル入出力の具体的な実装について述べる。

• 各種言語での繰り返しと分岐の実装例

プログラミング言語の中でも基本機能は、”プログラミング言語の歴史“でも述べた「構造化言語」の3つの機能である(1)順次進行、(2)条件分岐、(3)繰り返しの中の一つの要素となる。ここではこの内繰り返しと分岐に対して様々な言語での実装を示す。

• データベース技術の概要と各種言語での実装例

データベース技術とは、データを効率的に管理・保存・取得・処理するための技術のことを指し、情報システムやアプリケーションにおけるデータの永続化や操作を支援し、データの正確性、一貫性、可用性、安全性を確保することを目的としたものとなる。

以下にこれらのデータベースを実際に扱うための各種言語による実装について述べる。

• 各種言語での具体的なサーバーの実装例

ここでは”サーバー技術“で述べているサーバーを各種プログラミング言語で活用する事例について述べる。ここでのサーバー技術とは、ネットワーク上でクライアントからのリクエストを受け取り、要求された処理を実行してレスポンスを返すサーバーシステムの設計・構築・運用などに関する技術のことを指す。

サーバー技術は、WebアプリケーションやAPIサーバー、データベースサーバー、メールサーバーなど、さまざまなシステムやサービスで使用されており、プログラミング言語やフレームワークに応じて、サーバー技術の実装方法やベストプラクティスが異なる。

• モダンJavascriptの基本から始める React実践 – モダンJavascriptについて

もともとJavascriptはWebブラウザ上で複雑な動きを実装する程度のものだったのが、今ではフロントエンドだけでなく、バックエンドも実装することができる(Node.jsやDeno)。それだけに止まらずスマホアプリが作成できたり、AR(Augmented Reality;拡張現実)やVR(Virtual Reality;仮想現実)、音声認識、デスクトップアプリケーション等もJavascriptで実装できる。このことから一つの言語で広げられる領域の幅で言うと、Javascriptは間違いなく全言語の中でNo1となる。また、webシステム開発であれば100%間違いなくフロントエンドの実装にJavascript使用するので学習することが無駄にはならない。

ここで、フロントエンドは非常に技術の移り変わりが早いという特徴がある。そのため業界全体を見たときにモダンフロントエンド(React、Vue、Angular等の仮想DOMを用いるライブラリ/フレームワークを利用し、npm/yarm等のパッケージマネージャーを使用、主にES2015以降の記法を利用して、webpack等のモジュラーハンドラーを使用し、Babel等のトランスパイラを利用して、SPA(Single Page Application)で作成されるもの)ができる人が足りておらず、どの会社も採用に苦労している現実がある。

• モダンJavascriptの基本から始める React実践 – モダンJavascriptの機能(1)

モダンJavascriptとして、(1)const,letでの変数宣言、(2)テンプレート文字列、(3)アロー関数、(4)分割代入、(5)デフォルト値の設定について述べる。

• モダンJavascriptの基本から始める React実践 – モダンJavascriptの機能(2)

React等に活用されるモダンJavascriptとして、(1)スプレッド構文、(2)オブジェクトの省略記法、(3)map,filter、(4)三項演算子、(5)論理演算子について述べる。

• モダンJavascriptの基本から始める React実践 – JavascriptでのDOM操作

純粋なJavascriptやJqueryで画面の要素を書き換える場合、DOMを手続き的に操作する。ここではDOMの取得、追加、削除のケースについて紹介し、最後にそれらを用いたシンプルなメモアプリの構築について述べる。

• ClojureとJavascriptやwebフレームワーク(node.js)との連携

近年システム構築する際にwebフレームワークは重要な位置を占めている。このwebフレームワークのフロントエンドの開発に用いられる言語としては、Javascript(あるいはそれらの派生言語であるAltJavascript)とそれらを使ったフレームワーク(React、View等)がデファクトとなっている。

Clojureには、それらJavascript/フレームワークとClojureの連携のフレームワーク(Clojurescript)が開発されており、今回はそれらについて述べたいと思う。さらに近年高速なJVMであるGraalVMを介してJavaとJavascriptの相互運用が可能となっており、それを介してClojureとJavascriptの連携も可能との記事もあるが今回は割愛する。

• ClojureとJavascriptを使ったチャットボットの実装とAI機能の統合

チャットボットフレームワークのClojureとJavascriptによる構築と各種AI機能の統合(自然言語処理、SVM、BERT、Transformer、ナレッジグラフ、データベース、エキスパートシステム)

React.js

• モダンJavascriptの基本から始める React実践 – モダンJavascriptについて

Javascript習得のメリットについて。もともとJavascriptはWebブラウザ上で複雑な動きを実装する程度のものだったのが、今ではフロントエンドだけでなく、バックエンドも実装することができる(Node.jsやDeno)。それだけに止まらずスマホアプリが作成できたり、AR(Augmented Reality;拡張現実)やVR(Virtual Reality;仮想現実)、音声認識、デスクトップアプリケーション等もJavascriptで実装できる。

フロントエンドは非常に技術の移り変わりが早いという特徴がある。そのため業界全体を見たときにモダンフロントエンド(React、Vue、Angular等の仮想DOMを用いるライブラリ/フレームワークを利用し、npm/yarm等のパッケージマネージャーを使用、主にES2015以降の記法を利用して、webpack等のモジュラーハンドラーを使用し、Babel等のトランスパイラを利用して、SPA(Single Page Application)で作成されるもの)ができる人が足りておらず、どの会社も採用に苦労している現実がある。

• モダンJavascriptの基本から始める React実践 – Reactの基礎(1)JSXを使った基本とコンポーネントの使い方

Reactプロジェクトを開始するときの最も一般的な方法、以前Node.jsとReactを使ったchatbotの実装でも述べた「create React App」を利用するものとなる。具体的なnode.jsのインストールとcreate react appを使ったreactプロジェクトファイルの作成については、前記のブログのページについて述べている。ここでは新規のreactのプロジェクトを作成したところから述べる。ReactはJSX記法と呼ばれる書き方を使用している。これはJavascriptのファイルの中でHTMLのようなタグをかけるというものになる。

React開発では画面の要素をさまざまな粒度のコンポーネントに分割することで再利用性や保守性を高めることが基本となる。ここでコンポーネントとは、関数で定義されたものを指し、Laravel等で言われるClassで定義されたものをコンポートネントとする定義は、現在では主流ではなくなっている。

• モダンJavascriptの基本から始める React実践 – Reactの基礎(2)イベントの実行とスタイル

Reactにおけるイベントの実行方法やスタイルの運用方法について述べる。例えばボタンを押したときのイベントは通常onclickで書くがReactでは以下のようになる。次にスタイル(CSS)の当て方について述べる。通常のHTML/CSS同様、Reactでもタグにstyle属性を記述することでスタイルを適用することができる。ただし、注意点としてCSSの各要素はJavascriptのオブジェクトとして記述するものとなる。例えば文字の色を赤色にしたい場合は以下のように書く。

• モダンJavascriptの基本から始める React実践 – Reactの基礎(3)Propsについて

Reactで重要な概念となるPropsについて述べる。Propsはコンポーネントに渡す引数のようなもので、コンポーネントは受け取ったPropsに応じて表示するスタイルや内容を変化させるものとなる。

たとえば、ある文字を表示するコンポーネントがあるとして、よくある「通常時は黒表示、エラー時は赤表示」のような仕様の場合に、黒表示用のコンポーネントと赤表示用のコンポーネントをホザ技作るとコンポーネントの数が膨大になるし、せっかく作ったコンポーネントの再利用がうまくできない状態となる。そのような場合に、ある程度同的にコンポーネントを使いまわせるようにPropsで条件を渡すものとなる。

• モダンJavascriptの基本から始める React実践 – Reactの基礎(4)Stateと再レンダリングとexport

Propsに続いてReactで重要となる概念がStateとなる。React開発では画面に表示するデータや、可変の状態をStateとして管理し、コンポーネントの状態を表す。さらにReact関数のスタートラインに立つためには、これらに加えて再レンダリングと副作用について知る必要がある。Stateが更新されたらまた頭からとぐるぐる回りながら差分があるDOMを検知し、変更を反映して画面を表示している。このような「変化を検知してコンポーネントを再処理」することを「再レンダリング」と呼ぶ。

• モダンJavascriptの基本から始める React実践 – ReactとCSS

ReactでのCSSのあてかたはさまざまなバリエーションがあり、それぞれ特徴があってJavascriptファイルの中で普通のCSSの書き方ができるものもある。ここでは主要なCSSの当て方について述べる。(Inline Style、CSS Module、Styled JSX、styled components、Emotion、Tailwind CSS)

• Reactでの再レンダリングの仕組みと最適化

Reactで再レンダリングを的確に制御するためにはどんな時に再レンダリングが起きるのかを知っておく事が重要となる。再レンダリングを最適化するための機能についてこれから述べるが「今どのパターンに対して最適化をしようとしているか」を意識する事が効率的なコーディングにつながる。

再レンダリングが起こるのには以下の3つのパターンがある。(1)Stateが更新されたコンポーネント, (2)Propsが更新されたコンポーネント, (3)再レンダリングされたコンポーネント配下のコンポーネントすべて。再レンダリングを制御するにはメモ化を利用して(3)での再レンダリングを選択的に行うようにする。

• Reactについて
• WebデベロッパーのためのReact開発入門