JavaScript

Webアプリケーションを開発していると、外部リソースにアクセスするためにHTTPリクエストを送りたい場面が出てきます。たとえばブログサイトを構築する場合、各記事にコメント一覧を表示するためにAPIを呼び出すことがあるでしょう。 Axiosは、Webリクエストを簡単に行うために広く使われているJavaScriptライブラリです。この記事では、axiosを使ってGETリクエストやPOSTリクエストを作成する方法を、具体的なコード例とともにわかりやすく解説します。 なぜAxiosを選ぶのか？ AxiosはPromiseベースのライブラリで、Webリクエストをシンプルに記述できるのが特徴です。 「fe

JavaScriptのアロー関数は、関数を宣言するための記法のひとつです。アロー関数を使えば、より簡潔な構文で効率的に関数を書くことができ、単一の式で構成される関数では暗黙的なreturn（戻り値の省略）もサポートされています。 関数とは、特定の処理を実行したり値を返したりするコードのまとまりのことです。プログラマーは、繰り返し使えるコードを作るために関数を利用します。これによりプログラムの行数を減らし、全体の効率を高めることができます。 従来、JavaScriptで関数を宣言する方法はfunctionキーワードを使う方法だけでした。しかしES6以降、JavaScriptはアロー関数をサポー

カウントダウンタイマーは、大切なイベントまでの残り時間を数えるために、インターネット上のさまざまなサイトで活用されています。たとえば、新しいWebサイトの公開日までのカウントダウンに使ったり、新製品発表のタイミングを知らせるために使ったりできます。活用の可能性はアイデア次第で無限に広がります。この記事では、HTML・CSS・JavaScriptという3つの技術を組み合わせて、JavaScriptによるカウントダウンタイマーを作る方法を解説します。それでは始めましょう!Webページの土台を作るまずは基本となるWebページを用意しましょう。このチュートリアルでは外部ライブラリを使わず、素のHTML

コードを書くのは楽しい反面、時に退屈でストレスの溜まる作業になることもあります。コードを書き始めたのに何も動かない——そんな日があるでしょう。さらに厄介なのは、コード自体は動いているのに、なぜ正しく動作しないのか分からないケースです。修正すべき箇所があるのに見つけられず、悩んでしまうことも少なくありません。そこで役立つのがJavaScriptコンソールです。コンソールを使えば、コードの中で何が起きているのかをリアルタイムに把握でき、問題の原因を素早く特定できるようになります。このガイドでは、JavaScriptコンソールの基本的な使い方を解説します。実際にアプリケーションでコンソールを活用する

ES6(ES2015)で導入されたPromiseは、コールバック関数を多用することなく非同期処理を簡潔に記述できる仕組みです。Promiseを使えば、書きにくく保守もしにくい多段階のコールバック(いわゆる「コールバック地獄」)に悩まされることはありません。さらに、Promiseによる非同期処理をもっと簡単に書けるようにする機能が「async/await」です。async/awaitを使うと、同期処理のように見えるコードで、実際には非同期の処理を実行できます。この記事では、async/awaitの基本概念と、実際のコードでの使い方について詳しく解説します。それでは始めましょう!Promiseのお

Webアプリケーションは、あっという間に複雑になってしまうものです。開発者としての経験から学んだことの一つは、プレーンなJavaScriptでも、使い方次第で非常に多くのことができるという点です。 localStorage APIは強力な組み込み機能で、サーバーを必要としないシンプルなアプリケーションにおいて、データベースを使う必要性を取り除いてくれます。このAPIを使えば、データをローカルに保存し、アプリケーションから自由にアクセスできるようになります。 このガイドでは、JavaScriptでlocalStorageメソッドを使う方法について解説します。フォームの入力内容を保存し、後でW

デフォルトパラメータを使うと、関数の操作がぐっと楽になります。あらかじめデフォルト値を設定しておけば、引数が指定されなかった場合に関数がどの値を使うべきかを事前に伝えられます。これにより、エラーの発生を防ぎ、コードの可読性も向上します。 JavaScriptでは、ES2015（ES6）からデフォルトパラメータが導入されました。これにより、あらかじめ定義された値で関数を初期化できるようになっています。 このガイドでは、デフォルトパラメータとは何か、その使い方、そしてデフォルトパラメータとして指定できる式の種類について解説します。実際のコード例もいくつか紹介するので、記事を読み終える頃にはすぐ

