サンプルプロジェクト(1~12章)

第1章:アプリ開発入門

プログラミングを行うためには、まずプログラムを記述するためのソフトウェアが必要になります。そして記述したプログラムをコンピューターにインストールできる形に変換するソフトウェアや、動作確認を行うためのソフトウェアなども必要です。
こういったプログラミングに必要なソフトウェアを一つ一つ、自分のパソコンにインストールするのは大変です。そこで、最近はプログラミングに必要なソフトウェアを統合的にまとめた「統合開発環境(IDE)」を使うケースが増えています。

プロジェクトの作成

ひな形 ※「最小限のテンプレート」を利用します
完成版 ※ 完成版はありません

第2章:HTML入門

Web ページやモバイルアプリの画面には、さまざまな色や画像が散りばめられ、とても華やかに装飾されていると思います。しかし実は、画面の元となっているファイル(「ソース」と呼びます)には文字だけでページの内容が記述されています。その記述言語がHTML と呼ばれるものです。

第3章:CSS入門

前章で学んだHTML は、画面に表示する内容を定義するための技術でした。本章で学ぶCSSをHTML に組み込んで使うことで、画面を装飾することができます。その記述言語がHTML と呼ばれるものです。

プロジェクトの作成

ひな形 ※前の章の完成版をご利用ください。

第4章:JavaScript入門

本章からはいよいよアプリを動かすための技術、JavaScriptを学んでいきます。JavaScriptは、主にWebページやモバイルアプリの画面上の部品を操作するために利用されます。なおJavaScriptと似たような名前のプログラミング言語に「Java」というものがありますが、これはJavaScriptの略ではありません。

プロジェクトの作成

ひな形 ※「最小限のテンプレート」を利用してください。

第5章:条件分岐

ここまでに実行したプログラムは、上から順番にすべての処理が実行されていました。しかしこれだけでは実用的なアプリは作れません。例えばゲームではよく、選択肢に応じてその後のシナリオが変化する、といった仕組みがあると思います。そのようにある条件に応じてその後行われる処理を振り分けることを「条件分岐」といい、アプリ開発には欠かせない考え方です。
本章では「今日は何日?」アプリを発展させて、曜日ごとにメッセージが変わるアプリを作成し、条件分岐を実現する方法を学びます。

プロジェクトの作成

ひな形 ※前の章の完成版をご利用ください。

第6章:関数

前章では日付と曜日を表示するアプリを作りましたが、コードを少しずつ追記してきたためにだんだんとプログラムが長くなってきました。
それどころか本格的なアプリを作る場合は、コードが数百行、数千行、数万行といった途方もない長さになる場合もあります。
そのような長いコードがずらずらと記述されていると非常に読みづらくなってしまうため、機能単位でコードを切り分けて、「関数」というひとまとまりを作り、それらを複数組み合わせることでプログラムを構築していきます。

プロジェクトの作成

ひな形 ※前の章の完成版をご利用ください。

第7章:イベント

これまでに作ったアプリは起動時にしか処理が動いていなかったので、ユーザーは最初に表示された画面をただ見ることしかできませんでした。皆さんが普段使っているアプリには、「メニューアイコンが押されたらメニューを表示する」「ボタンが押されたら登録を行う」といった機能があると思います。このようにユーザーの操作を受けてから何らかの処理を行うには、「イベント」という仕組みを利用します。

第8章:DOM

ここまで、JavaScript から画面に文字列を表示する方法として「document.writeln」という命令を使ってきました。しかしこの命令は実際のアプリ開発ではまず使うことはありません。
一般的にアプリを作るときはHTML で表示内容を定義し、CSS でデザインを適用してからJavaScriptを記述するため、「document.writeln」で既に完成している画面の タグ内に文字列を挿入すると、せっかく綺麗に作った画面が崩れてしまうのです。そこで、すでに完成している画面に対して変更の操作を加えるための仕組みとして、DOM という技術があります。DOM を使うと、表示内容の変更はもちろん、タグの属性やスタイルの変更などがとても簡単に行えるようになります。

第9章:フォーム

本章では、ユーザーからの情報を入力させる「フォーム」について学習します。みなさんが普段使っているアプリにも、ユーザーの情報を入力する登録画面などがあると思います。フォームには、名前やメールアドレスなどの文字列を入力するテキストボックスや複数の選択肢を表示するプルダウンメニューなど、さまざまなパーツが用意されています。

第10章:いろいろな演算子

演算子とは、足し算を行う「+」や、比較を行う「==」などの、各種記号のことです。本章では、これまでに学んだ演算子以外の、さまざまな演算子を紹介します。

第11章:配列

これまで、数値や文字列などのデータは変数という入れ物の中に格納していました。扱うデータの件数が少ない場合は問題ありませんが、10個、20個、といったたくさんのデータを扱いたい場合、一つ一つ変数を宣言して用意するのは面倒です。そこで、たくさんのデータをまとめて格納することができる「配列」という仕組みが用意されています。

第12章:繰り返し

プログラムの作成中に、同じ処理を何回も繰り返し実行したい、という場面が出てくるはずです。例えば1~100 までの数の合計を求める処理や、100個分の要素を持つ配列のデータを1件ずつ表示する処理などが挙げられるでしょう。
同じ処理を何度も実行したい場合、コピー&ペーストで処理を増やす方法ではキリがないので、繰り返しを行うための特別な文法を使って記述します。

 

サンプルプロジェクト(付録3・ハードウェア機能)

 

サンプルプロジェクト(付録4・アプリ集)

 

スライド教材


Monaca青本スライド(pptx版)
Monaca青本スライド(PDF版)
Google Classroom で共有

動画教材

動画配信プラットフォームより動画を配信しています。
Youtubeへの配信は現在準備中です。

Vimeo版(Web閲覧可能・ダウンロード可能)

Vime版のダウンロード方法

ダウンロードボタンから動画をダウンロードできます。

動画をGoogle Classroom で共有

1 2 3 4 5 6 7 8 9 10 11 12
共有