【初心者から創れる人へ】ProgateのHTML&CSSコースをやってみた！

独学でかつオンラインで学習できるProgate(プロゲート)は無料で始められるプログラミング学習サービスで、東大生が作ったサービスとしても話題となりました。今回は実際にProgateを使ったレビューを紹介しています。

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

TechAcademyマガジンでは、過去にプログラミングの独学に使えるオンライン学習サービスの実践レポートを公開してきました。

オンラインでプログラミングを学習できるサービスは増えてきていますが、今回紹介するのは「Progate(プロゲート)」です。

Progateは無料で始められるプログラミング学習サービスで、東大生が作ったサービスとしても話題となりました。

Progateとは

Progateの対象は主にプログラミング初心者。

Webサービスを創るのに必要となる言語（HTML,CSS,JavaScript,PHP,Rubyなど）をオンラインでわかりやすく学べる、今人気のサービスです。

2016年4月からは有料サービスのProgateプラスもはじまり、コンテンツもますます充実しています。

スクリーンショット 2016-05-23 14.56.58

学習のステップとしては、「学習コース」「道場コース」「プロジェクトコース」という3つに分かれていて基礎から実践的な内容まで一連で学ぶことができます。

特に用意するものもなくパソコン一つあればオンライン上で学習できてしまうので、「とりあえず独学で進めたい」という人にはおすすめです。

また、Progateでは無料と有料プラン両方用意されています。

スクリーンショット 2016-05-23 14.59.18

月額980円のプラスプランでは、基礎編から実践編まで全てのカリキュラムを受けることができます。

まずはベーシックプランで無料でプログラミングを体験してみるのが良いでしょう。

Progateの特徴

Progateには主に3つの特徴があります。

1.わかりやすいスライド

スライドを用いた丁寧な解説で、初心者にもぴったりです。

自分のペースでプログラミング学習を進められます。

また、スライドを検索したり、お気に入りに登録したりもできるので、見たいスライドにいつでもアクセスすることができます。

2.ブラウザに直接コードを書き込める

Progateではブラウザに直接コードを書き込むことができるので、

あなたが本メディアを見ているこのブラウザだけで学習を進めることができます。

煩わしい環境構築が一切不要なのは、ありがたい限りですよね。

3.描いたコードが即プレビューに反映される

描いたコードの結果もブラウザ上ですぐに確認することができます。

つまり、自分の書いているコードの意味が一目でわかるということ。

実際にものを作ることで、モチベーションの維持にもつながりそうです。

[PR] プログラミングで挫折しない学習方法を動画で公開中

実際にやってみた

今回はHTML&CSS初級編で学習してみました。

初級編では、実際にWebサイトを作りながらHTML/CSSの理解を深めていきます。

1440138eb3fed66aa65074b0de903d83-620x287

学習目安時間は4時間と、手軽な点も重要なポイントです。

79c1fa1c5d0b1e8dd8c4447ac8613ac3-620x295

見やすいデザインのスライドは学習意欲を掻き立ててくれます。

これなら、プログラミング初心者でも安心。

スライド一枚一枚の要点をしっかりと抑えていきましょう。

98984399e46de7f76591a57da4146592-620x297

こんな感じでブラウザに直接書けます。

右下の見本の状態を目指してコードを書いていきましょう。

右上のプレビューはコードを書くとすぐに変わるので、視覚的に理解を助けてくれます。感動！

c5e5293856c3a45048f17a6e1e1c4b94-620x295

学習中、忘れてしまったところはすぐにスライドを検索して確認することもできます。

画面左のスライドを縦にスクロール、もしくは検索窓に忘れてしまったタグやプロパティの名前を入れて検索することで、見たいスライドにいつでもアクセス可能です。

さくさくと進めていき、

f21e585e90ddd068dae1c56f959e9ca5-620x276

あっという間にwebページが出来上がりました！

9f41504121cb8f7733adc500daf0caa4-620x344

にんじゃわんこも祝福してくれます。

スライドに沿って学習していくことで、簡単にwebページを作り上げることができました。

HTMLやCSSの基礎の基礎をこんなにも手軽に学べるのは本当に嬉しいですよね。

経験値が溜まっていくとレベルがアップします。facebookやTwitterでシェアできるので自分のモチベーションアップにもつながるはずです！

今回のレビューはここまで。

プログラミング初心者の人は、まずHTML&CSS初級編で学習してみると良いかもしれませんね。

他にも無料で使えるプログラミング学習サービスはあるので、合わせてチェックしてみてください。

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

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキ

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、10年以上リードエンジニアとして活躍するMatt Gold...

プログラミング

福岡のIT・情報系専門学校12選｜自分に合った学校の選び方も解説

今回は福岡のIT・情報系の専門学校をまとめました。資格やスキルなど自分に合った学校を見つけましょう。田島悠介今回は、...

プログラミング

基礎を固める！プログラミング入門におすすめの書籍10冊【超初心者向け】

プログラミング関連の書籍は数多くありますが、初心者が勉強をはじめるときに、どこから読めばいいのかわからないということはないでしょうか。そこで今回は、プロ...

プログラミング

UNIXコマンドのhistoryでコマンド履歴を表示する方法【初心者向け】

プログラミングをする際に最低限知っておきたいこととして、UNIXコマンドがあります。今回は基本的な、historyコマンドの使い方を初心者向けに紹介します。...

プログラミング

「code.9leap.net」をやってみた！ゲームプログラミングを学ぶサイト

最近話題になることが多いオンラインでプログラミングを学べるサービスですが、Webのプログラミングだけにとどまりません。「code.9leap.net（コ...

プログラミング

「教養としてのプログラミング講座」を読んでみた【書籍レビュー】

