Web開発に最適なJavaScriptのヒント

Web開発に最適なJavaScriptのヒント

JavaScriptのクールなヒントを探していますか? この投稿では、インターネットで最も広く使用されているプログラミング言語のXNUMXつを学ぶのに役立つ、楽しく効果的なJSのさまざまなヒントの概要を説明します。

以下のJavaScriptトピックについて説明します。

  • JSのArrayMethods
  • JavaScriptでAPIリクエストを行う
  • JavaScriptの `for`ループの概要
  • Node.jsの概要

JavaScriptの配列メソッド

配列はJavaScriptの最も重要なコンポーネントのXNUMXつであり、一般的なプログラミング言語です。 多くの場合、独自のデータ型と誤解されていますが、実際には Object、関数とともに。 簡単に言うと、配列は、任意のタイプの値を無制限に保持できる複合データ構造です。 各値には数値でインデックスが付けられます(つまり、各値には番号があり、配列内での位置を示します)。 これにより、アレイはデータの保存と整理に非常に柔軟になります。 配列には、文字列、数値、オブジェクト、またはその他の配列を格納できます。 この投稿では、最も一般的に使用される組み込みのJavaScript配列メソッドの概要を説明します。 これらのメソッドまたは関数を使用して、配列内のデータを操作および処理できます。

Web開発に最適なJavaScriptのヒント

concat()

世界 concat() メソッドは「連結」の略で、XNUMXつの配列を結合することができます。

var colors = ["black"、 "white"、 "blue"];
var colors2 = ["green"、 "yellow"、 "purple"];
​,war
document.write(colors.concat(colors2));
//出力:「黒、白、青、緑、黄、紫」

 

そのままで、 concat() メソッドが呼び出された元の配列は変更されません。 呼び出す colors 3つの値のみを含む元の配列を出力します。 元の配列を更新するには、メソッドを呼び出す必要があります colors 配列、変数の再割り当て:

そのままで、 concat() メソッドを呼び出す元の配列は変更されません。 呼び出す colors 3つの値のみを含む元の配列を出力します。 元の配列を更新するには、上のメソッドを呼び出す必要があります colors 配列、変数の再割り当て:

色= colors.concat(colors1); 

 

push()

多くの場合、配列の最後に新しい項目を追加したいだけです。これは、 push() メソッド。 同じ呼び出しで、単一または複数の値を配列にプッシュできます。

var colors = ["black"、 "white"、 "blue"];
colors.push( "緑"、 "黄");
​,war
document.write(colors);
//出力:「黒、白、青、緑、黄色」

 

取消 concat(), push() ありません プッシュした値で元の配列を更新します。

unshift()

そして push(), unshift() にXNUMXつ以上の新しい値を追加します 初め 配列の:

var colors = ["black"、 "white"、 "blue"];
colors.unshift( "green");
​,war
document.write(colors);
//出力:「緑、黒、白、青」

 

pop()

pop() の逆です push() メソッドは、配列の最後の要素を「ポップ」または削除します。

var colors = ["black"、 "white"、 "blue"];
colors.pop();
​,war
document.write(colors);
//出力:「黒、白」 

 

Since pop() 配列からアイテムを削除します。他の用途のために、削除したアイテムを別の変数に格納するのが一般的です:

var lastItem = colors.pop();
​,war
document.write(lastItem);
//出力: "blue"

 

shift()

同様に、 shift() 配列の最初のアイテムを削除します:

var colors = ["black"、 "white"、 "blue"];
colors.shift();
​,war
document.write(colors);
//出力: "白、青"; 

 

使用することもできます shift() 削除されたアイテムを新しい変数に格納するのと並行して:

var firstItem = colors.shift();
​,war
document.write(firstItem);
//出力: "黒" 

 

reverse()

名前が示すように、 reverse() メソッドは、配列内の値の順序を逆にします。

var myArray = [1、2、3、4、5、6、7、8、9、10];
var reverseArray = myArray.reverse();
​,war
document.write(reversedArray);
//出力:10、9、8、7、6、5、4、3、2、1

 

