さくらんぼ計算を子供と練習するための学習用Webアプリを公開しました

さくらんぼ計算とは

繰り上がりのある足し算をするための方法の一つです。

詳しくはこちらのサイトを参考にして下さい。

要するに、10以下の数を2つの数に分解するのがポイントなので、その練習をするためのアプリを作りました。

さくらんぼ計算を子供と練習するための学習用Webアプリ | チェリー

使い方

スマホの縦長画面で使うことを想定しています。

問題画面

初期状態では、分解される上の数字は10に固定され、左側の数字がランダムに出題されるようになっています（設定で変えられます）。

• 右側のさくらんぼが空欄になっているので、上の緑の丸の数と左の赤の丸の数に合うように、子供に数字を当ててもらいます
• 当たっていたら「正解」ボタンを押します。
  • 正解数がカウントアップされます
  • 正解が表示されます
• 間違っていたら「ミス」ボタンを押します
  • ミス数がカウントアップされます
  • 正解は表示されませんので、もう一度考えてもらいましょう
• さくらんぼの領域をタップすると、次の問題に進みます
• 「設定」ボタンを押すと、設定が開きます

設定画面

• 「上の数を選んだ1つに固定」または「上の数を選んだものでランダムに切り替える」を選びます
• 「上の数を選んだ1つに固定」を選んだ場合、数字の選択肢から目的の数字を1つ選びます
• 「上の数を選んだものでランダムに切り替える」を選んだ場合、数字の選択肢から目的の数字を2つ以上選びます

Tips

• まずは「上の数を選んだ1つに固定」で3や4など小さい数字から習得するのが良いと思います
• 10の分解は毎回するかつ一番重要なので、考えなくてもできるまで徹底的にやりましょう
• 大体できるようになったら、「上の数を選んだものでランダムに切り替える」で総復習するのがいいと思います

姉妹アプリ

• 親子でかな・漢字の読み学習 | バンブー

自宅で学習　小学生の計算ドリル10000問

アナログ時計の読み方を子供と練習するための学習Webアプリを公開しました

友達の奥さんから「時計の読み方を練習するアプリ」をお願いされたので作ってみました。

アプリ紹介

アナログ時計の読み方の練習 | ラビット

使い方

スマホの縦長画面で使うことを想定しています。

時刻をランダムにしてアナログ時間が表示されます

• 子供に何時何分か答えてもらいます
• 当たっていたら「正解」ボタンを押します
  • 正解数がカウントアップされます
• 間違っていたら「ミス」ボタンを押します
  • ミス数がカウントアップされます
• 「つぎへ」ボタンを押すと、時刻がランダムに更新されます

姉妹アプリ

• 親子でかな・漢字の読み学習 | バンブー
• 親子でさくらんぼ計算の学習 | チェリー

かな・漢字の読みを子供に教えるためのWebアプリを公開しました

友達の子供が今年は小学校に入学する歳で、コロナのために学校に行けないので、家で漢字の読みの教えていると聞きました。
最近、ReactやVueというWebアプリケーションを作るフレームワークの勉強を始めたので、その友達のお手伝いとしてWebアプリを開発しました。

友達からは「（子供が）すごい勢いで漢字を覚えている」「とても便利」と好評をいただいたので、公開することにしました。

Webアプリ紹介

親子でかな・漢字の読み学習 | バンブー

読みを分かっている方が付き添って教えてあげるためものです。

使い方

スマホの縦長画面で使うことを想定しています。

設定画面

• ひらがな/カタカナ、1〜6年生の漢字の中から教えたいリストを選んだり、自分でリストを入力します
  • 複数選ぶと連結されます
• リストから全文字を使うか、ランダムに5文字抜き出すか選択します
• 出題方式を選びます
• 「設定完了」ボタンを押すと問題画面に移ります

問題画面

• 子供に読み方を当ててもらいます
• 正解だったら「正解」ボタンを押します（花丸が表示されます）
• 間違っていたら「ミス」ボタンを押します（バツが表示されます）
• 問題の文字/花丸/バツの領域をタップすると次の問題に切り替わります

