バックエンド開発者のためのフロントエンドの実用的なガイド
- はじめに
- 絶対的な基本
- クライアント側とサーバー側
- コンポーネント
- フロントエンド ライブラリ
- 結論
導入
私はバックエンド開発者です...いつもの種類...数学は得意ですが、美的センスが苦手な種類です。私がこれまでにデザインを試みたとき、いつも退屈な見た目のありきたりなジャンクができあがりました。数十のツールを使用してみましたが、最終結果は常に 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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 で数十年間使用されてきました。
クライアント側とサーバー側
すごいですね！基本については説明しました。次に、フロントエンド フレームワークの選択とアプリのアーキテクチャ全般に関するすべての議論の根底にある主なジレンマについて話しましょう。始める前に、いくつかの用語を明確にしましょう。クライアント側 は、ユーザーがコンテンツを利用するブラウザーまたはアプリを意味し、サーバー側 は通常、コンテンツを保存するバックエンド サーバーを意味します。ログイン情報を保持し、データベースにアクセスし、アプリ全体のバックボーンとして機能します。これで、さらに深く掘り下げる準備が整いました。
従来の HTML の生成
あらゆる種類のデータを表示する重要な 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>
- inside pure HTML it is
- inside CSS it is /* */
- inside JS it is //.
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 ファイルを送信します。これは後ほど重要になります。
JSON と HTML API
前のセクションでは、バックエンドがどのように 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" class="lazy" 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 開発をより簡単かつ構造化するために、ある種のライブラリを使用していました。
JQuery
初期の頃、バニラ JS を使用して要素を検索して変更したり、AJAX リクエストをサーバーに送信したりするのは非常に面倒でした。したがって、多くの開発者は、バニラ JS の上にきちんとした構文糖衣である JQuery を使用していました。 Datatables (検索、ページネーション、ソート機能を備えたインタラクティブなテーブル)、アニメーション時計、カウンタなどの多くのアドオンが JQuery で作成されています。他の人が事前に作成したこのようなコンポーネントを使用するのは非常に簡単でした。コードをダウンロードし、HTML ページの
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
高度なJavaScriptスコープとコンテキスト
Jul 24, 2025 am 12:42 AM
JavaScriptの範囲は、グローバル、機能、およびブロックレベルの範囲に分割される変数のアクセシビリティ範囲を決定します。コンテキストは、この方向を決定し、関数呼び出し方式に依存します。 1.スコープには、グローバルスコープ（どこでもアクセス可能）、関数スコープ（関数内でのみ有効）、およびブロックレベルのスコープ（letとconstは{}内で有効です）が含まれます。 2。実行コンテキストには、変数オブジェクト、スコープチェーン、およびこの値が含まれます。これは、通常の関数におけるグローバルまたは未定義を指します。メソッドコールはコールオブジェクトを指し、コンストラクターは新しいオブジェクトをポイントし、call/apply/bindで明示的に指定することもできます。 3。閉鎖とは、外部スコープ変数へのアクセスと記憶の関数を指します。それらはしばしばカプセル化とキャッシュに使用されますが、引き起こす可能性があります
JavaScriptで入力フィールドの値を取得する方法
Jul 15, 2025 am 03:09 AM
HTML入力ボックスの値を取得するために、コアはDOM操作を介して対応する要素を見つけて値属性を読み取ることです。 1. document.getElementByIDを使用して、最も直接的な方法です。入力にIDを追加した後、このメソッドを使用して要素を取得して値を読み取ることができます。 2。QuerySelectorを使用してより柔軟になり、名前、クラス、タイプなどの属性に基づいて要素を選択できます。 3.入力リスナーを追加または変更して、リアルタイムで入力コンテンツを取得するなど、インタラクティブな関数を達成できます。 4.スクリプトの実行タイミング、スペルミラー、null判断に注意し、値にアクセスする前に要素が存在することを確認してください。
JSで選択したラジオボタンの値を取得するにはどうすればよいですか？
Jul 18, 2025 am 04:17 AM
選択したラジオボタン値を取得するための2つのコアメソッドがあります。 1. QuerySelectorを使用して選択したアイテムを直接取得し、入力[name = "your-radio-name"]を使用します：選択した要素を取得し、その値属性を読み取ります。最新のブラウザに適しており、簡潔なコードがあります。 2。document.getElementsbyNameを使用して、ループノデリストを介して最初にチェックされた無線を見つけて見つけ、その値を取得します。これは、古いブラウザーと互換性がある、またはプロセスの手動制御が必要なシナリオに適しています。さらに、名前属性の綴り、選択されていない状況の処理、およびコンテンツの動的な負荷に注意を払う必要があります
JavaScriptを使用して、安全なサンドボックス付きIFRAMEを構築します
Jul 16, 2025 am 02:33 AM
JavaScriptを使用して安全なSandbox iframeを作成するには、最初にHTMLのSandbox属性を使用して、スクリプトの実行、ポップアップウィンドウ、フォームの提出など、iFrameの動作を制限します。第二に、必要に応じて許可を緩和するために、許可を緩和するなどの特定のトークンを追加することにより。次に、PostMessage（）を組み合わせて安全なクロスドメイン通信を実現しながら、メッセージソースとデータを厳密に検証します。最後に、ソースを確認しない、CSPなどをセットアップしないなど、一般的な構成エラーを避け、オンラインになる前にセキュリティテストを実行します。
Vue 3 CompositionAPI vs. OptionsAPI：詳細な比較
Jul 25, 2025 am 03:46 AM
VUE3のCompositapiは、複雑なロジックとタイプの導出により適しており、OptionsAPIはシンプルなシナリオや初心者に適しています。 1。OptionsAPIは、データやメソッドなどのオプションに従ってコードを整理し、明確な構造を持っていますが、複雑なコンポーネントは断片化されています。 2。CompusitionAPIは、セットアップを使用して関連ロジックを集中させます。これは、メンテナンスと再利用を助長します。 3。CompusitionAPIは、混合性機能を介して競合のないパラメーター化可能な論理再利用を実現します。これは、混合物よりも優れています。 4。CoputionAPIは、TypeScriptとより正確なタイプの派生をより適切にサポートしています。 5。2つのパフォーマンスとパッケージングのボリュームに大きな違いはありません。 6。
Javaデバッガーの原則を利用して、複雑なJavaScriptアプリケーションの高度なデバッグ技術
Jul 17, 2025 am 01:42 AM
複雑なJavaScriptアプリケーションをデバッグするには、体系的な使用ツールが必要です。 1.ブレークポイントと条件付きブレークポイントを設定して、条件に応じて、関数入力、ループ、非同期コールバック、フィルターなどの疑わしいプロセスを傍受します。 2.ブラックボクシング機能がサードパーティライブラリの干渉をブロックできるようにします。 3.デバッガーステートメントを使用して、環境判断に基づいてデバッグエントリを制御します。 4.コールスタックを介してコールリンクをトレースし、実行パスと変数ステータスを分析し、それにより問題の根本原因を効率的に見つけます。
JavaScriptの並行性パターンのマスター：Webワーカーvs. Javaスレッド
Jul 25, 2025 am 04:31 AM
JavaScriptのWebworkersとJavathreadsの同時処理には本質的な違いがあります。 1。JavaScriptは、単一スレッドモデルを採用しています。 Webworkersは、ブラウザによって提供される独立したスレッドです。これは、UIをブロックしないがDOMを操作できない時間のかかるタスクを実行するのに適しています。 2。Javaは、複雑な同時ロジックとサーバー側の処理に適した、スレッドクラスを通じて作成された言語レベルからの実際のマルチスレッドをサポートしています。 3。ウェブワーカーは、PostMessage（）を使用してメインスレッドと通信します。これは非常に安全で孤立しています。 Javaスレッドはメモリを共有できるため、同期の問題に注意する必要があります。 4。ウェブワーカーは、画像処理などのフロントエンドの並列コンピューティングにより適しています。
JavaScriptのタイプ強制ルールの調査
Jul 21, 2025 am 02:31 AM
タイプキャストとは、JavaScriptの1つのタイプの値を別のタイプに自動的に変換する動作です。一般的なシナリオには次のものが含まれます。1。オペレーターを使用する場合、一方が文字列である場合、反対側も「5」などの文字列に変換されます。結果は「55」です。 2。ブールのコンテキストでは、非ブールの値は、空の文字列、0、ヌル、未定義などのブール型に暗黙的に変換されます。 3. Nullは数値操作に参加し、0に変換され、未定義はNANに変換されます。 4.暗黙の変換によって引き起こされる問題は、number（）、string（）、boolean（）などの明示的な変換関数によって回避できます。これらのルールをマスターすることは役立ちます
