JavaScript の進化

ささやかな始まり (1995)

JavaScript は、Web サイトに対話性をもたらすために、Netscape の Brendan Aich によって開発されました。最初は Mocha と呼ばれ、その後 LiveScript と呼ばれましたが、Java の人気に合わせて現在の名前になりました。初期の使用法は、単純なフォーム検証の追加など、基本的なものでした。

1995 年のコードの例:

<script>
  alert('Welcome to the 90s Web!');
</script>

JavaScript の始まりについて詳しくは、MDN Web ドキュメントをご覧ください。

ECMAScript 標準化 (1997)

構文を統一するために ECMAScript が確立されました。 ECMAScript 3 (1999) では、ブラウザーの一貫性の基礎を築く改善が導入されました。 ECMAScript 5 (2009) では、厳密モードと forEach のようなネイティブ配列メソッドを使用して JavaScript をさらに最新化しました。

配列メソッドの例:

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));

ECMAScript の詳細については、ECMA International でご覧ください。

AJAX とダイナミック Web (2000 年代)

AJAX (非同期 JavaScript および XML) により、Gmail や Google マップなどの Web アプリケーションがページをリロードせずにデータを更新できるようになり、よりリッチな Web エクスペリエンスへの移行が始まりました。

AJAX リクエストの例:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

フレームワークが JavaScript に革命を起こす

jQuery (2006) と MooTools の出現により、DOM インタラクションが簡素化され、堅牢なブラウザ間の互換性が導入されました。

バニラ JS と jQuery の例:

// Vanilla JavaScript (2005)
document.querySelector('#btn').addEventListener('click', () => alert('Clicked!'));

// jQuery (2006)
$('#btn').click(() => alert('Clicked!'));

jQuery のドキュメントで jQuery の影響について詳しく説明します。

現代: ES6 以降 (2015)

ECMAScript 2015 (ES6) では大幅なアップデートが行われ、let、const、テンプレート リテラル、アロー関数、クラス、モジュールによるコーディングの実践が強化されました。

クラス構文を使用した ES6 の例:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const person = new Person('Alice');
person.greet(); // Hello, my name is Alice

MDN ECMAScript 2015 での ES6 アップデートのリファレンス。

Node.js がサーバーに JavaScript を導入 (2009)

Node.js により、JavaScript がブラウザの制限から解放され、サーバー上で実行できるようになり、フルスタック JavaScript への道が開かれました。

Node.js の例 (サーバー作成):

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello, world!');
}).listen(3000);
console.log('Server running at http://localhost:3000/');

Node.js 公式サイトで Node.js を探索してください。

7. フレームワークとライブラリ: React、Vue、Angular

React.js (2013) はコンポーネントベースのアーキテクチャをもたらしましたが、Vue.js (2014) は使いやすさを重視しました。 Angular (2016) は、TypeScript と強力な状態管理を使用して Web アプリ開発を刷新しました。

React コンポーネントの例:

function App() {
  return <h1>Hello, React!</h1>;
}

React の詳細については、React Docs を参照してください。

TypeScript: JavaScript のタイプ セーフティ (2012)

TypeScript では静的型付けが導入され、開発中のエラーの検出が容易になりました。

TypeScript と JavaScript の例:

<script>
  alert('Welcome to the 90s Web!');
</script>

TypeScript: JavaScript にはもう少し規律が必要であるため

シャファイエット・ホセイン ・ 10月14日

#javascript #webdev #初心者 ＃プログラミング

TypeScript については、TypeScript 公式サイトでご覧ください。

非同期プログラミング革命

コールバック地獄から Promise や async/await まで、JavaScript の非同期プログラミングへのアプローチは、読みやすさと保守性の向上のために進化しました。

遷移の例:

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));

非同期の進化の詳細については、MDN Async Functions を参照してください。

2024 年以降の JavaScript

JavaScript の将来には、開発者のニーズを満たす適応性を反映して、デコレーター、レコードとタプルの型、パターン マッチングなどの提案が期待されます。

今後の機能について詳しくは、TC39 提案をご覧ください。

私のウェブサイト: https://Shafayet.zya.me

あなたのためのミーム???

以上がJavaScript の進化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。