TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのチェックボックスでtrueとfalseを取得する方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのチェックボックスでtrueとfalseを取得する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのチェックボックスでtrueとfalseを取得する方法について解説しています。論理値trueとfalseの基本と利用例、prop()メソッドとcheckedプロパティを使った取得方法を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのチェックボックスでtrueとfalseを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

チェックボックスでtrueとfalseを取得する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

チェックボックスで取得できる値

チェックボックスはon / offの値以外に、valueで指定した値を取得することができます。サンプルを作成しましたので、確認してみましょう。

上のチェックボックスには何も指定していない素の状態です。チェックをいれるとonと表示されるのが分かります。下のチェックボックスはvalueにvalue値と入れました。チェックをいれるとvalueに入れた値が表示されるのが分かります。

See the Pen
checkbox1 by This is standard (@koutafunahashi)
on CodePen.

 

trueとfalseについて

true/falseとは論理値といわれ、if文を用いて使用します。

例）もしAならtrueでそれ以外はfalseを返します。

if(A){
true
}else{
false
}

 

[PR] Webデザインで副業する方法とは

trueとfalseを取得してできること

よく申込みフォームなどで、チェックボックスを用いてtrue/falseを判定し、チェックされていなければエラー文やコンテンツを表示するなどの処理が行われます。

 

trueとfalseを取得してみよう

それではtrueとfalseを取得してみましょう！サンプルを作成しましたので、確認してみましょう！

真偽の判定にはprop()メソッドを使い、checkedプロパティを入れて判定します。checkが入ったらtrueを表示し、入っていなければfalseを表示するscriptです。

See the Pen
checkbox2 by This is standard (@koutafunahashi)
on CodePen.

関連記事：HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】

関連記事：アンケートなどに役立つ！HTMLでチェックボックスを作成する方法【初心者向け】

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでドロップダウンメニューを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ドロップダウンメニューを表示する方法についてテックアカデ...
HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイトのト...
HTML

HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】

HTMLのページが重い原因を調べて読み込み速度を改善する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

HTMLのインジェクション攻撃を防ぐ方法を現役デザイナーが解説【初心者向け】

HTMLのインジェクション攻撃を防ぐ方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そも...
HTML

HTMLの動画ダウンロードを禁止する方法を現役エンジニアが解説【初心者向け】

HTMLの動画ダウンロードを禁止する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
HTML

あわせてよく読まれている記事

JavaScriptでcheckboxを使う方法を現役エンジニアが解説【初心者向け】

JavaScriptでcheckboxを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでcheckboxを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   checkboxとは HTMLで複数の選択をさせる場合に使用する部品です。 下記のcheckboxの例では、0個-3個を選択できます。   基本的なcheckboxの作り方 inputタグのtypeをcheckboxにして、表示する文字を記述することでチェックボックスを作れます。 <input type="checkbox">チェック1 この作り方の場合は、チェックを入れるためには四角の中をクリックしないとチェックできません。 表示した文字もクリックしてもチェックが入るようにするとユーザーに親切です。その場合は、下記のようにlabelタグで囲うことで四角の中と文字全体のどこをクリックしてもチェックできるようになります。 <label> <input type="checkbox">チェック1 </label> また、下記のようなCSSをつけることでマウスカーソルの形でクリックできる場所（チェックできる場所）をユーザーに伝えることができます。 label, input[type='checkbox'] { cursor: pointer; }   [PR] Webデザインで副業する方法とはcheckboxに付け加えたい機能 下記の3つのチェックボックスを表示するHTMLを用意して、JavaScriptでよくある処理を記述していきます。   HTMLソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <label> <input type="checkbox" value="チェック1">チェック1 </label> <label> <input type="checkbox" value="チェック2">チェック2
JavaScript

【出欠確認に使える！】Excel(エクセル)でチェックボックスを作成する方法

