今回の記事ではjavascriptのフロントエンド側での動作とバックエンド側での操作を詳細に説明していきます。可能な限りわかりやすく説明していくので参考になれば幸いです。
以前記事にしたWebアプリケーションの仕組みについての続きと考えていただければ幸いです。過去記事は下記になりますんどえ気になる方は参考にしてください。
javascriptとは？
まず
フロントエンド側でのjavascriptの機能紹介
Webページの中身はhtmlで構成されており、cssによる装飾と画面整形、javascriptでの動的なページ表示はみなさんご存知かと思います。まだ理解し切れていないかたは初めの方に載せているURLから私の過去記事を参考にしてみてください。
この表示ですがWindowsの方はブラウザにて、Webページ表示中にF12を押すと、デベロッパーツールが起動します。Macなら開発からWebページ構成を覗けます。
このツールにてHTMLタグの該当の箇所が表示され、そのタグに適用さ
れているCSSやjavascripが確認できます。
これが、Webのすべてです。では、ブラウザの表示はHTMLタグとCSSに従うだけなら、動的に動いているのは誰か？もちろんjavascriptですね。
Javascriptは、基本的に２種類の動作しかありません。（計算ロジック、入力チェックロジックなどの機能は多数ありますが。）
①HTMLタグを操作する。
その瞬間にブラウザが認識しているhtmlタグと関連するcssを取得、追加、削除します。これによりWeb表示が変わります。要はHTMLとCSSで表現できることしかjavascriptではできません。
②Ajaxで、ブラウザとは別にサーバと通信する。
Ajax通信とはサーバ間での通信の種類のことです。ブラウザの変更などを行いつつ並行してサーバと通信を行う機能です。これにより別ページへの移動などを行うことができます。
もちろんAjax通信に関しても1リクエスト-1レスポンスの大前提はあります。
バックエンド側でのjavascriptの機能紹介
バックエンド側でのjavascriptの実行環境はnode.jsと言われる実行環境です。この実行環境を持って初めてjavascrpitがバックエンド的な働きを行うことができます。node.js関連のフレームワークは数多く有名どころで「react」「Angular」など多数あります。
機能としてはデータ間のやりとりを担うことができます。この機能に関しては特に他のバックエンドの言語と大差はありません。
javascriptの今後
今後はWeb領域では「AlJS」が活発になると考えられます。IT業界がかなり日本でも世界でも大きくなってきている昨今を考えると開発効率や保守性は非常に重要になってきます。javascriptは実際非常に読みづらいです。原因として、クラスもなく型もないことが大きいかも知れません。
こういった問題を解決するため、プログラムの読みやすさなどの改善、よく起こりがちな誤りの防止などを目的に、JavaScriptを元に独自の機能や仕様を追加したり、文法や記法の追加・変更を行った言語がいくつか開発されています。それらの総称を「AltJS」（Alternative JavaScript）と言います。
これらの言語で書かれたプログラムはトランスパイラ（transpiler、トランスコンパイラの略）と呼ばれる変換ソフトにより一旦はJavaScriptに変換されるため、JavaScriptの実行環境さえあれば通常のスクリプトと同じです。そこで注目されているのがTypeScriptです。私の過去記事にもいくつか記事を載せておりますのでぜひ参考にしていただきたいのです。
また、TensorFlowなどの機械学習分野でも徐々にブラウザベースの機械学習が進んできており、TensorFlowを変換する際の候補として、javascript形式のTensorFlow LiteのAIモデルも出てきております。
まとめると非常に将来性があり、人気の言語ですが使用され方や領域は変化していっているという感じです。
コメント
[…] 【javascript入門】WebページやWebアプリケーションでの javascript の機能と働き… […]