Scroll

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。初心者の方を対象としたプログラミング学習・Web制作・例題や多くのサンプルコードで実践的な使い方の解説を行う、詳しくわかりやすいサイト。更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

Excel関数逆引き集 | 基本の集計・計算：分散 → VAR.S

JavaScript | DOM 操作：イベント基礎 – removeEventListener

Excel VBA 逆引き集 | シート操作：シートの存在チェック

Excel VBA 逆引き集 | 配列処理：Range → 配列の読み込み

MySQL | SQLite経験者向け、30日で習得するMySQL：実務SQL力－ Day15 中間課題

Excel VBA | 命名規則チェックリスト（VBA/一般プロジェクト向け）

Python | ファイル・OS 操作：Excel 書き込み（openpyxl）

JavaScript | 1 日 120 分 × 7 日アプリ学習：検索 & ソート機能付き一覧

Excel VBA 逆引き集 | 行列操作：アウトラインの展開

C# Tips | 日付・時間処理：現在日時取得

Excel関数逆引き集 | 基本の集計・計算：最大値の位置 → MATCH(MAX(範囲),範囲,0)

JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（NewsAPI.orgでニュースアプリ）

Java | 基礎文法：変数ウォッチ

Excel VBA 逆引き集 | セル操作（値の取得・代入）：数式を値に変換

JavaScript | 1 日 90 分 × 7 日アプリ学習：ランダム表示アプリ（初級編）

JavaScript | 1 日 90 分 × 7 日アプリ学習：フォーム送信シミュレーター（初級編）

JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（WeatherAPI.comで天気アプリ）

JavaScript | 基礎構文：数値・演算 – 四捨五入

JavaScript 逆引き集 | 配列の分割（chunk）

Java 逆引き集 | バージョン互換（Java のメジャーアップでの注意） — 移行計画

JavaScript | 1 日 90 分 × 7 日アプリ学習：ミニ総合アプリ（初級編）

C# Tips | ファイル・ディレクトリ操作：バックアップ作成

Excel VBA 逆引き集 | 集計：部署別集計

Excel関数逆引き集 | 最小値の行を取得 → INDEX+MATCH(MIN)

Excel VBA | 超初心者（Excel操作＋マクロ体験）：基本文法－文字列操作

Java Tips | 日付・時間：休日除外

Python | 1 日 90 分 × 7 日アプリ学習：繰り返しカウントアプリ（初級編）

Python | 1 日 90 分 × 7 日アプリ学習：数当てゲーム（初級編）

Excel VBA | 中級・上級 VBA 総合セット（100問）

Excel VBA | 完全商用レベルの UI デザイナー化

Excel VBA 逆引き集 | 重複処理：重複チェック

CSS Tips | 超実務コアCSSテクニック：ボックスモデル－ vertical-align

Python | 1 日 120 分 × 7 日アプリ学習：tkinterで作るGUIアプリ（中級編）

Power Query 実務テンプレ | データ取込・更新系：SharePointフォルダ自動取込

JavaScript | 1 日 120 分 × 7 日アプリ学習：SPA風タブ切り替えアプリ

Excel VBA 逆引き集 | ファイル入出力：CSVで保存

MySQL | SQLite経験者向け、30日で習得するMySQL：パフォーマンスと設計－ Day18 クエリチューニング①

Power Query 実務テンプレ | データ取込・更新系：Excelファイル1枚目固定取込

Excel VBA 逆引き集 | 行列操作：行の高さ調整

Python | 1 日 90 分 × 7 日アプリ学習：ファイルを読み込むアプリ（初級編）

JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ

Excel VBA | フォルダ内の全 CSV を 1 枚の Excel に統合するテンプレート

JavaScript | DOM 操作：DOM 基礎 – DOM の読み込み順序

Excel VBA | フィールド定義表から自動でチェックを組み立てる仕組み（メタデータ駆動）

Excel VBA 逆引き集 | 配列処理：1行ずつ配列化

Excel関数逆引き集 | 基本の集計・計算：絶対値を返す → ABS

Excel VBA 逆引き集 | Web API の呼び出し

Excel関数逆引き集 | 最大値の行を取得 → INDEX+MATCH(MAX)

Excel VBA 逆引き集 | 集計：デイリー集計

Excel VBA 逆引き集 | 画面キャプチャ

Excel VBA | Offset × Resize × ForEach の黄金 100 パターン集

JavaScript | 1 日 120 分 × 7 日アプリ学習：ローカル保存対応メモ帳

JavaScript 逆引き集 | 日付の現在取得

JavaScript | DOM 操作：要素の位置・サイズ・スクロール – スクロール固定（overflow: hidden）

C# Tips | 文字列処理：部分一致検索

Excel VBA 逆引き集 | 検索・抽出：区切り文字で分割

JavaScript | 1 日 90 分 × 7 日アプリ学習：強化版カウンターアプリ（初級編）

CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ－疑似クラス :focus

Python | 1 日 120 分 × 7 日アプリ学習：エラーハンドリング付き入力アプリ（中級編）

Excel VBA | 自動生成ツール（UI オートデザイナー）

Excel VBA 逆引き集 | 2次元配列の扱い

Excel VBA | 引数にオブジェクト（Workbook/Range/Worksheet）を渡すベストプラクティス

Excel VBA 逆引き集 | ファイル入出力：CSVを読み込む

JavaScript | DOM 操作：フォーム操作 – フォームデータ送信（FormData）

Excel VBA 逆引き集 | 便利Tips・実務小技：書式だけコピー