Excel(エクセル)は、統計的分析だけでなく、請求書などの書類発行やアンケートなどにも利用可能で、とても便利です。 ここでは、アンケートなどに便利なチェックボックスの使い方を紹介します。     目次 <作成前に> [開発]タブを表示する チェックボックスを作成する方法 チェックボックスを利用して集計する方法   <作成前に> [開発]タブを表示する チェックボックス作成の具体的な操作に入る前に、チェックボックスを作成する上で必須な[開発]タブの表示方法を説明します。 まず、[ファイル]タブをクリックします。 [オプション]をクリックしてください。 そうすると、[Excel のオプション]ダイアログボックスが表示されます。 左枠の[リボンのユーザー設定]をクリックしてください。 右枠の「開発」にチェックを入れて、[OK]を押します。 これで、チェックボックスの作成に必要な[開発]タブが表示されました。   [PR] Webデザインで副業する方法とはチェックボックスを作成する方法 まず、[開発]タブをクリックして開き、[挿入]をクリックしてください。 そうすると、選択肢が表示されますので、[チェックボックス]をクリックしましょう。 そして、Excelシート内の任意の場所を左クリックしてみると、チェックボックスが表示されるはずです。 表示されたチェックボックスは、ドラッグ＆ドロップで移動できますので、チェックボックスを表示したい場所に移動させてください。   チェックボックスを利用して集計する方法 チェックボックスにチェックがいくつ入っているかを数える方法を紹介します。 ただ、チェックボックス自体を使ってのカウントはできません。 なので、 チェックボックス内のチェックの有無を、指定したセルにリンクさせる それらのセルの中からチェックが入っているものを、関数を使って集計する という方法をとります。 チェックボックスを右クリックし、表示されたコンテキストメニューにある、[コントロールの書式設定]をクリックします。 表示された[コントロールの書式設定]ダイアログボックスの、[コントロール]タブをクリックして開きます。 そして、下の画像の赤枠で囲まれているボタンを押してください。 そうすると、下の画像のように、ダイアログボックスは小さく表示されます。 リンクするセルとして指定するセルは任意です。 例えば、チェックボックスの右のセルを指定するとしましょう。 指定が終わると、[コントロールの書式設定]ダイアログボックスに反映されるので、[OK]を押してください。 この作業により、チェックボックスにチェックが入っていれば「TRUE」、入っていなければ「FALSE」で表示されます。 この「TRUE」・「FALSE」を、COUNTIF関数を用いて集計していきます。 チェックが入っている数(「TRUE」)を数えるので、「=COUNTIF(,TRUE)」という数式を入れてください。 そうすると、チェックボックスにチェックが入った数をカウントできます。   以上、Excel でのチェックボックスの作り方を紹介しました。 これに合わせて、プルダウンリストの作り方もマスターすれば、本格的なアンケートが作れるようになりますよ！  
Excel

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

