ここでは、NodeJS や外部ライブラリを使用しないプレーン バニラ JS を学習します。 Google シート データを JSON に変換して AWS S3 バケットに保存し、プレーン JS を使用して取得するというユースケースをすぐに開始します。ほとんどのレッスンは hello world プログラムから始まり、他にはそれほど多くはありませんが、ここでは実際にすぐにプログラムするものがあるので、あらゆるプログラミング言語の重要な柱である配列とループを練習できます。さらに、ここでデータ サイエンスの世界に足を踏み入れることができ、おそらく私のようにデータ サイエンスでキャリアを築くことができます。
最初にデータを調査するとき、私たちは SQL を思い浮かべますが、SQL が過剰で不要なアプリもたくさんあります。いくつかのメトリクスを含むダッシュボードでは、他のデータとの関係のない単純な JSON フラット ファイルをデータ ソースとして使用できます。ダッシュボードはこの NoSQL 形式を使用でき、マーケティング グループのレポート ニーズによく選ばれています。
環境をセットアップするために実際に必要なのは、Google Chrome と、スプレッドシート データを JSON に変換するための json Chrome 拡張機能だけです。次に、汎用 Web サイトとして無料の AWS と S3 バケットが必要になります。 IDE の場合は、Windows のメモ帳だけを使用します。また、JavaScript フェッチ API は http プロトコルを使用するため、C ドライブからのデータのフェッチは機能せず、これには Web サーバーが必要となるため、データをフェッチするにはローカル ネットワークも必要です。無料の AWS を公開する前に、まずローカル Web サーバーをセットアップしてデータをテストします。これには簡単な Python を使用します。
環境をセットアップする
ローカル Python サーバーとインデックス ファイルをセットアップする手順
AWS リモート サーバーを作成する前に、まず Python を使用してローカル Web サーバーをセットアップする必要があります。その方法は次のとおりです
まず、Python がインストールされているかどうかを確認します...デフォルトでホーム フォルダー c:Usersyourname になるコマンド プロンプトを開き、「Python」と入力します。バージョン情報が表示されている場合はインストールされており、以下の手順 6 に進むことができます (ただし、最初にインデックス ファイルがホーム フォルダーに保存されていることを確認してください)
Python がインストールされていない場合は、次の手順に従ってください
Windows の Python サーバー
1 検索領域に移動して cmd と入力し、コマンド プロンプトを押します。黒い画面が開き、ホーム フォルダー (通常は C:UsersyourName) へのパスが表示されます
2 Python と入力します。インストールされている場合は、バージョン番号が表示されます
3 インストールされていない場合は、[入手] ボタンが表示されます。これを押すと、数分かけてダウンロードがインストールされます (または、Chrome から Python をダウンロードするだけです)
4 完全にインストールされたら、cmd プロンプトを再度開き、もう一度 Python を入力します
5 のバージョン情報が表示されます。Python がすでにインストールされている場合は、ここから始めます
6 python -m http.server と入力すると、サーバーが起動します (このコマンド ウィンドウを開いたままにしておきます)
7 インデックス ファイルをホーム フォルダーに保存していることを確認してください (ファイル エクスプローラーで [c:]、[ユーザー]、[あなたの名前] の順にクリックしてホーム フォルダーを開きます)
7a ステップ 8 でローカルホストに移動している間、cmd を開いたままにしてください...cmd を閉じるには、再度開いて最初からやり直す必要があります
8 Chrome に移動し、localhost:8000 と入力すると、デフォルトのインデックス ページが表示されます。インデックス ファイルの作成については、以下を参照してください
Mac 上の Python サーバー
Mac ではターミナルを開き、上記のステップ 2 から開始します。ただし、プリインストールされている Python のバージョンに応じて、上記の 3 つの異なるオプションを試す必要がある場合があります。ホーム フォルダーは、Python がインストールされているフォルダーであり、サーバーを起動するターミナル フォルダーと同じである必要があります。
まずこれを試してください
Python パスにインデックス (ホーム) ファイルを作成する方法。Web サーバーが存在するのと同じフォルダーに保存します。このコードをコピーし、index.html
として保存します。
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
データを準備します
1 このデータをコピーして、空白の Google シートに貼り付けます
これは注文データベースを持つ架空の会社です
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
非常に重要 - データを貼り付けた後、データが強調表示されている間に、Google スプレッドシートでデータを押してからテキストを列に分割します
2 json Chrome 拡張機能を取得します
シートを作成する前に、Chrome を有効にして json として保存します。
Google シート ツールバーに JSON アイコンを追加する簡単なショートカットを見つけました。これは Chrome 拡張機能です
まずこのリンク https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
にアクセスしてください。
次に、ページの右端にある [Chrome に追加] を押します
次に、空の Google シートを開くと、ページ上部近くのツールバーの最後の項目として JSON アイコンが表示されます
3 データを json に変換します
上記のデータをシートに貼り付け、列にテキストを入力し、json アイコンを押してダウンロードに移動して json ファイルを取得します
4 この json ファイルを、Python とインデックス ファイルが存在するのと同じフォルダーに保存します...私は、orders.json として保存しました
プログラムを実行します
5 インデックス ファイルからデータを取得します...サーバーとファイルの構成をテストします
index.html ファイルを変更して、公開サーバーからデータにアクセスするために以下で使用するコードとは異なる次のコードを含めます
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
6 localhost:8000 を呼び出してデータを表示します
7 ローカルサーバー上で json を試した後、AWS にパブリック S3 バケットを作成できます
AWS S3 バケットをパブリックサーバーとして設定する
JSON ファイルをリモートで保存する最も簡単な方法は、AWS S3 に保存することです。従来のデータ サーバーでスキーマを作成しないことで、サーバーレスになります。私たちは S3 を備えた AWS クラウドにいて、どこからでもバケット リンクに接続できます。前述したように、noSQL S3 アプローチにはいくつかの制限があります。しかし、大きなメリットもあります。データを扱うとき、人間の性質として、1 つの Excel テーブルに大きく依存していた昔と同様に、1 つのテーブルのみを使用したい傾向があります。この 1 つのフラット ファイル形式でいくつかのメトリクスを処理できるため、視聴者に複雑さを与えないようにすることができます。フラット ファイルの理想的な使用例は、シンプルなダッシュボードです。
まず AWS s3 バケットを作成し、次に JSON ファイルをアップロードします。その方法は次のとおりです:
1 無料枠 AWS にサインアップし、AWS コンソールから S3 に移動し、一意のバケット名を作成します
2 [バケットの権限] タブに移動してパブリック アクセスのブロックをオフにし、パブリック アクセスのブロック セクションに移動して編集し、チェックを外して保存します
3 [権限] タブに留まり、バケット ポリシーを編集し、そこにあるものを消去して次のものに置き換えて、変更を保存します (下のバケット名を実際の名前に置き換えることを忘れないでください)
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
4 次に、アクセス許可タブを開いたまま、クロスオリジン (cors) に移動し、以下を編集して置換し、保存します
<!DOCTYPE html>
<body>
<div id="myData"></div> <!--data result displays in this html div-->
<script type="text/javascript">
convert(); //run the convert function..this converts json to html and displays to the front end in the myData div
// async is needed to run await which is the newest way to return a promise..await must be used inside a function
//When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
//let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
//replace rickd with your bucket name
let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
let data = await response.json(); //getting data array in json format...waiting for all the data to come in
//then iterate over javascript array for as many times as there are js objects inside the array
for (var i = 0; i < data.length; i++) {
data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
} //end for loop
//we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
//console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format
} //end function
</script>
</body>
<!-- next up..we need to return this data in table format-->
</html>
5 [プロパティ] タブに移動し、最後の項目である静的 Web ホスティングを押します。次に、「編集」をクリックしてから「有効化」をクリックし、「保存」をクリックします。これにより、バケット リンクが公開 Web サイトに変わります。
6 [オブジェクト] タブに戻って [アップロード] を押し、新しく作成した JSON ファイルの保存場所に移動してこの操作を完了します。 json ファイルは s3 にあります。
7 JSON ファイルが正常にアップロードされると、s3 バケットのオブジェクト セクションに表示されます。 JSON ファイルをダブルクリックすると、プロパティ タブが表示され、オブジェクトの概要が表示されます。提供されたオブジェクト URL をクリックすると、生の JSON データが表示されます。 Javascript からデータを取得するために必要となるため、この URL リンクをコピーしてどこかに保存します。この URL リンクは、新しく作成された汎用 Web サイト、つまり一時的な Web サイトとして機能する一般にアクセス可能な S3 バケットへのアクセスを提供します。ファイルをこのバケットに保存し、いつでも他のユーザーと共有できます。
8 AWS から json ファイルにアクセスするには、ローカルサーバーで使用するものとは異なるコーディングが必要です。まず、ユーザーに Web ページへのリンクを提供する必要があります。架空の注文データへの私の公開リンクは
です。
https://rickd.s3.us-east-2.amazonaws.com/orders4.json 次に、コードは次のようになりますが、元のコードとは異なります。このコードでは、配列を表示する代わりにテーブル要素を追加して、表示がテーブル形式になるようにします
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
次に、ヘッダーとスタイルを追加する同じコードを示します
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
パート 2
配列 - 最も重要なデータ構造
JavaScript では、データは中括弧で囲まれ、カンマで区切られたキーと値のペアとして構造化されており、配列には複数の JavaScript オブジェクトが含まれており、各オブジェクトはデータの行を表します。これは、JSON 形式または Javascript Object Notation と呼ばれます。
ループ / 反復 - 最も重要なループは for ループですが、他のタイプのループについて研究する必要があります。 for ループはデータの配列を反復処理し、パスごとに操作を実行します。このユースケースでは、フェッチリクエストを介してデータをフロントエンドに表示するだけです。
関数
関数はコードのブロック、つまり一連の命令であり、ボタンを押すなどの何らかのイベントに応答して実行されます。関数が必要ない場合もありますが、コードが適切に動作するために関数が必要な場合もあります。関数には名前があるか、匿名です。これらは呼び出すことも、自己実行することもできます。最初は恐ろしい矢印表記に戸惑いますが、よく使われるので慣れてください。
条件ロジック 最後に、if / else ステートメントもあります。 if(条件) {次にこれを行う} else {それを行う}
結論として、このレッスンでは簡単な概要のみを提供しているため、より多くの知識を得るためにこれらすべてのトピックについて研究する必要があります。私が提供しているのはロードマップ、一種の入門書だけであり、プログラマーは残りの部分を学ぶ必要があります。
コーディングを楽しんでください!!
追記
プレーンな JS、nosql の使用例は棒グラフで、ここでコードを見つけることができます。 https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
著者リック・デルポについて.. https://javasqlweb.org/about.html
以上が関数、配列、ループ、JSON、NoSQL について取り残されていると感じたり、どこから始めればよいかわからない人のための、プレーンな Javascript の復習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