Tips

• 「ランダムで無限に繰り返す」を選んだ場合、以下のような計算に基づいて出現頻度が変化します
  • 最初は、全ての文字が重み4で、均一な出現頻度
  • 正解するたびに、重みは半減する（ただし、1が下限）
  • ミスするたびに、重みは倍増する
• 「ランダムで無限に繰り返す」を選んだ場合、以下の内容の棒グラフが表示される
  • 得意（緑）: 上の説明の重みが1である文字の数
  • 苦手（赤）: 上の説明の重みが4より大きい文字の数
• 「ランダムで無限に繰り返す」を選んだ場合、右上の「継続用データ」ボタンから得意、苦手、どちらでもないの文字一覧を表示できます
  • 苦手な文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、苦手の克服になります
• 出題方式「シャッフルして周回する」を選んだ場合、右上の「継続用データ」ボタンから間違えた文字一覧を表示できます
  • 間違えた文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、間違えた問題の復習になります
• 「N年生の漢字」「シャッフルして周回する」を選ぶと、「どれだけ習得できたか」のような確認が出来ます

公開までの道のり

登場人物

• 私: 右側の緑の吹き出しの人
• 友達 神田一郎（仮名）: 左側の吹き出しの人
• 友達の娘 カナ（仮名） 4歳
• 友達の息子 翔（仮名） 6歳

0日目 4/15 （木）

20:45

友達とFacebook messengerで、なんか作って欲しいものあるかという話をしていると、こんな答えが返ってきた。

小2で習う漢字が画面一杯に、タップ毎にランダムで出てくるのもいいなあ。あってるだの間違ってるだのは俺がやるから。小1の漢字はほぼクリアしたので大丈

この漢のところをタップするとランダムに漢字が出てくる
子供が言えたら親が正解ボタンを押す→正解音と花丸が大きく出てくる
間違えたら親がミスボタンを押す→大きなバツマークとミスの音が出てくる

最初に学ばせたい漢字を親が5文字登録する
→写真の画面にうつる
みたいなの。

正解した場合。

こんなの。

大体理解した。

いまは紙に手書きで書いてやってる。正解したらたまごボーロを１つもらえて間違えたら奪われるということをやってきたらこれは効果抜群で小1の漢字80文字中いま70字ぐらい頭に入ってる。多すぎると覚えきらないので5文字ぐらいでよい。これなら外食中でもできる

「いや、食事中にスマホいじっててはダメだろ」と思いつつ

なるほど

この日の会話はここで終わり、就寝した。在宅勤務でも早寝早起きの習慣は保つようにしたい。

1日目 4/17 金

翌々日、朝6時に起きて作り始め、会社の業務開始の前に、なんとか使える形にまでは開発できた。
やはり、朝の爽やかな時間、リフレッシュされた心と体は、自分にとって価値のある事に使うのが良い。

13:07

昼休憩時間にWebサイトにアップロードし、友達に報告

音以外は出来た。音は、いい感じのファイル見つけてくれれば入れられると思う

素晴らしい！早速やってみたが効果あり！

そうか。よかった

ようたかつくったんだ。すごいね。byカナ

友達の子供からはヨーダと呼ばれております。「ようた」と言われると電影少女を思い出す…あの漫画どうやって終わるんだっけ

こんな感じでうつる。もう少し文字が大きくてもいいかも

スマホの画面も色々あるから、画面いっぱいというのは多少難しい。夜にチャレンジしてみるよ

難しいというか、画面作りは初心者なのでやり方分かってませんでした

なるほど。それなら今のままでも大丈夫。
また、下のスペースが余っているので、そこに正解数と間違えた数が表されるといいかも。

みたいな

5題しかない状況で、それ表示してそんなに嬉しいのかな

○のかずのところは😊
✖️のかずのところは😢
とかでもいいかも。
たまごボーロのやり取りに対応している。
ランダムにでてきて30回ぐらいやるし、繰り返すから嬉しいと思う。

