JavaScript

スポンサーリンク
JavaScript

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

1日目のゴール1日目のテーマは「JavaScript で“画面の文字を書き換える”感覚をつかむこと」 です。・ボタンを押したら文字が変わる・入力した文字を画面に出すたったこれだけでも、「ただの HTML ページ」が「自分で動くアプリ」に変わ...
JavaScript

JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編:ボタンを押すアプリ

1日目のゴール1日目のテーマは「ボタンを押した“きっかけ”で JavaScript が動くんだ、という感覚をつかむこと」 です。やることはシンプルです。ボタンを押す→ JavaScript が動く→ 何かが起きる(とりあえずログを出す)この...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:ミニ業務アプリ(総合)

1日目のゴールと作るアプリのイメージこの7日間は、「ちょっと業務っぽいミニアプリ」を題材にして、設計力・保守性・実務思考を鍛えていきます。1日目のテーマは、「いきなりコードを書かず、“設計の目”でアプリを分解すること」です。題材はこんな感じ...
JavaScript

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

14日目のゴールとテーマ14日目のテーマは「この2週間で身につけた“武器”を言語化して、自分のものにする」です。今日は新しい大きなアプリは作りません。代わりに、自分がもうできるようになっていることを整理する共通パターンを“言葉”としてまとめ...
JavaScript

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

13日目のゴールとテーマ13日目のテーマは「自分で“ゼロから”ミニアプリを設計して作る」です。ここまで、名簿アプリ・タスクアプリ・名言アプリと、僕が用意した“お題”に沿って作ってきました。今日は一歩進んで、どんなアプリにするかを自分で言葉に...
JavaScript

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

12日目のゴールとテーマ12日目のテーマは「外部データを“取ってきて使う”体験をする」です。ここまでで、ブラウザの中だけで完結するアプリ(名簿・タスク)を作ってきました。今日は一歩外に出て、外部サービスからデータを取ってくるJSON という...
JavaScript

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

11日目のゴールとテーマ11日目のテーマは「コードを“人が読める文章”にする」です。ここまでで、あなたはもう「動くアプリ」を作れるようになっています。今日からは一歩進んで、コードをファイルごとに分ける感覚コメントで“意図”を残す書き方「未来...
JavaScript

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

10日目のゴールとテーマ10日目のテーマは「同じことを何度も書かないための“関数化”と、コードの整理(リファクタリング)」です。ここまでで、名簿アプリ・タスクアプリを通して、かなり“動くコード”を書いてきました。今日は一段ギアを変えて、「こ...
JavaScript

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

