エンジニア全般
JavaScriptは現在人気のプログラム言語の一つで、初心者でもサーバーサイドおよびフロントサイドに触れることができることため多くの人に注目されている言語です。
JavaScriptはウェブページに動的な要素を加える方法やイベント処理の力、データ操作のテクニック、そして非同期通信の実現などが得意です。
一方で、セキュアなファイル操作の限界、クロスドメインリクエストの問題、ページ遷移の無効化に関するセキュリティ上のリスクなどJavaScriptの弱い部分にも焦点を当てて説明していきます。
この記事では、JavaScriptを使って実際に作成できる具体的なアプリケーションなどの例を紹介し、できること・できないことについて詳しく解説していきます。
食品商社営業からシステムエンジニアへと転職後、バックエンドエンジニア（Java, PHP）として尽力。開発リーダーを含む上流工程〜下流工程に携わる。IT関連記事から芸能・法律など幅広ジャンルにて執筆。
JavaScriptでできること一覧
JavaScriptはウェブページを動的に操作するのが得意な言語です。
この言語を使用することで、ウェブページに様々なインタラクティブな機能を追加することが可能になります。
ここでは、JavaScriptの主な使用例について説明していきます。
ウェブページの動的な操作
JavaScriptを使用すると、ウェブページに対してさまざまな動的操作を実行できます。
例えば、ユーザーがフォームに入力したデータの即時検証を行うことができるため、ユーザーがフォームを送信する前に入力エラーを知らせて修正を促す処理などが実現可能です。
また、ユーザーのアクションに基づいてページの特定の要素を動的に表示または非表示にすることもできます。
これには、特定のボタンをクリックすると追加のコンテンツが展開されたり、非表示になるといったような機能が挙げられます。
さらに、JavaScriptを用いてページ上でアニメーション効果を作成することも可能です。
これにより、スムーズなページ遷移や視覚的に魅力的な要素の表示が可能になり、ユーザーの操作性を大幅に向上させることができます。
静的なWEBサイトに動きをつけることができるため、JavaScriptを用いるとWebページをおしゃれで遊びのあるサイトに仕上げることができます。
イベントの処理
JavaScriptはイベント駆動型のプログラミングに非常に適しており、さまざまなユーザーイベントに応じた処理を実装することができます。
例えば、ユーザーがウェブページ上の特定のボタンをクリックした際にポップアップウィンドウを表示させる、または新しいページにリダイレクトするといった動作を設定することが可能です。
また、マウスオーバーイベントを利用して、ユーザーが特定の要素にカーソルを合わせた際に詳細情報を表示するツールチップを実装することもできます。
さらに、キーボードイベントを利用して特定のキーの組み合わせでショートカットコマンドを実行するなど、高度なユーザーインターフェースの構築が可能となっています。
ユーザーの行動に応じてページがリアクティブに反応することで、よりエンゲージメントの高いサイトを構築できるようになります。
データの操作
JavaScriptを使用すると、データの操作が非常に柔軟に行えます。特に配列やオブジェクトの操作においてはその力を発揮します。
配列に関しては、JavaScriptは.sort()メソッドを使って配列の要素を並び替えることができるでしょう。
数値の配列や文字列の配列を昇順や降順にソートすることが可能であったり、.filter()メソッドを使用することで、特定の条件に一致する要素だけを抽出した新しい配列を作成することもできます。
これは、特定のデータセットから特定の条件を満たす要素を選択する際に非常に便利といえます。
オブジェクトに関しても、JavaScriptは強力な操作機能を提供しています。
オブジェクトのプロパティにアクセスしたり、新しいプロパティを追加・削除したりすることが可能です。
また、
Object.keys()やObject.values()のようなメソッドを使って、オブジェクトのキーまたは値を配列として取得することも可能なため、オブジェクト内のデータをより柔軟に扱うことができます。
AJAXと非同期通信
JavaScriptを使用したAJAX（Asynchronous JavaScript and XML）は、ウェブページからサーバーとの非同期通信を可能にする強力な技術です。
AJAXを利用することで、ページ全体をリロードすることなく、特定のデータだけをサーバーから取得または送信することができ、これはユーザーエクスペリエンスを大幅に向上させることができる重要な機能といえます。
具体的には、
オブジェクトを使用してサーバーにリクエストを送信してレスポンスを受け取ることができます。
また、近年ではよりモダンなfetch APIが使われることが多く、より簡潔で読みやすいコードで非同期通信を実現できます。
例えば、ユーザーがフォームに入力したデータをサーバーに送信し、処理結果をページに即時反映させるといった動作が可能になります。
また、サーバーから最新のデータを定期的に取得してページに表示する、いわゆる「ポーリング」もAJAXを使って実装できるため、リアルタイムでデータを更新するウェブアプリケーションの開発が可能になります。
JavaScriptでできないこと一覧
JavaScriptは多機能で柔軟な言語ですが、セキュリティやブラウザの機能制限により実行できないこともあります。
ここでは、JavaScriptではできないことについて詳しく解説していきます。
セキュアなファイル操作
JavaScriptは、ブラウザのセキュリティ制約によりクライアント側でのファイル操作に厳しい制限がある場合があります。
特に、ユーザーのシステムにあるファイルの読み書きやローカルファイルシステムへの直接的なアクセスは、基本的に許可されていません。
これは、悪意のあるスクリプトがユーザーのファイルにアクセスしてデータを盗んだり破壊したりすることを防ぐためです。
例えば、JavaScriptを使用してユーザーのデスクトップ上にあるファイルを読み込んだり、新しいファイルを作成することはできません。
ただし、HTML5のFile APIを使用すると、ユーザーがファイルを明示的に選択した場合（例えば、ファイルアップロードの入力フィールドを通じて）に限り、そのファイルの読み込みやデータの取得は可能となります。
クロスドメインリクエスト
ブラウザのセキュリティポリシーにより、JavaScriptは同一オリジンポリシー（Same-Origin Policy）の制約を受けます。
これは、あるオリジン（ドメイン、プロトコル、ポートが全て同じ）からロードされたスクリプトが、異なるオリジンのリソースにアクセスすることを制限するものです。
このため、JavaScriptを使用して他のドメインのデータに直接アクセスすることは基本的にできません。
例えば、
のページからJavaScriptを使用して
のAPIにリクエストを送ることは、通常許可されていません。
ただし、CORS（Cross-Origin Resource Sharing）というメカニズムを使用することで、サーバー側で適切なヘッダーを設定することにより、クロスドメインリクエストを安全に行うことが可能になります。
ページ遷移の無効化
JavaScriptを使用してウェブページのページ遷移を無効化することは、ユーザー操作性やセキュリティ上の理由から推奨されません。
例えば、
イベントを使用してユーザーがページを離れる際に警告を表示することは可能ですが、これはユーザーが意図的にページを離れようとしている場合にのみ使用すべきといえるでしょう。
JavaScriptを使って強制的にページ遷移を阻止したりユーザーがページを離れることを不可能にするような行為は、ユーザーの操作を不当に制限することになり、ブラウザのセキュリティポリシーに反する可能性があります。
また、このような行為はユーザーに不快感を与えてしまいウェブサイトの信頼性を損なう原因となります。
実際に、「戻る」ボタンを押しても戻れないという状況を考えてみると、その不快感は理解しやすいかと思います。
JavaScriptで作れるものの例
JavaScriptでは様々なアプリケーションの開発が可能です。
初心者でも日常的に利用できるような簡易的なアプリケーションも比較的簡単に作成可能です。
ここでは、JavaScriptを使用して作成できる基本的なアプリケーションの作成手順とコードの一部を紹介していきます。
ToDoリストアプリケーション
ToDoリストアプリケーションは、日々のタスク管理を助けるシンプルかつ実用的なツールです。
JavaScript、HTML、CSSを組み合わせることで、基本的なToDoリストアプリケーションを作成することができます。
HTMLでのフォーム作成
最初に、ユーザーがタスクを入力するためのフォームをHTMLで作成します。
このフォームには、テキスト入力フィールドとタスクを追加するためのボタンが含まれます。
JavaScriptでのタスク管理
ユーザーがフォームにタスクを入力し、「追加」ボタンをクリックするとJavaScriptがそのタスクを取得して画面上に表示する処理を行います。
また、各タスクには削除ボタンを設けて、クリックするとそのタスクがリストから削除されるようにします。
CSSでのスタイリング
アプリケーションの見た目を整えるために、CSSを使用してスタイリングを行います。
タスクリスト、ボタン、テキストフィールドなどの要素にスタイルを適用し、見やすいインターフェースを作成します。
具体的なコードの例
HTMLの基本構造は以下のようになります。
<!DOCTYPE html><html><head><title>ToDo App</title><!-- ここにCSSのリンクやその他のメタデータを含める --></head><body><form class="add"><input type="text" name="add" placeholder="何をする?"><button type="submit">追加</button></form><ul class="tasks"></ul><!-- ここにJavaScriptファイルのリンクを含める --></body></html>JavaScriptでは、次のような処理を行います。
フォームの要素を取得し、イベントリスナーを設定します。ユーザーがフォームを送信すると、JavaScriptがタスクを取得し、リストに追加します。
新しいタスクをリストに追加する関数を作成します。この関数はタスクのテキストを引数として受け取り、新しいリストアイテム（<li>要素）を作成して、それをタスクリストに追加します。
タスクを削除するための機能も実装します。各タスクに削除ボタンを追加し、そのボタンがクリックされたときにタスクをリストから削除するイベントリスナーを設定します。
JavaScriptのサンプルコードは以下のようになります。
document.querySelector('.add').addEventListener('submit', function(e) {
e.preventDefault();
const text = this.add.value.trim();
if(text) {
addTask(text);
this.reset();
}
});
function addTask(text) {
const list = document.querySelector('.tasks');
list.innerHTML += `<li>${text} <button class="delete">削除</button></li>`;
}
document.querySelector('.tasks').addEventListener('click', function(e) {
if(e.target.classList.contains('delete')) {
e.target.parentElement.remove();
}
});
この基本的なToDoリストアプリケーションは、JavaScriptの基本的なDOM操作、イベントハンドリング、動的なHTMLコンテンツの生成を学ぶのにおすすめのアプリケーションです。
このアプリケーションをさらに機能拡張して、タスクの保存、編集、フィルタリングなどの機能を追加することでより実用的なアプリへと改修でき、学習用のアプリとしても重宝できるでしょう。
インタラクティブな画像ギャラリー
インタラクティブな画像ギャラリーは、JavaScriptを使用してスライドショーやクリックによる画像の拡大表示など、動的な要素を取り入れることで作成が可能です。
このようなギャラリーは、特にECサイトやポートフォリオサイトなどで効果的に使用できるのでおすすめです。
フォトギャラリーは文字通り画像が並んだページのことを指しますが、単に画像を並べるだけではなく、アニメーションやインタラクティブな要素を加えることで、より魅力的なページにすることができます。
画像の準備
まずは表示したい画像を選び、適切なサイズに調整します。
商用利用を考えている場合は、商用利用可能な画像を提供するサイトから画像を選ぶようにしましょう。
lightgallery.jsの利用
lightgallery.jsは、jQueryに依存しない軽量で柔軟なギャラリーライブラリです。
このライブラリを使用することで、簡単に美しいフォトギャラリーを実装できます。
HTMLの構築
画像を表示するためのHTML構造を作成します。
通常、<div>タグで画像を囲み、各画像にリンクを設定します。
CSSでのスタイリング
ギャラリーの見た目を整えるためにCSSを使用します。
レイアウト、背景色、ホバーエフェクトなどを設定して、ギャラリーの外観をカスタマイズします。
JavaScriptでの動的処理
lightgallery.jsを読み込んだ後、JavaScriptを使用してギャラリーの動的な機能を実装します。
これには、画像のスライドショーやクリックによる拡大表示などが含まれます。
具体的な実装例
HTML
の基本構造は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>インタラクティブな画像ギャラリー</title>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/css/lightgallery.css" />
</head>
<body>
<div id="lightgallery">
<a href="https://picsum.photos/id/237/600/400">
<img src="https://picsum.photos/id/237/150/100" />
</a>
<a href="https://picsum.photos/id/1018/600/400">
<img src="https://picsum.photos/id/1018/150/100" />
</a>
<!-- 他の画像も同様に追加 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js"></script>
<script>
// JavaScriptのコードはここに記述
</script>
</body>
</html>
次に、
を初期化して、インタラクティブな機能を実装します。
以下のJavaScriptコードは、上記のHTML内の<script>タグ内に記述していきます。
lightGallery(document.getElementById('lightgallery'), {// ここにオプションを設定できます// 例: スライドショーの速度を設定speed: 500,// サムネイルを表示thumbnail: true});このコードは、指定された要素（この場合はid="lightgallery"の<div>タグ）内の画像に対してlightgallery.jsの機能を適用します。
これにより、ユーザーが画像をクリックするとフルサイズの画像がモーダルウィンドウで表示され、左右のナビゲーションで他の画像に移動できるようになります。
JavaScriptでできること・できないことのまとめ
JavaScriptはウェブ開発において非常に利用されている人気のある言語です。
この記事では、JavaScriptでできること・できないことにふれつつ、それぞれを詳しく解説してきました。
JavaScriptはウェブページに動的な要素を加えること、イベント処理、データ操作、非同期通信などを得意としているため、ユーザーインタラクションの豊かなウェブページやアプリケーションの開発が可能になるのが魅力です。
しかし、セキュリティ上の理由からクライアント側でのファイル操作、クロスドメインリクエスト、ページ遷移の無効化などには制限があるため、利用する際はセキュリティについても検討していく必要があるでしょう。
また、実際のアプリケーション例としてToDoリストアプリケーションやインタラクティブな画像ギャラリーの作成方法を紹介しましたが、JavaScriptを用いれば他にも様々なアプリを作成することが可能です。
JavaScriptを深掘りしていくことでよりその実用性が理解できると思いますので、気になる方は一度ご自身でも調べてみることをおすすめします。
プログラム言語についてやシステム開発などにお悩みの方は、知識と経験が豊富なJitera社に一度ご相談してみてはいかがでしょうか。
