Scratch

Scratch（スクラッチ）で気軽にはじめる子ども向けプログラミング

スクラッチ（Scratch）は難しいコードを書かずにプログラミングができるので、小学生が初めて取り組む入門として最適な教材です。スクラッチの特徴や勉強方法といった基本からロボットやドローンを使った応用まで詳しく解説いたします。

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

プログラミング教育に使われるScratch(スクラッチ)について解説します。

Scratch(スクラッチ)の概要やメリットについて詳しくみていきましょう。

Scratch(スクラッチ)とは

Scratch(スクラッチ)は、アメリカの名門大学であるマサチューセッツ工科大学（MIT）で誕生した子供向けのプログラミング言語です。

子供のエンジニア教育向けに開発されたものであるため、利用にあたっての難易度は低いといえます。

また、それでいて様々な用途に活用できるのが特徴です。

今や全世界で150を超える国や地域で利用されており、未来のプログラマーを育成するためのツールとして定着しつつあります。

[PR] ITスキルを習得して在宅で副業する方法とは

スクラッチの特徴／メリット

2006年に登場して以来、度重なるアップデートによって使いやすさの追求が行われてきたスクラッチの魅力は多岐に渡ります。

直感的にプログラムを組める

例えば、スクラッチは通常のプログラミング言語に比べてはるかに感覚的なコーディングが可能になっている点です。

一般的なプログラミングは、ご想像の通り複雑なコードをキーボードで直接入力しながら組み上げていきます。

一文字でも間違えてしまうと、正常な動作をしてくれないということもあり、非常にシビアな入力作業が問われるのが難しいところです。

しかし、スクラッチは、ビジュアルコーディングと呼ばれる技術を採用し、子供でも楽で丁寧なコーディングが可能です。

ビジュアルコーディングは、あらかじめコードがブロック状にテンプレートで用意されており、マウス操作でコードを積み重ねていくことで、コーディングが行えるようになるものです。

キーボード操作に慣れていない、小さいうちからプログラミングのエッセンスを楽しく学べるため、スムーズな学習を支援してくれます。

開発環境の構築は不要

スクラッチはプログラミングに当たって特別なソフトウェアなどをインストールする必要はなく、普段から利用しているインターネットブラウザ上で動作するのも嬉しいところです。

プログラミングを始めるに当たって、専用のエディタや統合開発環境をインストールしなければならないことは日常茶飯事です。

しかし、スクラッチを使えば、会員登録さえすればすぐにプログラミングを始められるため、思い立った時にすぐ体験できるハードルの低さを備えているといえるでしょう。

無料で勉強できる

高い機能性を備えておきながら無料で利用することができるという点です。

プログラミングの楽しみを味わえるだけでなく、スクラッチの公式サイトにはチュートリアルも充実しているため、専用のレクチャーも自由に受けることができます。

コンテンツの日本語化も進んでいるので、言語的な問題を抱えることもなく、ハイレベルなプログラミング教育をご家庭で気軽に体験することが可能なのです。

スクラッチでできること

スクラッチを使って制作できるものや体験できることは非常に豊富です。

音楽や簡単なゲーム作り

スクラッチでできることとして、音楽制作やゲーム作りはその代表例です。

楽器やテンポを設定し、うまく音楽を奏でるよう音を配置していくことで、作曲活動に勤しむことができます。

あるいは、豊かなアニメーションで動くゲームを作成し、ハイスコアを競うようなゲームを作ることも可能です。

ゲームや音楽制作を通じて、作って楽しいだけでなく、誰かに遊んでもらったり、聞いてもらったりすることの喜びを味わうことも可能になるでしょう。

ロボットを動かす

プログラミングならではの体験である、ロボットをコントロールすることもスクラッチでは可能です。

ラジコンとは違い、プログラミングでロボットを動かす最大の魅力は、自分でロボットをどう動かすかを好きなように制御できる点です。

コントローラーで遊ぶ以上に、自分が設計した通りにロボットが動作する様子は、製作者に大きな感動をもたらしてくれるでしょう。

レゴの模型を動かす

ブロックトイの金字塔とも言えるLEGO(レゴ)も、スクラッチを使って遊ぶことが可能です。

レゴが教育用として展開している「レゴ® WeDo2.0」は、小学生向けのプログラミングを学ぶために誕生したキットです。

スクラッチを使ってレゴをコントロールすることができるよう設計されているので、モーションセンサーのような高度な技術をレゴとスクラッチで開発することができます。

Tello（ドローン）を操作する

教育用のトイドローンとして開発されたTello(テッロ)は、スクラッチを使って機体を制御可能です。

Telloは家庭内でも飛行させることができるほど小型のドローンでもあるので、安全・簡単にドローンに触れることができます。

スクラッチを使ってみよう

スクラッチの優れた利点は、実際に体験してみることでより理解が深まるでしょう。

スクラッチの始め方は非常に簡単です。

まずは、公式サイトへ移動します。

そしてページ上部の「参加する」をクリックすると、アカウント開設の手引きが始まるので、案内に沿って必要項目を入力していきましょう。

ひとまず基本機能を使って、早く体験してみたいという方は、「作ってみよう」をクリックすることですぐにエディターへ移動することができます。

チュートリアルも充実しているので、色々と試してみるのがオススメです。

スクラッチの勉強方法

続いては、スクラッチを継続的に学習する上でのポイントです。

スクラッチの入門書で勉強する

1つ目は本を使って勉強する方法です。

メリット：自分に合った教材を見つけやすい／費用が安い

スクラッチは子供向けのプログラミング教材であるため、プログラミングを全く知らない子供や大人でも理解できるほど平易な文章で書かれている教本も多いものです。

そして、一冊買えばある程度のことは理解することができるほど網羅的なものも増えているので、結果的なコストパフォーマンスに優れているのも嬉しいところです。

デメリット：選ぶのが大変／わからないことを聞くことができない

スクラッチの学習書は何冊も出ているため、お気に入りの一冊を選ぶのが難しい点はネックです。

子供と一緒に本屋へ行き、中身を見ながら相性が良さそうな本を探し出しましょう。

また、学習本ではわからないことがあった時に自力で解決策を見出さなければいけないため、学習に時間がかかるのも難点です。

サクサクと学習を進めていきたい場合には、あまり向かない方法であることは押さえておきましょう。

スクラッチの勉強におすすめの本

現在出版されているスクラッチの教本の中から、三冊ほどオススメもご紹介しておきます。

(全レッスン動画解説付き)できるたのしくやりきるScratch3子どもプログラミング入門

こちらは単に機能を紹介するだけでなく、「なぜそうなるのか」という仕組みの解説からプログラミングの解説を行うので、理解を深めていくのに最適な一冊です。

動画付きで解説が進められていくため、サクサク学びを進めることも可能です。

Amazonリンク：

(全レッスン動画解説付き)できるたのしくやりきるScratch3子どもプログラミング入門

親子でかんたんスクラッチプログラミングの図鑑【Scratch 3.0対応版】

オールカラーで全ての漢字にルビが振られているので、低学年の子供でも気軽に参照することができる、頼もしい一冊に仕上がっています。

Amazonリンク：

親子でかんたんスクラッチプログラミングの図鑑【Scratch 3.0対応版】

作って学ぶScratchドリル (O’REILLY KIDS)

こちらはプログラミング学習ではおなじみのオライリーから出版されている教本で、ドリル形式で学習を進めていくことができます。

スクラッチの使い方よりも、スクラッチを利用してどんどん課題をこなして力をつけたいという人にはうってつけの一冊です。

Amazonリンク：

作って学ぶScratchドリル (O’REILLY KIDS)

オンライン教材（ソフト）で勉強する

2つ目がオンライン教材を用いた勉強です。

メリット：成果物の動きをイメージしながらできる／必要（使える）な部分だけを掻い摘んで勉強できる

オンライン教材は実際に動的な映像や成果物を確認しながら学習ができるため、完成イメージを持ちやすいのが特徴です。

自分で学びたいカリキュラムだけをこなし、継続的な学習ができるのもポイントとなっています。

デメリット：体系的に学ぶのは難しい／検索力が必要

適切なカリキュラムに則って自発的に学習しなければ、スクラッチをフル活用する技術が身につかない点は気をつけておきましょう。

正しく自分に必要な技術を調べ、学び取ろうとする意欲が重要になります。

スクラッチの勉強におすすめのオンライン教材（ソフト）

スクラッチ学習に最適なオンライン教材を挙げるとすれば、1つ目はやはり公式サイトの教材でしょう。

公式が監修している教材ということもあり、その種類は豊富で、動画での解説など、非常に丁寧な点は嬉しいところです。

公式サイト：https://scratch.mit.edu/explore/projects/all

Why！？プログラミング

非公式ながらも、まるで公式のようにわかりやすいことが特徴的なのは、NHKの「Why！？プログラミング」で公開されている動画です。

テレビ番組らしい、大げさなアクションと映像で具体的にプログラミングのチュートリアルを受けられるので、サクサクと学習をすすめられます。

公式サイト：https://www.nhk.or.jp/school/sougou/programming/

ドットインストール

「ドットインストール」という大人向けの学習サイトも有効です。

こちらでは一般的なプログラミング言語に加え、スクラッチの講座も開講されており、無料で全編を視聴できます。

見終わる頃には、スクラッチについての体系的な理解が進んでいることでしょう。

公式サイト：https://dotinstall.com/lessons/basic_scratch_v3

プログラミング教室で勉強する

3つ目の方法は、プログラミング教室での学習です。

メリット：わからないことがすぐ解決できる／体系的に勉強できる

プログラミング教室の最大のメリットは、わからないことがあればすぐ講師に質問できるところにあります。

プログラミングに触れて間もない頃から、手取り足取りから教えてもらうことができるので、飽きずに続けることが可能です。

教室ではカリキュラムに沿って指導が行われるので、体系的な知識を身につける上でも有効です。

デメリット：費用が高い／エリアが限られている