夜に作ってみるわ

どちらにしろ現状で素晴らしい出来だ。ウチの子にぴったりだ

一度に覚えさせる量は3文字ぐらいが適切かも。

それは先回りして出来るようになっているのだ、ふふふ

二文字以上なら何文字でもできるように作ってあるよ

漢字ごとに連続正解を取っておいて、三連続正解したやつは出現確率を下げるとかの方が作る側としては面白い

あ、それ凄くいい！連続正解したら出現する確率凄く下げてほしい。

あと、
トップ画面に
「小2で習う常用漢字からランダムに三文字選ぶ」
「小2で習う常用漢字からランダムに全文字選ぶ」
というボタンがあってもいいなあ。いちいち打ち込むのがそのうち面倒になりそう。
「小1で習う常用漢字全文字テスト」ボタンがあって、それを押すとランダムだが重ならないように80字全文字調べられて、正解数が出たらいま何文字まで覚えたか簡単かるなあ

こんなの求む。3文字の3は、2とか、4とか変更できると尚嬉しい

「そのUIはどうかな」と思いつつ

大体理解した

了解。小1常用漢字はネットで調べたら出てくるよ。小2も

はいはい

2020/04/17 19:07

文字の大きさは、お前の画面縦長に合わせるだけならある意味簡単なんだが、iPhone Xでいいのか？

俺のはアイフォン6かなんか

おっけー

文字の大きさ調整とボーロ数追加してみた。リロードして確認よろしく

これだと下の正解が出ない。

なるほど

もう少し上に。

いや、スクロールしてもダメ？

文字は見やすい
スクロールは面倒
文字もずれるし

「面倒？」と思いつつ…

直した

いい感じ！

こんな、感じ

まあ、これでよしとしよう。レイアウトは完璧を目指すとやはり手間がかかる

技術力が低いためかなり消耗してしまった。やはり基礎からちゃんと勉強するべきである。

強いて言えば、
もう一文字分だけ、正解、ミスの行を下にして欲しいぐらいだ。
まあこれでも充分

「Wordじゃねーんだから、一文字下げるとかできねーわ」と思いつつ

色々修正中

サンクス。このアプリのおかげで漢字学習がよりスムーズになりそうだ。俺はこれから風呂。

次の問題に進むためのタップ領域が「問題設定へ」ボタンに重なってしまっていることに気づいたが、早寝早起きは崩したくないので「まあ明日の朝直せばいいかな」と安直に考えて就寝

2日目 4/18 土

この日もしっかり早起きしてレイアウト問題に取り組んでいると…

9:23

問題設定へ
ボタンが押しづらくなった。

ヤバい。バレてしまった

問の字しか押せない

もうちょい大きくしてくれたらいいかも。正解と同じサイズぐらい希望
あーなるほど

大きさの問題じゃない

逆ギレする低脳とは私のことです

カナがいま凄い勢いで漢字覚えている。

画面作りは技術力が低いのでレイアウトが難しい。

問題設定へのボタンの押すスペースが小さすぎて。ランダムに文字がかわるになっちゃう

大変なんだね

スクロール許容なら楽なんだが

そもそも問題設定へのリンク必要？リロードすれば同じな気もするけど

うんまあそうだよね
問題設定へ戻ったときに前に設定しておいた漢字が残っていれば、追加できるので楽

ふーむ、そういう流れでやるのね

問題設定に戻ると、ボーロ数は0にリセットしてるけど、それはいいの？

ボーロ数って正解数のこと？
それはまあ良い

そうか

まず紙で全問チェックしたところ80字中66字正解。その後間違えた14問をアプリでやらせた結果

どう解釈すればいいの？

間違えた問題だけをやらせて最終的に正解がおおくなっている。素晴らしい。

レイアウト直した

カナはまず80問中67問正解。その後間違えた13問をいまやったところ。

たまごボーロは100個あげるわけ？
69か

ダメだこりゃ

