JavaScriptを学ぶ - コーディング講座アプリのアイコン

JavaScriptを学ぶ - コーディング講座

教育 · 無料 · iOS & Android · CoddyKit

JavaScriptを学ぶ - コーディング講座 — ポケットに本格的なコンソールを備えたJavaScriptコース

JavaScriptを学ぶ - コーディング講座は、最初の変数からイベントループまで学べる、59の短いコースと200のレッスンを収録した無料のiOS/Android向けJavaScriptコースです。JavaScriptはスマートフォン上で直接実行されるため、内蔵のJSエディタとコンソールがすぐに答えを返します。出力を予測する、バグを探す、今週のkataに挑戦するといった毎日の練習で、コードが自然と身につきます。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
価格
無料、Proへのアップグレード
対応プラットフォーム
iOS、Android
対応言語
22
対象年齢
4+
バージョン
82.6.1
必要環境
iOS 15.1以降
App Store
5.0 ★ (1)
学習パスのカード、毎日の目標、機能リクエストの行を表示したJavaScript Academyのホーム画面全体の進捗と無料レッスンが表示された「Introduction to JavaScript」コース画面。その横にAIツールパネルが表示されています
59コース、A1からC1
デバイス上で動作JSエディタとコンソール
毎日JS Labの練習
エンジンはスマートフォン上で動作するため、答えがすぐに返ってきます。

JS Labはデバイス上でJavaScriptを実行します。コンソールに1行入力して、結果をすぐに確認できます。また、出力予測カードでは、アプリにコードスニペットを実行させて、たぶんこう動くだろうという説明ではなく、実際の出力を表示できます。

概要

JavaScriptを学ぶ - コーディング講座は、JavaScriptをステップごとに学べる無料のiOS/Android向けアプリです。A1からC1までのレベルに分かれた59のコースと200のレッスンで、値とスコープ、関数とthis、DOM、Fetch API、promiseとasync/await、クロージャ、クラス、ジェネレーター、イベントループを扱います。レッスンに加えて、スマートフォン上で動作するJSエディタ、JavaScriptコンソール、毎日の練習を利用できます。さらに、概念やエラーメッセージの意味が分からないときのためにAI Mentorも備えています。

アプリの内容

画面イメージ

学習パスのカード、毎日の目標、機能リクエストの行を表示したJavaScript Academyのホーム画面
学習パスホーム画面を開くと、毎日の目標とともに現在のコースが表示されるため、次のレッスンまでワンタップで進めます。
全体の進捗と無料レッスンが表示された「Introduction to JavaScript」コース画面。その横にAIツールパネルが表示されています
コース画面各コースでは、全体の進捗と無料で利用できるレッスンが表示され、横からAIツールパネルがのぞいています。
JavaScriptで書かれた短いisPrime関数と、AIヘルパーのツールバーを備えたコードエディター
コードエディターエディターには小さなJavaScriptプログラムと、コードライブラリ、コード生成、AIによる改善機能を備えたツールバーがあります。
概念の解説、ヒント、クイズ、学習ロードマップの作成を提案するAIチャット画面
AIチャットAIチャットでは、重要な概念の解説、ヒントの提供、クイズの出題、学習ロードマップの作成を提案します。
学習パス、毎日の目標、Skill Hubが表示されたライトテーマのホーム画面
ホーム、ライトテーマライトテーマにした同じホーム画面で、毎日の目標の下にSkill Hubが表示されています。

コース

JavaScriptコースで学べること

アプリ独自のコース一覧にある59コースと200レッスン。最初の変数から、ブラウザーやasyncコード、さらに高度な言語機能まで学べます。

  1. JavaScriptへようこそ

    概念と環境構築から始め、値と型、変数とスコープ、制御フローへ進み、配列とオブジェクトの基礎にも触れます。

  2. 実践的なJavaScript

    テンプレートリテラル、オプショナルチェーンとnull合体演算子、分割代入、restとspread、高階配列メソッド、JSON、エラーハンドリングを学びます。

  3. DOMとイベント

    DOMの選択と走査、要素の操作、イベント処理、イベントデリゲーションと伝播、フォームと入力を学びます。

  4. ネットワークとストレージとの通信

    Fetch API、localStorageとsessionStorageを使ったWebストレージ、FormDataとファイル処理、クライアント側ストレージのIndexedDBを学びます。

  5. 非同期JavaScript

    コールバック、Promiseとマイクロタスク、実践的なasync/await、タイマーとスケジューリング、イベントループの詳しい仕組みを学びます。

  6. 関数、クロージャ、クラス

    関数とthis、クロージャとモジュールパターン、カリー化と合成、クラスと継承、高度なthisバインディングを学びます。

  7. 高度な言語機能

    イテレーターとジェネレーター、MapとSet、ProxyとReflect、シンボル、正規表現、不変性を学びます。

  8. モジュール、Worker、パフォーマンス

    ESモジュールとCommonJSの違い、Nodeとブラウザーの違い、Web Workers、サービスワーカー、パフォーマンスとメモリ、テストを学びます。