プログラミング教室は上記２つの方法に比べて授業料など、費用がかさむ傾向にある点は注意しておきましょう。

また、教室によって授業のクオリティはまちまちで、開講されているエリアも限られているので、地域差が大きいところは致し方のないところでもあります。

スクラッチの勉強におすすめのプログラミング教室

ここでは、スクラッチの勉強におすすめできるプログラミング教室をみていきましょう。

TechAcademy ジュニア

こども向けのプログラミング教室を気軽に体験させてあげたい、という保護者の方には「TechAcademy ジュニア」をおすすめします。

プログラミング学習体験や授業体験など、全て無料でお試し受講することができるため、プログラミング教室が初めてという方には足を運びやすいのが特徴です。

自宅からオンラインでの参加も可能なため、近くに教室がない、新型コロナの影響を考えて人のいる場所は避けたいという場合にも嬉しい仕組みです。

公式サイト：https://junior.techacademy.jp/lp/top

ヒューマンアカデミー

スクラッチ向けの授業を開講しているスクールとしては、ヒューマンアカデミーが開講している「こどもプログラミング教室」が挙げられます。

全国的なシェアを誇るロボット教室の展開や、実際に手を使って自分の力で考え、解決していくことを目的としたカリキュラムが、その人気の高さの秘訣です。

公式サイト：https://kids.athuman.com/programming/

LITALICOワンダー

ITxものづくりを掲げている「LITALICOワンダー」もスクラッチ教室が開かれているスクールです。

子供の創造力を最大限発揮するための技術と発想力を養ってもらうことができるカリキュラムが特徴で、無料体験プランも充実しています。

公式サイト：https://wonder.litalico.jp/

子供にスクラッチを勉強させる際のポイント／注意点

スクラッチは無料で優れたプログラミング能力を養える魅力的なサービスです。

しかし、効果的な勉強方法をしっかりと意識しておくことも大切です。

無理強いはさせない

子供が遊びたくないと思っている場合、無理やりスクラッチを触らせていても成長は期待できません。

そんな時は下記のようにプログラミングに興味が持てるように、好奇心を育ませることが重要です。

パソコンでゲームを遊ばせる
一緒にロボットを作る
科学館へ行く

親も一緒に勉強をする

子供だけ勉強しておきながら、親はプログラミングに無頓着というのも良い環境とはいえません。

子供は親の背中を見ながら成長するもので、実によく観察しています。

第一、せっかくプログラミングで成果物が出来たのにも関わらず、親がその価値を理解してくれないということでは、子供にとっても作りがいがありません。

ともにプログラミングを学ぶ姿勢を大切にし、一緒に理解を深めていきましょう。

プログラミングスキルは遊びの延長戦と考える

プログラミングがどれだけ将来役立つ技術であったとしても、それは子供にとっては重要なことではありません。

彼らにとって大切なのは、プログラミングが楽しいかどうかです。遊びのように楽しく学べるからこそ、プログラミングの技術を効率よく学ぶことができます。

頭ごなしにプログラミングの大切さを訴えるのではなく、いかにプログラミングが楽しい遊びであるのかを伝えていくようにしましょう。

まとめ

スクラッチは、これまで何回とされてきたプログラミング技術を子供向けにわかりやすく、楽しく学習できるよう設計されたサービスです。

最近では教本や学習サービスも充実しているため、ユーザーに合わせた学習も自由に選ぶことができるようになっています。

積極的に活用し、子供たちの有意義な学習へとつなげていきましょう。

[お知らせ]TechAcademyジュニアでは、高校生向けに実践的プログラミングサービスを提供しています。独自で開発した学習システムは、基礎から実践までステップアップ式のカリキュラムとなっており、生徒が1つの画面で迷うことなく学習を進めることが可能です。

現在、自宅にいながらプログラミングの楽しさについて知ることができるプログラミング学習体験を実施しています。プロから学べる機会ですので、ぜひ体験してみてください。

社会の誰かに役に立つサービスを Webアプリで実現したい。挑戦する高校生とは

プロフィール・上坂進之祐さん（17）・妻鹿涼介さん（17）渋谷教育学園渋谷高等学校2年生高校1年生の2月からTechAcademyでWebア...

インタビュー

「MOONBlock（ムーンブロック）」をやってみた【体験レポート】

プログラミング初心者でも簡単に始められるプログラミング言語として、ビジュアルプログラミング言語というものがあります。その中でも、有名なMOONBlock...

子ども向けプログラミング

休校中にプログラミング学習を開始！自宅で楽しみながらできる授業とは

プログラミングとダンスが好きな女の子！新型コロナウイルスの影響で休校になり、小学2年生の3月にテックアカデミージュニア「はじめてのScratchコース」を受講開...

インタビュー

マインクラフトからScratchへ！小学2年生が作る祖父母と遊べるゲームとは

ビジュアル言語のScratch（スクラッチ）にハマる小学2年生！テックアカデミージュニアの「はじめてのScratchコース」を受講していただき、ステップアップし...

インタビュー

プログラミングが義務教育に！政府の成長戦略素案に盛り込まれたプログラミング教育の内容とは

2013年6月5日に、政府は安倍政権の経済政策「アベノミクス」の「3本目の矢」として成長戦略の素案を発表しました。この成長戦略では、賃金上昇や減税措置、...

子ども向けプログラミング

未来のザッカーバーグを育てる？小学生がプログラミングを学べる教室まとめ

プログラミングが義務教育化される可能性もあり、プログラミングを小学生のうちから学ばせたいという親も増えているようです。そんな流れから、小学生でもプログラ...

子ども向けプログラミング

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

書きながら覚えよう！Pythonで正規表現を使う方法【初心者向け】

今回は、Pythonで正規表現を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。普段見慣れない文字を入力していますが、実際に書いてみて慣れていきましょう。目次Scratch(スクラッチ)とはスクラッチの特徴／メリットスクラッチでできることスクラッチを使ってみようスクラッチの勉強方法スクラッチの勉強におすすめのプログラミング教室子供にスクラッチを勉強させる際のポイント／注意点まとめそもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。 Pythonの正規表現とは正規表現とは、文字列を1つのパターン化した文字列で表現する表記法です。正規表現を使用して、文字列をパターン化した文字列に置き換えることで、文字列の検索や置換を行えます。また、自然言語処理といったAI技術の基礎的な処理も行うことができます。メタ文字正規表現において、パターン化した文字列のことをメタ文字と言います。 ★は文字列を意味します。メタ文字説明指定例合致する . 任意の1文字 a.c abc, acc, aac ^ 行の先頭 ^abc abcdef $ 行の末尾 abc$ defabc * 0回以上の繰り返し ab* a, ab, abb, abbb + 1回以上の繰り返し ab+ ab, abb, abbb ? 0回または1回 ab? a, ab {m} m回の繰り返し a{3} aaa {m,n} m〜n回の繰り返し a{2, 4} aa, aaa, aaaa [★] ★のどれか1文字 [a-c] a, b, c ★|★ ★のどれか a|b a, b 特殊シーケンスよく利用される正規表現のパターンは、特殊シーケンスと呼ばれます。特殊シーケンスは、（バックスラッシュ）を先頭に記載します。特殊シーケンス説明同じ意味の正規表現 d 任意の数字 [0-9] D 任意の数字以外 [^0-9] s 任意の空白文字 [tnrfv] S 任意の空白文字以外 [^tnrfv] w 任意の英数字 [a-xA-Z0-9_] W 任意の英数字以外 [a-xA-Z0-9_] A 文字列の先頭 ^ Z 文字列の末尾 $ Pythonで正規表現を使う方法 Pythonではreモジュールを使って正規表現を扱います。 reモジュールをimportすることで正規表現を利用できます。 import re importを詳しく知りたい人は、Pythonでimportを使う方法について解説している記事もあわせてお読みください。 reモジュールには、以下のような関数があります。 match()：文字列の先頭から正規表現にマッチしている部分を返す fullmatch()：文字列全体が正規表現にマッチしているかを返す search()：文字列中で正規表現にマッチする最初の部分を返す findall()：文字列中で正規表現にマッチするすべての部分を文字列のリストで返す finditer()：文字列中で正規表現にマッチするすべての部分をイテレータとして返す sub()：文字列中で正規表現にマッチする部分を置換して返す subn()：文字列中で正規表現にマッチする部分を置換してタプル(置換後文字列, マッチした数)で返す split()：文字列を指定した正規表現で分割するそれぞれの関数について、サンプルをもとに書き方を確認していきましょう。 match()関数の書き方文字列の先頭から正規表現にマッチしている部分を返します。結果はマッチした情報を取りまとめた「マッチオブジェクト」で返ります。マッチオブジェクトからマッチした文字列を取り出す方法は、次の具体例でご紹介します。マッチしない場合、Noneが返ります。書き方のサンプル： # マッチする例 result = re.match(r'a.c', 'abcdefg') print(result) # マッチしない例(Noneが返る) result = re.match(r'a.c', 'Alphabet starts with abcdefg.') print(result) 解説： match関数で、文字列の先頭から正規表現「r’a.c’」にマッチしている部分を検索します。マッチした場合の例では、マッチオブジェクトが返ります。マッチオブジェクトの「span」はマッチした位置を表しています。今回の場合、0～2文字目がマッチした位置になります(3文字目は含みません)。実行結果： <re.Match object; span=(0, 3), match='abc'> None マッチオブジェクトの「match」はマッチした文字列を表しています。 fullmatch()関数の書き方文字列全体が正規表現にマッチしているかを返します。結果はマッチオブジェクトで返ります。マッチしない場合、Noneが返ります。書き方のサンプル： # マッチする例 result = re.fullmatch(r'a.c', 'abc') print(result) # マッチしない例(Noneが返る) result = re.fullmatch(r'a.c', 'abcde') print(result) 解説： fullmatch関数で、文字列全体が正規表現「r’a.c’」にマッチしているかを確認します。マッチした場合の例では、マッチオブジェクトが返ります。 span、matchについてはmatch関数と同様ですので説明は省略します。実行結果： <re.Match object; span=(0, 3), match='abc'> None search()関数の書き方文字列中で正規表現にマッチする最初の部分を返します。結果はマッチオブジェクトで返ります。マッチしない場合、Noneが返ります。書き方のサンプル： # マッチする例 result = re.search(r'a.c', 'Alphabet starts with abcdefg.') print(result) # マッチしない例(Noneが返る) result = re.search(r'a.c', 'Alphabet