2014年3月7日に教養としてのプログラミング講座が出版されました。新書で1時間程度で読める書籍です。非エンジニアでも「プログラミン...

プログラミング

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

【Windows編】パワーポイントで使える便利なショートカットキー20選

パワーポイント(PowerPoint)を使ってスライドショーを行う際に使えるショートカットキーについてご存知ですか？時間をかけて作ったスライドを効果的に使って、スマートなプレゼンテーションにしたいものですよね。今回は、スライドショー実行中に使えるショートカットキーを厳選して紹介します。なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。目次先頭のスライドから開始スライドショーの終了現在のスライドから開始次のスライドを表示前のスライドを表示指定したスライドを表示最初のスライドを表示スライドにペンで書き込みをするスライドに蛍光ペンで書き込みをするスライドにある書き込みを消すスライドにある書き込みを全て消すポインタを矢印にするレーザーポインタを表示する画面を黒にする画面を白にするメディアを再生・一時停止するメディアの再生を停止する音量を上げる音量を下げるショートカットキー一覧を見る（ダイアログボックスを表示）プレゼンに使えるパワーポイントショートカットキーまとめ先頭のスライドから開始「F5」まずは基本中の基本、スライドショーをスタートさせるショートカットキーです。マウス操作をしなくても、「F5」を押すことで、スライドショーが開始されます。 [PR] プログラミングで挫折しない学習方法を動画で公開中スライドショーの終了「Esc」スライドショー中に他のアプリケーションに切り替えるときには、一旦スライドショーを終わらせる必要がありますよね。「Esc」を押すことで、スライドショーを中断、終了させることができます。現在のスライドから開始「Shift」+「F5」スライドショーを中断した後、「F5」を押して再開させると、最初のスライドが表示されてしまいます。そこで、「Shift」を押しながら「F5」を押すことで、中断したスライドから再開することができます。「スライドショーの終了」と一緒に覚えておきたいショートカットキーです。次のスライドを表示「N」、「Enter」、「PageDown」、「→」、「↓」、または「Space」スライド間の移動に使うショートカットキーです。いくつかありますが、基本的にEnterキーを覚えておくと間違いがありません。前のスライドを表示「P」、「PageUp」、「←」、「↑」、または「BackSpace」プレゼンに合わせて前のスライドに戻りたいときには、このショートカットキーを使いましょう。こちらも同様にいくつかありますが、「戻る」＝「BackSpace」と紐付けると覚えやすいです。「次のスライドを表示」と合わせて覚えてしまいましょう。指定したスライドを表示「数字キー」+ 「Enter」特定のスライドを表示させたいときってありますよね。そんなときには、表示させたいスライドの番号を「数字キー」で押し、「Enter」を押すと希望のスライドへとジャンプすることができます。最初のスライドは「0」か「1」、最後のスライドは「99」のように大きな数字を入れるだけで良いので、覚えておくと便利です！最初のスライドを表示左右のマウスボタンを 2 秒間押し続ける最初のスライドに戻るには、「0」か「1」を押した後「Enter」を押す以外にも、マウスを使う方法があります。左右のマウスのボタンを2秒間押し続けることで、最初のスライドを表示することができます。その時々に応じて、使い分けてみましょう。スライドにペンで書き込みをする「Ctrl」+「P」プレゼン中に、スライドに書き込みをしたいときに便利なのがこのショートカットキーです。「Ctrl」を押しながら「P」を押すことで、ポインタをペン機能に変更することができます。スライドに蛍光ペンで書き込みをする「Ctrl」+「I」 PowerPoint2013では、ペン機能と同様に蛍光ペンにもショートカットキーで使用できます。「Ctrl」を押しながら「I」を押すことで、ポインタを蛍光ペン機能に変更することができるので、スライドに強調したい箇所がある場合などに使うことをオススメします。スライドにある書き込みを消す「Ctrl」+「E」書き込みをしたところを消したい、そんなときに使えるのが消しゴム機能です。「Ctrl」を押しながら「E」を押すことで、ポインタが消しゴム機能となり、ペンで書いたところを消すことができるようになります。上述のペン、蛍光ペン、消しゴム機能は、それぞれ同じ操作を行うことで解除することができるので、合わせて覚えましょう！スライドにある書き込みを全て消す「E」ペン機能で書き込んだ内容を一気に消したいときに使えるショートカットキーです。「E」を押すことで、書き込んだ内容をすべて消すことができます。消しゴムを意味する「Eraser」の「E」と考えると、簡単に覚えられますよ。ポインタを矢印にする「Ctrl」+「A」ポインタをペン機能や消しゴム機能に変更した後、ポインタを元に戻したい！そんなときには、「Ctrl」を押しながら「A」を押してみましょう。通常の矢印ポインタに戻すことができます。レーザーポインタを表示する「Ctrl」を押したまま、マウスの左ボタンを押し続ける (PowerPoint2013では「Ctrl」+「L」) スライドの注目してほしいところを強調するときには、レーザーポインタを使いたいですよね。「Ctrl」を押したままマウスの左ボタンを押し続けている間、ポインタをレーザーポインタに変更することができます。 PowerPoint2013では「Ctrl」を押しながら「L」を押すことでも同様に変更することができ、もう一度同じ操作をすることで解除されるので便利です。画面を黒にする「B」プレゼンの途中にスライドではなく、発表者の話に注目してほしいときってありますよね。そんな時には、「B」を押すことで画面を真っ黒にすることができます。画面を白にする「W」「画面を黒にする」と一緒に覚えたい機能です。「W」を押すことで、画面を真っ白にすることができます。画面を白くするか、それとも黒くするかは、プレゼンをしている環境に応じて選んでみましょう。メディアを再生・一時停止する「Alt 」+ 「P」スライドに埋め込んだメディアを再生したい！そんなときには、「Alt 」を押しながら「P」を押してみましょう。もう一度押すと、一時停止させることができます。メディアの再生を停止する「Alt」 +「 Q」「メディアを再生する」と一緒に覚えたいこの機能。再生しているメディアを停止したいときは、「Alt 」を押しながら「Q」を押すと止めることができますよ。音量を上げる「Alt 」+ 「↑」プレゼンの効果を高めるBGMの音量を、簡単に調節できるショートカットキーです。「Alt 」を押しながら「↑」を押すことで、BGMの音量を大きくすることができます。音量を下げる「Alt 」+ 「↓」 BGMが大きすぎたので小さくしたい、そんなときには「Alt 」を押しながら「↓」を押してみましょう。「音量を上げる・下げる」ショートカットキーをうまく使って、その場に応じたBGMの音量を調節できるようになりましょう！ショートカットキー一覧を見る（ダイアログボックスを表示）「F1」うっかりショートカットキーを忘れてしまった！そんなときには、スライドを開きながら「F1」を押すと、ショートカットキーが一覧になったダイアログボックスが表示されます。一つのショートカットキーにいくつもの機能が対応していることもあるので、一度確認してみましょう。プレゼンに使えるパワーポイントショートカットキーまとめキー機能「F5」先頭のスライドから開始「Esc」スライドショーの終了「Shift」+「F5」現在のスライドから開始「N」、「Enter」、「PageDown」、「→」、「↓」、または「Space」次のスライドを表示「P」、「PageUp」、「←」、「↑」、または「BackSpace」前のスライドを表示「数字キー」+ 「Enter」指定したスライドを表示左右のマウスボタンを 2 秒間押し続ける最初のスライドを表示「Ctrl」+「P」スライドにペンで書き込みをする「Ctrl」+「I」スライドに蛍光ペンで書き込みをする「Ctrl」+「E」スライドにある書き込みを消す「E」スライドにある書き込みを全て消す「Ctrl」+「A」ポインタを矢印にする「Ctrl」を押したまま、マウスの左ボタンを押し続ける(PowerPoint2013では「Ctrl」+「L」) レーザーポインタを表示する「B」画面を黒にする「W」画面を白にする「Alt 」+ 「P」メディアを再生・一時停止する「Alt」 +「 Q」メディアの再生を停止する「Alt 」+ 「↑」音量を上げる「Alt 」+ 「↓」音量を下げる「F1」ショートカットキー一覧を見る（ダイアログボックスを表示）いかがでしたでしょうか。ショートカットキーを使ってプレゼンテーションをすれば、画面上にメニューを出さずとも操作ができるので、すっきりとしたスライドになること間違いなしです。是非ショートカットキーを使いこなして、プレゼンテーションの腕を上げていきましょう！