getElementByIdやgetElementsByClassNameといった関数を耳にしたことがある方も多いでしょう。これらはいずれも、JavaScriptで特定のHTML要素を選択するためのメソッドです。 要素を選択できれば、その内容の変更や状態の修正、さらには画面から消すことまで自由自在に行えます。 実は、Webページ上の要素を選択するためにもうひとつ便利なメソッドがあります。それがquerySelectorです。さらに、その姉妹メソッドにあたるquerySelectorAllは、条件に合致するすべての要素を返してくれます。 この記事では、querySelectorとquery

プログラマーはコードの重複を避けることを好みます。コードの繰り返しが増えるほど保守性が低下し、プログラムの実行速度も遅くなります。そのため、JavaScriptにはデータセットを反復処理するためのさまざまなメソッドが用意されています。 その中の一つがmap()メソッドです。このメソッドは既存の配列をループ処理し、配列内のすべての要素に対して特定の関数を実行します。 このガイドでは、JavaScriptのmap()関数の使い方について解説します。実際によく使われる3つの具体例を通じて、map()関数の活用方法を学んでいきましょう。 map()関数とは？ JavaScriptのmap()メ

コンピュータは計算がとても得意です。コンピュータは0と1の二進数（バイナリ）によって動いているため、計算能力はまさにその「血」に刻まれていると言えるでしょう。プログラミングをしていると、何らかの数学的な処理を行いたい場面は必ず訪れます。 JavaScriptにおいても、数値計算はあらゆる場面で登場します。たとえば、ウィンドウのサイズを計算したり、ユーザーがサイトを利用できる年齢かどうかを判定したり、ユーザーが入力した2つの数値を合計したりするのに、数学が使われます。 このガイドでは、JavaScriptで主要な6つの算術演算子を使って数学的な操作を行う方法について解説します。 算術演算子

Webサイトにインタラクティブな機能を追加できるのは、JavaScriptの大きな強みです。HTMLがページの構造を、CSSがスタイルを担当するのに対し、JavaScriptを使えばサイトにより動的な振る舞いを持たせることができます。 JavaScriptでは、イベント（event）を使ってサイトにインタラクティブ性を持たせます。この記事では、JavaScriptイベントの基本について解説します。イベントの活用シーン、定義方法、呼び出し方まで、順を追って見ていきましょう。 JavaScriptイベントとは？ イベントは、ブラウザまたはユーザーによって発生し、Webページの状態を変化させる

リスト（配列）はデータを格納するのに便利な方法ですが、特定の対象に関する複数の属性をまとめて保存したい場合には不便です。例えば、クッキーショップで販売しているすべてのクッキーのデータを保存したい場合、複数のリストを作成しなければなりません。 そこで役立つのがオブジェクトです。オブジェクトを使うと、データを「名前：値」のペアで保存できるため、アプリケーション内のデータにラベルを付けて管理できます。 このガイドでは、オブジェクトとは何か、そしてコード内でどのように活用するのかを解説します。JavaScriptにおけるオブジェクトの作成、読み取り、変更、削除の方法まで、実例を交えて詳しく見ていき

Cookie（クッキー）は、Webブラウザにユーザーに関するデータを保存するための重要な仕組みです。ログイン状態の維持など、認証セッション情報の保存によく使われており、ブラウザは「あなたがそのサイトにログイン済みであること」を記憶できます。 この記事では、Cookieが存在する理由、Cookieの種類、そしてJavaScriptでCookieを操作する方法について解説します。 ブラウザCookieとは？ Cookieとは、ユーザーのブラウザ内に情報を保存するための小さなテキスト文字列です。この仕組みを最初に考案したのはNetscapeで、1990年代に世界で最も人気のあるブラウザの一つを

