人工知能学会第二種研究会資料
AIチャレンジ研究会
SIG-Challenge-060-03

日本語プログラミング言語なでしこを使ったウェブサービス作成演習（第二報）
光永 法明 1
Noriaki Mitsunaga1
11

大阪教育大学
Osaka Kyoiku University

Abstract: 日本の初等中等教育においてプログラミング教育が拡充され，それにともなって中学校 技術・家庭科 技術分野の教員養成課程の講義においてもプログラミングを通してネットワーク技術を学べるとよい．そこで本研究では，そういった大学生向けの講義で日本語プログラミング言語なでしこを使ってネットワークサービスを作成する演習を実施したので報告する．
図 1 のような表示を作る．括弧内はサンプルのファイル名である．HTML 読み込み時に HTML を提供している IP アドレスの web socket サーバ(shindan.nako3,shindan.nako3 は web サーバも提供する)に接続する．
ブラウザで動作している main.js のプログラムはサーバからデータを受信すると左の吹き出しに表示する．下段の入力枠に入力すると右の吹き出しに表示すると共に web socket サーバに入力文字列を送る．
図１は診断メーカーサービスになっており，websocket サーバは接続時に「名前を教えてね」とクライアントに送り，受け取った文字列を「名前」として“診断結果”を送る．該当部分のプログラム例を
図 2 と図 3 に示す．図 3 の部分を書き換えることで自分の診断メーカーサービスを作ることが出来る．
また，クイズを出し正誤を判定するサービス，質問に自動で回答する自動応答サービス，また複数クライアントに同じ応答を返すようにすることでチャットサービスも実現できる．そこで，診断メーカー，クイズ，自動応答，チャットサービスをプログラム例として準備している．

１.はじめに日本の初等中等教育においてプログラミング教育が拡充され，それにともなって中学校 技術・家庭科
技術分野における内容 D 情報に関する技術の取り扱いが改められている[1]．現在の内容 D では情報通信ネットワークの技術についてプログラミングを通して生徒に学ばせることを求めている．そこで，将来教員となる大学生への講義においてもプログラ
ミングを通してネットワーク技術について学べるよう，CGI の仕組みを使ってウェブサービスを提供する演習を実施している例[2]がある．その演習ではプログラミング言語 Python を使っているが，日本語に近い表現が出来るプログラミング言語の方がよいのではという指摘もあった．そこで日本語プログラミング言語なでしこ v3[3]（以下，なでしこ）を使ってウェブサービスを作成するプログラミング演習を大学生に対して実施した[4]．作成するウェブサービス
はブラウザ上の表示をチャットソフト風にし，クライアント(ウェブブラウザ)とサーバ間の通信にはweb socket を使う．
本報告では既報の次の学年の大学生に対してのプログラミング演習の結果を報告する．

２．Web サービスを提供する仕組み[4]なでしこには静的な HTML や画像等のファイルを提供する Web サーバを簡単に構築できる仕組みがある．また web socket のサーバについても，ソケットに接続，受信等したときのコールバック関数を書く仕組みがある．そこでチャットソフト風の表示をする CSS (fukidashi.css) [5]を使って HTML(index.html)，
アイコンファイル(icon.png)と JavaScript (main.js)で

12

図 1 診断メーカーサービスの例