PowerPoint

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

ここでは、中学生のプログラミング必修化について解説します。プログラミング必修化のメリットなどについて触れたうえで、今後の社会の変化を把握しておきましょう。目次中学生でプログラミングが必修化中学生からプログラミングを学ぶメリット中学生が学ぶべきプログラミング言語 3選中学生がプログラミングを学ぶ方法 ①書籍で独学中学生がプログラミングを学ぶ方法 ②オンライン教材で独学中学生がプログラミングを学ぶ方法 ③プログラミングスクールで学ぶ中学生がプログラミングを学ぶ時のポイント／注意点まとめ中学校でプログラミングが必修化 2021年度から中学校でもプログラミング教育が必修化されます。中学校では、技術・家庭科（技術分野）においてプログラミング、情報セキュリティに関する内容を充実させ、次のような内容について学びます。計測・制御のプログラミングネットワークを利用した双方向性のあるコンテンツのプログラミング ※双方向性とは何かしらの働きかけ(入力)によって、応答(出力)する機能のこと中学校におけるプログラミング教育の目的中学校におけるプログラミング教育の目的は「社会におけるコンピュータの役割や影響を理解するとともに、簡単なプログラムを作成できるようにすること」です。さらには、来たる第四次産業革命や更なるグローバル化に対応する人材を育てるためでもあります。日本ではすでにエンジニアが不足していますが、さらに深刻化することが予想されており、経済産業省の発表では2016年時点で約17万人、2030年には最大約79万人ものエンジニアが不足するとされています。そのような背景もあり、IT人材を育成するためには小学生や中学生といった早い段階でのプログラミングスキルの向上が必要不可欠なんです。中学校プログラミング教育のポイント「全面実施」とは新学習指導要領によると、中学校でのプログラミング教育は2021年度から「全面実施」となっています。全面実施とは、2021年度に中2、中3の子ども達は中学校を卒業するまでに、新しい学習指導要領ですべてを学んでおかなければならないということです。つまり、本来なら3年かけて学ぶ内容を1、2年で学ぶことになりかねないので、事前の準備が重要となります。 [PR] プログラミングで挫折しない学習方法を動画で公開中中学生からプログラミングを学ぶメリット中学校でプログラミング教育が必修化する際に「中学生がプログラミングを学ぶ具体的なメリットって何？」という声が少なからず聞かれます。言うまでもなく、プログラミングを若いうちから学ぶことにはたくさんのメリットがあります。思考面においては、プログラミング学習で身に付くプログラミング的思考（論理的思考）によって、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つの画面で迷うことなく学習を進めることが可能です。現在、自宅にいながらプログラミングの楽しさについて知ることができるプログラミング学習体験を実施しています。プロから学べる機会ですので、ぜひ体験してみてください。

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

子どもの能力を伸ばすプログラミング学習！無料アプリ教材6選