Python

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] ITスキルを習得して在宅で副業する方法とはECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

【これからのトレンド！】フラットデザインのメリット・デメリットとは

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。そもそもフラットデザインについて詳しく知りたい方は、フラットデザインとはについても合わせてご覧ください。目次フラットデザインとはフラットデザインの一般認知メリットデメリットフラットデザインのこれからフラットデザインとはあなたは、フラットデザインがブログやデザイントレンド一覧で話題になっているのを見たことがあるでしょう。このシンプルなスタイルは、様々な表現ができますが明確には定義されていません。 3Dではないそのスタイルの名前は平らな形状。奥行きを表現する影、ハイライト、テクスチャなどの詳細を表現しないこと。の、2つの要素から名付けられました。スキュアモーフィックデザインではないフラットデザインはスキュアモーフィズム(実世界のオブジェクトやプロセスに似せた装飾スタイル)に対する反応として始まりました。スキュアモーフィズムは、ドロップシャドウ・リアルな質感・反射・面取りなどのような効果をよく使います。 [PR] ITスキルを習得して在宅で副業する方法とはフラットデザインの一般認知フラットデザインの全貌が見えるようになったのは、2012年から2013年ごろです。 Windows8とiOS 7のリリースのおかげで、非常に認識しやすく(そして、より再現しやすく)なった年です。 Windowsの鮮やかなモジュール式レイアウトと、アップルのきれいに簡素化されたアイコンからフラットデザインの開発の経過、トレンドへの影響が見て取れます。 UXPinのスタッフは、Fast Co. Designでフラットデザインの発展の「山場」は、主流のトレンドとスキュアモーフィックデザインに葬り去られたと指摘しています。しかし、フラットデザインの勢いはまだ強く、主流になりそうな勢いです。それでは、その長所と短所、将来の可能性について見てみましょう。メリットレスポンシブデザインとの互換性柔軟なフレームワークきれいな、読み取り可能なタイポグラフィレスポンシブデザインとの互換性マイクロソフトとアップルが、フラットデザインに飛びついたので、フラットデザインはUXへの新たなアプローチとしてすぐに採用されました。それは、Webとモバイルのデザインとして一般的であり続ける良い理由になりました。フラットデザインは、そのグリッドベースのレイアウトとシンプルなグラフィックスのおかげで、簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置することができるので、色々な設計カテゴリに適用することができますが、特にWebやモバイル設計に適しています。 Sergey Valiukhから、Webとモバイル間の一貫性のあるシンプルなUXを提供できる、レイアウトを再配置する例を紹介します。一方、たくさんの影とテクスチャーを持つスキュアモーフィックの非常に詳細なスタイルは、固定サイズイメージを拡大縮小すると、上手く変換できないことがよくあります。デザイン代理店Dapper GentlemenのRyan Allenは、Flat 2.0で「フラットデザインは1ピクセル単位の完全なデザインより、はるかに簡単にコンテンツに適したサイズにスケーリングできる」と書いています。柔軟なフレームワークフラットデザインは、グリッド・カード・モジュール・ブロックなどと相性が良く、均一な幾何学的形状になる傾向があります。このタイプのレイアウトは、どんなところに使っても、認識しやすく直感的に操作できます。グリッドはどんな状況にも適用できる柔軟性のあるフレームワークです。これにより、デザイナーは制限されたレイアウトに押し込むより、最適な配置を実現することができます。例えば、このBureau of Bettermentのパンフレットは、様々なサイズの正方形や長方形を使って、タイポグラフィやアイコンなどの様々な要素を際立たせています。均一な色とシンプルなイラストは、フラットな効果を演出しています。一方、このWebサイトは、違う方法でグリッドを使っています。メニューからスタッフの写真へ、さらにサービスのリストへグリッドを使っています。きれいな、読み取り可能なタイポグラフィまた、フラットな質感は文字へのアプローチへも影響します。より大きく、より合理的なタイポグラフィになります。影やその他の効果が無いことで、文字が読みやすくなります。サンセルフ書体は、このスタイルと相性が良く、一般的によく使われます。ですが、セリフ書体もあまり凝っていない文や、見出しやメニューの文字として、「大きい文字」でなら使うことができます。デメリットユーザビリティへの妥協識別性の欠如流行りに集中しすぎるユーザビリティへの妥協フラットデザインのクリーンで効率化された質感を出そうとするがために、美学的思想に熱中する罠に落ちるデザイナーもいます。これは、ユーザビリティにも悪影響を及ぼし、Webおよびモバイルデザインに潜むリスクになりえます。全てがフラットな見た目なら、どこがクリック可能で、どこがクリックできないのかが見えにくくなります。シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分からなくなったり、ユーザーが慣れ親しんだ視覚的な手掛かりが無くなってしまう可能性があります。一例として、このWebサイトを見てみましょう。すべてのボックスはクリック可能ですか？その一部のみ？一見で判断するのは難しいでしょう。識別性の欠如デザインプロジェクトを計画しているすべてのビジネス、ブランド、または個人は、ユニークなデザインを望んでいます。彼らが、Webサイト、アプリ、名刺、イベントポスター、または他の何かを捜しているかどうかに関わらずです。フラットな設計の欠点の一つは単純化し、狭義のビジュアルスタイルに固執することで、似たデザインになりがちです。純粋なフラットスタイルを使用しているデザイナーは、自分のプロジェクトに適用できる原則の選択肢は限られています。例えば、これらの関係のないモバイルのインターフェースは、Marco La Mantia・Simone Lippolis(下の最初の画像)とLuis Vaz(2つ目の画像)によってデザインされましたが、両方ともサンセルフ書体の白い文字、基本的な幾何学的形状をしています。また、色合いも同じです。流行りに集中しすぎるフラットデザインが、現在のテクノロジーにおいて、近代的で直感的だとデザイナーに認識されれば、人気のスタイルとして定着するでしょう。しかし、この傾向には一つの問題があります。デザイナーの一部は本当にその有用性を考えることなく、流行に乗るために適用されることです。これは、目的のないデザインになってしまいます。初期のフラットデザインでは長い影を付けている例が良く見られました。 Alexander LototskyとErik Malmsköldのこの2つの例は、最も一般的な文字とアイコンに長い影のトレンドを付加した典型的な例です。両方ともフラットデザインの創成期、2013年に作成されました。流行りの見た目を追い求めるだけでは、前述したように、ユーザビリティに悪影響を与えることになります。視認性を犠牲にはしますが、薄く軽い書体を使うことによって、クリーンで最小限のデザインになります。視認性を考慮して文字の軽さを最適に調整しないと、名刺やモバイルアプリ、Webサイト向けには問題になることもあります。フラットデザインのこれからフラットデザイン2.0 デザイナーは、過去数年でフラットデザインを試してみて、ここで取り上げた長所と短所のいくつかに気づき、それを踏まえてスタイルを調整することにしました。フラットデザインの初期は、厳密な視覚単純化することを特徴としていましたが、最近の傾向は、美しさと機能的であることを両立するために、シャドウとテクスチャのような要素を少しだけ再導入するようになってきました。純粋にフラットなアプローチにこれらの調整したスタイルを、多くの場合、「フラット2.0(Flat 2.0)」または「ほぼフラット」なデザインと呼ばれるようになります。このスタイルは多くの妥協案を提供します。フラットでクリーンなシンプルさを残しつつ、見た目の多様性と高められたユーザビリティのためのスキュアモーフィックな質感を追加できます。テクニックの一つとしては、要素を階層や色の変化や影を追加することにより、平坦さに深さとレイヤーを追加します。別の一般的なハイブリッドアプローチとしては、写真だけではなく、イラストやアイコンの追加です。以下の例では、グリッドレイアウトと読みやすい文字は残りますが、レイヤー要素とテクスチャー化されたイラストを追加することにより、一層フラット2.0のアプローチとしての良い例となっています。マテリアルデザイン「ほぼフラット」なデザインと多くの共通点のあるマテリアルデザインは、Googleが開発した視覚言語で、グリッドベースのレイアウトや「意図的な色の選択、エッジツーエッジ画像、大規模なタイポグラフィ、および意図的な空白」を特徴とし、大胆な視覚効果があります。このスタイルはユーザーがすぐに理解できるように「現実に接地されている視覚的な手がかり」と「おなじみの触覚属性」を持つ紙風のアプローチを採用しています。それはスキュアモーフィズムにも少し近づいているようです。例えば、Tubik StudioからこのUIのコンセプトでボタンの微妙な影や色は、即座に明確にユーザの注意を引きます。背景の大きなスクリプト書体と紙のようなレイヤーは、マテリアルデザインの特徴をよく表しています。マテリアルデザインは、明らかにフラットデザインの要素を備えていますが、光と影、モーション、およびその他の詳細への注目が、フラットデザインはより便利で柔軟に適合させることができることを実証しています。 Googleによる自由に入手できるマテリアルデザインへの詳細なガイドは、ガイドラインに従うのか、好きな要素・テクニックを取り込むのかにかかわらず、デザイナーが自分の仕事にマテリアルデザインを簡単に導入しやすくしました。これはまた、デザイナーの独自の解釈や実験推奨し、フラットデザインやマテリアルデザインの両方の進化を促しました。つまり、デザイナーがトレンドと新しいもの何かを作る時に、マイクロソフトやアップル、Googleなどの大企業がデザインスタイルの大衆化にとても影響を与えていますが、次の「大きな波」を作る手助けをするのはデザイナーなのです。ディスカッションに参加しましょう「フラットなデザイン(視覚的なシンプルさ)とスキュアモーフィズム(視覚的な馴染みやすさ)の背後にある精神を考える時、両方の概念は確かに共存できることに気づくでしょう。この二つの完全な微妙なバランスは、ここ数年の未来が明確に証明してくれるでしょう。」 — UXPin for Fast Co. Design また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後デザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

