では「ログイン判定のサンプル」を一緒に作ってみましょう。
初心者でも理解しやすいように、段階を追って説明します。
目標
- ユーザーがログインしているかどうかを判定する
- ログインしていれば「ようこそ〇〇さん」と表示
- ログインしていなければ「ログインしてください」と表示
サンプルコード
// ユーザー情報（ログインしている場合はオブジェクト、していない場合は null）
const user = {
name: "太郎",
isLoggedIn: true
};
// ログイン判定
if (user && user.isLoggedIn) {
console.log(`ようこそ、${user.name}さん！`);
} else {
console.log("ログインしてください");
}
🔍 解説
user && user.isLoggedInuserが存在していて、さらにisLoggedInが true のときだけ実行されます。userが null の場合は&&の左側で止まるのでエラーになりません。
- テンプレートリテラル
`ようこそ、${user.name}さん！`のように書くと、文字列の中に変数を埋め込めます。
- else
- ログインしていない場合の処理をまとめて書けます。
応用例：デフォルト表示
もし user が null のときに「ゲストさん」と表示したいなら、|| を使ってこう書けます。
const user = null;
const name = (user && user.name) || "ゲスト";
console.log(`ようこそ、${name}さん！`);
まとめ
&&で「存在チェック」＋「条件チェック」を同時にできる||で「デフォルト値」を設定できる- この2つを組み合わせると、ログイン判定や安全なアクセスが簡単に書ける
では「ログインしている人だけが買い物カートを使える」サンプルを作ってみましょう。
実際のWebサービスでもよくある仕組みなので、練習にぴったりです。
サンプルコード：ログイン判定付きカート
// ユーザー情報（ログインしている場合）
const user = {
name: "太郎",
isLoggedIn: true
};
// カート（配列で商品を管理）
let cart = [];
// 商品をカートに追加する関数
function addToCart(item) {
if (user && user.isLoggedIn) {
cart.push(item);
console.log(`${item} をカートに追加しました`);
} else {
console.log("ログインしてください。カートを利用できません");
}
}
// カートの中身を表示する関数
function showCart() {
if (user && user.isLoggedIn) {
console.log(`${user.name} さんのカート:`, cart);
} else {
console.log("ログインしていないため、カートを表示できません");
}
}
// 実行例
addToCart("りんご");
addToCart("バナナ");
showCart();
🔍 解説
- ユーザー情報をオブジェクトで管理
isLoggedInが true ならログイン中とみなす- null や false の場合は「未ログイン」
- 関数内でログインチェック
if (user && user.isLoggedIn)で「存在チェック」と「ログイン状態チェック」を同時に行う- 未ログインなら「ログインしてください」と表示
- カートは配列
cart.push(item)で商品を追加console.log(cart)で中身を確認できる
応用アイデア
- ログアウト機能を作って
user.isLoggedIn = falseにすると、カートが使えなくなる - デフォルトユーザーを
nullにして、ログインしていない状態を表現する - 購入処理関数を追加して「カートが空なら購入できない」などの条件を加える
練習問題（発展）
- ログアウト関数
logout()を作って、呼び出すとisLoggedInが false になるようにしてください。 checkout()関数を作って、カートに商品がある場合だけ「購入完了」と表示し、カートを空にしてください。