字をもう少し右上で、正解、ミスの表をもう少し下かな。

むずいな。こっちのシミュレーターだとまともなんだ

この時はMacのChromeのDeveloper Toolsでやっていて、Safariで確認した方がより正確ということに気付いていない愚かな私

笑顔マークを100個とることのゲーム感があるのでたまごボーロなしでやれる。

それiPhone 5な気がする

自分の知識不足を棚に上げて…

まあ今のままでも見れることは見れる。
笑顔が100まで到達したり、
5連続、10連続正解したら
花丸の横に😄が溢れるといったご褒美感がほしい。

アイフォン6か6s

もう一回レイアウト直した

いまだかつてない出来栄え

うん。強いて言うなら字をほんの少し右

むり

心折れました。

ならこれok

たぶんレイアウトではなくフォントの特性による

自分の技術力の低さを棚に上げてフォントのせいにするダメなエンジニアです。

ふおう

11:45

漢字それぞれ重み4の均一な確率から始まって、正解すると重み半減（下限1）、ミスると重み倍増という確率分布で出現するようにしてみた
これで100回やったときの成長度合がかなり変わると期待

13:35

素晴らしい

19:27 (土)

今日は合計で7-8時間ぐらい勉強させたが、今日はカタカナがらまだまだだと気づいたところ。
そこで吉橋のアプリでこれからカタカナのワークは両面15枚ぐらいやった。カタカナをやろうかというところ。
そこで次は吉橋のアプリでカタカナをやろうというところ。

一文字のクイズなら何でもいけるわな

カタカナをメモで全部一旦残した。今後はこれをコピペすれば良いだけだ。
そう思うと小2の漢字も行けそうだ

ギリシャ文字でもいけるぞ、たぶん

確かに。

3日目 4/19 日

12:47 (日)

選択した文字からN文字抜き出すを押すと、選択したリストの全文字を使うが押されたままになってそのございましたどうなるかわからない
漢字リストの方はまだ漢字が出てこないな

おっとー、開発途中の画面をアップロードしてしまっていた…

あー、ごめん。漢字リストはまだ出来てないや
画面は作ったが選んでも何も起こらない

17:59 (日)

学年別漢字リストも選べるようにしたよ

あれ、バグってるわ

ヤバい

直した

独り相撲取りすぎ…。ちゃんとテストしてから本番反映しよう

3日目 4/19 月

8:44 (月)

シャッフルして周回する出題方式も作ったので、漢字の方は一通り完成した気がする

4日目 4/20 火

9:22 (火)

いい感じ！

ミスした漢字がどこかに表示されたら(たとえば100%の青線の下に並ぶようになったら)嬉しいかも。

それは明日作る予定

さんくす

カナ

2回とも同じ順番だったように思う。できればランダムで1巡してほしい。

直した。設定画面に戻って、出題方式を選び直すと再シャッフルされる

サンキュー

そもそもさっきまでシャッフル効いてなかったな

なんという確認漏れ…

そうなのか

子供達の感想を動画撮影して送ってくれ

「すごいべんきょうになってる。ヨーダのドリル、たのしかった」とのコメントがもらえた

楽しく勉強出来てるようで良かった。まあ、親子で時間過ごせるのがいいんだろうな

20:01 (火)

夜は翔は小2の漢字をやった。よい出来

結構出来るね

最初に丸つけせず何回も教えた後にやらさた。漢字は昔から得意。

6日目 4/22 木

14:39 (木)

漢字をシャッフル周回モードでやった時に、右上のボタンから正解・ミスした漢字リストが出るようにした

7日目 4/23 金

サンクス。

8日目 4/24 土

9:25 (土)

ひらがなとカタカナのリストも追加した

9日目 4/25 日

習熟度の分布グラフを入れた。グラフが全部緑になるまで頑張ってくれ

そしてこのブログを書き始めた。久しぶりにプライベートで達成感を味わった

まとめ

• だいたい1週間で人の役に立つものが作れた
• 画面を綺麗に作るのは難しい
• 日々の努力が大切である