reverse() 元の配列は変更されません。 反転した配列を新しい変数に格納する必要があります。 または、元の変数に再割り当てして、元の変更を保持することもできます。

join()

世界 join() arrayメソッドは、配列内のすべての値を文字列に結合してから、文字列を返します。

var colors = ["black"、 "white"、 "blue"、 "green"];
console.log(colors.join());
//出力:黒、白、青、緑 

 

に含めることができるオプションの「セパレータ」パラメータがあります。 join()。 このパラメーターは、文字列内の各値を区切る文字(または文字のセット)を示します。 以下の例では、各値をコンマで区切り、その後に空白文字を続けます。

var colors = ["black"、 "white"、 "blue"、 "green"];
console.log(colors.join( '、');
//出力:黒、白、青、緑 

 

join() 元の配列は変更されません。 変数を保存するには、変数に変更を割り当てる必要があります。

var colorList = colors.join( '、');
console.log(colorList);
//出力:黒、白、青、緑
​,war
console.log(colors);
//出力:["黒"、 "白"、 "青"、 "緑"]
//つまり、元の配列のまま

 

sort()

sort() 配列の値を英数字順にソートします。 sort() ありません 元の配列を更新します。

var arr1 = [4、9、3、2、1];
arr1.sort();
console.log(arr1);
//出力:[1、2、3、4、9]

 

sort() メソッドを呼び出すときにのみ値を注文します。 配列の値を追加または変更した場合は、再度呼び出す必要があります。

indexOf()

indexOf() メソッドに文字列パラメータとして提供された検索用語のインデックス値を返します。

var colors = ["black"、 "white"、 "blue"、 "green"];
colors.indexOf( 'white');
// 1を返します

 

一致するインデックスがない場合 searchValue パラメータ、 indexOf() 戻ります -1:

var colors = ["black"、 "white"、 "blue"、 "green"];
colors.indexOf( 'orange');
// -1を返します

 

indexOf() 大文字と小文字が区別されます:

colors.indexOf( 'Blue');
// -1を返します

 

オプションもあります fromIndex パラメータ。 これは、検索を開始するインデックス値を示します。 指定しない場合、検索はインデックスから開始されます 0 デフォルトでは:

var names = ["Michael"、 "John"、 "Sarah"、 "Michael"、 "Matthew"];
names.indexOf( 'Michael'、2);
// 3を返します 

 

slice()

世界 slice() メソッドは、配列の「スライス」を返します。これは、開始点と終了点のオプションパラメータで示されます。 slice() 元の配列は変更されません。

世界 slice() メソッドは配列の「スライス」を返します。 オプションのパラメーターを使用して、開始点と終了点を指定できます。 slice() 元の配列は変更されません。

var colors = ["black"、 "white"、 "blue"、 "green"、 "purple"、 "orange"];
var colors2 = colors.slice(2、5);
console.log(colors2);
//出力:["blue"、 "green"、 "purple"]
​,war
var colors3 = colors.slice(1);
console.log(colors3);
//出力:["白"、 "青"、 "緑"、 "紫"、 "オレンジ"];
​,war
console.log(colors);
//出力:["黒"、 "白"、 "青"、 "緑"、 "紫"、 "オレンジ"]; 

 

filter()

filter() と多少似ています slice() 方法。 主な違いは、特定の条件に基づいて新しい配列を作成することです。 条件を渡す配列内の各値は、新しい配列に「フィルタリング」されます。 フィルタリングの条件は、コールバック関数を介して設定されます。

var someWords = ["easy"、 "hard"、 "encryption"、 "society"、 "total"、 "fastidious"、 "complexity"];
​,war
function checkSize(w){
    w.length> 5を返します。
}
​,war
var bigWords = someWords.filter(checkSize);
console.log(bigWords);
//出力:["encryption"、 "society"、 "fastidious"、 "complexity"] 

 

上記の例では、 checkSize() 6文字未満の単語を除外するコールバック関数。 また、残りのすべての値を、 bigWords.

every()

世界 every() 配列メソッドは、配列内のすべての値が条件を通過するかどうかを確認します。 ここでの条件は、コールバック関数によっても提供されます。 合格した場合、メソッドは戻ります true、そうでない場合は、戻ります false:

変数番号= [20、31、18、500];
​,war
function greatThan10(値){
    戻り値> 10;
}
​,war
console.log(nums.every(greaterThan10));
//出力:true

 

上記の例では、 nums 配列はより大きい 10、戻る true.

isArray()

名前が暗示するように、 .isArray() 渡された値が配列であるかどうかを確認します:

Array.isArray(['青'、 '黄' '緑']); // trueを返します
Array.isArray(3); // falseを返します
Array.isArray( 'hello'); // falseを返します

 

findIndex()

findIndex() のほぼ反対です indexOf() 方法。 条件を満たす配列の最初の値のインデックスを返します。 条件はコールバック関数を介して設定されます。 条件を満たす値が見つからない場合、関数は -1.

var colors = ['black'、 'blue'、 'yellow'、 'green'、 'purple'];
​,war
function greatThanFive(e){
    e.length> 5を返します。
}
​,war
var indexOfLargeValue = colors.findIndex(greaterThanFive);
console.log(indexOfLargeValue);
//出力:2

 

forEach()

世界 forEach() メソッドは、メソッドが呼び出された配列のすべての値に対してコールバック関数を実行します。 これは、配列内の各インデックスに等しく値を追加する場合や、他の多くのアプリケーションに役立ちます。 ただし、元の配列は変更されないため、新しい値を別の変数に保存する必要があります。

var nums = [1、2、3、5、8、13];
var numsUpdated = [];
​,war
function addTwo(e){
    および+ = 2;
    numsUpdated.push(e);
}
​,war
nums.forEach(addTwo);
console.log(numsUpdated);
//出力:[3、4、5、7、10、15]

 

これは、 for ループを使用して、配列を反復します。構文は少し単純です。

includes()

あなたが使用することができます includes() 特定の配列に特定の値が含まれているかどうかを確認します。 配列がある場合は、それが返されます true、それがない場合は戻ります false.

var colors = ['black'、 'blue'、 'yellow'、 'green'、 'purple'];
​,war
console.log(colors.includes( 'blue'));
//出力:true
​,war
console.log(colors.includes( 'red'));
//出力:false

 

オプションのXNUMX番目のパラメーターがあります。 fromIndex。 これは、検索をどこから開始するかを示します。

var colors = ['black'、 'blue'、 'yellow'、 'green'、 'purple'];
​,war
console.log(colors.includes( 'blue'、2));
//出力:false
​,war
console.log(colors.includes( 'blue'、1));
//出力:true

 

lastIndexOf()

そして indexOf(), lastIndexOf() 最初ではなく、配列内の指定された値の最後のインスタンスを検索します。 このメソッドは、配列の最後から検索を開始し、適切な一致が見つかるまで最初から最後まで機能します。 一致が見つからない場合、メソッドは -1:

var food = ['sushi'、 'pizza'、 'cheeseburger'、 'sushi'、 'pasta'];
​,war
console.log(food.lastIndexOf( 'sushi'));
//出力:3
​,war
console.log(food.lastIndexOf( 'burrito'));
//出力:-1

 

.toString()

.toString() と多少似ています .join() メソッドは、両方とも値の完全なインデックスを文字列として返すことができます。 toString() はるかに簡単な方法です。 各値の間に配置する「セパレーター」文字を指定するためのオプションのパラメーターはありません。 配列内のすべての値は、カンマ(スペースなし)で区切られます。 これは、アプリケーションによって、良い場合も悪い場合もあります。

JavaScriptでAPIリクエストを行う

サードパーティのサービスとやり取りする最も重要なコンポーネントのXNUMXつは、APIとの通信です。 の略 アプリケーションプログラミングインターフェース、これは、さまざまなWebサイト、アプリケーション、およびWebサービスが相互に通信し、データを送受信する主要な方法です。 このチュートリアルは、JavaScriptを介してWeb APIに接続し、受信または読み取りできるようにするための基本的な紹介として役立ちます GET JSONでデータを返すリクエスト(または JavaScript Object Notation) フォーマット。 このチュートリアルは、JavaScriptオブジェクトとプロパティへのアクセスについての基本的な知識があることを前提としていますが、それ以外の場合は、APIの操作経験のない個人を対象としています。

はじめに

このチュートリアルでは、 ジブリAPI、アプリケーションプログラミングインターフェース(およびスタジオジブリの映画の愛好家向け)を使用する人々を紹介するために設定されました。

APIは、スタジオジブリに関連するさまざまなデータクラス(映画、人物、場所、種、乗り物)の5つの異なるモジュールまたはコンポーネントに分かれています。 これらの各コンポーネントは、より正式には 終点。 経由でエンドポイントに電話をかけるとき GET (または他の同様の方法、 fetch)、エンドポイントは、そのカテゴリに固有のデータの配列をJSON形式で返します。 たとえば、映画のエンドポイントは次のようになります。

JavaScriptを使用したAPIリクエスト

映画のエンドポイントを取得します(利用可能) 詳細を見る)、経由で電話をかける GET、その後、 log データのさまざまな部分を console.