小学校、中学校、高校と段階的にプログラミング教育が導入され、子どもプログラミングへの関心が高まっています。最近では子どものプログラミング学習用に無料のアプリ教材が豊富に出ています。そこで本記事では、子どもの能力を伸ばすプログラミング学習のための、無料アプリ教材を6つ厳選して紹介します。子どものうちからプログラミングを始めることには多くのメリットがあり、小学校、中学校、高校それぞれでこれから必修化される「プログラミング教育」への導入としても役立つのでおすすめです。子どもがプログラミングに興味があるなら、まずは手軽に始められる無料教材からプログラミングの学習を始めてみてはいかがでしょうか。目次子ども向けプログラミング教材の種類【幼児〜小学生におすすめ】無料プログラミング教材 3選【中学〜高校生におすすめ】無料プログラミング教材 3選もっと学びを深めたい子どもにはまずは子ども向けプログラミング教材にトライしよう！子ども向けプログラミング教材の種類まず、こども向けのプログラミング教材4種類をそれぞれ紹介します。 1）アンプラグド教材アンプラグド教材とは、コンピュータ（PC、タブレット、スマホなど）の電子機器を使わずにプログラミング的思考を学ぶ教材のこと。コンピュータの原理やアルゴリズムの概念などをカードやパズルなどを使って学習します。こちらは手軽に実施することができるので、プログラミングの考え方を学ぶ導入教材として、特に小学生低学年におすすめです。【アンプログド教材例】 GLICODE®（グリコード） Robot Turtles（ロボットタートルズ） 2）ロボット教材ロボット教材とは、プログラムによって実際にロボットなどを操作して動かすことができる教材です。自分のプログラムした内容がすぐに確認できるので、子どもが興味を持ちやすく、楽しみながら学習することができるのが特徴です。知育おもちゃとしてもおすすめの文字入力不要で幼児でも操作しやすいものから、テキスト言語でプログラムする本格的なロボットまで種類が豊富です。【ロボット教材例】 Cubetto（キュベット） toio（トイオ） LEGO®BOOST（レゴブースト） 3）ビジュアル言語教材ビジュアル言語教材とは、図形や命令の書かれたブロックやアイコンなど、視覚的な形を操作してプログラミングする言語教材です。主にドラッグ＆ドロップの操作でブロックなどを組み合わせて簡単にプログラミングができるため、プログラミング初心者でも扱いやすいのが特徴です。ビジュアル言語教材の中には、ビジュアル言語で作成したプログラムをテキスト言語に変換して表示したり、テキストでもコードの入力ができるものもあります。【ビジュアル言語教材例】 Springin（スプリンギン） Viscuit（ビスケット） Scratch（スクラッチ） 4）テキスト言語教材テキスト言語教材とは、コンピューターへの命令（プログラム）を文字、記号、数字のみで記述する教材のこと。文字はほとんどの場合英語で、世界で実用的に使われているプログラミング言語の大多数が「テキストプログラミング言語」です。つまり、エンジニアやプログラマーを目指すならいずれはテキスト言語を習得する必要があります。【テキスト言語の一例】 HTML/CSS Ruby JavaScript Python　など [PR] プログラミングで挫折しない学習方法を動画で公開中【幼児〜小学生におすすめ】無料プログラミング教材 3選それではまず、幼児～小学生におすすめできる無料のプログラミング教材を3つ紹介します。 1）Springin’（スプリンギン）難易度★☆☆ ツールタイプ：テキスト言語、ビジュアル言語コスト：完全無料対象年代：未就学児〜大人日本語対応：有開発元：株式会社しくみデザインオフライン版の有無：無動作環境：iOS（iPhone・iPadのみ） PC× タブレット◯ スマートフォン◯ Springin（スプリンギン）は、iPhoneやiPad上で、画面に指で絵をかいたり、アイコンをタッチするシンプルな操作でプログラミングをおこなうことで自作でゲームなどを作れる、株式会社しくみデザインが開発したiOSアプリです。 iPhoneやiPadがあれば無料ですぐに利用できるといった手軽さと、実行したい処理を直観的な操作でプログラミングできるのが特徴です。子どもが作成した画面上のアイテムにタッチするというシンプルな操作で、「重力」「回転」「自分がタッチされたら○○を動かす」などのような様々な機能や性能を実装できます。アイテム同士の関係を工夫することで小学生でも簡単にゲームや絵本、パズルを作成できます。独自のビジュアルプログラミング方式でプログラミングを学習している感覚なく、子どもがゲームを作る楽しさに集中できる教材となっています。学習につまずいたとしても、しっかり教えてくれるガイドも充実していて使いやすいです。 2）Viscuit（ビスケット）難易度★☆☆ ツールタイプ：ビジュアル言語コスト：完全無料対象年代：未就学児～小学校低学年日本語対応：有開発元：合同会社デジタルポケットオフライン版の有無：有動作環境：ブラウザ, iOS, Android PC◯ タブレット◯ スマートフォン◯ Viscuit（ビスケット）は、パソコンやタブレットに描いた絵を動かしたり、その絵をつかって「ゲーム」を作ったりすることができる、小学生におすすめのユニークなビジュアル言語教材です。プログラミング言語は一切使わず、お絵かき感覚で学べるため未就学児でも使うことができます。ビスケットでのプログラミングが、他の教育向けビジュアルプログラミング言語と大きく異なる点を説明します。まず、自分で絵を描いて、次にその絵を変化、移動させたりするために、画面上にある「メガネ」というツールを使う、という操作だけでプログラミングができてしまいます。自分で変化させたい場合は「メガネ」の左右の輪に違う絵を置き、移動させたい場合は、同じ絵を「メガネ」の左右の輪にずらして置きます。他のビジュアル言語の場合、右に10歩移動し、上に40歩移動する等の表現しなければなりませんが、ビスケットの場合は、「メガネ」を使って簡単にできるので、子どもたちがコンピュータでやりたいことに集中して試行錯誤することができます。スマホ用、タブレット用のアプリがあるほか、パソコンのブラウザ上でも利用できますし、小学校などの学校向けにオフラインで動作するWindows版の配布もあります。 3）Scratch（スクラッチ）難易度★★☆ ツールタイプ：ビジュアル言語コスト：完全無料対象年代：未就学児～高校生日本語対応：有開発元：MITメディア・ラボオフライン版の有無：有動作環境：ブラウザ, Windows PC◯ タブレット◯ スマートフォン× Scratch（スクラッチ）とは、アメリカ・マサチューセッツ工科大学のメディアラボが無償で公開しているビジュアルプログラミング言語です。画面上のブロックをつなぎ合わせてプログラムを作るといった、主にマウスを使用してプログラミングするため、キーボード操作に不慣れな小学生でも簡単に操作可能です。「10歩動かす」「１秒待つ」というような、あらかじめ準備されている命令ブロックを組み合わせてプログラムを作り、プログラムを実行することで画面上のキャラクターを動かしたり、音楽を流したりできます。作ったプログラムを実行して実際に動作確認をしながら、修正しては実行するトライ＆エラーの作業が、PCまたはタブレットの画面上だけで手軽に行えるので、小学生やプログラミング初心者におすすめです。自由に遊びながらプログラミングの基本を学ぶことで、発想力や自己表現力が自然と身に付きますよ。作ったゲームやクイズ、アニメーションなどの作品は、Scratch専用サイトで世界のユーザーに共有することができ、ネットリテラシーの学習も期待できます。【中学〜高校生におすすめ】無料プログラミング教材 3選ここではまず、中学～高校生のプログラミング学習におすすめしたいプログラミング言語について解説します。中学〜高校生へおすすめのテキスト言語の例として、HTML/CSS、JavaScript、PHPなどがあります。 HTMLは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、簡単にいうと、コンピューターが理解できる文章構成をするための言葉です。主にWebページなどの作成に使われます。 CSSは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略で、Webページのスタイルを指定するための言語です。HTMLと組み合わせて使用されます。 JavaScriptは、非常に身近な言語であり、検索バーに文字を入力するなど、私たちが日々パソコンやスマートフォンで使う動作の際に、JavaScriptによるコンピュータ処理が実行されています。 PHPは、動的にWebページを生成することが可能な言語です。他のプログラミング言語に比べて習得しやすいと言われています。これらのテキスト言語を学習する際には、キーボードによる文字入力が必要となるためほとんどの場合パソコンを使用します。それでは、中学～高校生におすすめの無料のプログラミング教材を3つ紹介します。 1）Hour of Code（アワーオブコード）難易度★★☆ 完全無料対象年齢 4歳〜18歳アンプラグド教材・ビジュアル言語教材・テキスト言語教材（HTML、CSS、JavaScript） Hour of Code（アワーオブコード）は、コースが豊富で初心者〜上級者コースまで揃っています。ディズニーやマインクラフトなどとコラボしたカリキュラムがあり、子どもの興味を引き付けることができます。そのため、小学生でも学習可能で、早くに学習を始めることで子どもたち自身が21世紀の情報社会を生き抜くための基盤を構築することができます。もちろん中高生向けの本格的なプログラミングが学べるコースも豊富に揃います。 Hour of Codeは、コンピュータサイエンス教育週間諮問委員会、審査委員会のほか、マイクロソフト、アップル、アマゾン、Boys and Girls Clubs of America、College Boardなど、さまざまな企業、団体によって推進されています。作成したプロジェクトは全世界に公開できて、いろいろな人からのコメントをもらうこともできますし、問題解決能力、論理性、創造性を養うことができる教材となっています。 2）progate（プロゲート）難易度★★☆ 一部無料（基礎レベル18レッスン）月額¥980＋税で82レッスン全て受講可能対象年齢 11歳〜テキスト言語教材（HTML、CSS、PHP、jQuery、Ruby） progate（プロゲート）は、1レッスンで解説スライドと演習がセットになっているため、学習しやすい教材です。初心者から創れる人を生み出す、初心者でも独学で挫折せずに学べること、そして本物のスキルが身につき「創れる」ようになることを念頭に設計された教材となっています。一部（基礎レベル18レッスン）を無料で利用することができます。イラスト中心のスライド式カリキュラムなので自分のペースで学習でき、復習しやすい構成となっています。プログラミングの作成はすぐに実践することができるように工夫されていて、実際にプログラムを作りながら使えるスキルが身につきます。この取り組みによって「創れる人」となれるように、子どもたちが自身でエラーを解決し、目標に向かって努力する能力が身につきます。 progateでは無料会員向けには、プログラミングに触れ「基礎」を身につけるコースが、プラス会員に向けには、月額980円＋税で「応用」と「実践」で創る力を身につけるコースが用意されています。アプリ版は「まずは気軽に始めてみたい」という方におすすめで、まとまった時間がなくても、アプリによる学習ならスマホゲーム感覚で楽しく始められますよ。まずはアプリ版をダウンロードして、そのあとWeb版で本格的に実践するというのもおすすめです。 3）CODEPREP（コードプレップ）難易度★★☆ 完全無料対象年齢 11歳〜テキスト言語教材（HTML、CSS、JavaScript、Ruby、PHP、Java、jQuery、Python など） CODEPREP（コードプレップ）は、1日10分から始められる穴埋め式ドリル形式が特徴です。また、この穴埋め式ドリル形式は基礎だけでなく応用編も充実しており、基本的なものから実践的な教材まで揃い、それらが全て完全無料で学び放題となっています。教材のSTEP1では、サクサク学べる内容となっています。最初は穴埋め形式なので1冊10分、テンポよく隙間時間で学習できます。HINTやTIPSを見ながら空欄に正解を埋めて直感的にプログラムの動きを理解していきます。教材のSTEP2では、自由に学べる内容となっています。 STEP1で学習した穴埋め以外の部分についても理解したくなったら、「自由編集モード（Playground）」に切り替えてコードを自由編集することができます。自分で変更したところが実際にどのように動作に反映されるのかを確かめることができるので、より理解を深めることができます。教材のSTEP3では、自分の環境で学べる内容となっています。プログラムの実際の動きを確認したら、編集したコードをダウンロードして自由自在に動作させることができ、子どもたちの達成感を向上させることができます。最後に、CODEPREPの教材の例をいくつか紹介します。 Java基礎オブジェクト指向編 Python実践コマンドラインアプリ編 JavaScript演習配列操作編 HTML入門基本要素(タグ)編 JavaScript入門基本操作編 CSS入門基本スタイリング編 Ruby入門基本操作編 WebSocketでチャットをつくろう　など Udemy（ユーデミー）もおすすめ！（有料）難易度★★★ 有料（1コース1,500円〜）対象年齢 18歳以上（※18以上でないとアカウント発行できません）テキスト言語教材（HTML、CSS、JavaScript、PHP、Java、Unity、Python など）無料ではありませんがプログラミング学習教材として、Udemy（ユーデミー）もおすすめです。 Udemyは、世界最大級のオンライン学習プラットフォームであり、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。世界最大のコースラインナップ数を有しており、130,000の豊富なコースから選べて、さらに毎月新しいコースが追加されています。また、講座の内容は、エンジニア業界の専門家が作成しているので安心して受講できます。 Udemyは米国Udemy,Inc.によって運営されているプラットフォームで、日本ではベネッセが事業のパートナーとして協業しています。 C2C（consumer to consumer）により生まれる、豊富で魅力的な講座が多く、子どもたち個人の学習ニーズに応じたコースを見つけることができます。一般的にオンライン学習サービスは、月額定額のサブスクリプションサービスとなっているものが多く、学習期限がありますが、Udemyは一度講座を購入するとそれ以上は費用がかからず学習期限もないため、何度も復習するなど自分のペースで学習できることろが大きなメリットです。もっと学びを深めたい子どもには「テックアカデミージュニア」もっとプログラミングの学びを深めたい子どもには、習い事として「プログラミング教室」がおすすめです。オンライン教材だけでは、子どもがひとりで学ぶにはモチベーションが続かない、遊び感覚で終了してしまうなど、どうしても限界があるからです。テックアカデミージュニアは、全国に教室を展開する小中高生向けプログラミング教室です。通いのオフライン教室の他に、カリキュラムとアクティブラーニングのハイブリット学習で子どもたちの学びを最大化する、オンライン教室も展開。自宅にいながらプログラミングの効率的な学習が可能です。テックアカデミージュニアのカリキュラムは動画とWebテキストで構成されており、子どもたち一人一人が自分のペースで学習を進めることができます。気になる方は自宅からオンラインで無料体験学習ができますので、ぜひお試しください。テックアカデミージュニアが展開する〈7コース〉を紹介〈初級〉Springin’（スプリンギン）コース（準備中）受講対象：7歳～（推奨）プログラミングが初めての人におすすめ、想像力を育む iOS専用アプリ「Springin’（スプリンギン）」を使用自分で描いた絵に重力などの様々な効果をつけてゲームや動く絵本を作成ビジュアルプログラミングなので未経験者の学習に最適ふりがな付の丁寧な解説テキストで安心して学習を進められる〈初級〉はじめてのScratchコース受講対象：9歳～（推奨）オンライン教室対応初めての人におすすめ、プログラミングの基礎を学ぶビジュアル言語教材の「Scratch（スクラッチ）」を使用ブロックを組み合わせてできるプログラミングゲームやアニメーションを作りながら飽きずに学ぶ動画の解説付きで文字を読むのが苦手でも大丈夫！〈中級〉Scratchマスターコース受講対象：10歳～（推奨）オンライン教室対応より本格的に学びたい方におすすめの中級レベルビジュアル言語教材の「Scratch（スクラッチ）」を使用ブロックを組み合わせてコンピューターの制御を学ぶ目覚まし時計、計算ゲームなどをプログラミングして開発プログラミングを学ぶことで論理的思考／創造力が身につく〈上級〉Webアプリコース受講対象：11歳～（推奨）オンライン教室対応実践的なWebプログラミングを学習する上級レベル世界で用いられるテキスト言語「Ruby（ルビー）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎文法を学び、挨拶ロボットアプリなど簡易的なWebアプリを開発〈上級〉ゲームアプリコース受講対象：11歳～（推奨）オンライン教室対応実践的なゲームプログラミングを学習する上級レベル世界で用いられる「JavaScript（ジャバスクリプト）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎の文法を習得し、シューティングゲームなどのゲームアプリを開発〈上級〉Pythonロボティクスコース受講対象：11歳～（推奨）実践的なゲームプログラミングを学習する上級レベル世界で用いられるテキスト言語「Python（パイソン）」を使用現役のエンジニアが子どもたちを遠隔でサポート基礎の文法に交え、簡単なロボット制御を並行して学習〈入門〉プログラミング入門コース with マインクラフト受講対象：9歳～（推奨）キーボードやマウスの操作に慣れるパソコン入門レベル全世界の子どもに大人気の「マインクラフト」を使用適宜、動画が配置されていて学習を進めやすい設計ゲーム感覚でプログラミングの基本を一通り習得可能これからプログラミングを始めたい、何から始めたらいいか分からないという方はぜひ試してみください。 ▶︎自宅で無料体験学習を受けてみる ▶︎テックアカデミージュニアについて詳しく知りたい ▶︎子どもにプログラミング学習が向いているか、適性をチェックしたいまずは子ども向けプログラミング教材にトライしよう！いかがでしたでしょうか。この記事では、年代別におすすめの子ども向けプログラミング教材を6つ紹介しました。昨今は無料で手軽に始められる子ども向けプログラミング教材がたくさんあるので、プログラミング教育の導入として、さらにはステップアップとして活用してみてはいかがでしょうか？プログラミング学習にはたくさんのメリットがあるので、最後にプログラミング学習で身に付く力/スキルをまとめておきます。プログラミングを学習するメリット学習力：主体的に考え学習する力が身に付き、他教科の学力アップに繋がる質問力：わからないことを伝える力が身に付く積極力：「できた」という成功体験が自信につながる自己表現力：自らの力で作品を形にすることで自己表現力が身に付く問題解決力：問題の原因を探り、解決へと導く力が身に付く論理的思考力：自分が意図する活動を実現するためにはどうすべきか順序立てて考える力が身に付くプログラミングはこれからの社会を生きる子どもたちにとって、必ず役に立つスキルとなります。興味がある子どもたちにはぜひ、学びの機会を与えてあげましょう！この記事が子どもたちの成長や可能性を広げるきっかけになれば幸いです。 ▶︎子どもにプログラミング学習が向いているか、適性をチェックしたい

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

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

