プログラミング

プログラミング

3歳から始めるWebプログラミング アルゴリズムを学んでみよう

プログラミングは何のため? 2020年にプログラミングが小学校で教育必修化される動きですが、その親世代はプログラミングを経験したことがない方も多いと思います。 そんな自分も生まれたときはインターネットというものもなく、電話もダイヤル式、テレビもテレビの上にアンテナが付いてる型や、ダイヤルをガチャガチャ回すタイプのものだってありました。 今やインターネットはパソコンだけでなく、スマホでどこでもサクサク楽しめる時代になり、また職場や工場のパソコン、ロボットのみならず、家庭にもゲーム機や自動センサーで温度を調整してくれるエアコンから、ドアの施錠を外出先から確認できるロックなどのスマート家電、またはIoT家電が、一般にも普及してきています。 プログラミングができると、どんないいことがあるか、また、子どものうちから学べることを簡単に紹介したいと思います。 プログラミングは難しい とは言ってもプログラミングに挑戦したことがある方なら分かると思いますが、一口に「プログラミング」と言っても、様々な言語があり、その種類実に100種は軽く越えます。 また、メジャーな言語、よく使われるというのが中にはあり、本屋さんで置いてある参考書も分厚く、理解するのにかなりの日数・年月がかかります。 そんな大人でも難しいことを、よく子どもに・・・と思うかもしれません。 例えば英語がまったく分からない人に、長文を読んで理解してね、なんて無茶な話です。 だからこそアルゴリズムを学ぼう アルゴリズムってなかなか聞き慣れない言葉だと思います。 アルゴリズムとは、簡単に言うと「手順」「やり方」です。 どんなプログラミング言語を学習しようとも、共通してある考え方がアルゴリズムです。 例えば、野菜の切り方にしても、大根の輪切りを作ろうとしたとき、皮をむいてから輪切りにするのと、輪切りにしてから皮をむいていく方法があります。 結果的にはどちらも同じものが出来あがるのですが、目的に達するまで、 「いかに正確に」 「いかに早く」 できるかがアルゴリズム、ひいてはプログラミングの重要な考えです。 正確さというのは、ロボットにしても家電にしても、ミスがあってはならないことです。 早さはというと、無駄な作業時間をかけるよりも、最小の労力で結果を出すことも重要です。 アルゴリズムの例 アルゴリズムの例を具体的に挙げたいと思います。 今あなたはA地点にいて、荷物を3つ持っています。 A地点から自宅までその荷物を全部持って帰るのですが、1度に持てる荷物は1個までのとき、何往復で持ち帰ることができるでしょうか? (方法1)1個ずつ素直に持ち帰って、2.5往復、という方法 ここで自宅に台車があり、3個同時に運べるとしたら? (方法2)一旦自宅に帰って台車を取ってくる場合、1.5往復、という方法 この例では、同じ動作を繰り返し行う場合、それらの動作をまとめて行うと楽になるという考え方です。 このようなアルゴリズムに慣れていくと、プログラミングでも同様に、同じ動作をまとめて登録し、1回の命令で動作させるという発想に結びつくようになります。 3歳が楽しくできるアルゴリズム学習の例 タイトルに3歳から始めるとありますが、3歳では実際どういう学習ができるのでしょうか? 実際の例を紹介します。 次のマス目に人と、うさぎとヒヨコがいます。 (問題1)人が動いてうさぎを捕まえに行くにはどのように進めばよいでしょうか? ↑ → ↓ ← の記号を使った次のうち、どれでしょうか? ①→← ②→↑ ③→→ ④↓→ (問題2)人が動いてヒヨコを捕まえに行くにはどのように進めばよいでしょうか? ①→← ②→↑ ③→→ ④↓→ ただし、人は上下左右どちらかに1マスずつしか進めません。斜めは進めません。 答えは当たり前のように簡単だと思います。 ただし「人間にとっては」簡単なことでも、機械やロボットにとってはそうではありません。 プログラミングではロボットやパソコンにルールを覚えさせるために、やり方、つまりアルゴリズムを理解する必要があります。 この問題の例では「右に1マス動いて、続いて右に1マス動くと到着」などという動き方をロボットに教えてあげるための学習というイメージです。 なぜアルゴリズムを学ぶのか 先述の通り、アルゴリズムは「やり方」、「方法」だとお話しました。 数あるプログラミング言語でも、共通してアルゴリズムは避けて通れない考え方です。 子どもの頃からこの考え方に慣れることで、将来的にどんなプログラミング言語を学んだとしても、 スムーズに理解することができるようになり、 プログラミング言語の1種類、2種類ではなく、何10種類の言語も自由に読み書きできるスキルが身につくはずです。 試しに学習してみたいという方は […]

JavaScript

【jQuery】チェックボックスで「該当なし」を選択肢たらその他を非表示

今回は、チェックボックスで「該当なし」をチェックしたときに、他の選択肢は選択できないよう、非表示にするプログラムをjQueryを使って作成します。 動作 最終的にこんな感じで動きます。 //codepen.io/creativeflake/pen/qrMMmx HTML HTMLは、シンプルなリスト構造で作成するとして、input type=”checkbox” には「name」属性、「value」属性を記述します。 *もちろん、リスト以外でもOKです。 ここでクラス名を”check_multi”というものと、「該当なし」の場合は”check_unique”とします。

CSS CSSの .disabled はjQueryによって追加されるクラス名になるのですが、非表示となった場合、透過度を40%になるということを、あらかじめ設定しておきます。

JavaScript 前提条件として、head内でjQueryを読み込みます。 JavaScript本体は次のように記述します。

JavaScriptの解説 1行目 inputタグが変更されたら(チェックのオン・オフ)があった場合、以下の関数を実行します。 2行目 クラス名”check_unique”がチェックされていたら 3行目 クラス名”check_multi”を非表示(disabledをオンにする)にし、 4行目 クラス名”check_multi”のチェックを外し(checkedをオフにする)にし、 5行目 クラス名”check_multi”の親要素にクラス名”disabled”を付け加えます。 7行目 それ以外(クラス名”check_unique”がチェックされていない)とき 8行目 クラス名”check_multi”を表示(disabledをオフにする)にし、 9行目 クラス名”check_multi”の親要素からクラス名”disabled”を外します。 動作 こちらから改めて動作を確認してみてください! //codepen.io/creativeflake/pen/qrMMmx