%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\begin{document}
\begin{titlepage}
\title{プログラミング的思考を用いた算数学習ツールの提案}
 \author{広瀬研究室3年 \\C118227A 山名流聖}
\date{}
\maketitle
\thispagestyle{empty}
\end{titlepage}
 
\newpage
　
\newpage

\begin{center}
 {\bfseries 概要}
\end{center}
2020年から小学校をはじめとしてプログラミング教育が必修科され，社会的にもプログラミングを学ぶことへの関心が高まっている。小学校では主にプログラミング的思考を育むことが目的とされ，中学校からは実際にプログラミングが行われる。本研究では，特に小学校で行われているプログラミング教育に焦点を当て，実際に小学生が算数を学習する中でプログラミング的思考を活用できるような学習ツールを作成，提案する。本研究の流れとしては，まず最初にプログラミング的思考を活用するにあたり親和性の高い教科を考察し，学習ツールを作成する教科と単元の選択を行った。その後，Webページとプログラムに分けて学習ツールを作成し，一つの学習ツールとして実用できるか検証を行った。

\maketitle
\setcounter{tocdepth}{2}
\tableofcontents
\chapter{はじめに}\label{sec:st}
本章では，研究を行なっていく上での背景や目的について説明する。
\section{背景}
プログラミング教育は現在，初等教育での必修化や個人や企業が経営するプログラミングスクールなど様々な教育の場で行わており，数年前と比べて関心が高まっている。また，Scratch（スクラッチ）やMOONBlock（ムーンブロック）など子供向けに無料でプログラミングを学ぶことができるビジュアルプログラミング言語も存在しており，プログラミング自体を学ぶ場が増加している。
\section{ビジュアルプログラミング言語}
子供がプログラミングを学びやすいように開発されたプログラミング言語である。実際にコードを記述する場面は少なく，プログラムを動かすための要素をブロックなどにパーツ化され，マウスのドラック＆ドロップ操作でプログラミングができる\cite{visual}。以下では無料で利用することができるビジュアルプログラミング言語を説明する。
\subsection{Scratch（スクラッチ）}
Scratch 財団が MIT メディアラボと共同開発を行なっている無料の教育用ビジュアルプログラミング言語及びその開発環境である\cite{scratch}。指示が書かれているブロックをマウス操作で並び替えやつなぎ合わせることでプログラミングを行う。並べる順序や論理構造に関しては，一般的にコーディングを行うようなプログラミング言語と似ている考え方が多く実践的なプログラムを体験することができる。ブラウザ上の実行画面では，ブロックの指示を上から順に実行していき，画面右側のキャラクターがプログラムに沿って動くことで，結果が視覚的に得やすいように工夫されている。（図\ref{fig:Scratch}）

\begin{figure}[tbp]
\centering
\includegraphics[width=11cm]{Scratch}
\caption{Scratchの実行画面}
\label{fig:Scratch}
\end{figure}
\newpage
\subsection{MOONBlock（ムーンブロック）}
Webブラウザ上で利用することができる無料の教育用ビジュアルプログラミング言語\cite{moonblock}。Scratchと同様に指示が書かれているブロックを組み合わせることでプログラミングを行う。ブロックには計10個のカテゴリがあり，HPを増やす/減らすや出現する数を変えるなどオリジナルのゲームを作りやすいブロックが多く実装されている。また，JavaScriptの記述を学ぶことも可能でオリジナルのブロックをJavaScriptを用いて作成することも可能。

\begin{figure}[tbp]
\centering
\includegraphics[width=11cm]{MOONBlock}
\caption{MOONBlockの実行画面}
\label{fig:MOONBlock}
\end{figure}