2020年度より小学校でプログラミング教育が必修化しましたが、実際に小学生のプログラミング学習について理解できている方はまだ少ないようです。そこで今回は小学校でのプログラミング教育必修化を受けて、その学習内容やメリットを解説するとともに、小学生におすすめのプログラミング教材や教室を紹介しますのでぜひ、参考にしてみてくださいね！目次小学校でプログラミング教育が必修化！学習内容やメリットとは小学生がプログラミングを学習する3つの方法小学生におすすめのプログラミング教材 5選〈無料あり〉小学生におすすめのプログラミング教室 3選小学生のプログラミングまとめ小学校でプログラミング教育が必修化！学習内容やメリットとは技術革新の急速な進展に伴い、文部科学省は2020年度〜小学校、2021年度〜中学校、2022年度〜高等学校へと段階的にプログラミング教育の必修化を決定しました。プログラミング教育は、あらゆる活動においてコンピュータ等を活用することが求められるこれからの社会を生きていく子どもたちにとって、将来どのような職業に就くとしても極めて重要となる、という理由で導入されました。では、実際に小学生のプログラミング教育はどんなことをするのか、その学習内容と小学生の早いうちからプログラミングを学ぶメリットを紹介します。小学生のプログラミング教育はどんなことをするの？文科省の資料によると、小学校のプログラミング教育は「情報活用能力を育成すること」を目的としています。その情報活用能力を育成するために、次の2つの学習活動を各教科等の特性を生かし実施していきます。文字入力などパソコンの基本的な操作を習得するための学習活動論理的思考力を身につけるための学習活動つまり、「プログラミング教育」というような教科や科目が増えるのではなく、算数や理科、音楽や総合など普段の教科の中でプログラミング教育が実施されます。これはプログラミング教育を通じて各教科の学びをより深めることにもつながります。〈小学校におけるプログラミング教育の実施事例〉どんな感じで各教科にプログラミング教育が盛り込まれているのか実施事例をもとに紹介します。実施事例1：音楽の授業タブレットでビジュアル言語教材「Scratch（スクラッチ）」を使用してリズムの繰り返しを作る。様々なリズムを組み合わせたり、反復させたり、工夫して作りたいものを形にしていく。このビジュアル言語教材を使用した音楽の授業では、プログラミング教育を通して音楽の学習をさらに深めることができます。実施事例2：算数の授業正多角形をプログラムを使って描く。タブレットでビジュアル言語教材「Scratch（スクラッチ）」を利用して、辺の長さと角度を指定することで正多角形を作図する。通常、分度器では正多角形の内角を使用するが、Scratchでは外角を使用する、ということがこのプログラムのポイント。この算数の授業では、プログラムを使って正多角形をかくことではなく、どのようなプログラムを書いたら正多角形が描けるかを考えることがねらいです。このようにプログラミング学習を通して、身の回りにあるものの仕組みや技術についての理解を深めることができます。小学生のうちからプログラミングをはじめるメリット小学生のうちからプログラミングをはじめるとどのようなメリットがあるのでしょうか。プログラミングを学習している小学生の子どもたちは、技術の取得はもちろんですが、プログラミング以外にも自分に自信が持てるようになったり、根気強くなったり、ロジカルシンキングが身についたり、それぞれ違いはありますが確実に成長していると感じます。それではメリットとして、小学生のプログラミング学習で身に付く力/スキルをまとめておきます。小学生がプログラミングを学習するメリット学習力：主体的に考え学習する力が身に付き、他教科の学力アップに繋がる質問力：わからないことを伝える力が身に付く積極力：「できた」という成功体験が自信につながる自己表現力：自らの力で作品を形にすることで自己表現力が身に付く問題解決力：問題の原因を探り、解決へと導く力が身に付く論理的思考力：自分が意図する活動を実現するためにはどうすべきか順序立てて考える力が身に付くこれらの力はすべて、大人になる過程でも社会人になっても必ず役に立つスキルなので小学生のうちに身につけておいて損はありません。続いて、小学生がプログラミングを学習する方法をみていきましょう！ [PR] プログラミングで挫折しない学習方法を動画で公開中小学生がプログラミングを学習する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歳～（推奨）キーボードやマウスの操作に慣れるパソコン入門レベル全世界の子どもに大人気の「マインクラフト」を使用適宜、動画が配置されていて学習を進めやすい設計ゲーム感覚でプログラミングの基本を一通り習得可能 ▶︎自宅でできるプログラミング学習体験を申し込む ▶︎テックアカデミージュニア受講生とその保護者のリアルな感想将来のために小学生からプログラミング学習をはじめよう！今回は小学校で必修化したプログラミング教育の内容や学習することのメリット、小学生におすすめのプログラミング教材や教室を紹介してきました。いかがでしたでしょうか。記事内でも述べた通り、小学生のうちにプログラミング学習に触れておくことにはメリットがたくさんあります。最後にもう一度、メリットとしてプログラミング学習で身に付く力/スキルをまとめておきますね。小学生がプログラミングを学習するメリット学習力：主体的に考え学習する力が身に付き、他教科の学力アップに繋がる質問力：わからないことを伝える力が身に付く積極力：「できた」という成功体験が自信につながる自己表現力：自らの力で作品を形にすることで自己表現力が身に付く問題解決力：問題の原因を探り、解決へと導く力が身に付く論理的思考力：自分が意図する活動を実現するためにはどうすべきか順序立てて考える力が身に付くプログラミング教育によってコンピュータと、それを動かすプログラムを勉強することで仕組みを理解して、それらを活用する力を身に付けることができます。そしてこれらの体験は、あらゆる活動においてコンピュータを活用することが求められるこれからの社会を生きていく子どもたちにとって、非常に役に立つスキルとなります。今は無料で簡単にはじめられるプログラミング教材が多くあるので、興味がある小学生の子どもたちにはぜひ、学びの機会を与えてあげましょう！今回紹介したおすすめの教材や教室も参考にしてみてくださいね。 ▶︎子どもにプログラミング学習が向いているか、適性をチェックしたいこの記事がお子さまの成長や可能性を広げるきっかけになれば幸いです。

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

