私はバックエンド開発者です...いつもの種類...数学は得意ですが、美的センスが苦手な種類です。私がこれまでにデザインを試みたとき、いつも退屈な見た目のありきたりなジャンクができあがりました。数十のツールを使用してみましたが、最終結果は常に Microsoft FrontPage 2003
で書かれたもののようになります。私はそれがわかるほど自意識過剰だったので、挑戦するのをやめました。私はあなたに文書を書きますが、それはあなたが準備ができた $LaTeX$ スタイル ファイルを私にくれた場合に限ります。私はブログを書きますが、Markdown のみで、見た目の魅力については他の人に任せます。 DevFest プレゼンテーションを準備しますが、主催者が PowerPoint テンプレート を提供する場合に限ります。ボタンであれ、サインイン フォームであれ、私は決してデザインしようとはしません。
それでも、頭を剃ってバックエンド JSON API の聖域に逃げ込むことはできません。自分の得意なプロジェクト用にフロントエンドを作成し、内部使用用のダッシュボードを構築する必要があります。しかし、フロントエンドの世界に参入しようとするのは、何十ものフレームワーク、ライブラリ、哲学など、信じられないほど苦痛です。過去 8 年間、React、Angular、Node という言葉を聞いてきましたが、怖くて実際に理解しようとすることができませんでした。 C や Leetcode を学ぶことは、これよりも簡単です。
それでも、私はそれを学ぶことを自分に強制しました。そして今、私はプロメテウスになりたいと思っています (この名前の JS フレームワークがまだ存在しないのかどうかはわかりません)。そして、この知識をバックエンドの人々に提供したいと考えています。開発者
おまけとして、どのフロントエンド フレームワークを選択するかについての究極の推奨事項も含めました。私自身、長い間意思決定麻痺に悩まされていましたが、これはそれを克服し、考えすぎずに物事を構築し始めるのに役立ちます。
フレームワークについて議論する前に、同じ認識を持っていることを確認するために、絶対的な基本から始めましょう。必要に応じて、このセクションをスキップできます。
最小限の Web ページは、拡張子 .html のテキスト ファイルとコンテンツのタグで構成されます。
<html>
<div>Hello World!</div>
</html>
書式設定を追加するには、スタイル属性を追加します。
<html>
<div>
<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
<pre class="brush:php;toolbar:false"><html>
<div>
<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>
<h3>
Running JavaScript
</h3>
<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>
<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>
<p>You can also create a text file with extension .html and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
ただし、安全上の理由から、ブラウザ コンソールはファイル システムにアクセスできず、JS を使用して少なくとも Python や Ruby などの他のスクリプト言語の機能を実現できる他の機能がいくつかありません。したがって、コンピュータ上で JS コードを実行する 2 番目の方法は、Node.js をインストールすることです。これは本質的には、ファイルの読み取りや書き込みなどを実行できる JS インタープリターです。
//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs
Node.js を使用すると、Web ブラウザーをインストールしなくても、サーバーまたは Docker コンテナーで JS コードを実行できます。これが非常に便利であることが以下でわかります。
上記のセクションを組み合わせると、従来の HTML CSS JS セットアップを使用して Web ページを作成できます。
これらは、コンテンツ自体、スタイル、スクリプトの 3 つのセクションを持つ単一の .html ファイルに組み合わせることができます。
<html>
<div>Hello World!</div>
</html>
scripts.js
<html>
<div>
<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
<pre class="brush:php;toolbar:false"><html>
<div>
<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>
<h3>
Running JavaScript
</h3>
<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>
<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>
<p>You can also create a text file with extension .html and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
この設定の最大の問題は、HTML 要素 (たとえば
とにかく、この設定は Web で数十年間使用されてきました。
すごいですね！基本については説明しました。次に、フロントエンド フレームワークの選択とアプリのアーキテクチャ全般に関するすべての議論の根底にある主なジレンマについて話しましょう。始める前に、いくつかの用語を明確にしましょう。クライアント側 は、ユーザーがコンテンツを利用するブラウザーまたはアプリを意味し、サーバー側 は通常、コンテンツを保存するバックエンド サーバーを意味します。ログイン情報を保持し、データベースにアクセスし、アプリ全体のバックボーンとして機能します。これで、さらに深く掘り下げる準備が整いました。
あらゆる種類のデータを表示する重要な Web アプリでは、HTML スクリプトを自動的に生成する方法が必要になります。そうしないと、データが更新されるたびに、誰かが HTML タグを手動で更新する必要があります。
HTML は単純なテキスト ファイルであるため、任意のスクリプト言語で文字列として簡単に作成できます。これを行うライブラリはたくさんあります。たとえば、Jinja2 ライブラリを使用すると、Python に似た言語を使用して、リスト mylist = [1,2,3,4,5] のすべての要素をテーブルの行に書き込むことができます。
//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs
もちろん、ブラウザはこれを理解できません。Python で特別なコマンドを実行して、この Jinja2 スクリプトを実際の HTML にレンダリングする必要があります。これにより、.html ファイルがレンダリングされます。
<html>
<!-- page HTML content here -->
<div>
<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside <script> tags and it has font size of 40pt, which is defined inside <style> tags.</p>
<p>Also note that the comment symbols are different in all 3 sections:</p>
This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:
content.html
<html>
<div>
<p><strong>styles.css</strong><br>
</p>
<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}
この機能は非常に重要であるため、テンプレートという特別な名前が付けられています。 1 つ強調しておきたいのは、テンプレートからのこのような HTML 生成は、サーバー内で選択した言語 (Python/Ruby/Java/C#) で行われ、通常はバックエンド コードが記述されている言語です。ブラウザはこれらの言語をネイティブには理解できません。 --- 彼らは JS しか理解できないため、事前にレンダリングされた HTML ファイルを送信します。これは後ほど重要になります。
前のセクションでは、バックエンドがどのように HTML スクリプトを生成し、データベースからのデータやその他の情報を埋め込むのかを見てきました。たとえば、ユーザーがソーシャル メディア投稿の いいね ボタンを押した場合、バックエンドは いいね! した投稿 ページのコンテンツを更新して、その新しい投稿をそこに含める必要があります。これは 2 つの方法で実行できます:
1) バックエンドには、Jinja2 スクリプトを備えた HTML テンプレートが用意されており、データベースからの最新のクエリ結果を使用してそれをレンダリングします。
<html>
<div>Hello World!</div>
</html>
ここでは、レンダリングされた HTML が CSS スタイルおよび JS スクリプトとともにフロントエンドに直接送信されます。ブラウザーは、バックエンドがすでに準備したものを表示するだけであり、ページ上のデータのタイプやロジックは認識しません。
2) バックエンドは、データベースのked_posts テーブルからのクエリ結果をブラウザが理解できる形式で指定する JSON を送信します。
<html>
<div>
<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
<pre class="brush:php;toolbar:false"><html>
<div>
<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>
<h3>
Running JavaScript
</h3>
<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>
<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>
<p>You can also create a text file with extension .html and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
ブラウザは、そのような JSON をリクエストする特別な JS 関数を実行し、それを受信すると、そこからデータを抽出して、ブラウザ自体でそこから HTML を生成します。
//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs
オプション 2 は、より複雑ですが、何らかの理由で人気があります。この設定では、フロントエンド ポートのみをクライアントに公開し、バックエンドを必要とせずに静的 HTML JS アプリを提供します。そして、バックエンドからデータをフェッチする必要がある場合にのみ、フロントエンドはバックエンド自体に接続し、この機能をブラウザーから抽象化します。もちろん、そのためにはフロントエンドに独自のルーターが必要になります。基本的に、これはバックエンドが行うべきことをフロントエンドが実行しようとしています。
これまで、機能するフロントエンド コードの記述方法とそのコードの配置場所についての基本を説明してきました。 HTML を自動生成する方法を見てきましたが、これまでは、JS 部分は手動で記述されるものと想定していました。これは、実際のフロントエンド開発では当てはまらないことがほとんどです。 JS スクリプトを手動で記述するのは面倒で、コード構造はすぐに非常に乱雑になってしまいます。さらに、スクリプトを再利用する必要がある場合は、昔ながらの方法でスクリプトをコピーして貼り付ける必要があります。そのため、開発者は当初から、JS 開発をより簡単かつ構造化するために、ある種のライブラリを使用していました。
初期の頃、バニラ JS を使用して要素を検索して変更したり、AJAX リクエストをサーバーに送信したりするのは非常に面倒でした。したがって、多くの開発者は、バニラ JS の上にきちんとした構文糖衣である JQuery を使用していました。 Datatables (検索、ページネーション、ソート機能を備えたインタラクティブなテーブル)、アニメーション時計、カウンタなどの多くのアドオンが JQuery で作成されています。他の人が事前に作成したこのようなコンポーネントを使用するのは非常に簡単でした。コードをダウンロードし、HTML ページの
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
