はじめに JavaScriptは「クリックしたら動く」だけではありません。マウスやキーボードのイベントを使えば、自分で操作できるインタラクティブな作品が簡単に作れます。今回は、初心者でも楽しみながら作れる5つのアプリ例を紹介します。 1. 画像の拡大・縮小ビューア マウスホイールで画像を拡大縮小できます。 <im...

はじめに 「JavaScriptを勉強しているけど、何から作ったらいいかわからない…」そんな初心者の方、多いですよね。実はJavaScriptは、ブラウザだけで動かせるので、インストールなしですぐに試せるのが魅力です。今回は、初心者でも数時間〜1日で完成できる「作れる物」5選と、簡単なコード例をご紹介します。 1. 時...

👨‍💻 ずっと座ってコードを書いていると… 腰が痛い 集中力が落ちる なんか眠い 目がしょぼしょぼ… そんな悩み、ありますよね？実は、プログラマーにとって「健康習慣」こそが最大のパフォーマンスアップ術。 今回は「疲れにくく、集中力を維持し、創造力もアップする」ための習慣をテーマ別に紹介します。 1. 長時間座っても疲れ...

「JavaScriptって難しそう…」「勉強しても途中で挫折しちゃう…」 そんなあなたにこそ試してほしい、たった数行で作れて、ちょっと感動するミニミニゲームを紹介します！ 今回のテーマは「作って楽しい・動かして嬉しい・アレンジして学べる」。初心者でもコピペですぐ動かせる、楽しい練習コード7選です。 1. ランダム励まし...

Next.js App Router を使って開発していると、以下のような 謎の型エラー に遭遇したことはありませんか？ Type error: Type '{ uid: string; }' is missing the following properties from type 'Promise<any>'...

近年、SNSやWeb上で自分のプロフィールや複数のリンクをひとつのページにまとめる「リンク集サービス」が注目を集めています。その中でも代表的なサービスが「リットリンク（lit.link）」「リンクツリー（Linktree）」、そして新鋭の「Procom（プロコム）」です。 一見似ているようで、実はそれぞれに特徴があり、...

プログラミングを学び始めたばかりの方も、ある程度慣れてきた中級者も、作業効率を劇的に上げたいなら「ショートカットキー」をマスターするのが近道です。 今回は、エディタ（VSCode）やOS操作（Windows/Mac）、ブラウザ、ターミナルなど、開発に関わるさまざまな環境で使える便利なショートカットキーを一挙にまとめまし...

問題1：特定の条件でフィルタ 以下の配列から、年齢が20歳以上のユーザーだけを抽出してください。 const users = ; 問題2：プロパティの合計を算出 以下の商品の合計金額を求めてください。 const items = ; 問題3：mapを使ってフォーマット変換 以下の配列から、"名前（年齢）" という形式の...

JavaScriptの基本をマスターしたい方に向けて、試験や面接対策として役立つ問題を10問厳選しました。理解度チェックにもぴったりです！ 【第1問】変数の宣言 次のコードで正しい変数の宣言はどれですか？ A. let 1number = 10;B. const name = "Taro";C. var if = "h...

JavaScriptで時間を使った処理を書こうとすると、必ず出てくるのが setTimeout と setInterval。一見似ているこの2つ、実は使い方を間違えると 無限ループ地獄 や 思わぬバグ にハマってしまうこともあります。 この記事では、「初心者がやりがちな勘違い」と「正しい使い分け方」「クリア（停止）の方...