濃縮ソフトウェアエンジニア研修：職務プログラミングで重要な心構え+お勧め書籍

はじめに

この記事の目的は、新しく職務としてプログラミングをすることになった人に、一生忘れないでほしい考え方や姿勢を身につけてもらうことです。
ソフトウェア開発で気をつけるべきことは細かいこと言い出すとキリがないですが、これぐらいは開発者全員が心と体に叩き込んでおいて欲しいという内容を凝縮してあります。

職務プログラミングの趣味プログラミングとの違い

まず、職務でプログラミングをすることは、趣味（や学校の課題や研究室で論文のために作るものも含めて）でプログラミングすることは全然違うという話です。

趣味プログラミングの特徴

趣味プログラミングは、自分のためのものなので、やりたい放題

• 自分で作りたいものを決める
• 自分で作る
• 自分で使う（運用する）
  • エラーで落ちたりフリーズしても、データや動作環境をいじってやりなおせばよい
• 自分で作り直す（直さないのも自分の勝手）

職務プログラミング

プロダクトやプログラムは、組織（会社やプロジェクトチーム）のために存在し、自分のものではない

• 他人(経営者、プロジェクトオーナー)の作りたいものを作る
  • だから、対価として給料がもらえる
• 他人と（場合によってはチームや会社の垣根を越えて）強調して作る
  • 大きな成果を期限内に作るためには多人数でやる必要がある。ビジネス的な価値や責任も大きくなる
• 他人がそのプロダクトを使う
  • 簡単にフリーズしたりエラーで落ちたりしてはいけない
• 他人が運用する（してくれる）
  • 自分には休日がもらえることになる。問題が起きた時に自分しか対応できないときついよ
• 他人にテストされ、ソースを読まれ、バグを発見され、修正される（してもらえる）

職務プログラミングにあたっての心構え

• 何を作るべきなのか（必要十分な機能）、自分の担当範囲を明確にしておく
  • 限られた時間と人数で成果を上げる必要があるので、余計な機能を勝手に追加しないこと
  • エラー処理をどれぐらい丁寧にやるべきかを明確にしておくこともわりと重要
  • 開発の終盤で作り漏れに気づくと締め切りを守れなくなるので、漏れもないように気をつける
• いつまでに開発終了させるべきか、間に合わなさそうになったどうするべきかを把握しておく
  • ビジネスにおいて時間や時期は最重要事項なので、進捗によってプロジェクトの変更（締め切りを伸ばす、機能を減らす、仕事の分配を修正する）の判断に迫られる
  • 判断のタイミングが遅いと取り返しがつかなくなる。間に合わなさそうなものを一人でなんとか頑張ったけど挽回できなかったというのは最悪。できるだけ予兆の段階で報告すること
• 開発の成果物（プログラムやデータ、ドキュメント）をきちんと管理する
  • ソースコード管理ツールに習熟しておきましょう
  • 開発ドキュメントやテストデータなどもメンテナンス時に必要になるので、ぬかりなく
• 運用の手間を減らすようにUI設計を工夫する
  • 何十年間も無駄な運用コストが発生することにもなりかねない
• テストしやすいよう設計、プログラミングする
• プログラムを他の人に読んでもらいやすいように書く
• プログラムを修正しやすいように予め構成しておく

どう設計すればいいか

テストやデバッグ、修正が簡単になるようにしましょう

• 重複を避ける
  • 重複箇所にバグがあったり修正が発生した場合、テストやデバッグの手間が倍になる
• 機能のはっきりしたコンポーネント、クラス、関数に分解しておく
  • 関係あるものをまとめる/関係ないものを分離する
• 意味的/機能的に（あるいは他の合理的な指針で）、階層構造/木構造になるように構成する
• 分割したもの同士が必要以上に影響し合わないようにする
  • 余計な依存をなくしたり、一方通行にする
  • 例：関係するモジュール(とかクラスとか関数)A0とB0がある場合
    • AをA1に取り替えようとするとBも変更しなければならず、BをB1に取り替えようとするとAも変更しなければならない→よくない
    • AをA1に取り替えようとするとBも変更しなければならないが、 BをB1に取り替えようとしてもAはそのままでよい→よい
    • AもBもそれぞれ独立に代替物に取り替えれる→とてもよい