9日目のゴールとテーマ9日目のテーマは「タスク管理アプリを“実用レベル”に近づける」です。8日目で「追加・完了切替・削除」ができる ToDo アプリができました。今日はそこに、未完了だけ表示する完了タスクを一括削除するタスク数(未完了・完了...
JavaScript

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

8日目のゴールとテーマ8日目のテーマは「タスク管理アプリ(ToDoリスト)の“ちゃんと動く形”を作る」です。これまでの名簿アプリで学んだことを、別テーマのアプリに“移植”していきます。タスクを追加する。タスクを「完了」に切り替える。タスクを...
JavaScript

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

7日目のゴールとテーマ7日目のテーマは「名簿アプリに“検索・絞り込み・並び替え”を足して、便利アプリに育てる」です。6日目で「登録して一覧表示する」まではできました。今日はそこに、名前で検索する年齢で絞り込む年齢順に並び替えるといった“ちょ...
JavaScript

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

6日目のゴールとテーマ6日目のテーマは「ブラウザ上で動く“名簿アプリ”の最初の形を作る」です。4日目で学んだ「オブジェクト+配列」、5日目で学んだ「HTMLとJavaScriptの連携」を組み合わせて、今日は「人を登録して、画面に一覧表示す...
JavaScript

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

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

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

4日目のゴールとテーマ4日目のテーマは「オブジェクトで“1人分の情報”をまとめる」です。昨日までで、配列とループを使って「複数の数字」を扱えるようになりました。今日はそこから一歩進めて、1人分(1件分)の情報を1つにまとめるその“1件”を配...
JavaScript

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

2日目のゴールとテーマ2日目のテーマは「条件分岐で“判断できるコード”にする」です。今日は、コンピュータに「状況を見て、自分で選ばせる」感覚を身につけます。もし〜なら、こうするそうでなければ、別のことをするこの“分かれ道”を書けるようになる...
JavaScript

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

2日目のゴールとテーマ2日目のテーマは「条件分岐で“状況に応じて動きを変える”」です。昨日は「入力して、計算して、表示する」まで行きましたが、今日はそこに「もし〜なら、こうする」という“分かれ道”を加えます。人間は当たり前にやっていることで...
JavaScript

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

1日目のゴールとテーマ1日目のテーマは「JavaScriptで“コンピュータに命令する”感覚をつかむ」です。いきなり難しいことはやりません。今日は、JavaScriptってそもそも何者なのか最小限の環境(ブラウザ+開発者ツール)でコードを書...
JavaScript

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

1日目のゴールと今日やること1日目のテーマは「URL のハッシュ(#)を使って、SPA っぽいタブ切り替えを実現する」ことです。“SPA 風”というのは、ページ全体をリロードせずに、タブを切り替えるだけで画面が変わっていくように見せる、とい...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:モーダルウィンドウ管理

1日目のゴールと今日やること1日目のテーマは「モーダルウィンドウを“クラス”として設計し、きれいに開閉を制御できるようになる」ことです。今日のゴールは、ざっくり言うとこの3つです。モーダルを「1つのクラス」として設計してみるUI の状態(開...
JavaScript

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

1日目のゴールと今日やること1 日目のテーマは「検索・ソート機能付きの一覧アプリを作りながら、高階関数(map / filter / sort)の本質を理解する」ことです。今日の学習ポイントは次の 3 つ。map / filter / so...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(ExchangeRate.hostで通貨変換アプリ)

1日目のゴールと今日やること1日目のテーマは「ExchangeRate.host API を使って“シンプルな通貨レート取得アプリ”を作りながら、fetch / async‑await / エラーハンドリングの基本パターンを体で覚える」こと...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(Nager.Date APIで祝日一覧アプリ)

1日目のゴールと今日やること1日目のテーマは「Nager.Date API を使って “今年の祝日一覧アプリ” を作りながら、fetch / async‑await / エラーハンドリングの基本パターンを体で覚える」ことです。Nager.D...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(Datamuse APIで語彙検索アプリ)

Datamuse API 編 1日目へようこそ今日は 「API 通信アプリの基礎を“実際に動く形”で理解する」 ことがゴールです。Datamuse API は「単語の関連語・類義語・韻を踏む単語」を返してくれる、とても扱いやすい API な...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(LibreTranslate APIで翻訳アプリ)

1日目のゴールと今日やることLibreTranslate API 中級編 1 日目のテーマは「テキストを入力 → API に送信 → 翻訳結果を表示する“翻訳アプリの基礎”を作る」ことです。扱う技術はこの 3 つ。fetchPromise ...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(Datamuse APIで関連語検索アプリ)

1日目のゴールと今日やることDatamuse API 中級編 1 日目のテーマは「単語を入力すると、関連する単語や類義語を API から取得して表示するミニアプリを作る」ことです。キーワードはこの 3 つです。fetchPromise / ...
JavaScript

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

1日目のゴールと今日やることNewsAPI.org 中級編 1 日目のテーマは「ニュース API から記事一覧を安全に取得して、ちゃんと“待ち”と“失敗”を扱えるようになること」です。キーワードはこの 3 つです。fetchPromise ...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(WeatherAPI.comで天気アプリ)

1日目のゴールと今日やること中級編 API 通信アプリ 1 日目のテーマは「fetch と async/await を使って、天気 API から安全にデータを取ってくる」ことです。キーワードはこの 3 つです。fetchPromise / ...
JavaScript

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

1日目のゴールと今日やること中級編の 1 日目は「タイマー & ストップウォッチの基礎ロジックを完全に理解する」ことがテーマです。今日扱うキーワードは次の 6 つ。setTimeoutsetInterval時間管理ロジック開始停止リセットミ...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:ミニ総合アプリ(初級編)

1日目のゴールと今日やること1日目のテーマは「入力 → 一覧表示 → 削除 → 条件分岐までを一つのミニアプリでつなげる」ことです。今日やるのは、超シンプルだけど“アプリっぽさ”がちゃんとあるもの:テキストを入力する一覧に追加されるいらない...
JavaScript

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

1日目のゴールと今日やること1日目のテーマは「フォーム送信の仕組みを“JavaScript で自由にコントロールできるようになる”」ことです。フォーム送信シミュレーターは、「入力 → 確認画面 → 擬似送信完了」という流れを JavaScr...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:タブ切り替えアプリ(初級編)

1日目のゴールと今日やること1日目のテーマは「タブ切り替えアプリの“いちばん小さな仕組み”を理解する」ことです。タブ切り替えアプリとは、「ボタン(タブ)を押すと、対応する画面だけが表示される」という、Webアプリでよく見る仕組みです。今日の...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:タイマーアプリ(初級編)

1日目のゴールと今日やることこの「JavaScript タイマーアプリ(基礎) 初級編」では、最終的に「スタート」「ストップ」「リセット」ができる、シンプルなタイマーアプリを作ることを目指します。でも、1日目のゴールはもっと小さくていいです...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:ランダム表示アプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「ランダムに1つ選んで表示する感覚をつかむ」 ことです。目指すのは、とてもシンプルなランダム表示アプリ。ボタンを押すと「今日の運勢」や「おみくじ結果」がランダムで1つだけ表示される。そのために、今...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:簡単 ToDo アプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「配列でタスクを管理して、画面を“描き直しながら”ToDoリストを動かす感覚をつかむこと」です。作るのは、ほんとにシンプルな ToDo アプリです。テキスト入力して「追加」ボタンを押すと、タスクが...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:入力チェックアプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。ただ文字を受け取るだけじゃなくて、未入力(空)のときに警告を出す。文字が長すぎるときに「長すぎます」と教える。こう...
JavaScript

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

1日目のゴールと今日のテーマ1日目のテーマは「シンプルだけど“設計の考え方”が入ったカウンターアプリを作ること」です。ただの「+1ボタン」ではなく、複数ボタンを持つ。ボタンごとに役割を分ける(イベント分離)。数値の管理をきちんと1か所で行う...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:超初級編

1日目のゴールと全体の流れ1日目のテーマは「JavaScriptに触ってみて、“動いた!”を体で感じること」です。理解度は50%で十分。それよりも「自分の手で打ったコードが反応した」という経験を作りたい日です。今日のゴールは三つです。Jav...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:フォームバリデーションアプリ

この7日間のゴールと全体像この 7 日間は「ログインフォーム風のミニアプリ」を題材に、メールアドレスとパスワードの入力チェックを通して、正規表現での形式チェックエラー表示と submit 制御ユーザー体験(UX)を意識したバリデーション設計...
JavaScript

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

この7日間のゴールと全体像この 7 日間は「ローカル保存対応メモ帳」を題材に、ブラウザだけで完結する“ちゃんとした”アプリを作りながら、次の3つを体に入れることがゴールです。localStorage を使ってブラウザにデータを保存する感覚オ...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:ToDoアプリ(設計力強化編)

この7日間のゴールと全体像この 7 日間は「ToDoアプリ」を題材に、ただ動くものではなく「設計できる人」になることを狙います。テーマは次の 3 つです。状態管理(state):アプリの「今の状態」をどう持つかデータ構造設計:タスクを「配列...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:中級編

この中級編7日間で目指すことこの「1日 120 分 × 7 日・中級編」は、あなたがすでに「変数・if・for・関数・配列・DOM操作・イベント」あたりを触った前提で、「なんとなく動いてる」を卒業して「仕組みを理解して、少し設計できる人」に...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:家計簿編

この7日間プランで作る家計簿アプリのゴールこの 7 日間では、ブラウザ上で動く「シンプル家計簿アプリ」を作ります。機能は次のようなイメージです。日付・内容・金額・種別(収入 / 支出)を入力して追加できる下に収支のリストが表示される合計収入...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:タイマー・ストップウォッチ編

この7日間で作るもののゴールこの 7 日間では、ブラウザで動く「ストップウォッチ+簡単なタイマー」を作ります。ボタンを押すと時間が進んだり止まったりする、“時間を扱うアプリ” なので、以下のような力が身につきます。setInterval /...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:TODOアプリ編

この7日間 TODOアプリ学習のゴールこの 7 日間では、「ブラウザ上で動くシンプルな TODO アプリ」を完成させます。機能は次の 4 つに絞ります。テキスト入力欄にやることを書く追加ボタンでリストに追加削除ボタンで消すチェックボックスで...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:電卓アプリ編

この7日間で作る電卓アプリのゴールこの 7 日間では、「ブラウザで動く電卓アプリ」を完成させながら、JavaScript の超基礎と、画面とプログラムをつなぐ考え方(DOM 操作)を身につけます。電卓は初心者向けプロジェクトとして定番で、数...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:初級編

この 7 日・60 分でどこまで行くかこの「初級編・60 分 × 7 日」は、すでにconsole.log変数・if・関数・配列簡単なおみくじやボタン付きアプリあたりを「なんとなく触ったことがある」前提で進めます。この 7 日間のゴールはこ...
JavaScript

JavaScript | 1 日 30 分 × 7 日アプリ学習:初級編

この 7 日間・初級編で目指すゴールこの「初級編」では、すでに「超初級」でコンソールでコードを動かす変数、if、関数、配列、ランダム簡単なおみくじアプリあたりを触った人を想定して、もう一歩「アプリ寄り」に踏み込みます。この 7 日のゴールは...
JavaScript

JavaScript | 1 日 30 分 × 7 日アプリ学習:超初級編

この 7 日間で目指すゴールこの「超初級編」では、たった 7 日 × 1 日 30 分で「自分の手で動くミニアプリ」を作れるところまで行きます。難しい理論は一旦置いておき、次の三つだけを大事にします。自分の手でコードを書く書いたら必ず動かし...
スポンサーリンク