JavaScriptでチェックボックスの選択状態を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでチェックボックスの選択状態を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでチェックボックスの選択状態を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   チェックボックスの選択状態について HTML要素にチェックボックスがあります。チェックボックスは複数の選択を行うような場合に使用する要素です。 チェックボックスはHTMLでは以下のように記述します。その際「checked」という属性を記述することで、チェックされた状態となります。 <input type="checkbox" name="options" value="禁煙" checked> 禁煙   JavaScriptでチェックボックスの状態を取得する方法 JavaScriptでチェックボックスがチェックされているか、状態を取得するには「checked」属性を使用します。チェックされていればtrueとなります。 要素.checked 前述の通り、チェックボックスは複数の選択を行うような場合に使用します。そのためチェックボックスを使用する際は以下のようにするのが一般的です。 HTMLで複数のチェックボックスに同じ「name」属性を指定する JavaScriptでは「getElementsByName」関数でチェックボックス要素を取得する for文などの繰り返し構文で順番にチェックされているか評価を行う   [PR] Webデザインで副業する方法とは実際に書いてみよう 今回のサンプルプログラムでは一般的なチェックボックスの評価方法について確認していきます。実行結果はデベロッパーツールのコンソールに出力されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <input type="checkbox" name="options" value="禁煙" checked> 禁煙 <input type="checkbox" name="options" value="朝食付き"> 朝食付き <input type="checkbox" name="options" value="温泉"> 温泉 <input type="button" value="確認" onclick="func1()"/> <script language="javascript" type="text/javascript"> const func1 = () => {
JavaScript

HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】

HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法について詳しく説明していくね！ 大石ゆかり お願いします！   チェックボックスのデフォルト表示を見てみよう まず、チェックボックスのデフォルト表示を見てみましょう。コードはこのようになります。 <input type="checkbox" />ここをチェックするよ これが基本的なチェックボックスのHTMLコードとなります。   HTMLとCSSでチェックボックスの色と形を変える方法 チェックボックスの色や形を変えたい場合はデフォルトのチェックボックスを非表示にし、疑似要素であるbeforeとafterを使うのが一般的ですが、inputタグには疑似要素が使えません。なので、labelタグにfor要素を使い、   <input type="checkbox" id="check1"> <label for="check1">ここをチェックするよ</label>   cssは input#check1[type="checkbox"]+label{ /*ここにcssを書く*/ }   とします。また、チェックボックスをチェックしたときに表示される色や形については　CSSにて input#check1[type="checkbox"]:checked{ /*ここにチェックボックスがチェックされたときのcssを書く*/ } と記述するとチェックされたとき用のスタイルを当てることができます。   [PR] Webデザインで副業する方法とはHTMLとCSSでチェックボックスの色と形を変えてみよう 言葉で説明しても難しいので、実際にHTMLとCSSを記述してみました。 HTML <input type="checkbox" id="check1"> <label for="check1">ここをチェックするよ</label>   css     input[type="checkbox"] {             display: none;             /*デフォルトのチェックボックスを非表示にする*/         }         input#check1[type="checkbox"]+label {             position: relative;             padding-left: 15px;             /*チェックボックス分の隙間を作る*/         }         input#check1[type="checkbox"]+label::before {             content: "";             display: block;             width: 12px;             height: 12px;             position: absolute;             top: 50%;             left: 0;             transform: translateY(-50%);             /*中央ぞろえにする*/             border: 1px solid blue;             /*お好きなや太さで。*/             border-radius: 3px;             cursor: pointer;             /*ポインターを表示する*/         }         input#check1[type="checkbox"]:checked+label::before {             /*チェックしたときの箱の色を変える*/             background: cornflowerblue;         }         input#check1[type=checkbox]:checked+label::after {             /*チェックの✓をつくる*/             content: "";             display: block;             width: 10px;             height: 6px;             box-sizing: border-box;             border-bottom: 2px solid #fff;             border-left: 2px solid #fff;             position: absolute;             /*ここから下は位置を調整する*/             top: 40%;             left: 5px;             /*箱を斜めに傾けてチェック表示にする*/             -webkit-transform: rotate(-45deg);             transform: rotate(-45deg) translateY(-50%);         }   監修してくれたメンター メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、 現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

人気の子ども向けロボットプログラミング教材10選

この記事では、人気の子ども向けロボットプログラミング教材10選を紹介しています。 ロボットプログラミングは、3歳から簡単に始められるものから大人も楽しめる本格的なものまで種類が豊富で、プログラミング初心者の方にもおすすめのプログラミング教材です。 子どものうちからプログラミングをはじめることには多くのメリットがあり、小学校、中学校、高校と段階的に必修化されるプログラミング教育への導入としても役立つため、習い事としてもおすすめです。 子どもがロボットなどの動くおもちゃやプログラミングに興味があるようでしたら、まずはロボットプログラミング教材からはじめてみてはいかがでしょうか。 目次 ロボットプログラミング教材とは 【幼児におすすめ】ロボットプログラミング教材 3選 【小学生におすすめ】ロボットプログラミング教材 7選 これもおすすめ！人気のプログラミング教材 もっと学びを深めたい子どもには ロボット教材で楽しくプログラミングを学習しよう！ ロボットプログラミング教材とは ロボットプログラミング教材とは、プログラムによって実際にロボットなどを操作して動かすことができる教材です。 自分のプログラムした内容がすぐに確認できるので、子どもが興味を持ちやすく、楽しみながら学習することができるのが特徴であり、ロボットプログラミング教材のメリットです。 知育おもちゃとしてもおすすめの文字入力不要で幼児でも操作しやすいものから、テキスト言語でプログラムする本格的なロボットまで種類が豊富です。 それでは、「幼児向け」と「小学生向け」に分けてそれぞれにおすすめのロボットプログラミング教材を紹介します！ [PR] Webデザインで副業する方法とは【幼児におすすめ】ロボットプログラミング教材 3選 それではまず、幼児が遊びながら学べるロボットプログラミング教材を3つ紹介します。 幼児向けのものはWi-Fiなどのネットワークやパソコン、タブレット等が必要なく、簡単にはじめられるものが多く揃います。 1）コード・A ・ピラー ツイスト ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：5,500 円 文字入力不要 コード・A・ピラー ツイストは、幼児（3歳～6歳）の子ども向けの芋虫型プログラミングロボットです。 マテル社のベビー・プリスクールのおもちゃブランド、「フィッシャープライス」によって開発されました。 プログラミングの際に文字の入力を必要としないので、幼児の子どもでも簡単に、かつ、楽しみながらプログラミングを学習することができます！ コード・A・ピラーは乾電池式のロボットで、芋虫のように自走します。 芋虫の胴体部分が関節ごとに外れるようになっており、胴体部分のパーツのそれぞれに「前進」、「右折」、「左折」などの命令を持たせることができます。 これら胴体部分パーツをつなげ変えることでコード・A・ピラーの動きを変化させることができます。 さらに、子どもが考えたプログラムによって胴体部分のパーツを光らせたり、音を鳴らしたり、楽しく遊びながらプログラミングを学べる知育玩具となっています。 例えば、コード・A・ピラーが障害物を避けて走るにはどのようにしたらよいか、付属のゴールプレートを置いた場所に向うにはどうしたらよいかなど、手先を使いながら組み替えたり、走らせてみたり、子ども自身が考えて動かします。 この体験はプログラミング的思考を育むことにつながるでしょう。 2）Cubetto（キュベット） ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：35,750円 文字入力不要 Cubetto（キュベット）は、手を使って遊ぶ木のおもちゃ型のコーディングキットです。 キュベットと一緒に冒険することで、子どもたちはプログラミングの基礎を身につけることができます。 この教材の特徴は、テキスト言語などの子どもには複雑な手段を一切使わずに、LEGOのようなブロックを組み合わせることでロボットを動かせる、という点です。 各ブロックに命令がそれぞれ1つずつ組み込まれており、それらを組み合わせボードにはめることでキュベットに指示を出します。青い実行ボタンを押すと作成したプログラム通りにキュベットが動き出します。 魅力的なワールドマップとストーリーブックによって子どもの学習意欲が高まり、楽しく遊びながら学習ができます。 これからを生きる現代の子どもにとって重要なスキルの一つであるプログラミングを、子どもたちが分かりやすい形で身につけることができます。 3）PETS（ペッツ） ツールタイプ：タンジブル, ロボット 対象：3歳後半〜 価格：22,000円 文字入力不要 PETS（ペッツ）は、方向ブロックをロボットの背中に挿し込んで、子どもが作成した命令通りに動くプログラミング学習ロボットです。 マス目状の特性シートの上を、ときには障害物をよけながらスタートからゴールへと動かしていきます。 PETSでは、パソコンなどに難しいコードを打ち込む学習方法ではなく、実際にロボットに触れて動かし、楽しみながらプログラミング的思考を学ぶことができます。 また、ロボット自体が簡単な作りとなっているため、単三電池4本があればすぐに学習を開始することができます。 保護者や教育者など教える側にも負担なく、大人も一緒になってプログラミング体験ができるロボット教材です。 【小学生におすすめ】ロボットプログラミング教材 7選 次に、小学生はもちろん中高生から大人まで、楽しみながらプログラミングを学習できるロボット教材を7つ紹介します。 1）embot（エムボット） ツールタイプ：ビジュアル言語, ロボット 対象：6歳〜 　 価格：6,600 円 文字入力不要 タブレットでの操作を推奨 embot（エムボット）はNTTドコモが開発したプログラミング教育用の教材ロボットです。 専用のアプリをダウンロードして、そのアプリからプログラミングを行い、embotを動かすことができます。 ビジュアル言語を使っての直感的なプログラミングですので、子どもたちだけでなく教える側である先生や親御さんにとってもプログラミング学習の導入がしやすい教材です。 教材の外装はダンボールで簡単に加工しやすく、外装ダンボール，embotコア，ブザー，LEDライト，サーボモーターを自由に組み合わせて、いろいろな活用を考えることもできます。 直感的なプログラミングで論理的思考力を養うことができ、子どもたちの自由な発想、想像力を高めることも期待できます。 公式サイトではembotを活用した様々な指導案や動画が公開されていますので、ぜひそちらも参考になさってください。 2）kurikit（クリキット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜 価格：6,600 円 文字入力対応可 PCやタブレットでの操作を推奨 kurikit（クリキット）の代表的なプロダクトは「ココロキット」と呼ばれるロボットプログラミング教材です。 こちらは、同社のヒット商品である「ユカイな生きものロボットキット」の拡張キットとして販売されています。 子どもが工作のように自分で組み立てて作ったロボットを、ビジュアルプログラミングやテキスト言語のJavaScriptによって記述したプログラムで動かすことができます。 シンプルな構成で専門的な知識がなくても簡単に操作することができ、プログラミングでロボットを動かしながら楽しく学ぶことができます。 kurikitのコースには、初級と上級があり、初級のコースでは直感的にプログラミングができる「ビジュアルプログラミング」を、上級コースではプロのエンジニアも使っている「テキストプログラミング」に挑戦できます。 3）toio（トイオ） ツールタイプ：タンジブル, ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜大人 価格：16,980円＋税（本体セット） 文字入力対応可 PCやタブレットでの操作を推奨 toio（トイオ）には、パソコン不要でカードを使ってゲーム感覚で楽しめるものから、本格的なテキスト言語で自由にプログラミングを行えるものまで、幅広くプログラミング学習コンテンツが用意されています。 プログラミングの基本を遊びながら身につけることができ、ステップアップしていく中で枠に囚われない動作を自由に作ることができます。 toioでは、初級コースとして「GoGo ロボットプログラミング ～ロジーボのひみつ～」というコースがあります。 これは、プログラミングの基本要素「順次、分岐、反復」が楽しみながら身につく冒険絵本を作成していくコースとなっています。子どものプログラミングによって、絵本の上をかわいいロボットが動きまわります。 また、初中級コースとして、ビジュアルプログラミングアプリ「toio Do」が用意されています。 こちらはパソコンやタブレットを使ったビジュアルプログラミングにステップアップします。しかし、いきなりプログラムを作成しなくても、サンプルプログラムを使用してロボットの動き試すことから始められます。ブロックを組み換えて改造することでオリジナル作品を作ることも可能です。 さらに、上級コースとして、toioコアキューブというものが用意されています。 キューブを使い、JavaScriptなどのテキスト言語でより実践的なプログラミングが体験できます。 4）LEGO®BOOST（レゴブースト） ツールタイプ：ビジュアル言語 , ロボット 対象：7～12歳 価格：19,660円 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレット不要 LEGO®BOOST （レゴブースト）では、LEGOで作ったロボットをプログラミングによって動くおもちゃに変身させながら、楽しくプログラミングを学ぶことができます。 障害物のあるコースを移動させたり、シューターで的に命中させたりなど、子どもが興味を持ちやすい内容になっています。 LEGOが行う動作には、ジョークやダンス、ビートボックスなど面白い機能も豊富に用意されていますので、お友達と一緒にゲームをしているようにプログラミングを学べます。 アプリには60種類以上のアクティビティがあり、プログラミングのブロックを集めながら基本的なプログラミングのスキルを身に付けることができます。 さらにアプリのクリエイティブキャンバスという機能でオリジナル作品を組み立てることもできますので、さらに発展的なプログラミングを作成することも可能です。 5）mBot（エムボット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：8歳〜 価格：15,400円 文字入力対応可 PCやタブレットでの操作を推奨 Makeblock Co., Ltdが開発したmBot（エムボット）は、光センサーや超音波センサー、ブロックやタイヤなどがセットになっています。 いろいろな機能が入っているためプログラミング技術だけでなく、センサーの仕組みやロボットの構造なども学ぶことができます。 これらのセンサーやロボットをmBlockで作ったプログラムで動かすことで、試行錯誤してロボットの動きを考える経験が生まれます。 さらに、mBlockで作成したプログラムを、現在多くのシステムエンジニアが活用している非常に汎用的なテキスト言語、Pythonや、Arduino言語のプログラミングコードに切り替えることもでき、より実用的な製品であるといえます。 6）KOOV®（クーブ） ツールタイプ：ビジュアル言語 , ロボット 対象：8歳以上 価格：36,880 円＋税 文字入力不要 PCやタブレットでの操作を推奨 KOOV®（クーブ）とは、ブロックで自由な「かたち」を作って、それらを「プログラミング」することでさまざまな「動き」を与えながら学ぶロボット・プログラミング学習キットです。 ロボット制作の体験によって、子どもたちの探究心や創造力、未来を切り拓く思考力を育むことができます。 下記の3つのステップを子どもの理解や成長に合わせて選択することができますので、プログラミング初心者の子どもでも安心して挑戦できます。 STEP 1「ロボットレシピ」を真似る お手本となる「ロボットレシピ」を見ながら、いろいろな作品を制作して、ロボットとして動かしてみるところからプログラミング学習を始めます。 STEP 2「学習コース」で体系的に学ぶ 流れに沿ってロボットを作るためプログラミングを徐々にマスターでき、確認クイズで学習を振り返りながら、少しずつロボットプログラミングを理解することができます。基本的な組み立てとアプリの操作を学習できるコースも用意されています。 STEP 3「自由制作」で子ども自ら発明する ブロックの組み立てと、そのプログラミングの流れを一通りマスターした後で「自由制作」を行うことで、オリジナル作品づくりに挑戦することができます。 作成したロボットプログラミングの写真・動画を共有して世界中の人々に評価してもらうこともでき、新たなロボット制作のアイデアを生み出すことができます。 7）ArtecRobo2.0（アーテックロボ2.0） ツールタイプ：テキスト言語, ビジュアル言語, ロボット 対象：8歳以上 価格：27,000円 文字入力対応可 PCやタブレットでの操作を推奨 ArtecRobo2.0（アーテックロボ2.0）は、日本の学校教材メーカーである株式会社アーテックが開発したロボットプログラミング学習教材セットです。 縦、横、斜めに自由につながるブロック、モーターやセンサーなどのロボットパーツ、プログラミングソフトを使用して、ロボットの仕組みとプログラミング技術を学ぶことができます。 パーツ説明も親切で、ブロックの組み立ては工具やネジ、接着剤などを使わずに行うことができ、ロボットパーツを接続する際に付属コードの配線が見えるので、子どもがどう配線したらどう動くのかを実感しやすい構成となっています。 プログラムを作るソフトは、パソコン用では「Studuino」、iPad用では「Tickle for iPad」があります。 どちらも画面上で命令をブロックのようにつなげて並べるビジュアル言語方式なので、低学年の子どもでも無理なく学習を開始できます。 さらに、児童用テキストや教員用指導書が付属しているので、子どもがテキストを参考に予習・復習をすることができます（WEBでも公開）。 これもおすすめ！人気のプログラミング教材 ここからはロボットではないが人気のタンジブル教材を紹介します！ タンジブルとは形のないもの（命令、情報、プログラムなど）を、直接触ることができる形のあるものとして操作できるタイプの教材を指します。 ロボットプログラミング教材よりもお手頃で始めるハードルが低いので、ぜひ参考にしてくださいね。 micro:bitV2（マイクロビット） ※micro:bitはmicro:bitV2にバージョンアップされています。 ツールタイプ：テキスト言語, ビジュアル言語 対象：7〜16歳 価格：2,200円 文字入力対応可 PCやタブレットでの操作を推奨 BBC micro:bit（マイクロビット）は、イギリスの公共放送局「BBC」によって開発された教育用コンピュータで、イギリスをはじめ多くの国の子どもたちがBBC micro:bitでプログラミングを学んでいます。 クレジットカードよりも小さいサイズの電子基板にセンサーやLEDといったなどさまざまな機能が搭載されているにもかかわらず、その価格は非常に安価です。 センサーやLEDの他にも、コンパス、無線通信機能、加速度センサー、温度センサーなどの搭載されていて、子どもたちが作った段ボールやペットボトルのおもちゃに心臓部としてこのmicro:bitを入れることで、自作のおもちゃを動かすことができます。 micro:bitで学ぶプログラミングでは、マイクロビット本体のほか、プログラムを書くためのパソコン、データを転送するケーブルなどの周辺機器を扱うため、子どもが技術に触れる機会を増やすことができますよ。 Toy-Conガレージ（トイコンガレージ） ツールタイプ：ビジュアル言語 対象：6歳〜 価格：6,980円＋税 文字入力不要 Nintendo Switch本体が必要 Toy-Conガレージ（トイコンガレージ）は、Nintendo Switchを使って行うビジュアルプログラミング学習教材です。 Toy-Conガレージでは、Nintendo Labo の付属のToy-Conを作って遊ぶほかに、オリジナルのToy-Conのプログラム「発明」に挑戦することもできます。 入門動画がYouTubeの任天堂公式チャンネルにて公開されているので、専門知識がなくても簡単に操作が可能です。 Toy-Conガレージでは、タッチスクリーンを使って指で直感的に作業できるので、子どもやプログラミング初心者でもキーボードでコードを書く必要がなく、プログラミング学習の導入としてもおすすめです！ YouTubeの任天堂公式チャンネルでは「バラエティキット」に含まれている「ラジコンカーToy-Con」と「紙人形Toy-Con」を使ったものや、本体に加えて輪ゴムを使った「輪ゴムギター」など、作例が豊富に紹介されています。 ですが、工作は必須ではないのでJoy-Conだけを使用してプログラミングを始めることもできますよ！ 子どもがあれこれと工夫することで、「あそび」とはまた別の手触りや反応といった「体験」を作ることが可能となっているプログラミング学習教材です。AND、NOT、カウンター、タイマーなど、一般的なプログラミングの概念に通じる機能が詰まっていて学習教材としても質が高いと言えます。 MESH（メッシュ） ツールタイプ：ビジュアル言語 対象：6歳〜大人 価格：13,871円＋税 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレットなど不要 MESH（メッシュ）は、ソニー株式会社が開発した、小さな「電子タグ」型のプログラミング学習教材です。 USBメモリを一回り大きくしたような形状で、スマートフォンやタブレット、Windows10上のアプリを使ってプログラミングが行えます。 アプリは画面上のアイコンを組み合わせてプログラムを作成する「ビジュアルプログラミング」形式になっており、子どもやプログラミング初心者でも直感的なプログラミングが可能です。 MESHには「LED」、「ボタン」、「人感」、「動き」、「温度・湿度」、「明るさ」、「GPIO（拡張）」の７種類の電子タグがありそれぞれを組み合わせることで色々な機能が実現できます。 MESHではプログラミングしてできたものを「レシピ」と呼び、そのレシピを作成する際に何を作るか、どの電子タグを組み合わせるかなどを子どもが考えながら、意図した仕組みを完成させるので、自然とプログラミング的思考が身に付きます。 複数のMESHの組み合わせけでなく、身近にあるモノをMESHとスマホなどの通信機器と組み合わせ、「モノ」に通信機能をもたせる、いわゆるIoT（Internet
子ども向けプログラミング

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのチェックボックスでtrueとfalseを取得する方法を現役デザイナーが解説【初心者向け】