よい設計のためのキーワード

• デザインパターン
• リファクタリング
• UML
• オブジェクト指向

よい設計が出来るようなるための参考書籍

• アジャイルソフトウェア開発の奥義 第2版 オブジェクト指向開発の神髄と匠の技

  アジャイルソフトウェア開発の奥義 第2版 オブジェクト指向開発の神髄と匠の技

  • オブジェクト指向やデザインパターンについてサンプルコードを交えてストーリー仕立てで解説してくれていて、分かりやすくて、かつ奥深い本。個人的にはとてもおすすめ
• 新装版 リファクタリング―既存のコードを安全に改善する―

  リファクタリング―プログラムの体質改善テクニック (Object Technology Series)

  • とてもよい本。

どうすれば良いコードになるの？

〜名前編〜

変数名、関数名、クラス名、ファイル名などに気をつけましょう

• 名前で中身がわかるようにする（変な名前をつけてコメントで説明したりしないこと）
  • 駄目な名前 x、u　（ループ変数のようなちょっとしたローカル変数ならOK）
  • 良い名前 user_id、uid　（コード以外でも使われる略語はOKだが独自略語は避ける）
• 命名方針を統一する
  • convert_to_eucとかconvertToUTF8とかconv2sjisとかを混ぜない

〜見栄え編〜

読んでもらいやすく、修正しやすいプログラムを書く

• 重複を避ける
  • 読む量が増えるし、同じっぽく見えて微妙に違うのかなとか無駄な混乱が起きる
• 出来る限り短くする
  • 分かりにくくならない範囲で、行数も１行の文字数も減らすこと
• 構造を見た目で表す
  • きれいにインデントする
  • 必要十分な空白を入れる
  • 必要十分な括弧を入れる

よいコーディングのためのキーワード

• コーディングスタイル
• 防御的プログラミング
• 各言語の仕様を読むこと
• 言語の機能の意義を理解すること

コーディングのスキルアップのための参考書籍

• CODE COMPLETE 第2版

  CODE COMPLETE 第2版 上

  • 上級プログラマーを目指している人には手元に置いておいて何度も読み返す価値のある本。ただし、量が多く文体も硬いし難しいので、いきなり読むと挫折するかも。ある程度の経験を積んだ後の方が内容が身につきやすいと思う
• リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

  リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

  • CODE COMPLETEを読めば結局は要らない気もする
  • モチベーションの低い人にもとりあえずお勧めできるぐらい読む量が少なくて文体も軽いので、とっかかりとしては良い
• Code Craft ~エクセレントなコードを書くための実践的技法~

  Code Craft ~エクセレントなコードを書くための実践的技法~

  • コーディング以外の話も出てくる部分がためになる

時間・タスク管理もしっかり

ソフトウェア開発は、試行錯誤の繰り返しで、人によって作業効率もぜんぜん違う。
作るべき内容が途中で変更されることもしばしばある。
計画当初の通りに進むことはまずない。
→　個人でも、時間管理とタスク（の優先度）の管理が超重要になってくる。

時間管理力アップのための参考書籍

エンジニアのための時間管理術

おまけのアドバイス：英語も勉強しよう

余力があれば（というか余力のある今のうちに）英語の勉強をしましょう。ソフトウェアの技術や文化はほぼ全て英語に基づいています。英語力があると、適切な関数名・変数名を付けるといった細かい話から、最先端の技術を身につけたり、海外出張に行ったり、転職したりといったエンジニア人生に関わる大きな話まで、色々な点でとても有利になります

あとがき

先輩面したようなことを書いていますが、自分もまだまだ理想のエンジニアにはほど遠いので、これからも頑張り続ける所存です。