//新しいXMLHttpRequestを作成し、変数に保存します
VAR 受け取ります = 新製品 XMLHttpRequestの();
​,war
//オープンしたいエンドポイントを、 `GET`メソッドを介して示します
受け取ります.開いた('取得する', 「https://ghibliapi.herokuapp.com/films」, true);
​,war
//エンドポイントが読み込まれたら、関数内でコードを実行します
受け取ります.オンロード = function (){
​,war
  //入力データをJSON形式に解析します  
  VAR 入ってきます = JSONの.パーズ(この.応答);
  
  // .map配列メソッドを使用して、Filmsの各インデックスを反復処理します
  //エンドポイント、リリース日、タイトル、腐ったトマトにアクセスします 
  //それぞれからスコアを付け、追加でコンソールにログを記録します
  //フォーマット
  入ってきます.地図(  => {
      コンソール.ログ( .発売日 + ":" +  .タイトル + 「-(」 +   .rt_score + 「腐ったトマトの%)」);
    });
};
​,war
//実際のリクエストを送信して、割り当てられた関数を実行します 
// `receive.onload`
受け取ります.送信();    

上記のコードをブラウザーコンソールに入力するか、WebページにリンクされたJavaScriptファイルとして実行すると、次の結果が返されます。

JavaScriptを使用したAPIリクエスト

…リリース年、映画の名前、Rotten Tomatoesでの全体的な評価を表示しています(読みやすくするための追加のフォーマットもあります)

APIコールの説明

上記のスクリプト内の文書化されたメモは、ほとんどのAPI呼び出しを説明するはずですが、内部のデータの操作 receive.onload 詳細については価値があります。

世界 .map() arrayは、Filmエンドポイント(つまり、各film)内の個々のインデックスを反復処理するために使用されます。 あ for ループはここでも使用できますが、 .map() はるかに少ないコードで同じことを行います。 .map() コールバック関数を取ります(ここではES6構文で記述)。 コールバック関数内のコードは、エンドポイントの各アイテムに対して実行され、リリース日(films.release_date)、 題名 (films.title)と腐ったトマト(films.rt_score).

簡単にするために、 console.log メッセージは各アイテムに使用されますが、このデータはページ上のHTML要素に簡単に追加したり、他の配列メソッドでさらに並べ替えたりできます(つまり、1980年代の映画のみを除外します)。 APIサービスの操作にはさらに多くのことがありますが、これはAPIのエンドポイントからデータを取得するメカニズムの概要です。

JavaScriptの `for`ループの概要

JavaScriptの `for`ループの概要

コンピュータプログラミングの基本原則は、「DRY」または「Do n'tRepeatYourself」の長年の格言です。 同じコードを何度も書き直していることに気付いたときはいつでも、同じコードの重複行を必要とせずに、リファクタリングするためのより良い方法がある可能性があります。 これを実現する最良の方法のXNUMXつは、ループを使用することです。 ループにはいくつかの異なる種類があり、それらはすべて、すべてのプログラミング言語にわたってさまざまな形式で存在します。 この投稿では、ループの最も一般的で便利な形式のXNUMXつであるループについて見ていきます。 for ループ。

基本的な例

ループが非常に役立つ場所を示すための紹介として、JavaScriptコンソールに「HelloWorld」を印刷したいとします。 ループを使用しないと、次のように何かを書く必要があります。

console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World"); console.log( "Hello World");

 

これは非常に退屈で非効率的です。 上記の10行のコードは、次の3行だけで大幅に簡略化できます。

for(var i = 0; i <10; i ++){console.log( "Hello World"); }

 

上記の例は、 for ループは、ループの最も一般的で便利な形式のXNUMXつです。

世界 for ループ

書き込みに入るいくつかのコンポーネントがあります for ループ:カウンターまたは初期式、条件、インクリメント式、およびループ内で実行するコード。 「HelloWorld」をコンソールに10回出力するループを作成する上記の例を分解します。

全て for ループはキーワードで始まります for、一連の括弧、その後に括弧が続きます。 実行するコードは括弧内に配置されます。 のスケルトン構造 for ループは次のように見ることができます:

for(counter; condition; incremental){//実行するコードはここにあります}

 

カウンターは変数として設定する必要があります。 プログラミングでは、これはしばしば次のように設定されます i、それは可能性があります x, n または言語で許可されている任意の変数名。 これはループに開始値を伝えます。この場合、 0.

ループの次の部分はJavaScriptに条件を伝えます。この場合、値が次の値である限りループを実行します i は10未満です。ループが10に達するとすぐに停止します。 それは 非常に ループを実行する前に条件セットを用意しておくことが重要です。そうしないと、無限ループが発生し、ブラウザが過負荷になってクラッシュすることになります。

括弧内のループの最後の部分は増分です。 i++. i++ JavaScriptの省略形です i += 1 or i = i + 1。 つまり、次の値に1を加えます。 i ループが実行されるたび。 これもループの重要なコンポーネントです。実際にインクリメントしないかのように、ループも終了しません。

括弧内に配置されたコードは、ループの各反復で実行されます。 ループが実行されるたびにループがどのような反復であるかを示す必要がある場合は、カウンター変数を追加して、毎回返されるコードに含める必要があります(つまり、括弧内で実行されるコード) ):

for(var i = 1; i <= 10; i ++){console.log( "ループは現在反復中です" + i); }

 

上記のコードを実行すると、次のように出力されます。

ループは反復1になりましたループは反復2になりましたループは反復3になりましたループは反復4になりましたループは反復5になりましたループは反復6になりましたループは反復7になりましたループは反復8になりましたループは反復9になりましたループは反復10になりました

Node.jsの概要

Node.jsの概要

JavaScriptの開発は、Mozillaの共同創設者であるBrendan Eichによって1995年に初めて導入されて以来、長い道のりを歩んできました。 もともとクライアント側のスクリプト言語として使用されていたJavaScriptは、当初の意図をはるかに超えてアプリケーションへの使用を拡大しています。 クライアント側だけで使用される言語ではなくなりました。 の導入で Node.jsの、 JavaScriptはサーバー側でも使用されており、PHP、Python、Rubyなどの他のバックエンド言語の必要性に取って代わっています。

単なる目新しいだけではなく、バックエンドでJavaScriptを使用することを採用する開発者や企業が増えており、すべての開発作業を単一の言語で行うことができます。 なぜこれが成長傾向になっているのかについてより良いアイデアを得るために、この投稿ではNode.jsとは何か、そしてそれが何に最適に使用されているかを見ていきます。

Node.jsの説明

Node.jsは、JavaScriptを主要なサーバーサイドスクリプト言語として使用できるように開発されたJavaScriptフレームワークまたはライブラリです。 これは新しい言語ではなく、JavaScript言語用に記述されたコードのサブセットにすぎません。 もともとは2009年にRyanDahlによって作成されましたが、GoogleChromeのJavaScriptV8エンジン上に構築されており、それ自体が他の既存のJavaScriptエンジンよりも優れたパフォーマンスを提供するために開発されました。 Node.jsは完全にオープンソースであり、すべてのオペレーティングシステムで実行され、プロジェクトを取り巻く大規模な開発者コミュニティによって絶えず改善されています。

Node.jsは特にバックエンドでの使用を目的としているため、サーバー側スクリプト言語を使用する一般的なタスクを処理するためのさまざまなモジュールが付属しています。 これにより、開発プロセスを大幅にスピードアップでき、通常はゼロから作成する必要がある一般的な機能を抽象化できます。

Node.jsの基本機能

以下は、他のスクリプトフレームワークとは異なるNode.jsの基本的な機能の一部です。

イベント駆動型の非同期プログラミング

Node.jsフレームワークの一部として使用されるAPIは完全に非同期であり、非ブロッキングとも呼ばれます。 これは、Node.jsが別のタスクに移ることなく、特定のAPIでデータを送信するのを待つ必要がないことを意味します。 Node.jsは別のAPIに移動し、他のAPIからの受信を待機しているデータを追跡します。

高性能

Node.jsは、Google ChromeのV8エンジン上に構築されているため、他のサーバー側の代替手段と比較して非常に高速です。 比較したバージョンにもよりますが、Node.jsはベンチマークテストでPHPとPythonを上回っています。

バッファリングを回避

Node.jsアプリケーションは、バッファリングを回避するために、常にデータをチャンクで出力します。

スケーラブルなク

Node.jsは、小規模なプロジェクトと大規模なエンタープライズシステムの両方で使用するために開発されました。 Node.jsはシングルスレッドモデルを使用して非同期イベントを可能にしますが、一般的なサーバー言語は限られた数のスレッドを使用してデータ要求を処理します。 これは最終的に、Node.jsがApache HTTPなどの一般的なサーバー設定よりも多くのサーバー要求を一度に処理できることを意味します。

実際のNode.js

Node.jsは、オープンソースプロジェクトや小規模な新興企業からFortune 500企業まで、さまざまな用途で使用されています。 Node.jsを利用する企業の短いリストには、PayPal、Uber、Microsoft、eBay、およびGoDaddyが含まれます。

Node.jsが最適なもの

Node.jsが実際に優れている用途には、チャットメッセージングなどのI / Oバインドアプリケーション、ライブビデオなどのデータストリーミングサービス、データ集約型リアルタイムアプリケーション(DIRT)、シングルページWebアプリケーション、および多くのJSONベースのAPI。

結論

この記事から、あなたと一緒に使用できるいくつかの役立つヒントを見つけていただければ幸いです。 次のJavascriptプロジェクト。 以下のコメントセクションから、フィードバックとJSのヒントを投稿してください。

また、比較するこの素晴らしいリソースをチェックすることをお勧めします JavaScriptとPHP.

著者紹介

アンジェロは20年以上にわたってクリエイティブITの世界に携わってきました。 彼は1998年にDreamweaver、Flash、Photoshopを使用して最初のWebサイトを構築しました。 彼は、HTML / CSS、Flash ActionScript、XMLなどの幅広いプログラミングスキルを学ぶことで、知識と専門知識を広げました。

アンジェロはオーストラリアのシドニーでCIW(Certified Internet Webmasters)プログラムを使用して正式なトレーニングを修了し、コンピューターネットワーキングの中心的な基礎と、それがワールドワイドウェブのインフラストラクチャとどのように関連しているかを学びました。

アンジェロは、Sunlight Mediaの運営とは別に、ウェブとアプリの開発、デジタルマーケティング、その他の技術関連のトピックに関連する有益なコンテンツの作成を楽しんでいます。

コメントの投稿

コメントはモデレートされます。 あなたのメールは非公開にされます。 必須フィールドは、マークされています *