ホームページ > 記事 > ウェブフロントエンド > 関数、配列、ループ、JSON、NoSQL について取り残されていると感じたり、どこから始めればよいかわからない人のための、プレーンな Javascript の復習

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

Barbara Streisandオリジナル: 2024-10-31 00:32:29418ブラウズ

Plain Javascript Refresher for those feeling left behind or not knowing where to start w/ Functions, Arrays, Loops, JSON & NoSQL

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

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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Web アプリケーションで Google マップの読み込み完了を確実に検出する方法次の記事：Web アプリケーションで Google マップの読み込み完了を確実に検出する方法

続きを見る