\newpage
\section{プログラミング教育のねらい}
文部科学省が出している新小学校学習指導要領\cite{tebiki1,tebiki2}において，プログラミング教育は
\begin{enumerate}
\item プログラミング的思考を育むこと
\item プログラムの働きや情報社会がコンピュータ等の情報技術に支えれているということへの気付きや身近な問題を解決しようという態度を育むこと
\item 各教科等での学びをより確実なものとする
\end{enumerate}
以上の3点を教育のねらいとして定めている。また，小学校段階におけるプログラミングに関する学習活動をA（学習指導要領に例示されている単元等で実施するもの），B（学習指導要領に例示されてはいないが、学習指導要領に示される各教科等の内容を指導する中で実施するもの），C（教育課程内で各教科等とは別に実施するもの），D（クラブ活動など、特定の児童を対象として、教育課程内で実施するもの）に分類しており，それぞれ分類された教科や活動ごとにプログラミング教育としてのねらいが定められている
\subsection{プログラミング的思考}
本研究の中で学習ツールに用いているプログラミング的思考について文部科学省は，「自分が意図する一連の活動を実現するために，どのような動きの組み合わせが必要であり，一つ一つの動きに対応した記号を，どのように組み合わせたらいいのか，記号の組み合わせをどのように改善していけば，より意図した活動に近づくのか，といったことを論理的に考えていく力」\cite{tebiki1}としており，必ずしもコーディング\footnotemark[1]能力のことを指すものではない。特に小学校プログラミング教育では，プログラミング的思考として思考力・判断力・表現力等の育成が目的とされている。

\footnotetext[1]{プログラミング言語を用いてプログラムの記述，打ち込みを行うこと。}

\section{目的}
実際に一つの教科に焦点を絞り，その教科でプログラミング的思考を活用した学習ツールを作成，提案することを目的としている。また，特定教科の学習ツールという形でプログラミングに触れる機会が増えれば，プログラミングへの苦手意識の改善に繋がっていくはずである。加えて，プログラミングと他教科教育を組み合わせることで相互の学習理解が深まってき，論理的思考力や他教科への応用力が育まれ，その後のプログラミング教育の効果がさらに向上していくことが見込める。

\section{研究の流れ}
本研究では，以下の流れで学習ツールの作成を行った。
\begin{enumerate}
\item プログラミング教育と各教科との親和性の考察
\par 関連研究を元にプログラミング教育と各教科との親和性を考察し，親和性が高い教科や要素を見つける。
\item 教科の決定
\par 上記で考察した要素等を元に実際に学習ツールを作成する教科と単元を決定する。
\item 学習ツールシステムの設計
\par 学習ツールを作成する上で，問題の管理方法や出題方法についてのシステム設計を行う。
\item 学習ツールの作成
\par 設計を元に学習ツールの作成を行う。
\end{enumerate}

\chapter{関連研究と先行事例}\label{sec:kanken}
本章では関連研究や先行事例を参照し，プログラミング教育と各教科の教育が組み合わされた例に関して調査，考察を行う。
\section{関連研究}
関連研究では，実際にそれぞれの教科とプログラミング教育の関連についての研究が行われていた。新小学校学習指導要領が定めているプログラミング教育のA分類とB・C分類のそれぞれで各教科とプログラミング教育を組み合わせる場合の課題の考察をしている。
\\\quad 新ヶ江ら\cite{bunkena}はA分類についての考察を行なっている。A分類には算数，理科，総合的な学習が含まれており，その中で問題解決力や思考力・判断力・表現力を育む中でプログラミング的思考を養うことが必要だと述べている。
また，A分類に指定されている3教科の中でも特に算数の学習においては，数学的な概念を習得していく上で，何かしらの手順に則った形で習うことが多いため，プログラミングを活用した指導の有効性があるとしている。
\\\quad 平田ら\cite{bunkenb}の研究では，B・C分類の考察を行なっている。B・C分類には言語や実習的な教科である国語，社会，生活，音楽，家庭，体育，図画工作，外国語が含まれている。前述の算数のようにプログラミングを用いることは難しいが，例えばプログラミングの構造である「順序」や「分岐」「反復」などを国語や英語の文法の決まりに当て嵌めて学ぶこともできる。そういったことからプログラムを直接活用することはなくとも，プログラミング的思考を養うことは可能だとしている。
\section{先行事例}\label{sec:kanken}
全国的にみてもプログラミング教育は学内外問わず行われている。以下はその中でも各教科でプログラミングを用いて行われている事例である。

