NodeとHerokuでFacebookチャットボットを構築します
node.jsとherokuを使用してFacebookチャットボットを構築し、Joan YinとCamilo Reyesが査読します。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します!
昨年のF8会議で、Facebookはメッセンジャープラットフォームを立ち上げ、開発者がメッセンジャーやFacebookのページで人々と話すことができるボットを作成できるようにしました。ロボットを使用すると、アプリケーションの所有者は、大衆に拡張できるパーソナライズされたインタラクティブなコミュニケーションを提供することにより、ユーザーとより適切に対話できます。エンタープライズとアプリケーションの所有者は、その発売以来、チャットボットに大きな関心を示してきました。発表の3か月後、プラットフォーム上に11,000のロボットが構築されたと推定されています。
チャットボットは、企業やアプリケーションの所有者だけでなく、利益をもたらします。これらのロボットのユーザーは、次のような多数のサービスを楽しむことができます:
- インスタントカスタマーサポートを入手してください
- 予約便
- 映画のチケットを購入
- Netflix映画の推奨事項を入手してください
- 天気予報を取得
- ニュースに従ってください
- ドレッシングアドバイスを入手してください
- 手元の材料に基づいて夕食のアイデアを入手してください
- エンターテイメント
チャットボットの現在の関心と魅力は明らかです。
この記事では、Facebookページに代わってMessengerを介してユーザーと対話できるFacebookチャットボットを作成する方法について説明します。ユーザーが指定した映画に関するさまざまな詳細をユーザーに提供できるロボットを構築します。キーポイント
- node.jsとherokuを使用してFacebookチャットボットを展開するには、FacebookグラフAPIと対話するサーバーをセットアップし、メッセージを処理するためにWebhookエンドポイントを構成する必要があります。
- 簡単なルールベースのチャットボットの構築には、基本的なAIまたは機械学習の知識は必要ありませんが、NLPを統合すると、ロボットのユーザーとの対話能力が向上します。
- Herokuプラットフォームは、Facebook Webhookの確認に必要なHTTPSをサポートするため、展開用です。 Herokuの環境変数は、APIトークンと機密データを保護するために不可欠であり、これらの詳細がアプリケーションのソースコードにハードコードされていないことを保証します。
- Facebookメッセンジャープラットフォームにより、ウェルカム画面やインタラクションを開始するように構成できるスタートボタンなどの機能を備えたリッチなユーザーエクスペリエンスの作成が可能になります。
- MLABでホストされているMongoDBは、ユーザーデータとセッションステータスを管理するために使用され、チャットボットが進行中のユーザーインタラクションを効果的に追跡して応答できるようにします。
- チャットボットが公開され、一般とのやり取りを行うには、プラットフォームポリシーとセキュリティ基準へのコンプライアンスを確保するために、Facebookのレビュープロセスを通過して通過する必要があります。
- ロボットを構築するにはAIを理解する必要がありますか?
2種類のロボットを構築できます。 1つは一連のルールに基づいており、もう1つは機械学習を使用することです。前者は、提供できる相互作用の点で制限されています。特定のコマンドにのみ応答できます。これは、私たちが構築するロボットのタイプです。
機械学習ロボットを使用すると、ユーザーの対話を改善できます。ユーザーは、コマンドを使用するのではなく、人間の相互作用で行うように、ロボットとより自然にやり取りできます。ロボットは、人々との会話から学ぶにつれて、より賢くなります。将来の記事でこのタイプのロボットの構築を保存します。ただし、機械学習の知識は必要ありません。幸いなことに、開発者が機械学習(特に自然言語処理-NLP)をアプリケーションに統合できるようにするwit.aiやapi.aiなどのサービスがあります。
start
ここから完成したデモアプリケーションのコードをダウンロードできます。
チャットボットがFacebookユーザーと通信するためには、メッセージを受信、処理、送信するためにサーバーをセットアップする必要があります。サーバーは、このためにFacebookグラフAPIを使用します。グラフAPIは、Facebookプラットフォームデータに出入りする主な方法です。サーバーには、FacebookサーバーがアクセスできるエンドポイントURLが必要なため、ローカルマシンにWebアプリケーションを展開することは機能しません。オンラインで持ち込む必要があります。さらに、グラフAPIのバージョン2.5から始めて、サービスの新しいサブスクリプションは安全なHTTPSコールバックURLを使用する必要があります。このチュートリアルでは、すべてのデフォルトのappname.herokuapp.comドメインがSSLを有効にしているため、アプリケーションをHerokuに展開します。 node.jsを使用して、Webアプリケーションを構築します。
最初に、コンピューターにノードがインストールされていることを確認してください。これは、端子でノード-Vを入力することで確認できます。インストールすると、バージョン番号が出力されます。次に、Herokuコマンドラインインターフェイス(CLI)をインストールします。後でアプリをHerokuにプッシュするために使用します。 Heroku -versionを使用して、CLIがインストールされていることを確認します。
プロジェクトディレクトリを作成し、次のコマンドを使用してpackage.jsonファイルを初期化します。
<code>$ mkdir spbot $ cd spbot $ npm init</code>
プロジェクトの設定を設定するためにプロンプトに従ってください。
package.jsonファイルを生成した後、それを開き、スクリプトオブジェクトに開始プロパティを追加します。これにより、Herokuはどのコマンドを実行してアプリケーションを開始するかを知ることができます。プロジェクトのセットアップ中に、App.jsをアプリケーションのエントリポイントとして定義するため、node app.jsをStartの値として使用します。プロジェクトの設定に従ってこの設定を変更します。
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
次のノードパッケージをインストールします。
<code>$ npm install express request body-parser mongoose --save</code>
プロジェクトのルートディレクトリに.gitignoreファイルを作成し、node_modulesフォルダーを含めて、送信されないようにします。
<code>node_modules</code>
プロジェクトのルートディレクトリで、app.jsという名前のファイルを作成します(デフォルト名が使用されている場合はindex.js)。次のように変更してください:
var express = require("express"); var request = require("request"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 5000)); // 服务器索引页面 app.get("/", function (req, res) { res.send("已部署!"); }); // Facebook Webhook // 用于验证 app.get("/webhook", function (req, res) { if (req.query["hub.verify_token"] === "this_is_my_token") { console.log("已验证 webhook"); res.status(200).send(req.query["hub.challenge"]); } else { console.error("验证失败。令牌不匹配。"); res.sendStatus(403); } });
最初のGet Handlerは、アプリケーションが正常に展開されたかどうかを確認するために、独自のテストに使用されます。 2番目のゲットハンドラーは、Facebookがアプリケーションを検証するために使用するエンドポイントです。コードは確認_TOKENを探し、検証リクエストに送信されたチャレンジで応答する必要があります。
コードに独自のトークンを貼り付けることができます。このタイプのデータは、環境変数で最もよく保存されています。これは、Herokuでプロジェクトを作成した直後に行います。
heroku
に展開しますFacebookプラットフォームがバックエンドアプリケーションに接続するためには、まずオンラインにする必要があります。
gitリポジトリを作成し、次のコマンドを使用してプロジェクトを送信します。
<code>$ git init $ git add . $ git commit -m "Initial commit"</code>
端末からHerokuにログインし、アプリケーションを作成します。
<code>$ heroku login $ heroku create $ git push heroku master $ heroku open</code>
環境変数の作成
先に進む前に、Herokuの環境変数を作成して、アプリケーションの検証トークンを保存しましょう。
Herokuダッシュボードを開き、展開したばかりのアプリケーションを選択します。アプリケーションの
設定に移動し、[構成変数を表示] ボタンをクリックします。 keyとして確認_tokenを入力し、値としてトークンを入力し、をクリックしてを追加します。
コードで、トークン文字列( "this_is_my_token")をprocess.env.verification_tokenに変更します。変更を提出して、それらをHerokuにプッシュしてください。
Facebookページとアプリケーションを作成
サーバーが稼働しているときに、Facebookアプリケーションとその関連ページを作成します。新しいページを作成するか、既存のページを使用できます。
Facebookページを作成するには、Facebookにログインして作成ページに移動します。指定されたオプションからページタイプを選択します。私はエンターテイメントを選びました。
次に、ページのカテゴリと名前を選択します。
startをクリックした後、ページが作成され、アプリケーションに関するより詳細な情報(説明、ウェブサイト、プロフィール写真、ターゲットオーディエンスなど)を提供するよう求められます。これで、これらのセットアップ手順をスキップできます。
基本設定リンクをクリックして、以下を選択します。
[
製品設定
メッセンジャーのセクションでをクリックしてを開始します。以下に示すように、メッセンジャー設定ページに移動します。
メッセンジャーユーザーから送信されたメッセージやその他のイベントを受信するには、アプリケーションがWebhook統合を有効にする必要があります。次にこれを行います。 WebHook(以前はLive Update
webhookセクションで、[<🎜]
の設定をクリックします 更新されたコールバックURL(バックエンドアプリケーションで定義されているエンドポイントURL、つまり/webhook)を入力し、検証トークン(バックエンドアプリケーションで使用されるトークン、つまりプロセスに保存されます。確認_token)を選択し、すべてのチェックボックスを選択します。これらは、アプリケーションがサブスクライブするイベントを指定します。後でこれらのイベントの役割について学びます。
webhookを正常に有効にした後、webhookセクションと購読されたイベントのリストに記入が表示されるはずです。エラーを受け取った場合は、Webhookエンドポイント( /webhookで終了)の正しいURLを入力していることを確認し、ここで使用されるトークンがノードアプリケーションで使用しているトークンと同じであることを確認してください。
Token Generationセクションで、ドロップダウンメニューからページを選択します。認証後、ページアクセストークンが生成されます。
キーをPage_access_tokenに設定し、値として生成されたトークンを取得します。生成されたトークンは、Facebookに表示されている現在のページに保存されていないことに注意してください。ページにアクセスするたびに、ページのドロップダウンメニューからFacebookページを選択すると、ページアクセストークンフィールドが空白になり、新しいトークンが生成されます。ただし、以前に作成されたトークンはすべて機能します。したがって、ページを閉じる前にトークンを必ずコピーしてください。
Webhookが特定のページでイベントを受信するには、アプリケーションをそのページに購読する必要があります。webhookセクションで、サブスクライブするページを選択します。
ユーザーがボットとの新しい会話を開始するときに最初に見ることは、ウェルカム画面です。この画面には、ページの名前、説明、プロフィール写真、カバー写真が表示されます。ページの説明の代わりに使用されるグリーティングテキストを設定して、画面をカスタマイズできます。これを使用して、入門メッセージをセットアップして、ユーザーがボットから何を得ることができるかを知らせることができます。
デフォルトでは、会話を開始するために、ユーザーは最初のメッセージをボットに送信します。ただし、スタートボタンを有効にして、ボットが最初のメッセージを送信できるようにすることができます。ボタンはイベントをサーバーに送信し、その後応答できます。
挨拶テキストを設定するには、ページを開き、
setに移動します。
メッセージを選択し、右のパネルにを開いて、メッセンジャーの挨拶を表示します。あなたの好みにメッセージを設定します。
<code>$ mkdir spbot $ cd spbot $ npm init</code>
上記の操作は、FacebookグラフAPIにリクエストを送信します。リクエストが成功した場合、スタートボタンは新しい会話のウェルカム画面に表示されます。ユーザーはこのボタンをクリックして、コールバックを受信したポストバックをトリガーします。その後、ボットはこのポストバックに応答できます。
ポストバックのコンポーネント、ポストバックボタン、スタートボタン、永続メニュー、または構造化されたメッセージなど、さまざまな種類のコンポーネントによってトリガーできます。任意の文字列をペイロードとして設定できます。バックエンドでは、この文字列を使用して、[スタート]ボタンをクリックするために送信されたポストバックを識別します。ポストバックメッセージを受信するには、アプリケーションがWebhookのPostbackを購読する必要があります。 Messaging_Postbacksチェックボックスを選択して、WebHookをセットアップするときに前にこれを行いました。
スタートボタンが正常に設定されている場合、次の応答が表示されます。
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
ウェルカム画面と開始ボタンは、新しい会話でのみ表示されることを忘れないでください。ボットをエンコードしてテストするときは、現在の会話を削除して新しい会話を開始できます。
ポストバックメッセージを処理するには、以下をノードアプリケーションに貼り付けます。
<code>$ npm install express request body-parser mongoose --save</code>
誰かがあなたのボットと対話したり、ページにメッセージを送信したりするたびに、WebHook統合を介して更新が送信されます。メッセージを取得するには、Webhookの投稿を聞く必要があります。すべてのコールバックはこのWebhookに送信されます。
上記のポストハンドラーでは、アプリケーションに送信されたメッセージエントリを反復します。メッセージがバッチで一緒に送信される場合があるため、エントリには複数のオブジェクトが含まれる場合があります。次に、各エントリのメッセージイベントを反復し、そのタイプを確認します。以下は、アプリケーションに送信できる異なるコールバックメッセージです。- メッセージコールバックを受信した - 人がボットにメッセージを送信すると、受信したメッセージコールバックが送信されます。 Webhookをセットアップするときは、メッセージイベントを購読する必要があります。
- 受信したポストバックコールバック - 人が構成されたボタンをクリックしてポストバックを送信すると、受信したポストバックコールバックが送信されます。 Postbackからコールバックを取得するには、Webhookを設定するときにMessaging_PostBacksイベントに購読する必要があります。
- 配信されたメッセージコールバック - このコールバックは、ページで送信されたメッセージが配信されたときに発生します。 Webhookをセットアップするときは、message_deliveriesイベントに登録する必要があります。
- 認証コールバック - このコールバックは、送信者プラグインがクリックされたときに発生します。 Webhookをセットアップするときは、Messaging_optinsイベントに登録する必要があります。
- 読み取りメッセージコールバック - このコールバックは、ページで送信されたメッセージがユーザーによって読み取られたときに発生します。 Webhookをセットアップするときは、message_readsイベントに登録する必要があります。
- メッセージエコーコールバック - このコールバックは、ページがメッセージを送信するときに発生します。添付ファイル(画像、ビデオ、オーディオ、テンプレート、または代替)を使用したテキストメッセージまたはメッセージを受信できます。 Webhookをセットアップするときは、message_echoesイベントに登録する必要があります。
- チェックアウトアップデートコールバック(beta) - このコールバックは、柔軟な量トランザクションで購入ボタンを使用するときに発生します。これにより、配送先住所に基づいて価格を更新できます。 WebHookをセットアップするときは、MESSAGING_CHECKOUT_UPDATESイベントを購読する必要があります。現在、この機能は米国以外では利用できません。
- 支払いコールバック(beta) - このコールバックは、購入ボタンで表示された[チェックアウト]ダイアログボックスの支払いボタンをクリックすると発生します。 Webhookをセットアップするときは、Messaging_Paymentsイベントに登録する必要があります。現在、この機能は米国以外では利用できません。
イベントがポストバックの場合、ProcessPostBack()関数を呼び出します。この関数では、ペイロード値を確認します。スタートボタンのペイロードに挨拶を設定したことを忘れないでください。ここでは、ボタンをクリックするためにメッセージイベントが送信されたかどうかを確認します。その場合、ユーザープロファイルAPIを使用してユーザーの名前を取得し、それを使用して送信されるメッセージをパーソナライズします。 APIから、名前、姓、プロフィール写真、ロケール、タイムゾーン、性別を取得できます。
次に、メッセージをsendmessage()関数に送信します。この関数は、メッセンジャープラットフォームに公開します。 WebHook Post Handlerでは、200のOK HTTP応答を返します。
できるだけ早く200を返すことは非常に重要です。 Facebookは次のメッセージを送信する前に200を待ちます。大容量のボットでは、200回のリターンの遅延により、FacebookがWebhookにメッセージを配信するための大幅な遅延が発生する可能性があります。
Webhookがエラー(つまり、2xx状態ではない)またはタイムアウト(つまり、応答時間が20秒を超える)を返し、15分以上続けている場合、警告アラートを受け取ります。
Webhookが8時間失敗し続けている場合、FacebookはWebhookが無効になり、アプリが登録解除されることを知らせるアラートを送信します。問題を修正した後、Webhookを再び添加し、アプリケーションをページに再登録する必要があります。
変更を送信して、それらをHerokuにプッシュします。
ボットをテストするには、Facebook.com、Facebookモバイルアプリのメッセンジャーショートリンクを使用するか、メッセンジャーショートリンクを使用できます https://www.php.cn/link/1fd37ce80d495bebcb35e0054d7384fe <
Facebookとメッセンジャーでは、ページ名を検索してページを見つけることができます。
moreを選択してページ情報を編集します。
次に、ユーザー名を設定します。
@page_usernameを検索すると、正しいページが取得されます。また、
にアクセスして、インタラクションを開始することもできます。 以下に示すように、ウェルカム画面に設定したグリーティングテキストと start
ボタンを見ることができます。このボタンをクリックした後、サーバーから送信されたメッセージが表示されるはずです。
テキストを入力した場合、返信は届きません。次にこの問題を解決します。
データベースを設定します
ユーザーが映画名を入力すると、ロボットはオープンムービーデータベースAPIを使用して映画の詳細を取得します。使用するAPIリクエストは、最初の一致結果のみを取得するため、返された映画は常にユーザーが望むものではない場合があります。したがって、ロボットは最初にユーザーが正しい映画を取得したかどうかを確認し、その後、ユーザーは映画のプロット、キャスト、IMDB評価などの詳細情報を取得できます。また、別の映画名を入力して詳細を取得することもできます。
この前後の相互作用のため、ロボットはユーザーの現在の映画のエントリを覚えておく必要があります。 FacebookはWebhookでセッションを開いたままにしないため、セッションオブジェクトに保存するデータは次のリクエストで失われます。代わりに、このデータをデータベースに保存します。特にmonodb。 HerokuでMLABアドオンを使用します。
MLABは、MongoDBのデータベースとしてのデータベースです。 Herokuでは、無料のSandboxMLABプランを使用できますが、検証のためにクレジットカードをHerokuに保存する必要があります。カードの詳細を提供したくない場合は、MLAB Webサイトでアカウントを登録できます。このWebサイトでは、Sandboxデータベースの無料レイヤーを作成し、コードからそのデータベースにリンクします(詳細については後で詳しく説明します)。
Herokuでアドオンを使用するには、アプリケーションのダッシュボードに移動し、
Herokuの環境変数を確認すると、Mongodb URIセットの変数が表示されます。
MLAB Webサイト
MLAB WebサイトにMongoDBデータベースを設定する場合は、そこにアカウントを登録して、新しい展開ページの作成に移動します。
プラン設定を singleノードに変更し、標準ラインセクションから sandboxを選択します。
データベースの名前を設定し、
]ボタンをクリックしてプロセスを完了します。
次のページで、表示されたテーブルから作成したデータベースを選択します。データベースへのアクセス方法に関する指示があるページが開きます。
[
ユーザー<🎜]タブを選択し、[ボタン]データベースユーザーを追加しますをクリックします。ユーザー名とパスワードを入力して、をクリックしてを作成します。これにより、アプリケーションがデータベースにアクセスできるようにするために使用できる新しい資格情報セットが作成されます。 ページの上半分で、データベースURIを見つけてコピーします。mongodb:// :@dsxxxxxx.mlab.com:55087/spbotのように見えます。作成したばかりのdbuser名とパスワードを挿入します。 Herokuでは、Mongodb_uriという名前の環境変数を作成し、データベースのURIをその値として貼り付けます。
ノードアプリケーションに戻り、Movie.jsという名前のファイルを作成し、モデルという名前のフォルダーに保存します。以下をファイルに貼り付けます: ムービーデータベースモデルが上に作成されます。 user_idはメッセンジャープラットフォームから取得したユーザーIDとなり、他のフィールドは映画APIから取得されます。ユーザーが検索した最後の映画のみを保存するため、データベースにはユーザーごとに1つのレコードしかありません。 user_idフィールドを省略し、作成された各レコードの_IDとしてユーザーのIDのみを使用できます。ユーザーIDはFacebookページに固有のものであるため、これは機能します。これを行う場合は、ユーザーIDがページ全体であることを知っておく必要があります。これは、ユーザーのIDが指定されたページに固有のものであることを意味しますが、ユーザーは異なるページに対して異なるIDを持っている場合があります。 ボットが異なるページを提供する場合にのみこれを知る必要があります(はい、1つのボットが複数のページを提供できます)。したがって、ボットが複数のページを提供している場合、ユーザーIDのみでユーザーを識別できない可能性があり、_IDフィールドはレコードとしてユーザーIDを使用することも失敗します。これは一意でなければならず、ページ全体で一意性を保証します。
次に、メッセージがテキストまたは添付ファイル(画像、ビデオ、オーディオ)であるかどうかを確認します。後者の場合、ユーザーにエラーメッセージを送信します。テキストメッセージの場合、ユーザーが映画の詳細を示す特定のキーワードと一致するかどうかを確認します。この時点で、ユーザーは映画を照会し、映画はデータベースに保存されます。 getMoviedetail()関数はデータベースを照会し、特定のレコードを返します。
テキストに加えて、メッセンジャープラットフォームを使用すると、画像、ビデオ、オーディオ、ファイル、構造化されたメッセージを送信できます。構造化されたメッセージは、異なるユースケースをサポートするテンプレートです。ボタンテンプレートを使用すると、テキストとボタンを送信できます。ユニバーサルテンプレートを使用すると、画像、タイトル、字幕、ボタンを定義できます。アプリケーションでは、ユニバーサルテンプレートを使用します。 以下に示すようにProcessPostBack()関数を変更します。 以上がNodeとHerokuでFacebookチャットボットを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。モデルクラスを定義します
<code>$ mkdir spbot
$ cd spbot
$ npm init</code>
データベースとモデルが設定された後、チャットボットを完了することができます。コードはセクションでレンダリングされますが、プロジェクトにコード全体を貼り付けたい場合は、app.jsファイルへのリンクを次に示します。 <code>{
"name": "spbot",
"version": "1.0.0",
"description": "SPBot Server",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"author": "Joyce Echessa",
"license": "ISC"
}</code>
<code>$ npm install express request body-parser mongoose --save</code>
<code>node_modules</code>
var express = require("express");
var request = require("request");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen((process.env.PORT || 5000));
// 服务器索引页面
app.get("/", function (req, res) {
res.send("已部署!");
});
// Facebook Webhook
// 用于验证
app.get("/webhook", function (req, res) {
if (req.query["hub.verify_token"] === "this_is_my_token") {
console.log("已验证 webhook");
res.status(200).send(req.query["hub.challenge"]);
} else {
console.error("验证失败。令牌不匹配。");
res.sendStatus(403);
}
});
<code>$ git init
$ git add .
$ git commit -m "Initial commit"</code>
<code>$ mkdir spbot
$ cd spbot
$ npm init</code>

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Zustand非同期操作のデータの更新問題。 Zustand State Management Libraryを使用する場合、非同期操作を不当にするデータ更新の問題に遭遇することがよくあります。 �...