易エディタを使って，なでしこでのプログラミングに慣れる演習 （2022/6/14，診断メーカーを作る, 提出〆切 6/21），第 10 回〜第 11 回でコンソール版のなでしこを使って診断メーカーサービスを作る演習(6/21〜6/28）), 第 12 回(7/5)各自の作成した診断メーカーサービスを各時の PC で動作させ教室内でお互いにアクセスする発表会をした．その後，サンプルプログラムを基に web サービスを作成する演習とマイコンボードを使った作品を作る演習を並行して進める（各自のペースで進める）．第 14 回(7/19)にペーパーテストを実施し，第 16 回（8／2）にウェブサー
ビスの発表会と演習（完成度を高める）の時間をもち，課題の提出 (8/17〆切)とした．その後アンケー
トに回答してもらった．
第 10 回〜第 15 回では，なでしこを使った web サーバを動かし自分の作成した HTML ファイルにアクセスする演習，web socket を使ったサービスの仕組みの解説を読む，実際に動かすといった内容が含まれている．講義資料は公開している[6]．課題には作成した web サービスのファイル一式の提出，異なる場所で 2 名に作成した web サービスにアクセスしてもらい感想をもらうことが含まれている．感想をもらう課題の意図は，ネットワーク毎に IP アドレスが変わることを意識させ，作った作品をほかの人に見てもらう経験をしてもらうためである．

図 2 サーバプログラムの web socket サーバ起動から接続時のコールバック部分

3.2 学生の作品とアンケート結果全員が最終の課題を提出し，アンケートへの回答は 9 名であった．診断メーカーサービスを作る課題について，質問に対する回答から自動で応答するもの(bot 型)を作成したのが 3 名でクイズを作成したのが 10 名であった．内訳を以下に示す．括弧内はプログラムの総行数である．
1. 時間割を教えてくれる bot (394 行)
2. 材料からレシピを提案してくれる bot (164行)
3. ○○くん bot (○○には学生の名前が入り，学生についてのクイズを出すが，反応が正解不正解だけでなく感情表現が入る) (82行)
4. ○○君クイズ(○○には学生の名前が入る)(110 行)5. 電気工事クイズ (157 行)
6. 身体作りクイズ (118 行)
7. ソフトテニスの練習のクイズ(620 行)
8. マ ニ ア ッ ク ク イ ズ ( 正 解 す る の が 難 しい)(194 行)
9. 姫 路 の ご 当 地 ク イ ズ ( 姫 路 は 学 生 の 地元)(102 行)

図 3 サーバプログラムの診断メーカーを実現している部分（コールバック関数）

３．ウェブサービスを作成する演習
3.1 講義の概要
本学の技術教育コース 2 回生向けの講義「情報基礎 II」でウェブサービス作成演習を実施した．本年度の講義の受講生は 13 名(再履修含む)で，全員がそれまでに受講した講義で C 言語の簡単なプログラムを書いた経験があった．簡単な HTML ファイルについての説明と作成を別の講義で経験している．一方で毎年の受講生のほとんどはプログラミングに自発的に取り組んだ経験がない．情報基礎 II ではインターネットの歴史やパケット通信，TCP/IP などの基礎的な知識，アルゴリズムとは何かという基礎知識を学ぶ．それらを学んだ後， 第 9 回にブラウザ上の簡13

WS サーバ接続した時にはIP=対象["connection"]["remoteAddress"]「クライアント{IP}が接続しました」と表示．
「今日の献立を提案します．肉，魚，麺，卵，野菜，その他から選んで入力して下さい．」を WS サーバ個別送信．
ここまで
WS サーバ受信時には「受信:{対象}」と表示．
対象で条件分岐「肉」ならば
A＝乱数（4）
もし，A＝0 ならば「<A href="https://www.lettuceclub.net/recipe/dish/24935/">鶏もも肉のみぞれ煮</A>」を WS サーバ個別送信「<img src="鶏肉.jpg">」を WS サーバ個別送信ここまで
もし，A＝1 ならば「<A href="https://www.lettuceclub.net/recipe/dish/12328/">豚肉となすのさっぱり重ね蒸し</A>」を WS サーバ個別送信「<img src="豚肉.jpg">」を WS サーバ個別送信
ここまでもし，A＝2 ならば「<A href="https://www.lettuceclub.net/recipe/d
ish/23396/">ビーフトマトスパゲティ</A>」を WS サーバ個別送信「<img src="牛肉.jpg">」を WS サーバ個別送信
ここまでもし，A＝3 ならば「<A href="https://www.lettuceclub.net/recipe/d

図 4 時間割を教えてくれる bot とのやりとりの例