プログラミングにおいて、時間は切っても切り離せない存在です。私たちが時計やカレンダーを使って日々の予定を管理するように、プログラムも時間を記録・管理する仕組みを使って「何を、いつ実行すべきか」を判断しています。 たとえば、ブログアプリケーションは記事が作成された日時を記録する必要がありますし、カレンダーアプリケーションは登録された予定を正しい日時に表示しなければなりません。 このガイドでは、JavaScriptで日付と時刻を扱う方法について解説します。具体的なコード例を交えながら基本から丁寧に説明していきますので、ぜひ最後まで読んでみてください。 JavaScriptのDateオブジェク

JavaScriptの書き方を学びたいなら、ここがまさにうってつけの場所です。 すべてのプログラミング言語には、英語と同じように独自のルール（文法）があります。思い出してください。小学校の頃、私たちは文章を正しく組み立てるために文法のルールを学びましたよね。 プログラミング言語も同じです。もし全員が勝手に独自のルールを作ってしまったら、誰ともコミュニケーションが取れなくなります。プログラミング言語がルールに厳格なのは、書かれたコードが正しく実行できるようにするためなのです。 このガイドでは、JavaScriptの「構文（シンタックス）」について解説します。構文とは、JavaScriptで

駆け出しのソフトウェアエンジニアやWeb開発者が、最初に挑戦することになる定番のコーディング課題のひとつが「文字列の反転」です。文字列とは、簡単にいえば文字やスペースの集まりのこと。たとえば「Hello World!」という文字列を受け取って「!dlroW olleH」に変換して返す、というのがゴールです。この問題にはいくつもの解き方があり、本記事では代表的なアプローチを3つ紹介します。 お題 文字列を引数として受け取り、それを反転させて返す関数 reverseString を作成してください。 解法1：forループを使う 最もストレートな解法のひとつが、forループで文字列を後ろから

Webページ上の要素をJavaScriptで選択したいと思ったことはありませんか？それを担うのが、JavaScriptの要素ゲッター（getter）の中でも「王様」と呼ばれる getElementById メソッドです。 getElementById を使うと、要素のIDをもとにその要素を選択できます。メソッド名を見れば、何をするものなのか直感的にわかりますよね。 このガイドでは、getElementById とは何か、どのように動作するのか、そしてコード内でいつ使うべきかについて解説します。デモとして、「続きを読む／閉じる」テキストボタンの実装例も一緒に見ていきましょう。 それでは始め

まずは、果物のリストを作ってみましょう。リスト名は「fruit」とし、「バナナ」「メロン」「ぶどう」という値を追加します。果物って本当に好きですよね！買い物リストのチュートリアルのように聞こえるかもしれませんが、実はこれでもう「配列（アレイ）」が完成しているのです。 このガイドでは、配列とは何か、どのように動作するのか、そしてなぜコードで配列を使うべきなのかを解説します。実際の動作例もいくつか紹介するので、読み終える頃にはJavaScriptの配列を自在に操れるようになっているでしょう。 配列とは何か？ 配列とは、データを格納するためのオブジェクトです。配列は順序付けられた項目のコレクシ

JavaScriptはプロトタイプベースの言語です。オブジェクトを宣言するたびに、そのオブジェクトに関連付けられたプロパティやメソッドを拡張するプロトタイプが自動的に生成されます。 近年、多くのJavaScript開発者がオブジェクト指向設計をコードに取り入れようと試みてきました。そこで登場したのが「クラス」と呼ばれる新しいオブジェクトの形です。クラスは、既存のプロトタイプを拡張する仕組みとして機能します。 このガイドでは、クラスとは何か、なぜ使われるのか、そして自分のコードにどう実装すればよいのかを解説します。実際のコード例も交えながら、クラスを使い始めるための一歩をサポートします。

バニラJavaScript（プレーンなJavaScript）だけでもWebリクエストを送信できることをご存知でしたか？そう、Webリクエストのためにはライブラリをインストールする必要は一切ありません。しかも、古くて複雑なXMLHttpRequestの話ではありません。 fetch APIを使えば、素のJavaScriptだけでAjaxリクエストを実行できます。サーバーからデータを取得したり、サーバー上のデータを更新したりするための便利なツールです。 このガイドでは、fetch APIとは何か、そしてこのAPIを使ってどのようにWebリクエストを送るのかを解説します。GETリクエストとPOSTリ