\subsection{正多角形をプログラムを使ってかこう}
杉並区立西田小学校の5年生を対象とした算数の授業に取り入れられた事例である\cite{zirei}。Scratchを利用して，どのような指示を与えたら正多角形がかけるかを考えることでプログラミング的思考を育成することをねらいとしている。生徒たちは学校所有のパソコンを一人一台使用してそれぞれが正多角形の作図の手順をScratch上で再現することで学習を行なっている。。
\subsection{くりかえしをつかってリズムをつくろう}
大阪市立茨田東小学校の2年生を対象とした音楽の授業に取り入れられた事例である\cite{zirei}。上記と同様にScratchを利用し，プログラムの基本構造である繰り返しの動きに音を当てはめて，リズムを作り出す。学校所有のタブレット型端末を2人で1台利用する形で授業が行われており，小学校低学年でも直感的な操作が可能である。

\chapter{各教科とプログラミング教育の親和性}\label{sec:sinwa}
第\ref{sec:kanken}章での考察を元に，本章では親和性が高い教科や要素について述べていく。
\section{親和性が高いものに含まれる要素}\label{youso}
プログラミング教育との親和性が高い教科には以下の要素が挙げられる。
\begin{itemize}
\item 構造的な事柄を学ぶもの
\item 物事を順序立てて考えるもの
\item 成果が実感しやすいもの
\end{itemize}
以上の3点は，プログラミング教育において論理的思考力の活用や問題解決の考え方の育成という観点で親和性が高い要素だと言える。
\section{親和性の高い教科}
上記の要素を実際の教科に当てはめた場合，親和性が高いと言える教科とその理由について以下に示す。
\subsection{算数・理科}
算数・理科は，計算や仕組みの理解のために明確な手順やアルゴリズムが存在しており，プログラミング的思考を用いることで学習がより効果的になることが考えられる。よって算数や理科といった教科はプログラミング教育との親和性は高いと言える。
\subsection{音楽}
音楽は，学習ツールを通して作成したプログラムの結果を音やリズムといった形でわかりやすく体感することができるという点から，プログラミング教育を行う上での成功体験に結びつきやすい。また，音楽の学習に論理的な考え方を取り入れることができるため，通常の音楽の授業では育むことが難しい思考力なども合わせて身につけることができる。そのため音楽とプログラミング教育の親和性は高いと言える。

\chapter{学習ツールシステムの設計}\label{sec:sekkei}
本章では，学習ツールの作成にあたるための設計について説明する。
\section{学習ツールの教科と単元}
第\ref{sec:sinwa}章で挙げた要素と教科より，本研究ではプログラミング的思考を用いた算数学習ツールの作成を行った。関連研究でも考察されていたが，算数は問題を解く上で何らかの手順に則り考えていく傾向が強く，手順やアルゴリズムを理解することでプログラミング的思考だけでなく数学的な思考も育むことが可能である。そういった実質的な効果と学習ツールとしての作成難度を考慮し，算数の学習ツールを作成することを決定した。
\\\quad 次に学ぶことができる単元だが，本学習ツールでは小学3年の範囲であるかけ算の筆算のアルゴリズムが学べるものを作成する。かけ算の筆算には計算を解くためのアルゴリズムが存在しており，それを理解することで大きい数のかけ算などにも応用することができる。プログラミング的思考を用いてかけ算の筆算のアルゴリズムを学ぶことで，計算の仕組み理解や論理的思考力を育成するのがねらいである。
\subsection {かけ算の筆算のアルゴリズム}\label{aru}
かけ算の筆算のアルゴリズムについて，2桁×1桁のかけ算を例に説明する。
\begin{itemize}
\item かけられる数A × かける数B の式を位を揃えて書く
\item Aの1の位にBの1の位をかける
\item 繰り上がりあれば10の位に渡す，無ければ1の位をそのまま書く
\item Aの10の位にBの1の位をかける
\item 1の位からの繰り上がりを足し，さらに繰り上がりがあれば100の位に渡す，無ければ10の位を書く
\end{itemize}
以上がかけ算の筆算のアルゴリズムである。（図\ref{kake}）また，桁数が増えた場合でも同様の手順で問題を解くことができる。
\newpage