ish/33365/">ひき肉となすのカレー炒め丼</A>」を WS サーバ個別送信

10. 日本一に関するクイズ (不明, プログラムを提出できていない)
11. みんはや（ゲームアプリ）のクイズを真似したもの (108 行)
12. クイズ（得点の計算あり）(158 行)
13. クイズ（得点の計算あり）(103 行)
図 4 に時間割を教えてくれる bot とのやりとりを示
す．曜日を「火」「火曜」「火曜日」「か」「かよう」「かようび」と入れても火曜日と判断するように条
件式で「または」を使うのではなく，辞書型変数を教えたところ使いこなしている（時限も同様）．また
table タグを使っている．レシピの提案は材料を入れると乱数でレシピを提案してくれる．プログラムの一部を図 5 に示す．
アンケートで「作品を作って楽しい，おもしろいと思ったところ」が「ある」と答えた 8 名の自由記
述の内容を表 1 に示す．5 名がプログラムが完成し「<img src="ひき肉.jpg">」を WS サーバ個別送信
ここまで
ここまで

図 5 レシピを提案する bot のプログラム（抜粋）たときの達成感を挙げている．また 1 名が同じ課題
でもプログラムに幅があることに気づいている．また日本語で分かりやすかったこと，少しの違いで動かないことと web socket 接続の表示を挙げた学生がいる．この質問に「ない」と答えた 1 名とアンケートに回答してない学生 4 名のうち提出出来ている
3 名を加えた 4 名の提出したプログラムの平均行数は 101 行であった．プログラムの長さが熱心に取り組んだ結果と必ずしもいえないが，「楽しい，面白い」と回答した学生の方がプログラムは長い傾向にある．
また提出されたプログラムはそれほど長くない学生
でも，「楽しい，面白い」と回答した学生には何度も14

表 1 「楽しい，おもしろいと思ったところ」への回答

表 2 「ネットワーク，HTML，プログラミング言語の理解で深まったと思うこと」への回答

完成して実際に動かしてみるときが面白かった

自分でサーバーを動かしたり作ったりできるということ

自分の思ったようにプログラムが動いたとき自分のパソコンでもできる自分が書いたプログラムが正常に動く点

検索ブロックから自分のプログラムを実行できて，より身近なものに感じた．

作品が出来上がったときの達成感
書いたプログラムが実際に思っている通りに動いてくれた時はとても楽しいし，嬉しい．また，その成功体験がさらにやってみようとなり面白くなってくる．

日常生活に溶け込んでいる関連物への興味・関心
プログラミング言語はとてもたくさんあるが，今までやったことのある C 言語以外を学ぶことにより，プログラミングがどのようなものかより深く知ることができたと考える．

人によって全然違うものができいろんな幅ができているなと感じた．
日本語なので，c 言語よりも何が書かれているのか理解

なでしこを使った作品を作ったことから，1 つのプログ
ラムでも複数のファイルなどを関連付ける必要があり，その関連を駆使することで web サイトが閲覧できたり，画像の提供ができるということを感じ，ネットワークを広げていくことで情報などの伝達が助けられていることを理解できた．

しやすかった．
画像を出力するときに，保存するファイルを間違えて隣にしてしまうだけで出力されないところ．また，サーバが起動しているとき，接続したデバイスからの入力がわかるところ．