小学校でプログラミング教育が必修化！学習におすすめの教材・教室を紹介

2020年度より小学校でプログラミング教育が必修化しましたが、実際に小学生のプログラミング学習について理解できている方はまだ少ないようです。そこで今回は小学校でのプログラミング教育必修化を受けて、その学習内容やメリットを解説するとともに、小学生におすすめのプログラミング教材や教室を紹介しますのでぜひ、参考にしてみてくださいね！目次小学校でプログラミング教育が必修化！学習内容やメリットとは小学生がプログラミングを学習する3つの方法小学生におすすめのプログラミング教材 5選〈無料あり〉小学生におすすめのプログラミング教室 3選小学生のプログラミングまとめ小学校でプログラミング教育が必修化！学習内容やメリットとは技術革新の急速な進展に伴い、文部科学省は2020年度〜小学校、2021年度〜中学校、2022年度〜高等学校へと段階的にプログラミング教育の必修化を決定しました。プログラミング教育は、あらゆる活動においてコンピュータ等を活用することが求められるこれからの社会を生きていく子どもたちにとって、将来どのような職業に就くとしても極めて重要となる、という理由で導入されました。では、実際に小学生のプログラミング教育はどんなことをするのか、その学習内容と小学生の早いうちからプログラミングを学ぶメリットを紹介します。小学生のプログラミング教育はどんなことをするの？文科省の資料によると、小学校のプログラミング教育は「情報活用能力を育成すること」を目的としています。その情報活用能力を育成するために、次の2つの学習活動を各教科等の特性を生かし実施していきます。文字入力などパソコンの基本的な操作を習得するための学習活動論理的思考力を身につけるための学習活動つまり、「プログラミング教育」というような教科や科目が増えるのではなく、算数や理科、音楽や総合など普段の教科の中でプログラミング教育が実施されます。これはプログラミング教育を通じて各教科の学びをより深めることにもつながります。〈小学校におけるプログラミング教育の実施事例〉どんな感じで各教科にプログラミング教育が盛り込まれているのか実施事例をもとに紹介します。実施事例1：音楽の授業タブレットでビジュアル言語教材「Scratch（スクラッチ）」を使用してリズムの繰り返しを作る。様々なリズムを組み合わせたり、反復させたり、工夫して作りたいものを形にしていく。このビジュアル言語教材を使用した音楽の授業では、プログラミング教育を通して音楽の学習をさらに深めることができます。実施事例2：算数の授業正多角形をプログラムを使って描く。タブレットでビジュアル言語教材「Scratch（スクラッチ）」を利用して、辺の長さと角度を指定することで正多角形を作図する。通常、分度器では正多角形の内角を使用するが、Scratchでは外角を使用する、ということがこのプログラムのポイント。この算数の授業では、プログラムを使って正多角形をかくことではなく、どのようなプログラムを書いたら正多角形が描けるかを考えることがねらいです。このようにプログラミング学習を通して、身の回りにあるものの仕組みや技術についての理解を深めることができます。小学生のうちからプログラミングをはじめるメリット小学生のうちからプログラミングをはじめるとどのようなメリットがあるのでしょうか。プログラミングを学習している小学生の子どもたちは、技術の取得はもちろんですが、プログラミング以外にも自分に自信が持てるようになったり、根気強くなったり、ロジカルシンキングが身についたり、それぞれ違いはありますが確実に成長していると感じます。それではメリットとして、小学生のプログラミング学習で身に付く力/スキルをまとめておきます。小学生がプログラミングを学習するメリット学習力：主体的に考え学習する力が身に付き、他教科の学力アップに繋がる質問力：わからないことを伝える力が身に付く積極力：「できた」という成功体験が自信につながる自己表現力：自らの力で作品を形にすることで自己表現力が身に付く問題解決力：問題の原因を探り、解決へと導く力が身に付く論理的思考力：自分が意図する活動を実現するためにはどうすべきか順序立てて考える力が身に付くこれらの力はすべて、大人になる過程でも社会人になっても必ず役に立つスキルなので小学生のうちに身につけておいて損はありません。続いて、小学生がプログラミングを学習する方法をみていきましょう！ [PR] ITスキルを習得して在宅で副業する方法とは小学生がプログラミングを学習する3つの方法小学生がプログラミングを学習する方法は大きく分けて3つあります。それではそれぞれについて詳しく解説します。 1）小学校の授業でプログラミングを学ぶ 1つ目は、小学校の授業でプログラミングを学ぶという方法です。 2020年度には小学校のプログラミング教育が必修化するため、小学生は学校の授業でプログラミングを学ぶこととなります。しかし、小学校のプログラミング教育は学習指導要領の詳細は明記されておらず、各学校の判断で実施可能となっています。さらには各教科の指導の一部として行われることになるため、プログラミングの学習に十分な時間が確保されない可能性があります。また学校教育は個人のペースに合わせた学習ではないので、理解が追い付かない場合もあるでしょう。より本格的にプログラミングを学習させたい・したい場合には、これから説明する2つの方法がおすすめです。 2）プログラミング教材で自習する 2つ目はプログラミング教材で自習する方法です。この学習法のメリットは教材費しかかからないため安価で簡単にプログラミング学習をはじめられることです。最近は無料の教材がたくさんあるため、費用をかけずにはじめることも可能です。デメリットは、小学生でははじめから自分だけで操作したり、学習を進めたり、習慣化するのは難しく、学びはじめる際はどうしても誰かの手引きが必要となることです。そのため、しっかりと学習を継続させたいのであれば、いくらかお金をかけてでもカリキュラムが用意され、ある程度指導や管理をしてもらえるオンライン教室などの環境の方が小学生のプログラミング学習にはおすすめです。小学生におすすめのプログラミング教材も記事内で紹介していますのでぜひ参考にしてみてくださいね。 3）プログラミング教室に通う小学生向けのプログラミング教室に通うという方法もあります。プログラミング教室では基本的な操作はもちろん、分からないことがあればその場で先生に聞くことができます。教室にもよりますが、小学生が学習を進めやすいように考えられたカリキュラムや、個別に指導してもらえることで学習のモチベーションを保つことができます。デメリットは、ここで上げた3つの方法の中では一番費用が高く、オフライン（通いの教室）の場合は近くにプログラミング教室がないこともあるでしょう。その場合はオンラインで学習できるプログラミング教室がおすすめです。どの方法が子どもたちの学習意欲を伸ばせるか、お子さまに一番合った方法を選びましょう！小学生におすすめのプログラミング教材 5選〈無料あり〉続いて、小学生のプログラミング学習におすすめの教材を5つ紹介します。無料で手軽に始められる教材も紹介していますので、ぜひ参考にしてくださいね♩ 1）Scratch（スクラッチ）ツールタイプ：ビジュアル言語コスト：無料動作環境：ブラウザ, Windows オフライン版の有無：有日本語対応：有開発元：MITメディア・ラボ対象年代：未就学児～高校生 Scratch（スクラッチ）とは、アメリカ・マサチューセッツ工科大学のメディアラボが無償で公開しているビジュアルプログラミング言語です。画面上のブロックをつなぎ合わせてプログラムを作るといった、主にマウスを使用してプログラミングするため、キーボード操作に不慣れな小学生でも簡単に操作可能です。「10歩動かす」「１秒待つ」というような、あらかじめ準備されている命令ブロックを組み合わせてプログラムを作り、プログラムを実行することで画面上のキャラクターを動かしたり、音楽を流したりできます。作ったプログラムを実行して実際に動作確認をしながら、修正しては実行するトライ＆エラーの作業が、PCまたはタブレットの画面上だけで手軽に行えるので、小学生やプログラミング初心者におすすめです。自由に遊びながらプログラミングの基本を学ぶことで、発想力や自己表現力が自然と身に付きますよ。作ったゲームやクイズ、アニメーションなどの作品は、Scratch専用サイトで世界のユーザーに共有することができ、ネットリテラシーの学習も期待できます。 2）Springin’（スプリンギン）ツールタイプ：テキスト言語、ビジュアル言語コスト：無料動作環境：iOS（iPhone・iPadのみ）オフライン版の有無：無日本語対応：有開発元：株式会社しくみデザイン対象年代：小学校高学年～高校生 Springin（スプリンギン）は、iPhoneやiPad上で、画面に指で絵をかいたり、アイコンをタッチするシンプルな操作でプログラミングをおこなうことで自作でゲームなどを作れる、株式会社しくみデザインが開発したiOSアプリです。 iPhoneやiPadがあれば無料ですぐに利用できるといった手軽さと、実行したい処理を直観的な操作でプログラミングできるのが特徴です。子どもが作成した画面上のアイテムにタッチするというシンプルな操作で、「重力」「回転」「自分がタッチされたら○○を動かす」などのような様々な機能や性能を実装できます。アイテム同士の関係を工夫することで小学生でも簡単にゲームや絵本、パズルを作成できます。独自のビジュアルプログラミング方式でプログラミングを学習している感覚なく、子どもがゲームを作る楽しさに集中できる教材となっています。学習につまずいたとしても、しっかり教えてくれるガイドも充実していて使いやすいです。 3）Minecraft（マインクラフト）ツールタイプ：ゲームコスト：有料動作環境：iOS, Windows, Android オフライン版の有無：無日本語対応：有開発元：Microsoft 対象年代：小学校低学年～中学生 Minecraft （マインクラフト・略称「マイクラ」）とは、ものづくりゲームの一種で、パソコン版・スマホ版・家庭用ゲーム機版などといった、多種多様の環境に対応したものがあります。小学生ぐらいの子どもたちからすると「マインクラフト＝楽しいゲーム」として認識することができ、実際にゲームとして遊んでいる子どもは多く、世界中で累計すると一億本以上も販売されている人気のプログラミング学習ゲームです。プログラミング教育・情報教育・協同学習などの教材として使えるようにした教育向けエディションMinecraft: Education Edition（教育版マインクラフト）もあります。マインクラフトゲームの中の世界はすべてブロックのようなパーツで出来ており、ブロックを壊すことで素材を手に入れて建物や家具などを作ったり、ブロックを組み合わせることでオリジナルの世界を構築したり、作った世界の中を冒険したりと、子ども自身が創意工夫を凝らして遊びながらプログラミングを学ぶことができます。また他のユーザーが作った世界に行ってみたり、一緒に遊んだりすることもできますので遊び盛りでゲーム大好きな小学生におすすめです。 4）Viscuit（ビスケット）ツールタイプ：ビジュアル言語コスト：無料動作環境：ブラウザ, iOS, Android オフライン版の有無：有日本語対応：有開発元：合同会社デジタルポケット対象年代：未就学児～小学校低学年 Viscuit（ビスケット）は、パソコンやタブレットに描いた絵を動かしたり、その絵をつかって「ゲーム」を作ったりすることができる、小学生におすすめのユニークなビジュアル言語教材です。プログラミング言語は一切使わず、お絵かき感覚で学べるため未就学児でも使うことができます。ビスケットでのプログラミングが、他の教育向けビジュアルプログラミング言語と大きく異なる点を説明します。まず、自分で絵を描いて、次にその絵を変化、移動させたりするために、画面上にある「メガネ」というツールを使う、という操作だけでプログラミングができてしまいます。自分で変化させたい場合は「メガネ」の左右の輪に違う絵を置き、移動させたい場合は、同じ絵を「メガネ」の左右の輪にずらして置きます。他のビジュアル言語の場合、右に10歩移動し、上に40歩移動する等の表現しなければなりませんが、ビスケットの場合は、「メガネ」を使って簡単にできるので、子どもたちがコンピュータでやりたいことに集中して試行錯誤することができます。スマホ用、タブレット用のアプリがあるほか、パソコンのブラウザ上でも利用できますし、小学校などの学校向けにオフラインで動作するWindows版の配布もあります。 5）micro:bit（マイクロビット）ツールタイプ：テキスト言語, ビジュアル言語, その他コスト：有料動作環境：ブラウザオフライン版の有無：無日本語対応：有開発元：Micro:bit教育財団対象年代：小学校高学年～高校生 BBC micro:bit（マイクロビット）は、イギリスの公共放送局「BBC」によって開発された教育用コンピュータで、イギリスをはじめ多くの国の子どもたちがBBC micro:bitでプログラミングを学んでいます。クレジットカード、よりも小さいサイズの電子基板に、センサーやLEDといったなどさまざまな機能が搭載されているにもかかわらず、その価格は非常に安価です。センサーやLEDの他にも、コンパス、無線通信機能、加速度センサー、温度センサーなどの搭載されていて、子どもたちが作った段ボールやペットボトルのおもちゃに、心臓部としてこのマイクロビットを入れることで、おもちゃ自身を動かすこともできてしまいます。マイクロビットで学ぶプログラミングでは、マイクロビット本体のほか、プログラムを書くためのパソコン、データを転送するケーブルなどの周辺機器を扱うため、子どもが技術に触れる機会を増やすことができます。小学生におすすめのプログラミング教室 3選ここでは小学生のプログラミング学習におすすめの教室を3つ紹介します。プログラミング教室にはオフライン（通いの教室）とオンラインの2種類あります。どちらも紹介していますので、ぜひ教室選びの参考にしてみてくださいね！ 1）ヒューマンアカデミーこどもプログラミング教室種類：オフライン（通いの教室）価格：入会金 11,000円 / 授業料月額9,900円 / 教材費月額660円コース：３種（ベーシックコース、ミドルコース、アドバンスコース）ヒューマンアカデミージュニアプログラミング教室とは、ロボット教室をはじめ、英語教室や科学教室などを提供しているヒューマンアカデミーの子ども向けプログラミング教室です。通いのオフライン教室のみ展開。スモールステップで、マウスも握ったことのないパソコン初心者の段階からはじめることができます。気になる方はお近くの教室で体験授業をお試しください。それでは段階的に学ぶことができる3つのコースを紹介します。ベーシックコース受講対象：小学校3年生～（推奨）受講期間：1年間（月2回/90分授業）マウスの操作から、パソコン操作スキルを学ぶプログラムを確実に完成させることで達成感を得ることができる初心者から段階的に高度な「改造」「発表」までを体験する 3ヶ月6回の授業を1タームとして、段階的な学習を繰り返すミドルコース受講対象：ベーシックコースを修了した人受講期間：1年間（月2回/90分授業）提供する情報を減らして生徒が考えて作成する部分が増える目的を強調した教材で目的を意識してプログラミングを行うキーボード入力やファイル操作など、パソコンの機能を多く使うアドバンスコース受講対象：ミドルコースを修了した人受講期間：1年間（月2回/90分授業) テキスト言語「JavaScript」で本格的なゲーム作成するたくさんの文字入力やファイル操作によってPCスキルが身に付く作成した部分の動作をこまめに確認し動きを確かめながら進める 2）QUREO（キュレオ）種類：オフライン（通いの教室）/ オンライン教室（休止中）価格：教室ごとに異なるため要問い合わせコース：2種（基礎コース：251レッスン、復習チャレンジコース：169レッスン） QUREO（キュレオ）は、サイバーエージェントグループが開発した、小学生のためのプログラミング教室です。現在、オンライン教室の新規契約は休止中のためオフライン（通いの教室）のみ展開。ゲームを作りながらプログラミングの基礎を学習できます。ガイドのキャラクターが先生として指示やヒントを与えてくれるので子ども1人でも学習を進めることができ、キャラクターが登場したり本格的なストーリー設定があるのがキュレオの特徴です。一部レッスンが無料で体験可能なので気になる方はお試しください。受講料については教室ごとに異なるためお近くの教室にお問い合わせください。 3）テックアカデミージュニア種類：オフライン（通いの教室）/ オンライン教室（4コース）価格：教室ごとに異なるため要問い合わせコース：初級〜上級まで7コース（Springin’、初級Scratch、中級Scratch、Webアプリ、ゲームアプリ、Pythonロボティクス、入門マインクラフト）テックアカデミージュニアは、全国に教室を展開する小中高生向けプログラミング教室です。通いのオフライン教室の他に、カリキュラムとアクティブラーニングのハイブリット学習で子どもたちの学びを最大化する、オンライン教室も展開。動画とWebテキストのカリキュラムで、子どもたちが自分のペースで学習を進めることができます。気になる方は自宅からオンラインで無料体験学習ができますので、ぜひお試しください。それではプログラミングを段階的に学ぶことができる7つのコースを紹介します。〈初級〉Springin’（スプリンギン）コース受講対象：7歳～（推奨）プログラミングが初めての人におすすめ、想像力を育む iOS専用アプリ「Springin’（スプリンギン）」を使用自分で描いた絵に重力などの様々な効果をつけてゲームや動く絵本を作成ビジュアルプログラミングなので未経験者の学習に最適ふりがな付の丁寧な解説テキストで安心して学習を進められる〈初級〉はじめてのScratchコース受講対象：9歳～（推奨）オンライン教室対応初めての人におすすめ、プログラミングの基礎を学ぶビジュアル言語教材の「Scratch（スクラッチ）」を使用ブロックを組み合わせてできるプログラミングゲームやアニメーションを作りながら飽きずに学ぶ動画の解説付きで文字を読むのが苦手でも大丈夫！〈中級〉Scratchマスターコース受講対象：10歳～（推奨）オンライン教室対応より本格的に学びたい方におすすめの中級レベルビジュアル言語教材の「Scratch（スクラッチ）」を使用ブロックを組み合わせてコンピューターの制御を学ぶ目覚まし時計、計算ゲームなどをプログラミングして開発プログラミングを学ぶことで論理的思考／創造力が身につく〈上級〉Webアプリコース受講対象：11歳～（推奨）オンライン教室対応実践的なWebプログラミングを学習する上級レベル世界で用いられるテキスト言語「Ruby（ルビー）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎文法を学び、挨拶ロボットアプリなど簡易的なWebアプリを開発〈上級〉ゲームアプリコース受講対象：11歳～（推奨）オンライン教室対応実践的なゲームプログラミングを学習する上級レベル世界で用いられる「JavaScript（ジャバスクリプト）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎の文法を習得し、シューティングゲームなどのゲームアプリを開発〈上級〉Pythonロボティクスコース受講対象：11歳～（推奨）実践的なゲームプログラミングを学習する上級レベル世界で用いられるテキスト言語「Python（パイソン）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎の文法に交え、簡単なロボット制御を並行して学習〈入門〉プログラミング入門コース with マインクラフト受講対象：9歳～（推奨）キーボードやマウスの操作に慣れるパソコン入門レベル全世界の子どもに大人気の「マインクラフト」を使用適宜、動画が配置されていて学習を進めやすい設計ゲーム感覚でプログラミングの基本を一通り習得可能 ▶︎自宅でできるプログラミング学習体験を申し込む ▶︎テックアカデミージュニア受講生とその保護者のリアルな感想将来のために小学生からプログラミング学習をはじめよう！今回は小学校で必修化したプログラミング教育の内容や学習することのメリット、小学生におすすめのプログラミング教材や教室を紹介してきました。いかがでしたでしょうか。記事内でも述べた通り、小学生のうちにプログラミング学習に触れておくことにはメリットがたくさんあります。最後にもう一度、メリットとしてプログラミング学習で身に付く力/スキルをまとめておきますね。小学生がプログラミングを学習するメリット学習力：主体的に考え学習する力が身に付き、他教科の学力アップに繋がる質問力：わからないことを伝える力が身に付く積極力：「できた」という成功体験が自信につながる自己表現力：自らの力で作品を形にすることで自己表現力が身に付く問題解決力：問題の原因を探り、解決へと導く力が身に付く論理的思考力：自分が意図する活動を実現するためにはどうすべきか順序立てて考える力が身に付くプログラミング教育によってコンピュータと、それを動かすプログラムを勉強することで仕組みを理解して、それらを活用する力を身に付けることができます。そしてこれらの体験は、あらゆる活動においてコンピュータを活用することが求められるこれからの社会を生きていく子どもたちにとって、非常に役に立つスキルとなります。今は無料で簡単にはじめられるプログラミング教材が多くあるので、興味がある小学生の子どもたちにはぜひ、学びの機会を与えてあげましょう！今回紹介したおすすめの教材や教室も参考にしてみてくださいね。 ▶︎子どもにプログラミング学習が向いているか、適性をチェックしたいこの記事がお子さまの成長や可能性を広げるきっかけになれば幸いです。

