関数、配列、ループ、JSON、NoSQL について取り残されていると感じたり、どこから始めればよいかわからない人のための、プレーンな Javascript の復習

ここでは、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 がインストールされているフォルダーであり、サーバーを起動するターミナル フォルダーと同じである必要があります。

まずこれを試してください

1. 「python -m http.server」と入力するか、
2. 上記が機能しない場合は、「python3 -m http.server」と入力します。 Return キーを押すと、Python 3 はコマンドが実行されたディレクトリから簡単な HTTP サーバーを即座に起動します。このディレクトリにはインデックス ファイルも必要です。 または、他の方法が機能しない場合はオプション 3
3. 古いバージョンの場合は「python -m SimpleHTTPServer 8000」と入力します

Python パスにインデックス (ホーム) ファイルを作成する方法。Web サーバーが存在するのと同じフォルダーに保存します。このコードをコピーし、index.html
として保存します。

     

<header>
</header>

   <p> hi there, this is our first html page </p>

データを準備します

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 ファイルを変更して、公開サーバーからデータにアクセスするために以下で使用するコードとは異なる次のコードを含めます

     

<header>
</header>

   <p> hi there, this is our first html page </p>

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) に移動し、以下を編集して置換し、保存します

    <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>


<!-- next up..we need to return this data in table format-->

以上が関数、配列、ループ、JSON、NoSQL について取り残されていると感じたり、どこから始めればよいかわからない人のための、プレーンな Javascript の復習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。