30日間無料の課題

30日間無料で、自分の動画アプリを作る。

何から始めるか、もう迷わない。毎日やることは1つだけ。
1日3分から、お手本を見ながら本物のコードを書きます。

LINEで30日間無料をはじめる

カード登録なし・自動で料金はかかりません

30日目に完成する動画アプリの画面
学習画面「30日でつくる動画アプリ」の、30日目の完成版です
  • 30日分の課題
  • 3分から
    1日あたり
  • 2日目に
    URL が付く

毎日の1つ

その日にやることは、
1つだけ。

30日分、毎日やることが決まっています。迷うのは、今日の1つをやるかどうかだけです。

  • 1日3分から本物のコードを、1か所ずつ書き換えていきます。
  • 書いた1行が、その場で画面に出る毎日、書き換えたところがその場でアプリの画面に出ます。
  • わからなければ、LINE で聞けるエラーで止まったら、LINE で質問できます。
2日目の課題で、アプリの名前を書きかえる画面

2日目には、自分の名前を付けたアプリに URL が付き、人に送れます。画面は実際の課題です。

30日の中身

30日で、何をどの順に作るか

1週目は画面、2週目は動き、3週目はデータ、4週目は仕上げ。30日分の課題を、全部ここにのせました。

WEEK 11〜7日目

画面を作る

HTML と CSS で、ヒーローと棚のあるホーム画面を自分のものにする

1日目の課題の画面
  1. DAY 01まずは完成形を確認しようHTMLCSS
  2. DAY 02アプリに名前を付けようHTMLタグ<h1>
  3. DAY 03好きな作品を1本のせよう<p>段落
  4. DAY 04ポスターを付けよう<img>src 属性
  5. DAY 05テーマの色を決めようCSS変数カスタムプロパティ
  6. DAY 06AIに並べ方を頼もうプロンプトレイアウト
  7. DAY 07棚に作品を3本並べよう<ul><li>

WEEK 28〜14日目

動きを付ける

JavaScript で、押すと動画が流れ、マイリストに入るアプリにする

8日目の課題の画面
  1. DAY 08再生ボタンを付けよう<button>UI部品
  2. DAY 09押すと返事をするボタンイベントonclick
  3. DAY 10本当に動画が流れるようにしよう<video>メソッド
  4. DAY 11作品を一覧のデータにしよう配列データ
  5. DAY 12一覧から棚を作ろうループforEach
  6. DAY 13詳細の窓を開こうDOM表示の切り替え
  7. DAY 14マイリストに入れようpush配列への追加

WEEK 315〜21日目

データで動かす

作品をデータで持ち、覚える・並べる・探すができるアプリにする

15日目の課題の画面
  1. DAY 15作品に長さを持たせようオブジェクトプロパティ
  2. DAY 16続きから見られるようにしようlocalStorageJSON
  3. DAY 17まだ見ていない棚を作ろうfilter論理否定 !
  4. DAY 18TOP 10 を作ろうsortランキング
  5. DAY 19検索で探そう検索includes
  6. DAY 20見つからないときの一言条件分岐if
  7. DAY 21学んだ日のカレンダーを作ろうデータの可視化

WEEK 422〜30日目

仕上げて届ける

スマホで整え、AI と一緒に磨き、人に使ってもらう

22日目の課題の画面
  1. DAY 22シリーズの画面を作ろう状態管理state
  2. DAY 23スマホでも崩れないようにしようレスポンシブメディアクエリ
  3. DAY 24AIにあらすじを書いてもらおうプロンプト設計生成AI
  4. DAY 25AIと一緒にバグを直そうデバッグエラーメッセージ
  5. DAY 26あなたのおすすめ棚を作ろう関数の組み合わせ
  6. DAY 27共有したときの見え方を整えようOGP<meta>
  7. DAY 28もらった一言で直そうユーザーテストpadding
  8. DAY 29次の授業へ自動で進もうonended自動再生
  9. DAY 30完成と、次の一歩フロントエンドポートフォリオ

手に入るもの

30日後、
手元に残るもの。

30日後には、家族や友だちに見せられる自分のアプリができあがります。

  • HTML見出し・画像・ボタン・動画を、何のための印か説明して書ける
  • CSS色をまとめて変え、スマホでも崩れない画面にできる
  • JavaScript「押したら何をするか」を書き、作品の一覧を並べ替え・絞り込みできる
  • AI頼みたいことを言葉にし、エラーを渡して AI と一緒に直せる

手元に残るもの

  • 自分の名前の動画アプリ(URL付き)
  • 使ってもらった人の感想

30日の課題のほかに、本来は入学してから使うスクールの教材 (116コース・2,455レッスン) も、30日間無料で使えます。

※30日は、お手本を見ながら画面の側を作るところまでです。白紙から1人でアプリを作る力や、サーバー・データベースなどの裏側、仕事で通用する力は、入会後の18ヶ月で身に付けます。

30日目に完成する動画アプリの画面
完成する動画アプリをスマホで開いた画面

完成版をパソコンとスマホで開いた画面 (学習画面「30日でつくる動画アプリ」より)

30日のあと

30日を過ぎても、
自動で料金はかかりません。

  • カードの登録は要りません
  • 30日を過ぎても、自動で料金はかかりません
  • 続けて学ぶ場合だけ、ご自分でお申し込みください

ライブ授業とメンター面談は、入学後にご利用いただけます。

入学後は、基礎から Web 開発・クラウド・チーム開発まで、18ヶ月かけて学びます。

18ヶ月の学び方を見る

よくある
ご質問。

文系で未経験。私にもできますか?

お手本を見ながら1行ずつ書きます。

2日目には、自分の名前を付けたアプリができます。

独学で何度も挫折しました。

書いた1行が、その場で画面に出ます。

わからないことは LINE で質問できます。

何から学べばいいかわかりません。

30日分、毎日やることが決まっています。

その日の1つを進めるだけです。30日分の中身は、このページの「30日の中身」に全部のせています。

忙しくて、学ぶ時間がとれません。

1日3分から始められます。

30日を過ぎたら、料金がかかりますか?

自動で料金はかかりません。

カードの登録は要りません。続けて学ぶ場合だけ、ご自分でお申し込みください。

無料の30日で使えないものはありますか?

ライブ授業とメンター面談は、入学後のご利用です。

30日の間は、教材のレッスンと「30日でつくる動画アプリ」の課題を使えて、わからないことは LINE で質問できます。

30日で、仕事ができるようになりますか?

いいえ。30日は、お手本を見ながら画面の側を作るところまでです。

白紙から1人でアプリを作る力や、サーバー・データベースなどの裏側、仕事で通用する力は、入会後の18ヶ月で身に付けます。

LINE で勧誘されませんか?

しつこい勧誘はしません。

LINE はいつでもブロックできます。

はじめ方

今日の1つから、30日間無料で。

  1. 1LINE でログインボタンを押すと LINE が開きます。友だち追加も一緒にできます。LINE
  2. 2メールと目的を入れて登録このページに戻るので、ニックネーム・メール・目的を入れて登録します。カード登録は要りません。
  3. 330日間、無料で学べる教材と動画アプリの課題を進め、わからないことは LINE で質問できます。

登録は無料です。しつこい勧誘はしません。
LINEはいつでもブロックできます。

LINEで30日間無料をはじめる

カード登録なし・自動で料金はかかりません