子ども向けプログラミング

中学生でプログラミングを学ぶメリットとは〜おすすめの言語・教材・教室を紹介〜

ここでは、中学生のプログラミング必修化について解説します。プログラミング必修化のメリットなどについて触れたうえで、今後の社会の変化を把握しておきましょう。目次中学生でプログラミングが必修化中学生からプログラミングを学ぶメリット中学生が学ぶべきプログラミング言語 3選中学生がプログラミングを学ぶ方法 ①書籍で独学中学生がプログラミングを学ぶ方法 ②オンライン教材で独学中学生がプログラミングを学ぶ方法 ③プログラミングスクールで学ぶ中学生がプログラミングを学ぶ時のポイント／注意点まとめ中学校でプログラミングが必修化 2021年度から中学校でもプログラミング教育が必修化されます。中学校では、技術・家庭科（技術分野）においてプログラミング、情報セキュリティに関する内容を充実させ、次のような内容について学びます。計測・制御のプログラミングネットワークを利用した双方向性のあるコンテンツのプログラミング ※双方向性とは何かしらの働きかけ(入力)によって、応答(出力)する機能のこと中学校におけるプログラミング教育の目的中学校におけるプログラミング教育の目的は「社会におけるコンピュータの役割や影響を理解するとともに、簡単なプログラムを作成できるようにすること」です。さらには、来たる第四次産業革命や更なるグローバル化に対応する人材を育てるためでもあります。日本ではすでにエンジニアが不足していますが、さらに深刻化することが予想されており、経済産業省の発表では2016年時点で約17万人、2030年には最大約79万人ものエンジニアが不足するとされています。そのような背景もあり、IT人材を育成するためには小学生や中学生といった早い段階でのプログラミングスキルの向上が必要不可欠なんです。中学校プログラミング教育のポイント「全面実施」とは新学習指導要領によると、中学校でのプログラミング教育は2021年度から「全面実施」となっています。全面実施とは、2021年度に中2、中3の子ども達は中学校を卒業するまでに、新しい学習指導要領ですべてを学んでおかなければならないということです。つまり、本来なら3年かけて学ぶ内容を1、2年で学ぶことになりかねないので、事前の準備が重要となります。 [PR] ITスキルを習得して在宅で副業する方法とは中学生からプログラミングを学ぶメリット中学校でプログラミング教育が必修化する際に「中学生がプログラミングを学ぶ具体的なメリットって何？」という声が少なからず聞かれます。言うまでもなく、プログラミングを若いうちから学ぶことにはたくさんのメリットがあります。思考面においては、プログラミング学習で身に付くプログラミング的思考（論理的思考）によって、IT分野だけでなく日常生活でとても役に立ちます。さらに、中学生という早い段階でプログラミングを学ぶことで将来性がグッと広がり、人生の中で多くの選択肢を獲得するきっかけになるんです。それでは中学生がプログラミングを学ぶ6つのメリットを詳しくみていきましょう！ 1．論理的思考力が身に付く論理的思考力とは、自分が意図する活動を実現するためにはどうすべきか順序立てて考える力のことです。問題や課題を解決するときには論理的思考力がとても役に立ちます！そんな大人になる過程でも、社会人になっても必要となる論理的思考力は、プログラミングを学ぶことで身につけることができます。というのも、プログラミングはコンピューターに任意の動きをさせるために細かな指示をする必要があります。さらに、正しい指示でなければ思った動きをしてくれないため、プログラミングではよくエラーが起こります。そのためプログラミングを学習していると、問題解決のための論理的思考力も自然と身に付いてくるのです。 2．想像力が身に付くプログラミングは、自分が作りたいものを完成させるために頭の中で何度もイメージを繰り返す必要があります。そうやって脳内でイメージを繰り返していくうちに想像力が身に付きます。想像力が身に付くと、視野が広くなる思ったものを形にできる見えない部分を理解することができるといった更なるメリットを得ることができます。これらは子ども達が将来を生き抜く上で役立つ力になることでしょう。 3．身近なものの仕組みがわかるプログラミングを学習することで身近なものの仕組みが分かるようになってきます。現代の日本ではプログラミングによって作られたものやサービスが身近にあふれています。具体的には、ゲームソフトスマホアプリ WEBサイトなど。これらはすべてプログラミングによって作られています。身近なものの仕組みが分かることで、今までとはものの見方が変わり、異なる視点から物事を考えられるようになります。さらには、知的好奇心が刺激されこれまで以上にIT分野に興味を持つきっかけにもなるのです。 4．将来、仕事に困らない前章でもお伝えしたように、日本では今後IT企業が増加することに付随して更なるIT人材不足が予想されています。そのため、プログラミングができるだけで数多くの企業から就職先を選ぶことができるようになり、仕事に困ることはないと言えます。また20代前半のITエンジニアの平均年収は約340万円と、同年代の平均年収である約248万円を大きく上回っていることからも、プログラミングの将来性が高いことがうかがえます。 5．働く場所を自由に選べるプログラミングはパソコンと通信環境さえ揃えば作業をすることができるため、在宅で仕事をすることも容易です。つまり地方に住んで自然豊かな環境にいながら仕事をすることもできますし、さらにはプログラミングで使用する言語は全世界で共通なので、プログラミングスキルさえあれば海外を拠点に働くこともできます。また日本はIT先進国とは言えないため、若い内からプログラミングを学んでいるうちに「北欧などのIT先進国で最先端の開発をしてみたい」という選択肢もでてきます。これは余談ですが、IT留学などで最先端の現場を経験したことがある人は、海外で働くことを強く意識する傾向にあります。 6．働き方の幅が広がるプログラミングはパソコン1台と通信環境さえあればどこでもできるため、起業にも最適なジャンルといえます。また、ITは今後さらに生活に密着していくことになるため、ビジネスチャンスが多いことも起業におすすめの理由です。それだけでなく、自分で会社を立ち上げなくてもクラウドソーシング（企業や個人からの業務委託）などを活用することで、フリーランスとして働くこともできます。このように、会社員以外にもたくさんの選択肢が広がるのはプログラミングを学んでいる人の強みとなるでしょう。中学生が学ぶべきプログラミング言語 3選この章では、中学生が学ぶべきおすすめの言語をご紹介していきます。中学生が学ぶべき言語の特徴としては、「成果が見えやすく、学習が続けやすいもの」です。というのも若いうちは成功体験が少ないため、プログラミングで成果が視覚化できるとよりやる気が出て更なるレベルアップが期待できるため。そのため「フロントエンド」という、現在表示されているWEBページのデザインボタンにカーソルを合わせた時の色の変化などといったユーザーの目に映る部分の開発ができる言語がおすすめです。具体的なおすすめの言語は以下の通り。 1）HTML/CSS HTMLやCSSは、WEBページを構成するプログラミング言語。 HTMLはそもそもWEBページを作成するために開発された言語で、現在インターネット上で公開されているほとんどのページがこのHTMLで作られているんです。 CSSはWEBページのデザインやスタイルの部分を指定することができる言語で、HTMLと組み合わせることで、WEBページ色やサイズなどを自分の思い通りに作成することができます。以上のような特徴があるので、自分でホームページやWEBサイトを一から作りたい方にとくにおすすめですよ。 2）JavaScript JavaScriptは現代社会のありとあらゆる場所に使われているプログラミング言語。身近な例を挙げると、動くWEBページやアニメーションスマホアプリカウントダウンなどの非同期通信（ページを再読み込みせずにリアルタイム更新）といったことに使われているんです。このようにJavaScriptは幅広い使われ方をしているので、WEBサイトやWEBアプリ全般を学びたい方にぴったりの言語ですよ。 3）PHP PHPはWEBサイトの開設やアプリの開発などに使用されていプログラミング言語。アクセスした日時や人によって表示内容が変わる、いわゆる動的なWEBアプリを作ることが最適で、オンラインショップ広告の配信システム SNS（FacebookもPHPで作られている）といったさまざまな用途で使われています。また環境設定が比較的簡単で、基本的な文法さえ覚えてしまえばある程度使えるようになるため、初心者の方でも勉強しやすい言語ですよ。中学生がプログラミングを学ぶ方法① 書籍で独学書籍は昔からよく使われているプログラミングの学習方法で、著者が明示されていることから信頼できる情報が手に入りやすいことが特徴ですよ。 ◇プログラミングを書籍で独学するメリット/デメリット書籍【メリット】自分に合う教材を見つけやすい気軽にはじめられる価格帯体系的に学ぶことができる書籍で学ぶメリットはこの3つ。プログラミングの書籍は種類が多く、一つの言語に特化した書籍がほとんどのため、自分に合う教材が見つけやく、1,000〜2,000円程度と、他の学習法に比べて安価にはじめられるのも嬉しいポイント◎ 書籍では学習内容がページごとにわかりやすくまとめられており、効率よくプログラミングを学ぶことができます。書籍【デメリット】つまずくとなかなか前に進めない情報が多すぎて必要なものがわかりにくい書籍で学ぶデメリットはこの2つ。書籍でプログラミングを独学する場合、一度つまずくと解決方法を見出すことが難しく、なかなか学習が進まないことがあります。これで挫折してしまうこともしばしば。また、書籍は情報量が多すぎて必要以上のレベルであったり、必要のない情報まで記載されていたりします。そのため初心者だと必要な情報を見分けるのが難しく混乱してしまうことがあります。 ◇書籍選びのポイント自分の目で見て中身を確かめるいきなり専門書レベルのものを買わない書籍を選ぶ際のポイントはこの2つです。まずは本屋などで立ち読みしてみて、自分が理解しやすい内容かどうかをチェックすることが大切です。プログラミングが上達したいからと言ってはじめから専門書レベルの書籍を買ってしまうと学習の序盤でつまずいてしまい、継続して勉強することが困難になってしまうので、まずは初心者用の書籍がおすすめです。 ◇中学生におすすめのプログラミング書籍 9選レベル別におすすめのプログラミング書籍は以下の通り。プログラミング初心者におすすめの書籍① 「スラスラ読める JavaScript ふりがなプログラミング」 https://www.amazon.co.jp/ こちらの書籍はプログラムの読み方がすべて載っており、初心者の方がよく感じる「このプログラムは何を意味しているんだろう？」という疑問を解決してくれる書籍なんです。プログラミング初心者におすすめの書籍② 「PHPの絵本第2版 Webアプリ作りが楽しくなる新しい9つの扉」 https://www.amazon.co.jp/ こちらは本のタイトルにもあるようにイラストを多く使用している書籍で、初心者が難しく感じるプログラミングのハードルを低くしてくれますよ。プログラミング初心者におすすめの書籍③ 「スラスラわかるHTML&CSSのきほん」 https://www.amazon.co.jp/ こちらは2013年に発売以来、初心者を中心に人気を保っており累計4万部を突破した書籍なんです。初心者用でありながら内容は実践的なものまで含まれているので、長く使えるのも嬉しいポイント。プログラミング中級者におすすめの書籍① 「PHPライブラリ＆サンプル実践活用[厳選100]」 https://www.amazon.co.jp/ こちらの書籍は、実際の開発現場で応用することができるPHPのサンプルコードなどが紹介されていることが特徴で、基礎的な知識を持った方が一歩踏み込んだ勉強をしたいときにおすすめの書籍です。プログラミング中級者におすすめの書籍② 「JavaScript本格入門」 https://www.amazon.co.jp/ こちらは累計3万部を超えたベストセラー書籍で、基本的な情報から進化を続けるJavaScriptの新記法までを紹介しているので、本格的にJavaScriptを学ぼうと思っている方におすすめです。プログラミング中級者におすすめの書籍③ 「HTML5&CSS3デザインブック」 https://www.amazon.co.jp/ こちらの書籍はWEBサイトを一から作る方法が紹介されており、HTMLとCSSの基本的な情報はもちろん、実践的な使い方が紹介されていることが特徴です。プログラミング上級者におすすめの書籍① 「CSSシークレット ―47のテクニックでCSSを自在に操る」 https://www.amazon.co.jp こちらの書籍は47個の項目別にエンジニアが直面する問題を解決するためのテクニックが紹介されている書籍。CSSでできることをもっと広げてくれる有用な書籍ですよ。プログラミング上級者におすすめの書籍② 「JavaScript関数型プログラミング複雑性を抑える発想と実践法を学ぶ」 https://www.amazon.co.jp/ こちらはJavaScriptを使ってより上位のエンジニアを目指すために必要な実践テクニックが数多く紹介されています。関数型プログラミングのメリットを知るためにもおすすめの書籍です。プログラミング上級者におすすめの書籍③ 「PHP逆引きレシピ」 https://www.amazon.co.jp/ こちらの書籍は全896ページにわたる大容量の情報がまとめてあり、エラーを解決するためにはこの1冊があれば十分といえるほど。中級者から上級者にレベルアップしたい方には必須級の書籍ですよ。中学生がプログラミングを学ぶ方法② オンライン教材で独学オンライン教材は家にいながら1人で学べることから近年注目されている学習方法で、徐々に教材の種類も増えてきていることが特徴です。 ◇オンライン教材で独学するメリット/デメリットオンライン教材【メリット】動画で分かりやすい学びたい技術をピンポイントで探せるプログラミングをオンライン教材で学ぶメリットはこの2つ。講師が動画で授業を展開してくれるため、視覚と聴覚を使って学習ができることから理解しやすく、学習したことが身に付きやすい特徴があります。また、プログラミングのオンライン教材はジャンルやカテゴリごとに細かく分かれているため、自分が必要としている技術や授業をピンポイントで探すことができるので、効率よく学習することができますよ。　オンライン教材【デメリット】体系的に学ぶのには不向き検索力が問われるモチベーションの維持が難しいオンライン教材で学ぶデメリットはこの2つ。オンライン教材はジャンルが細かく分かれているがために、分散的な学習プラットフォームといえます。そのため体系的に学ぶことには不向きです。また、学習していく中でわからないことは自分で検索して解決する必要があるので、検索力がないとつまずいてしまうこともしばしば。オンライン教材での学習は誰かに管理されるわけではないので、学びたい意欲が強くないと続かない、モチベーションの維持が難しいのもデメリットと言えます。 ◇オンライン教材を選ぶポイント 1つのプラットフォームで豊富な情報量があるか無料または格安でお試しができるかオンライン教材を選ぶ際のポイントはこの2つです。オンライン教材は1つで完結することが望ましいので、1つのプラットフォームで自分が学びたいことすべてが網羅されていることが最低ライン。そのため、事前にどれほどの情報量（コースなどの種類）があるかをチェックすることが重要ですよ。学習を効率よく進めるためには、無料または格安のプログラミング教材をお試しをしてから、自分に合うものを見つけることが大事です。そのためお試しができない高額の教材は避けましょう。 ◇中学生におすすめのオンライン教材 3選中学生向け、レベル別におすすめのオンライン教材は以下の通り。プログラミング初心者におすすめのオンライン教材「Progate（プロゲート）」 https://prog-8.com/ Progateは、”初心者から、創れる人を生み出す”をコンセプトに、初心者でも挫折せずにプログラミングを学べる環境が整っていることが特徴。またアプリ版もリリースされているので、スキマ時間ややる気が出ないときでも時間を上手に活用することができますよ。プログラミング中級者におすすめのオンライン教材「CODEPREP（コードプレップ）」 https://codeprep.jp/ CODEPREPは、プログラムを書いて動かしながら学ぶ実践型のオンライン教材。毎日コツコツとプログラムを書く習慣をつけることができるので、本格的にエンジニアを目指す前段階としておすすめの教材といえます。プログラミング上級者におすすめのオンライン教材「Udemy（ユーデミー）」 https://www.udemy.com/ja/ Udemyは世界最大級のコースラインナップが特徴で、上級者の方でも満足できる充実の学習内容がそろっています。こちらはすべてが動画教材のため、ある程度プログラミングを理解していないと教材の良さを活かしきれない点は注意が必要ですよ。中学生がプログラミングを学ぶ方法③ プログラミングスクールで学ぶプログラミングスクールは自分の学びたいコースを選び、教室に通うもしくはオンラインでカリキュラムを進めていくベーシックな学習スタイルで、継続しやすいことが特徴。 ◇プログラミングスクールで学ぶメリット/デメリットプログラミングスクール【メリット】わからないところをすぐに聞ける学習のモチベーションを維持しやすいプログラミングスクールで学ぶメリットはこの2つ。プログラミングスクールの場合は、教室への通いでもオンラインでも分からないところをすぐに質問できて、学習に行き詰まることが少ないことがメリットです。さらに課題の提出があったり、制作物を他の受講生や先生と共有してフィードバックをし合えたり、モチベーションを保ちやすく学習環境としては最高です。プログラミングスクール【デメリット】費用が高い教室に通う場合は通える場所に限りがあるプログラミングスクールで学ぶデメリットはこの2つ。プログラミングスクールは他の学習方法と比べて費用が高いため、気軽にはじめることができないのがデメリットと言えます。さらに教室へ通学型のプログラミングスクールは大都市を中心に開校されていることがほとんどのため、地方に在住の方はスクールに通えなかったり、納得いくスクールが見つからない場合があります。（オンラインスクールが増えているため、選択肢が多くなっています） ◇プログラミングスクールを選ぶポイント受講生の感想を参考にする運営会社の健全性をみる無料お試しができるか確認するプログラミングスクールを選ぶ際のポイントはこの3つです。本当に良いプログラミングスクールかどうかを見極めるには、受講生の感想を参考にすることが一番です。SNSなどのリアルな声をチェックしてみるのもいいでしょう。子どもが安心してプログラミングを学習するためには運営会社が健全であることは絶対条件ですよね。そのため住所や代表者名が明記されているか、悪い評判はないか、などを事前に把握しておくのも大切です。プログラミングスクールは一度きりではなく、何度がに分けて通うまたは学習するので、失敗のないように無料体験などお試しができるかどうかを確認しましょう。また無料体験では「スクールの雰囲気」や「授業の進め方」、「教室内の環境」などをチェックするといいですよ。 ◇中学生におすすめのプログラミングスクール 3選中学生におすすめのプログラミングスクールを3つ紹介します。テックアカデミージュニア https://junior.techacademy.jp/ テックアカデミージュニアは、全国に教室を展開する小中高校生を対象としたプログラミング教室です。動画をメインとした教材のため、導入教室が近くになくてもオンラインで学習することができます。一人ひとりに合わせたペースで学習できることでき、自発的に課題を発見して問題解決へと導いてくれることが最大の特徴です。また、プログラミング学習体験体験授業無料カウンセリングなど、自宅からオンラインで無料体験することができます！気になった方はこれらを有効に活用してみてくださいね。ライフイズテック https://life-is-tech.com/ ライフイズテックは、2010年にスタートした中学生・高校生向けIT・プログラミング教育サービスです。ライフイズテックは豊富な学習スタイルを展開していることが特徴で、キャンプ（夏休みなどの時間を利用した短期集中型コース）スクール（教室に通うベーシックなスタイル）グローバルキャンプ（海外の名門大学で学べる珍しいコース）など全6種類の学習方法があります。オンライン校があるため、教室が近くになくても自宅から学習可能です。 CoderDojo Japan https://coderdojo.jp/ CoderDojoは、2011年アイルランドで始まった7〜17歳の子どもを対象にしたプログラミング道場で、日本には約220もの道場があります。プログラミングの基礎的な知識がついてきたら「腕試し」としてキャンプやコンテストに挑戦できるので、スポーツと同じように大会に向けてプログラミング学習を頑張るモチベーションになりますよ。教室の開催回数や参加者が増えてきているので、気になる方は今のうちに参加してみることをおすすめします。 5. 中学生がプログラミングを学ぶ時のポイント／注意点「自分の子どもにプログラミングを学習させたいけれど、そもそも自分がプログラミングを学習していないからどうやってアプローチすればいいのかわからない…」などとお困りではありませんか？実は中学生がプログラミングを学ぶときに注意したいポイントが2つあります。ポイントを抑えることでプログラミングの上達にもつながるので、ぜひ参考にしてみてくださいね。それでは順番に解説していきます。 1．自分でできることからやってみる（いきなりお金を掛けすぎない） 1つ目のポイントは、「まずは自分でできることやる」こと。というのも、まだ迷っている中学生にいきなり完璧に整った環境を与えても、そもそもプログラミングへの熱量が少ないとお金の無駄になってしまう可能性があります。まずは自分でできる小さなことからはじめることで成功体験が積み重なり、プログラミングのやる気へとつながっていきます。そのため、無料の教材やオンラインでできる簡単なものからはじめてみることをおすすめします。 2．無理強いはしない（本人の志向に任せる） 2つ目のポイントは、「無理強いはしない」こと。中学生は徐々に精神が自立しはじめる年頃なので、無理にプログラミングをやらせようとしても逆効果になることがほとんどです。そのため本人の意向を尊重して、本人のやる気に任せる言語の指定をしないといった対応をすることが必要ですよ。本人がプログラミングをやる気になったときには、全力でサポートしてあげるといいでしょう。 6. 中学生のプログラミング学習〈まとめ〉今回は中学生のプログラミング学習について紹介・解説してきましたが、いかがでしたか？最後にもう一度、中学生からプログラミングを学ぶメリットと中学生におすすめのプログラム言語をまとめておきます。 ◇中学生からプログラミングを学ぶメリット論理的思考力が身に付く想像力が身に付く身近なものの仕組みがわかる将来、仕事に困らない働く場所を自由に選べる働き方の幅が広がる ◇中学生が学ぶべきプログラム言語 HTML/CSS JavaScript PHP 中学生でプログラミングを学習する際はぜひ参考にしてみてくださいね。この記事が子どもの成長や可能性を広げるきっかけになれば幸いです。 ▶︎TechAcademyジュニアについて詳しく知りたい【お知らせ】TechAcademyジュニアでは、高校生向けに実践的プログラミングサービスを提供しています。独自で開発した学習システムは、基礎から実践までステップアップ式のカリキュラムとなっており、生徒が1つの画面で迷うことなく学習を進めることが可能です。現在、自宅にいながらプログラミングの楽しさについて知ることができるプログラミング学習体験を実施しています。プロから学べる機会ですので、ぜひ体験してみてください。

