JavaScriptでユーザーに応じたパーソナライズされた挨拶メッセージを返す方法
課題の概要
今回取り上げるのは、2つの文字列を引数として受け取るJavaScript関数の作成です。1つ目の引数はユーザー名、2つ目はオーナー名を表します。
関数に求められる動作は以下のとおりです。
- ユーザー名とオーナー名が一致する場合 → 「Hello master」を返す
- 一致しない場合 → 「Hello ユーザー名」という形式のメッセージを返す
サンプルコード
実際のコードを見てみましょう。
const name = 'arnav';
const owner = 'vijay';
function greet(name, owner) {
if (name === owner) {
return 'Hello master';
}
return `Hello ${name}`;
};
console.log(greet(name, owner));出力結果
Hello arnav
コードの解説
この関数のポイントは、次の2点です。
- 厳密等価演算子(===)による比較:
===を使うことで、型変換を行わずに値と型の両方が一致するかを判定できます。==ではなく===を使うのが現代のJavaScriptにおけるベストプラクティスです。 - テンプレートリテラルによる文字列の組み立て: バッククォート(`` ` ``)で囲んだテンプレートリテラルを使うと、
${name}のように変数を直接埋め込めるため、「Hello + 名前」のような文字列連結を簡潔に記述できます。
上記の例では、ユーザー名(arnav)とオーナー名(vijay)が異なるため、「Hello arnav」が出力されます。もし両者が同じ名前だった場合は、「Hello master」が返されることになります。
-
JavaScriptでユーザーが選択したテキストを取得・表示する方法
Webページ上でユーザーがマウスなどでドラッグして選択したテキストの内容を取得したい場合、JavaScriptのwindow.getSelection()メソッドを利用します。このメソッドは現在の選択範囲を表すSelectionオブジェクトを返し、toString()を呼び出すことで選択された文字列をそのまま取り出せます。以下は、ユーザーが選択したテキストを取得し、ボタンのクリックで画面に表示するサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charse
-
JavaScriptのimportで波括弧「{}」を使う理由とは?名前付きエクスポートの基本をわかりやすく解説
JavaScript(ESモジュール)でモジュールを読み込む際、import 文に波括弧 { } を付けるかどうか迷ったことはありませんか?実はこの波括弧は、名前付きエクスポート(named export)を読み込むために必要な記法です。本記事では、実際のコード例を使いながら、{ } の役割と使い方を詳しく解説します。 importで { } を使う場面とは JavaScriptのESモジュールでは、エクスポート方法によって読み込み側の書き方が変わります。 名前付きエクスポート:export { 関数名 } のようにエクスポートされたものを読み込む場合は、import { 名前 } fro