使い方

JavaScriptセッションの流れ

1回のセッションでは、短いレッスンと実行できる課題に取り組み、最後に簡単な確認を行います。説明と練習を同じ時間の中で完結できます。

  1. 短いレッスンを読む

    数分で終わるレッスンに取り組みましょう。分かりやすい説明に、質問と小さなコード課題が付いています。最初のコースは無料で、通信環境が弱くてもレッスンを続けられます。

  2. JS Labでコードを実行する

    コンソールに入力し、毎日のカードで出力を予測して、エンジンが実際の答えを表示する様子を確認できます。または、テストケースの一覧を使って壊れたプログラムを修正できます。

  3. 確認して、さらに深く学ぶ

    クイズやコーディングミッションで仕上げましょう。非同期コードが分かりにくいときはイベントループをステップごとに確認し、どうしても理解できないことがあればAI Mentorに質問できます。

内容

アプリに含まれるもの

59

コース、A1からC1

値と型からDOMイベント、fetch、promise、async/await、クロージャ、ProxyとReflect、正規表現、パフォーマンスまでを扱う200のレッスン。

デバイス上で動作

JSエディタとコンソール

内蔵エディタでJavaScriptを書いて実行し、コンソールで1行コードを試し、プログラムを保存して後から開けます。エディタのAI Toolsはプログラムを確認し、適用できる修正を提案します。

毎日

JS Labの練習

出力予測、テストケースを使ったバグ探し、無料の今週のkata、イベントループのステップ確認、DOMアリーナ、時間制限付きの面接問題5問、自分のミスから作られる復習カードデッキに取り組めます。

60

コーディングミッション

Hello Worldやテンプレートリテラルから、FizzBuzz、クロージャ、Merge Sort、Quicksort、グラフ上のBFSまたはDFSまで、3つのレベルで学べる短い演習です。

20

ガイド付きプロジェクト

Order Totals、Word Frequency Counter、Async Data Pipeline、Mini Event Busなどのプログラムを、1ステップずつ作成できます。各ステップは実行時にチェックされます。

AI

AI Mentor

概念やエラーで行き詰まったときは、自然な言葉で質問できます。無料ユーザーは毎日数回質問でき、Proでは1日の制限がなくなります。

背景

JavaScriptは読むだけではなぜ学びにくく、何を練習する必要があるのでしょうか?

JavaScriptは、読めば分かりやすいのに予測するのが難しい動きをします。変数に関数を代入でき、thisは関数の呼び出し方によって変わり、コードは書かれた順番どおりに実行されるとは限りません。説明を読むことは役立ちますが、コードを実行し、予想と異なる出力を目にして初めて、その意外な動きが身につきます。だからこそJavaScriptの学習には、すぐに使えるコンソールと、スニペットを実行する前に何が出力されるか予測する習慣が最適です。

スコープとクロージャ変数が存在する場所

関数は、自分が書かれた場所の周囲にある変数を記憶します。その場所の実行が終わった後でも同じです。この1つの考え方で、プライベートな状態、モジュールパターン、そして面接でよく出るいくつもの質問を説明できます。

thisの値よくあるつまずきどころ

ほとんどの言語とは異なり、thisが何を指すかは、どこで定義されたかではなく、関数がどのように呼び出されたかによって決まります。アロー関数、call、apply、bindはそれぞれ答えを変えるため、これらを混同するとバグの原因になりがちです。

イベントループ非同期コードが人を混乱させる理由

JavaScriptは一度に1つの処理を実行し、その後、待機中の処理が入ったキューに戻ります。0ミリ秒に設定したタイマーよりもpromiseのコールバックが先に実行されます。そのため、コールスタック、マイクロタスク、タスクを思い描くまでは、出力の順番が間違っているように見えることがあります。

BrowserとNode1つの言語、2つの実行環境

コア言語はどちらも同じですが、BrowserにはDOM、イベント、fetchが追加され、Nodeにはファイルとプロセスが追加されます。どの機能がどちらに属するのかを知っておけば、分かりにくいエラーメッセージに悩まされることが少なくなります。

適しています

向いている方・向いていない方