\begin{figure}[tbp]
\centering
\includegraphics[width=8cm]{kake.pdf}
\caption{かけ算の筆算の流れ}
\label{kake}
\end{figure}

\newpage

\section{システムの設計}
学習ツールのシステム面とユーザページの設計について説明する。
\subsection{システム}
問題の管理や回答の判定を行うシステムの設計を行なった。具体的には以下の項目の通りである。
\begin{itemize}
\item 問題は\ref{aru}で説明したアルゴリズムの流れに沿いながら値を入力し回答していく形式。
\item 入力された値に対して，正解かどうかを判断し，結果を表示させる。
\item 複数作成する問題とそれに対応した答えの管理を行う。
\item 次の問題の表示させる。
\end{itemize}
以上の設計（図\ref{sys}）をもとに，学習ツールの作成を行う。

\begin{figure}[tbp]
\centering
\includegraphics[width=12cm]{chart.pdf}
\caption{システムの概略図}
\label{sys}
\end{figure}

\subsection{ユーザページ}
問題の表示や回答の入力を行うユーザページの設計を行なった。ページに導入するものと合わせて以下に概要を示す。
\begin{itemize}
\item 問題文の表示を行う。
\item 数字を入力する回答フォームを配置する。
\item 回答結果の表示を行う。
\item 次の問題を表示するボタンを配置する。
\end{itemize}
\quad ユーザページに関して，実用的なものとするためにUI（ユーザインターフェース）を整え，わかりやすく使いやすいページデザインを目指す。また，学習ツールはWebで公開しWebブラウザ上で利用することを想定している。

\chapter{学習ツールの作成}
本章では実際に作成した学習ツールのついて説明する。
\section{システム}
学習ツールを作成するにあたり，第\ref{sec:sekkei}章の設計を元に問題の管理や回答の判定を行うシステムを作成した。システムの実装にはJavaScriptを用いている。実際の問題処理として，入力された解答を受け取る，回答の判定，次の問題への書き換えの3つを行う。当初，問題管理にはCSVファイルからデータを読み込んで行うことを想定して作成していたが，現状はJavaScriptファイル内の配列に直接問題と解答を記述することで、問題を表示させている。回答の判定に関して，入力された値をあらかじめ設定されている解答とそれぞれ比較し，Web ページ内の入力ボックス右側に○か×を挿入するようにしている。
\section{ユーザページ}
実際にWebブラウザ上で利用することを想定し，ユーザページの作成を行った。ページ作成にはHTML5\cite{html}とCSS3\cite{css}を用いている。ユーザページでは，問題の表示や回答の入力や送信を行うことができ，回答の入力フォームは数字のみに対応するようにした。現段階のユーザページでは，学習ツールとして最低限の動作を確認するため問題と解答フォーム，ボタンのみを配置している。問題は\ref{aru}で示した掛け算の手順を追いながら解答できるような形を意識して作成した。画面下部には回答ボタンと次の問題へ移動するボタンが配置されており，回答ボタンを押すとシステムへ入力された値を渡し，判定によって入力ボックス右側に○（正解）か×（不正解）が表示される。
\begin{figure}[tbp]
\centering
\includegraphics[width=9cm]{page_1.pdf}
\caption{ユーザページ}
\label{page_1}
\end{figure}