JavaScriptでスライダーバーを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでスライダーバーを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次ProgateとはProgateの特徴実際にやってみたそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでスライダーバーを実装する方法について詳しく説明していくね！大石ゆかりお願いします！はじめに Webサイトなどで、視覚的にわかりやすく操作させる「スライダーバー」について説明をします。今回はHTML標準のスライダーバーだけでなく、公開されているライブラリを使い、高機能なスライダーバーを実装するところまで解説します。ライブラリ：jQueryなどが有名ですが、便利な機能や汎用的な機能を集めたもの。スライダーバーとは下記のような値をスライドさせることで変化させる部品のことです。つまみのような場所を左右や上下に移動させることで値を変化させることができます。音量や画面の明るさのような値を調整する際の入力欄として操作しやすい部品です。 [PR] プログラミングで挫折しない学習方法を動画で公開中スライダーバーを実装する方法シンプルにスライダーバーを実装するのであれば、HTMLのinputタグのtypeをrangeとすることが簡単です。その場合は、下記のようなHTMLソースを記述するだけでスライダーバーが実装できます。これに目盛りをつけたり、値を10ずつ変化するようにしたり、CSSで装飾もできます。 min:スライダーバーの最小値を指定します。 max:スライダーバーの最大値を指定します。 step:スライダーバーの1目盛りを指定します。 <input type="range" id="inputSlideBar" min="0" max="100" step="10"> またJavaScriptでは、以下のようにslideBarの値を取得できます。今回はchangeイベントでスライダーバーの変更を検知して値を取得しています。 const inputSlideBarElement = document.getElementById('inputSlideBar'); inputSlideBarElement.addEventListener('change', function(){ console.log(inputSlideBarElement.value);//(例)console => 90 }); inputタグですので、値は.valueで取得できます。またvalueに値を0と設定することで、スライダーバーを左端に設定できます。複数の値を1つのスライダーバーで操作したいような場合などは、標準のinputタグでは対応できません。複数の値を扱えるスライダーバーを個人で実装もできますが、今回はライブラリを使って実装してみましょう。実際に書いてみよう HTMLのinputタグを使う方法は上で紹介した通りです。ここでは、JavaScriptのライブラリを使って実装する流れと方法を紹介します。 1．ライブラリを探す欲しい機能名やライブラリというキーワードで検索しても良いです。今回はJavaScriptのライブラリを探すのに便利なサイトのSearchLibsで、スライダーバーのライブラリを探します。検索キーワードはsliderだけだと画像をスライド表示するライブラリも出てくるので、sliderにスライダーバーを表すrangeという単語を追加します。検索結果から一番スターの多い「nouislider」というライブラリを使うことにします。 2．ライブラリを読み込むライブラリをダウンロードして読み込むことも可能ですが、今回はJavaScriptのライブラリなどを配信しているCDN（Content Delivery Network）のcdnjsから、「nouislider」を検索して配信しているURLを使って読み込みます。使用するCSSとJSファイルの2つを下記のようなURLで読み込んでください。また、スライダーバーの値を取得する処理でjQueryも使いますので一緒に読み込みましょう。 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.slim.js" crossorigin="anonymous"></script> 3．ライブラリの実装をするライブラリのドキュメントを読み、実装方法を確認します。まずはHTMLでスライダーバーを用意するためのタグを用意します。 JavaScriptで取得しやすいように、idにsliderという名前をつけています。 <div id="slider"></div> 次にJavaScriptの記述です。 noUiSliderのcreateメソッドに必要な値を渡します。第1引数に、スライダーバーを表示するためのHTMLを取得して渡します。第2引数に、{（波カッコ）で囲ったオブジェクトの形で、必須のstartとrangeを指定します。 startは操作するハンドルの数と初期位置を指定するためのものです。今回はハンドルを2つにし、20の位置と80の位置にします。 rangeはオブジェクトの形で最小値であるminと、最大値であるmaxを指定します。 let slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], //スライダーバーの初期位置を指定 range: { 'min': 0,

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【初心者から創れる人へ】ProgateのHTML&CSSコースをやってみた！

Progateとは