次のような方におすすめです

  • プログラミング経験がなく、最初の変数からJavaScriptを説明してほしい
  • コードを1行実行して、何が出力されるか確認しながら学びたい
  • 長時間の勉強ではなく、数分で終えられる毎日の練習がしたい
  • JavaScriptの面接対策として、解答付きの問題と時間制限付きの練習に取り組みたい
  • パターンをコピーするだけでなく、asyncコードとイベントループを理解したい

次のような方には適していません

  • 複数ファイルで構成される本格的なWebプロジェクトを作りたい — その場合は、やはりノートパソコンと本格的なエディターが適しています
  • すべて無料だと思っている — 最初のコース、1つのプロジェクト、2つのミッションは無料で、残りはProで利用できます
  • 無料アプリの広告が苦手 — 無料版には広告が表示され、Proでは広告がなくなります
  • すでに毎日JavaScriptを書いていて、コースではなくリファレンスがほしい

ご質問

よくある質問

スマートフォンで学べる、良いJavaScriptコースはありますか?

JavaScriptを学ぶ - コーディング講座は、スマートフォン向けに作られたJavaScriptコースです。59の短いコースと200のレッスン、端末上でコードを実行できる内蔵のJSエディターとコンソール、毎日の練習カードを利用できます。レッスンでは、短い解説に問題と小さなコード課題を組み合わせているため、毎回の学習を実際に実行した成果とともに終えられます。

このアプリでスマートフォン上のJavaScriptコードを実行できますか?

はい。JS Labはスマートフォン自体でJavaScriptを実行するため、コンソールに結果がすぐ表示され、エディターでは完全なプログラムを実行できます。プログラムを保存して後から再び開くこともでき、エディターのAI Toolsでプログラムを確認し、適用する修正案を提案してもらえます。

完全な初心者がJavaScriptコーディングを最短で学ぶには、どうすればよいですか?

自分でコードを実行する、短く規則的な練習がおすすめです。JavaScriptを学ぶ - コーディング講座では、値と変数から始め、毎日の目標と連続学習記録で習慣的な学習を後押しし、試行用のコンソールも提供します。毎日の出力予測カードで、コードを実行する前に動作を考える習慣が身につきます。

JS Labとは何ですか?

JS Labは、JavaScriptを学ぶ - コーディング講座の毎日の練習エリアです。コンソール、出力予測カード、テストケースで判定されるバグ探し、週間カタ、イベントループステッパー、DOMアリーナ、時間制限付きの面接問題5問、自分の間違いをもとに作られた復習デッキを利用できます。

このアプリではasync/awaitとイベントループについて説明していますか?

はい。コールバック、Promiseとマイクロタスク、実践的なasync/await、イベントループの詳しい仕組みを扱うコースがあります。さらに、イベントループツールでは、コールスタック、マイクロタスク、タスクを1つずつ順番に進められるため、なぜその順序で出力されるのかを確認できます。

JavaScriptを学ぶ - コーディング講座はJavaScriptの面接対策に役立ちますか?

解答付きのJavaScript面接問題50問と、JS Labで5問に時間制限付きで挑戦できるInterviewモードがあります。クロージャ、this、Promise、イベントループなど、面接で重視されるトピックには、それぞれ専用のコースがあります。

JavaScriptを学ぶ - コーディング講座は無料ですか?

無料でダウンロードできます。最初のコース、最初のガイド付きプロジェクト、2つのコーディングミッション、JS Labの毎日の練習、毎日のAI Mentor利用枠は無料で、無料版には広告が表示されます。Proでは、すべてのコース、プロジェクト、ミッション、無制限のAI Mentor、修了試験が利用でき、広告も表示されなくなります。

証明書は発行されますか?

はい。JavaScriptを学ぶ - コーディング講座の最終試験に合格すると、修了証明書を取得できます。これは取り組んだ学習内容を記録するもので、認定資格ではありません。そのため、自分で内容を説明できるプロジェクトと一緒に提示するのがおすすめです。

言語だけでなく、ブラウザーについても学べますか?

はい。言語そのものに加えて、DOMの選択と操作、イベントとイベントデリゲーション、フォーム、Fetch API、localStorage、IndexedDB、Canvas、WebSockets、Web Workersを扱います。Nodeとブラウザーを比較する専用コースもあり、それぞれの機能がどちらに属するのか理解できます。

対応しているプラットフォームと言語は何ですか?

JavaScriptを学ぶ - コーディング講座は、App Storeを通じてiPhoneとiPadで、Google Playを通じてAndroidで、22言語に対応しています。App Storeでのレーティングは4+です。

始める

今日、JavaScriptの最初の1行を書いてみましょう

iOSとAndroidで、22言語に対応し、無料で始められます。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
最終確認日 · CoddyKitが公開 · プライバシーポリシー
iOS および Androidで利用できます。