\begin{figure}[tbp]
\centering
\includegraphics[width=9cm]{page_2.pdf}
\caption{回答入力後のユーザページ}
\label{page_2}
\end{figure}


\chapter{結論}
本研究では，プログラミング的思考を用いた算数の学習ツールの作成を行い，実際に問題を解いてみることで学習ツールとしての課題等の検証を行なった。実際に作成した学習ツールでは，入力された値に対して結果を表示させる機能を実装することができた。
\section{課題}
システムに関して，現状では問題の管理をJavaScriptファイル内に直接記載し，そこから読み込む形で処理を行なっているが，次の問題へ進む際に問題のみが書き換えられないという問題がある。回答自体の判定は可能なため，問題を読み込んでから表示させるまでに問題が起きていると考えられる。また，学習ツールとしてどの程度実用的なのかが確認でいていないため，その点も本研究においての課題展である。
\section{今後の展望}
ユーザページに関して，問題の出題方法は決定とし，ページ内のデザインを利用者が見やすいように編集していく。最終的には実際に利用されることを想定してUIを整える等ユーザビリティの考え方に則したユーザページの作成を行っていく。システム面では，上記の課題点を改善した上でより複数の問題を設定できるようなシステムを目指す。また，データベースを導入し回答の記録や表示を行えるようにする。

\begin{thebibliography}{9}
 \bibitem{visual} Studio947. "知りたい！プログラミングツール図鑑.ビジュアルプログラミングってなに？〜3タイプ分類でわかるScratchやViscuitの違い"
 \\
 \url{https://tool-zukan.com/column/3752/}，(参照 2020-11-26)
 \bibitem{scratch} MITメディアラボ. "Scratch"
 \\
 \url{https://scratch.mit.edu/about}，(参照 2020-11-16)
 \bibitem{moonblock} (c)UEI Corporation.. "MOONBlock"
 \\
 \url{https://moonblock.jp/#}，(参照 2020-11-16)
\bibitem{tebiki1} 文部科学省. "「小学校プログラミング教育の手引き」の改訂（第二版）について"
 \\
 \url{https://www.mext.go.jp/content/20200214-mxt_jogai02-000004962_001.pdf}，(参照 2020-11-18)
\bibitem{tebiki2} 文部科学省. "小学校プログラミング教育の手引（第二版）"
 \\
 \url{http://www.magokoro.ed.jp/contents/upload/5d0320bf15cd8.pdf}，(参照 2020-06-09)
 \bibitem{bunkena} 新ヶ江登美夫, 村原英樹, 新井しのぶ, 石田靖弘, 岡田充弘, 西村敬子, 野上俊一 . "小学校プログラミング教育の現状と教員養成における課題
Ａ分類（算数，理科，総合的な学習の時間)"，中村学園大学・中村学園大学短期大学部研究紀要，52号 p.183-192，2020-03-06
 \bibitem{bunkenb} 平田繁, 岡田充弘, 木原美樹子, 西村敬子, 田村孝洋, 白石恵里, 野上俊一 .  "小学校プログラミング教育の現状と教員養成における課題 : B・C分類（国語，社会，生活，音楽，家庭，体育，図画工作，外国語)"，中村学園大学・中村学園大学短期大学部研究紀要，52号 p.193-203，2020-03-06
\bibitem{zirei} 未来の学びコンソーシアム .  "小学校を中心としたプログラミング教育ポータル "
\\
\url{https://miraino-manabi.jp/}，(参照 2020-06-09)
\bibitem{html} HTMQ. "HTML5リファレンス"
 \\
 \url{http://www.htmq.com/html5/}，(参照 2020-08-28)
 \bibitem{css} HTMQ. "CSS3リファレンス"
 \\
 \url{http://www.htmq.com/css3/}，(参照 2020-08-28)
\end{thebibliography}


\end{document}