試したり，作り直すなど時間をかけて取り組む様子を見たように思う．
「ネットワーク，HTML，プログラミング言語の理解で深まったと思うこと」には表 2 の回答が 6 名からあった．サーバが自分のパソコンでも動くものであることを経験として得ており関心が高まっていることから，講義の狙いは実現されたと考える．
日本語プログラミング言語の方がよいか確かめるため尋ねた「『なでしこ』と今まで経験したプログラミング言語，エディタ，実行方法などを比較してよいところと悪いところを教えてください．
」という質問への 6 名の回答を表 3 に示す．母語である日本語のメリットを 3 名があげているが，2 名は日本語のメリットもあるが他の言語と比較しても悪いところもあるとしている．演習中に学生が困っていた様子
からは，C 言語等では if 文などの複文の場合に中括弧{}でくくるのにたいし，なでしこでは「ならば」などと「ここまで」でくくるのだが，意図通りにくくれていない場合にミスを発見するのに苦労していた．定数と書いているのは文字列の中に変数の値を埋め込む場合の話と思われる．C 言語では書式か文字列を使うが，なでしこでは中括弧｛｝を使う．
表 4 に「作品を作っていて困ったことがあれば，どんなところで，どういう風に困ったかなど自由に書いて下さい」への 7 名の回答を示す．
「ここまで」の対応関係，プログラミング言語一般の話，画像のサイズや URL の理解不足などが挙げられた．

15

表3 『
「なでしこ」と今まで経験したプログラミング言語，エディタ，実行方法などを比較してよいところと悪いところを教えてください．
』への回答
日本語だったので理解しやすかった
日本語で書きやすかった
馴染みのある日本語でプログラムを書くことができるので，プログラムや英語を全くやっていない人でも簡単に書くことができそう．
日本語でプログラムを見ることができるので，作者以外にもプログラムを理解しやすいと感じる．しかし，「ここまで」をカッコや；の部分に入れる必要があり，他の言語に比べて 1 つ 1 つの命令の管理が難しいと感じた．
良：日本語で書ける手軽さ
悪：定数の使い方などのまるっきり書き方が違うところミスを見つけるのが大変だった表 4 「作品を作っていて困ったことがあれば，どんなところで，どういう風に困ったかなど自由に書いて下さい」への回答

参考文献[１] 文部科学省: 中学校学習指導要領（平成 29 年告示）
解説 技術・家庭編, 開隆堂出版株式会社, (2018)[２] 光永法明: CGI による動的なネットワークサービス提供体験ができるプログラミング教材の提案, 情報処
理学会 コンピュータと教育研究会 153 回研究発表
会, 情報処理学会研究報告, Vol.2020-CE-153, No.21,pp.1-4, (2020)[３] クジラ飛行机: 日本語プログラム言語なでしこ,
https://nadesi.com/top/ (2022/10/7 閲覧)[４] 光永法明: 日本語プログラミング言語なでしこを使ったウェブサービス作成演習, 日本産業技術教育学会第 37 回情報分科会（大阪）, pp.61-64, (2022)[５] セイさん: HTML と CSS で作る会話風フキダシ３選,
https://jisuijisan.com/speech-bubble/ (2022/10/7閲覧)[６] 光永法明: 情報基礎 II 講義資料, https://n.mtng.org/2022j2/

入れ子状のプログラムで行数が多くなってしまったときに，必要な「ここまで」がどれなのか見分けにくかっ
たこと．また，同じ条件分岐でも，文章の書き方（もし，対象＝A ならば・対象＝A ならばの違い）でコンパイルが通らないことがあり，それが原因だと分かるのに時間がかかったこと．
プログラムを書くにあたって何か少しでも違えば動いてくれないこと，保存先の違いなど
思うようなプログラムをどう書けばよいかわからな
い．やりたいことがあるが，膨大なプログラムを書く必要があり，時間が足りなかった．
いくつかのプログラムを同時に行いたいときの書く順
序が難しい
c 言語を学んでから取り掛かると，定数とかがやりにくかったです．
写真のサイズ変更
他のブラウザで開く方法が分かりませんでした．

４．おわりに
本論文では昨年度に引き続きなでしこを使ってウェブサービスを作成するプログラミング演習を大学生に対して実施した結果を報告した．演習の結果，プログラミングやネットワークサービスについての理解を深めることができたと考える．幅広いテーマの作品が作れるが，サンプルを多少変更する程度で終わる学生もおり，課題の指示等について改善の余地がある．またなでしこのプログラムを書く上でのサポート（より便利なエディタ等）は必要に思われる．

16