JavaScriptでFlaskの関数を呼び出す方法

Ajaxを使用してFlask関数を呼び出す方法:
- JavaScriptのXMLHttpRequestオブジェクトを使用して、Flaskのエンドポイントにリクエストを送信します。
- 以下は、JavaScriptでAjaxリクエストを送信する例です。
```
var xhr = new XMLHttpRequest();
xhr.open('GET', '/flask_function', true);
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
   var response = JSON.parse(xhr.responseText);
   // レスポンスを処理するコードをここに追加します
 }
};
xhr.send();
```
- 上記の例では、GETメソッドを使用して/flask_functionエンドポイントにリクエストを送信します。必要に応じて、メソッドやエンドポイントを変更してください。
axiosを使用してFlask関数を呼び出す方法:
- axiosはJavaScriptのHTTPクライアントライブラリで、簡単にAjaxリクエストを送信することができます。
- まず、axiosをインストールします。
```
$ npm install axios
```
- 以下は、axiosを使用してFlask関数を呼び出す例です。
```
const axios = require('axios');
axios.get('/flask_function')
 .then(function(response) {
   // レスポンスを処理するコードをここに追加します
 })
 .catch(function(error) {
   // エラーハンドリングのコードをここに追加します
 });
```
- 上記の例では、GETメソッドを使用して/flask_functionエンドポイントにリクエストを送信しています。
fetch APIを使用してFlask関数を呼び出す方法:
- fetch APIはモダンなブラウザで利用できるJavaScriptの組み込み関数で、Ajaxリクエストを送信するために使用できます。
- 以下は、fetch APIを使用してFlask関数を呼び出す例です。
```
fetch('/flask_function')
 .then(function(response) {
   if (response.ok) {
     return response.json();
   }
   throw new Error('Network response was not ok.');
 })
 .then(function(data) {
   // レスポンスを処理するコードをここに追加します
 })
 .catch(function(error) {
   // エラーハンドリングのコードをここに追加します
 });
```
- 上記の例では、GETメソッドを使用して/flask_functionエンドポイントにリクエストを送信しています。

これらの方法を使用すると、JavaScriptからFlaskの関数を呼び出すことができます。適切なエンドポイントやリクエストパラメータを設定し、レスポンスを適切に処理するようにしてください。