C# Tips | 文字列処理：全角→半角

JavaScript | 1 日 120 分 × 7 日アプリ学習：タイマー & ストップウォッチ

Excel関数逆引き集 | 文字列の末尾が特定文字か → RIGHT＋=

Excel関数逆引き集 | 末尾の数字のみ抽出 → 数式組合せ

JavaScript | DOM 操作：フォーム操作 – フォームの reset

JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（ExchangeRate.hostで通貨変換アプリ）

Java | 再帰的なアルゴリズムの実例集

C# Tips | 文字列処理：日本語判定

WordPress Tips | 基本設定：メディアライブラリの年/月フォルダを整理

C# Tips | 文字列処理：空白トリム

JavaScript | 基礎構文：文字列操作 – 分割（split）

Excel VBA 逆引き集 | 行列操作：部分合計の作成

Excel関数逆引き集 | 基本の集計・計算：テキストか判定 → ISTEXT

JavaScript | DOM 操作：DOM 基礎 – DOMContentLoaded

Power Query 実務テンプレ | データ取込・更新系：CSVのヘッダー行が途中にあるデータ取込

無料で使えるAPI（2025年版）

Power Query 実務テンプレ | データ取込・更新系：毎月届くCSVを同一形式で更新

Power Query 実務テンプレ | データ取込・更新系：更新日時を自動列追加

Python | 1 日 90 分 × 7 日アプリ学習：簡単メニュー選択アプリ（初級編）

C# Tips | コレクション・LINQ：最大値取得

Power Query 実務テンプレ | データ取込・更新系：フォルダ内Excel一括取込

Excel関数逆引き集 | 初回出現判定 → COUNTIF=1

C# Tips | 日付・時間処理：日付バリデーション

Excel VBA 逆引き集 | 行列操作：最終行の取得（汎用）

C# Tips | 日付・時間処理：日付範囲判定

JavaScript | 多次元配列を HTML のに変換して表示する方法

JavaScript | レベル別練習問題：条件分岐（if / else / switch）

Java 逆引き集 | Map の null キー/値対応（実装差） — 入出力検証

JavaScript | 1 日 90 分 × 7 日アプリ学習：タイマーアプリ（初級編）

JavaScript | 基礎構文：数値・演算 – 指数表現

Excel VBA 逆引き集 | 検索・抽出：複数一致を配列で返す

JavaScript | eval() を使わずに安全に同じことをする方法

JavaScript 逆引き集 | ファイルアップロード（fetch, FormData）

JavaScript | 再帰とループの性能比較

C# Tips | 文字列処理：数字のみ抽出

Excel VBA 逆引き集 | セル操作（値の取得・代入）：セルに値を代入

Power Query 実務テンプレ | データ取込・更新系：Excel特定シート名指定取込

Excel VBA 逆引き集 | エラーハンドリング・ログ：桁数チェック

Excel関数逆引き集 | 基本の集計・計算：数値の符号を返す → SIGN

Excel VBA 逆引き集 | 検索・抽出：VLOOKUP 相当をVBAで

Java | オブジェクト指向：クラス図の基礎

JavaScript | 1 日 90 分 × 7 日アプリ学習：タブ切り替えアプリ（初級編）

C# Tips | 日付・時間処理：日付加算

C# Tips | 日付・時間処理：閏年判定

JavaScript | DOM 操作：要素の位置・サイズ・スクロール – 画面中央配置

JavaScript | 基礎構文：数値・演算 – 乱数

JavaScript | 配列・オブジェクト：配列の検索・判定 – undefined 要素の扱い

Python | 1 日 120 分 × 7 日アプリ学習：辞書型で作るユーザー管理アプリ（中級編）

Python | 自動化：Selenium ログイン自動化

日本の企業・官公庁が公開している無料API

Java | ツリー構造の探索アルゴリズム

Python | ファイル・OS 操作：mkdir(parents=True)

Excel関数逆引き集 | 時間の差を計算 → MOD

Excel VBA 逆引き集 | 集計：SUMIFS相当

Java | 複数の入力をまとめて List に格納するサンプル

JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本－ 5日目

JavaScript

2026.03.192026.07.29

スポンサーリンク

スポンサーリンク

目次

5日目のゴールとテーマ
HTMLとJavaScriptの関係をざっくりつかむ
1. HTMLは「骨格」、JavaScriptは「動き」
5日目の練習用HTMLを用意する
1. まずは超シンプルなページを作る
JavaScriptからHTML要素を「見つける」
1. document.getElementByIdで要素をつかむ
要素の中身を書き換える
1. textContentでテキストを変える
ボタンが押されたときに処理を動かす
1. addEventListenerで「クリックに反応する」
ユーザー入力を画面に反映するミニアプリ
1. 名前を入力して「こんにちは、○○さん！」と表示する
4日目までの「オブジェクト＋配列」とつなげる入口
1. まずは1件から、次は「一覧」に広げられる
5日目で一番大事な感覚
1. 「画面とコードが“線でつながった”」
5日目のまとめ

5日目のゴールとテーマ

5日目のテーマは「ブラウザの画面（HTML）とJavaScriptをつなげる」です。
昨日まではコンソールの中だけで完結していましたが、今日はついに「画面に出す」側に踏み込みます。

JavaScriptで
画面上の要素を見つける
その中身を書き換える
ボタンが押されたときに動く処理を書く

この3つを体験して、「あ、これアプリの入口だな」という感覚をつかむのが今日のゴールです。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

タイトルとURLをコピーしました