子ども向けプログラミング

PHPのpreg_matchで正規表現によるマッチングする方法

今回は、preg_matchについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 preg_matchを利用することで、文字列の検索や置換を行うことができます。実務でも、preg_matchを利用した文字列の検索や置き換えを行う処理を実装するので、ぜひ学習してみてください。目次Scratch(スクラッチ)とはスクラッチの特徴／メリットスクラッチでできることスクラッチを使ってみようスクラッチの勉強方法スクラッチの勉強におすすめのプログラミング教室子供にスクラッチを勉強させる際のポイント／注意点まとめそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。 preg_matchとは preg_matchでは、ある文字列から正規表現で指定したパターンにマッチした文字列を検索できます。パターンにマッチした場合は1を返し、マッチしなかったら0を返します。例えば、検索対象の「これからphpを勉強します。」という文字列から、パターン「php」を検索すると1を返します。一方、「ruby」を検索すると0を返します。「php」の場合は文字列内にありますが、rubyはないのでこういった結果になります。他にも大文字・小文字を区別せずにパターンにマッチさせることや、指定文字列が先頭にあるだけマッチさせることもできます。正規表現とは正規表現とは、文章中の特定文字を検索、置き換え、削除することができる文法です。正規表現を利用する例として、文章中にある「,」という英文字のカンマを、「、」という日本語の読点に一括変換する場合などです。その他にも、次のような使い方が可能です。〇〇〇から始まる文字列を検索したい ×××で終わる文字列を▼▼▼に置き換えたい大文字で始まる英単語を検索したい HTML内のcol-から始まり、そのあとは1～2桁の数字となっているコードを別のコードに置き換えたい全角と半角、両方のスペースを削除したい正規表現には非常に多くの指定方法があり、正規表現だけで1冊の本を書くことができるほど非常に深い内容です。まずは、基本的な使い方を、サンプルコードを利用して使っていきましょう。大石ゆかり正規表現で指定したパターンにマッチするかどうかって少し難しいですね。田島悠介そうだね。簡単に言うと、ある形式にマッチしているかどうかってことなんだ。大石ゆかりある形式とは何ですか？田島悠介例えばメールアドレスの形式になっているかどうかだったり、電話とか日付でもいいね。そういう単純には表せないものに使うんだよ。書き方を見てみよう！ [PR] ITスキルを習得して在宅で副業する方法とはpreg_matchの書き方 preg_matchの書式は以下の通りです。 [ ]はオプションで省略できます。 preg_match(/正規表現パターン/,検索対象の文字列,[配列],[動作フラグ],[検索開始位置]) 返り値 preg_match関数の返り値は、パターンにマッチすれば1、マッチしなければ0です。返り値の部分に変数を指定することで、パターンマッチの結果である1か0が代入されます。正規表現パターン「正規表現パターン」でマッチさせたいパターンを指定します。正規表現は/で囲んで記述します。検索対象の文字列「検索対象の文字列」では、正規表現でマッチさせる対象文字列です。配列「配列」を指定した場合は、検索結果が配列として代入されます。動作フラグ「動作フラグ」で「PREG_OFFSET_CAPTURE」を指定すると、マッチした文字列の登場した位置（オフセット）をバイト数で取得できます。検索開始位置「検索開始位置」では、先頭ではなく検索を始めたい位置を指定できます。ただし、指定はバイト数なので注意が必要です。実際に書いてみようそれでは実際に、preg_match関数を使用してPHPのプログラムを書いてみましょう。文字列「PHP」を検索する以下は、文字列「PHP」にマッチするか確認しています。サンプルコード <?php if (preg_match("/PHP/", "今PHPを勉強しています。")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } 出力結果解説 <?phpでは、PHPプログラムを開始することを意味します。 if (preg_match(“/PHP/”, “今PHPを勉強しています。”)) {では、preg_matchを利用して、今PHPを勉強しています。という文字列からPHPという文字列がパターンマッチするかどうかを調査しています。 if文で、もし適合していたらという条件分岐を行っています。 echo “マッチしました。”;では、if文の条件に合致したら、マッチしました。と表示しています。 } else {では、if文の条件に合致しない場合の条件を指定しています。 echo “マッチしませんでした。”;では、if文の条件に合致しない場合、マッチしませんでした。と表示しています。 }ではif文の処理を終了します。文字列「PHP」を大文字、小文字を区別せずに検索する以下では、大文字・小文字の区別をせずにマッチするか確認しています。これは、preg_matchの/正規表現パターン/の最後にアルファベットのiを記載することで、大文字、小文字を区別せずに検索します。サンプルコード <?php if (preg_match("/PHP/i", "今phpを勉強しています。")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } 出力結果解説 <?phpでは、PHPプログラムを開始することを意味します。 if (preg_match(“/PHP/”, “今phpを勉強しています。”)) {では、preg_matchを利用して、今phpを勉強しています。という文字列からPHPという文字列がパターンマッチするかどうかを調査しています。 if文で、もし適合していたらという条件分岐を行っています。 echo

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

Scratch(スクラッチ)とは

スクラッチの特徴／メリット

直感的にプログラムを組める

開発環境の構築は不要

無料で勉強できる

スクラッチでできること

音楽や簡単なゲーム作り

ロボットを動かす

レゴの模型を動かす

Tello（ドローン）を操作する

スクラッチを使ってみよう

スクラッチの勉強方法

スクラッチの入門書で勉強する

メリット：自分に合った教材を見つけやすい／費用が安い

デメリット：選ぶのが大変／わからないことを聞くことができない

スクラッチの勉強におすすめの本

(全レッスン動画解説付き)できるたのしくやりきるScratch3子どもプログラミング入門

親子でかんたん スクラッチプログラミングの図鑑 【Scratch 3.0対応版】

作って学ぶScratchドリル (O’REILLY KIDS)

オンライン教材（ソフト）で勉強する

メリット：成果物の動きをイメージしながらできる／必要（使える）な部分だけを掻い摘んで勉強できる

デメリット：体系的に学ぶのは難しい／検索力が必要

スクラッチの勉強におすすめのオンライン教材（ソフト）

プログラミング教室で勉強する

メリット：わからないことがすぐ解決できる／体系的に勉強できる

デメリット：費用が高い／エリアが限られている

スクラッチの勉強におすすめのプログラミング教室

TechAcademy ジュニア

ヒューマンアカデミー

LITALICOワンダー

子供にスクラッチを勉強させる際のポイント／注意点

無理強いはさせない

親も一緒に勉強をする

プログラミングスキルは遊びの延長戦と考える

まとめ

記事を検索

関連するキーワード

関連する記事

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

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

親子でかんたんスクラッチプログラミングの図鑑【Scratch 3.0対応版】

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