フロントエンド開発入門

フロントエンド開発を理解するまでに以下を理解する必要があった。

開発環境の話

ブラウザはサーバ(ソフト)からウェブアプリケーションをダウンロードし、ダウンロードしたウェブアプリケーションがブラウザ上で実行される

HTMLでコンテンツを定義し、CSSで視覚効果を設定する。Javascriptを使って、HTMLやCSSを動的に生成することでウェブアプリケーションが動作する。ウェブアプリケーションは、必要に応じてウェブサーバと通信する。

ウェブサーバ(ソフト)はC++やPythonなど様々な言語で実装される。メジャーな実装方法として、Javascriptで実装する方法がある。Javascriptでウェブサーバ(ソフト)を実装する場合、Javascriptの実行エンジンとして一般的に利用されるのがNode.jsである。

フロントエンド開発とバックエンド開発の両方をJavascriptで行うといろいろなメリットがある。

Javascriptだけ習得すれば、フロントエンド開発とバックエンド開発の両方を行える

フロントエンドとバックエンドのソースコードを共通の開発ツールで管理できるようになる

Javascriptのライブラリを管理するために広く利用されているツールとして、npm(Node Package Manager)がある。npmは、ROSにおけるrosdep(自動ライブラリインストール)、catkin(ソースコードのビルド)、rosrun(プログラムの実行)などの機能を兼ね備えたツールである。

フロントエンド開発では、以下のイテレーションを行う。

HTML、CSS、(ブラウザ上で動作する)Javascriptのソースコードを記述する

ブラウザで表示して確認する

デバッグする

上記のイテレーションを行う際、ブラウザで確認するためにはウェブサーバが必要になる。そのため、フロントエンド開発において、簡易的にウェブサーバを構築するツールが様々に提案・公開されている。そのうちの一つにViteがある。Viteは所定のフォルダ構成を認識し、ウェブページを公開する。

実際に利用する場合は、npmの設定ファイルpackage.jsonの中に、Viteの実行コマンドを登録しておく

Javascriptライブラリの話