- 33
- 12 204
mochioチャンネル
Japan
Приєднався 4 чер 2024
「父と娘のプログラミング教室」
もと「美術」教員から「情報」へと転身した父が、中２の娘にプログラミングを教えながら、それを教材にできたらなぁと考えて作り始めました。お見苦しい点も多々ありますが、温かい目で観ていただけるとありがたいです。
もと「美術」教員から「情報」へと転身した父が、中２の娘にプログラミングを教えながら、それを教材にできたらなぁと考えて作り始めました。お見苦しい点も多々ありますが、温かい目で観ていただけるとありがたいです。
「席替えプログラム⑤」 - Javascript
0:28=概要説明 2:38=コーディング 8:06=微調整（修正）
Javascriptで「席替え」のプログラミングを作ってみました。
今回で完成です。前回までで大体の仕組みは作れているので、最後に「入力フォーム」を作って、人数を自由に入れられるようにします。それに合わせてコードの方も細かい部分を修正していきます。
動画では最初に解説をし、その後実際にコーディングしていきます。自己流なので稚拙な部分もあるかと思いますが、温かい目でご容赦いただけるとありがたいです。
Javascriptで「席替え」のプログラミングを作ってみました。
今回で完成です。前回までで大体の仕組みは作れているので、最後に「入力フォーム」を作って、人数を自由に入れられるようにします。それに合わせてコードの方も細かい部分を修正していきます。
動画では最初に解説をし、その後実際にコーディングしていきます。自己流なので稚拙な部分もあるかと思いますが、温かい目でご容赦いただけるとありがたいです。
Переглядів: 28
Відео
「席替えプログラム④」 - Javascript
Переглядів 7012 годин тому
0:24=概要説明 3:42=コーディング 11:37=表示（エラー直し） Javascriptで「席替え」のプログラミングを作ってみました。自己流なので稚拙な部分もあるかと思いますが、 １、レイアウト設定と配列セット ２、番号の入った一次配列の中身をシャッフル。 ３、列数で区切って二次元配列にし、 ４、それを擬似的にDivの枠線で可視化する という、やり方を考えてみました。 長いのでステップごとにボタンに割り当てて進めていきます。 今回はStep4を解説および、コーディングしていきます。
「席替えプログラム③」 - Javascript
Переглядів 7721 годину тому
0:08=概要説明 0:39=二次元配列とは 5:18=関数の説明 6:27=コーディング開始 10:10=表示の仕方 Javascriptで「席替え」のプログラミングを作ってみました。自己流なので稚拙な部分もあるかと思いますが、 １、レイアウト設定と配列セット ２、番号の入った一次配列の中身をシャッフル。 ３、列数で区切って二次元配列にし、 ４、それを擬似的にDivの枠線で可視化する という、やり方を考えてみました。 長いのでステップごとにボタンに割り当てて進めていきます。 今回はStep3を解説および、コーディングしていきます。
「席替えプログラム②」 - Javascript
Переглядів 111День тому
0:21=概要説明 1:46=コーディング開始 4:32=いったん表示 Javascriptで「席替え」のプログラミングを作ってみました。自己流なので稚拙な部分もあるかと思いますが、 １、レイアウト設定と配列セット ２、番号の入った一次配列の中身をシャッフル。 ３、列数で区切って二次元配列にし、 ４、それを擬似的にDivの枠線で可視化する という、やり方を考えてみました。 長いのでステップごとにボタンに割り当てて進めていきます。 今回はStep2を解説および、コーディングしていきます。
「席替えプログラム」を作ってみよう！① -Javascript
Переглядів 11214 днів тому
0:06=完成状態 0:31=概要説明 4:06=step1説明 5:18=コーディング開始 Javascriptで「席替え」のプログラミングを作ってみました。自己流なので稚拙な部分もあるかと思いますが、 １、番号の入った一次配列の中身をシャッフル。 ２、列数で区切って二次元配列にし、 ３、それを擬似的にDivの枠線で可視化する という、やり方を考えてみました。 長いのでステップごとにボタンに割り当て、 今回から５回にわたって解説および、コーディングしていきます。 ＜動画開始時のコードはこちらから＞（＝mochioホームページ） mochio-777.jimdofree.com/コード/ （雛形ファイルというのをコピーしてお使いください）
父と娘の【ニムト】 面白ボードゲーム実況
Переглядів 8621 день тому
今回は「ニムト」というゲームを紹介します。 手札を選んで出していくだけのシンプルで短時間でできるゲームですが、対戦相手との駆け引きがあって面白いです。列の中に「小さいもの順に並ばれていく」というルールも、なんとなくプログラミングっぽくで良いです。
【サノスの指パッチンプログラム③】父と娘のプログラミング
Переглядів 12121 день тому
映画「アベンジャーズ」に出てくるサノスの指パッチンを題材にプログラムを作ってみました。 0:41=修正したプログラムの説明 5:46=第一戦 7:27=第二戦 8:38=第三戦 10:08=第四戦 11:28=第五戦 12:20=最後の一戦 今回でこれは一旦完成です。対戦といっても交互にボタンを押し合うだけで、選択の余地もないので、実際には対戦ゲームになっていませんが、パッチンし合うだけでもドラマが生まれてきて、特に三〜四戦目が面白くなりました。笑 今回は冒頭で、前回までの制作過程でのミスを修正した上でのコードを全体的に見直しながら解説しています。ここに今後、駆け引きの要素を入れたら面白くなるかもですが、今回はここまでで楽しかったので一旦完成とします。今後も引き続きよろしくお願いします。 ＜備考＞ 終了処理がbreakだけなので、実際にはゲームは続いてしまっています。ですので、もしそ...
【サノスの指パッチンプログラム②】父と娘のプログラミング
Переглядів 96Місяць тому
映画「アベンジャーズ」に出てくるサノスの指パッチンを題材にプログラムを作ってみました。 0:40=while 2:14=break 3:42=初期設定 4:55=関数化 6:48=引数設定 8:22=エラー直 12:33=次回予告 今回は２回目です。試行錯誤しながら作っているため、途中色々なミスがありますが、制作過程でのミスも大事なポイントになると思いますので、今回は細かな不備は後にして、とりあえず全体的な設計を優先しています。（次回ちゃんと、調整したコードを全体を見直しながら解説します）
【サノスの指パッチンプログラム①】父と娘のプログラミング
Переглядів 99Місяць тому
0:18=ハイライト 0:43=概要説明 1:56=コーディング開始 5:05=if判定 5:45=表示 7:17=残機処理 9:18=次回予告 映画「アベンジャーズ」に出てくるサノスの指パッチンを題材に、ボタンを押すと50%の確率で配列の中身が消えてしまう対戦ゲーム（といっても交互にボタンを押し合うだけ）を考えてみました。 長くなってしまったので、全３回にわたってお送りします。
【表示と生成】Javascriptかんたん講座
Переглядів 186Місяць тому
#javascript #高校情報Ⅰ #生成と表示 #createElement 0:15=概要説明 1:48=方法１ 3:13=方法２ 3:53=具体例 6:18=方法３ 8:24=コーディング１「表示」 14:45=コーディング２「生成」 19:50=応用見本 25:00=クリックした要素を取得するには Javascriptでまずやってみたい【ボタンを押したら、何かが表示される】 前回の「おみくじ」では文字を表示したので、今回は画像やレイアウトブロックそのものを表示させる方法を３つ紹介します。
【相性占い作ろう（二次元配列２）】父と娘のプログラミング
Переглядів 101Місяць тому
#父と娘 #二次元配列 #高校情報Ⅰ #プログラミング #相性占い 0:26=ハイライト 0:51=内容説明 2:08=クイズの続き 3:30=本制作 前回の「クイズ」を発展させて「相性占い」のようなものを作ってみました！今回は完全にその場の即興で作ったので、至らぬ所も多々あるかもしれませんが、温かい目でご容赦ください。（一応、二次元配列を使っています）
【クイズを作ろう（二次元配列編）】父と娘のプログラミング教室
Переглядів 103Місяць тому
#父と娘 #二次元配列 #高校情報Ⅰ #プログラミング #クイズゲーム 父と娘のプログラミング教室、今回は「クイズ」を作ってみました。 0:28=クイズの仕組み 2:06=普通の配列で作成 4:50=２次元配列とは 8:09=コーディング 11:38=補足説明「二次元配列の二重ループ」 １、最初は「普通の配列」で作ってみる ２、「２次元配列」にして、簡潔なプログラムに改良する。 ３、「２次元配列」でよく使う「二重ループ」について補足説明。
【クイズを作ろう】Javascript
Переглядів 668Місяць тому
#高校情報Ⅰ #プログラミング #クイズゲーム #配列 #Javascript Javascriptで簡単な「クイズプログラム」を作りましょう。 0:11=概要説明 4:48=コーディング開始 19:43=配列にして改良（重要） １、最初は「順次処理」だけで作ってみる ２、「配列」を使って簡潔なプログラムに改良する。 自分自身もまだまだ勉強中ですので、拙い部分もあるかと思いますが、 動画後半からが本番なので、最後までご高覧よろしくお願いします。 ＜動画開始時のコードはこちらから＞（＝mochioホームページ） mochio-777.jimdofree.com/コード/ （雛形ファイルというのをコピーしてお使いください）
父と娘の【Cubirds】③実践編
Переглядів 154Місяць тому
#父と娘 #ボードゲーム #CuBirds #ボードゲームアリーナ 前回考えた必勝法（というより基本プレイ？）で対戦してみました。 0:01=OP 0:38=概要 0:52=１戦目 5:20=２戦目 ２戦してますので連続で勝てるかどうかに注目してください。 シンプルながらも奥の深いCuBirdsの魅力を伝えられたらと思っています！
父と娘の【Cubirds】② 作戦編
Переглядів 162Місяць тому
#父と娘 #ボードゲーム #CuBirds #ボードゲームアリーナ 毎回このゲームで娘に勝てないので、作戦を考えてみました！ 0:33=point1 1:52=point2 4:00=point3 5:14=次回予告！ 動画では必勝法と言っちゃってますが、どちらかというと基本なのかなと思います。それよりもシンプルながら奥の深いCuBirrdsの魅力を伝えられたらと思っています！（次回は実践編として、父娘対決に続きます！）
楽しい！！セリフもおかしい！！
ありがとうございます！ 連続のコメント大感激です！！ こちらも途中からは、セリフを言いたくて回してました笑 観てほしいポイントを拾っていただいて嬉しいです(^^)
作り方 おもしろい！わらってます ピアノ上手！
わーありがとうございます！ 勿体無いお言葉、、そんな恐縮ですっ さっそく娘にも伝えさせていただきました！
ほんとにやりとりが面白いです。 それから 娘ちゃんが理解深めてるのがよくわかる！いいなあ、、
コメントありがとうございます！ とても励みになるお言葉嬉しいです！ それを聞いたら娘も喜んでくれるので伝えますっ 次回も頑張りますので引き続きよろしくお願いします！
＜備考＞ 動画の最後の方で「何文字シフトするかを入力するフォーム」を作成していますが、 動画の通りにコードを書いても「シフトの入力欄（の見た目）が動画と同じにならない」というご意見をいただきました。 これは、cssの方で「input」について設定してしまったので、inputのフォームは全部同じデザインになってしまうためです。ただこれについては、見た目が違うだけで同じように動きます。（おそらく収録時に、CSSを調整したシーンが撮れていなかったようです。編集時にも気がつきませんでした、、(ゴメンナサイ(><)） ですので、 もし全く同じフォームの見た目にするには、以下のcssの部分、inputをnyuryokuに書き直してください。 ＜動画で入力したCSS＞ input{ （widthなどのスタイル設定） } ＜動画と同じスタイルにするには＞ #nyuryoku{ （widthなどのスタイル設定） }
娘さんのドライな返答が好きです。
コメントありがとうございます！ そう言っていただけると嬉しいです！（娘も喜んでいます(^^) 次回作もよろしくお願いします！
ボードゲーム❗️オンラインだと集まらなくても楽しめるのが良いですよね。 自分も今度やってみたいと思います☺️
コメントありがとうございます！ ボードゲーム面白いですよね。家族や友人とのコミュニケーションにすごく良いと思います。このCuBirdsはシンプルで時間もかからないのでオススメです(^^)
エルンストから！😂 楽しいです！娘ちゃんのワードセンスが素敵ですね💓こうやって楽しく覚えるの素敵です
ありがとうございます！もったいないお言葉！！ いつも応援と激励、励みにして頑張っています。嬉しいです！ 今後もよろしくお願いいたします！
面白かったです❤
ありがとうございます！ コメント励みになりますっ 次回も頑張りますのでよろしくお願いします！
【訂正】6:00あたりで「イテレータ」と言っていますが、正しくは「イテラブル」でした。
勉強になります❗️
ありがとうございます！コメント嬉しいです(^^) そう言っていただけるとこちらも励みになりますっ 今後もよろしくお願いします！
楽しく学べるのがいいですね😊😊
ありがとうございます！ そう感じていただけるととても嬉しいです(^^) 今後も頑張っていきますので、よろしくお願いいたします！
待望の続編❤応援してます📣
ありがとうございます！ 応援のメッセージとても嬉しいです！温かいお言葉これほど心強いことはありません。今後ともよろしくお願いいたします！
プログラミング全く知識なしですが、とてもわかりやすかったです。娘さんの合いの手サイコー😂仲良し父娘❤ 続編期待してますー
コメントありがとうございます！ 娘との掛け合いも、もっと受け手側の気持ちや言葉を引き出してあげたいのですが、つい強引に自分の話したい方向に進めてしまうので、そう言っていただけるとありがたいです(^^) 今後ともよろしくお願いいたしますm( _ _ )m
娘ちゃんとのやりとりも含めてめちゃくちゃわかりやすい✨ 自分の娘にもみせたい
コメントありがとうございます！ そんな風に言っていただけるなんて光栄です！ 初めての一般公開で緊張していたので、温かい評価いただけて小躍りしてしまいました。嬉しすぎます(^^) 今後ともよろしくお願いいたしますm(_ _)m
過剰な演出がないのが逆に見やすくて嬉しい！
コメントありがとうございます！ かなり苦労して字幕入れていますので、観やすいと感じていただけるとすごく嬉しいです！「収録→編集→字幕入れ」で大体１本作るのに１週間かかってしまいますが、続編も頑張りますので、今後ともよろしくお願いします！
ちなみに教科書は、東京書籍の「新編 情報１」を使用しています。 続けていく励みになりますので、よろしければ、イイネやコメントお願いします！