子供から大人まで、プログラミング力と英語力を伸ばす!

📙『今すぐ書ける 1分間プログラミング』『ITエンジニアの英語術』📗『ITエンジニアが覚えておきたい英語動詞30』など「プログラミング+英語」をテーマに出版。Twitter: @IppunkanProgram。経済記者 ⇒ Linguistic Engineer ⇒ PM

子供から大人まで、プログラミング力と英語力を伸ばす!

📙『今すぐ書ける 1分間プログラミング』『ITエンジニアの英語術』📗『ITエンジニアが覚えておきたい英語動詞30』など「プログラミング+英語」をテーマに出版。Twitter: @IppunkanProgram。経済記者 ⇒ Linguistic Engineer ⇒ PM

    マガジン

    • 『親子で1分間プログラミング』ワークショプ関連記事

      Kids Code Clubで開催の『親子で1分間プログラミング』ワークショップで利用するJavaScriptとp5.js関連の記事を収めたマガジンです。

    • 『JavaScriptでやる 1分間プログラミング』

      『今すぐ書ける 1分間プログラミング』ではC#とVisual Studioを使ってプログラミング体験するプロジェクトを進めていきましたが、本マガジンではJavaScriptとVisual Studio Codeを使ってさらに簡単にプログラミング体験をしてきます。まずは機械学習や音声機能をブラウザ内で行うアプリを取り上げます。

    • 英語YouTubeビデオでリスニング力の強化!

      英語のYouTubeビデオを利用してリスニングの力を向上させるコツを詳しく解説します。

    • オンライン会議で通用する英語力を身に付ける!

      テレビ会議で英語を話すのは難しいこと。でもコツさえつかめば発言力は格段に向上します。オンライン会議やチャットなどで使う「簡潔な英語」を話す方法を詳しく解説しました。

    • 『株式投資でプログラミング学習』シリーズ5回

      「自分のためにプログラミング」企画の第2弾です。今回は株式投資にプログラミングを使ってみます。Yahoo FinaceのAPIを使って過去の株価データを取得。株価が新高値を更新した時に買いを入れると儲かるのかどうかという投資行動をプログラミングで検証していきます。『今すぐ書ける 1分間プログラミング』の延長で、APIの呼び方、データをクラスとして保存する方法、データのキャッシュ方法などあらたなアプローチを詳しく解説していきます。

    最近の記事

    • 固定された記事

    『今すぐ書ける 1分間プログラミング』に関するFAQ(よく聞かれる質問)

    Chapter 2、p134のGetWeatherLineByCityメソッドを使うサンプルを書いたが、天気予報が何も出てこない。残念ながらLivedoorの天気予報サービスは2020年7月末をもって終了します。そこで、新しいいNugetでは気象庁のサイトから予報のテキストを抽出するようにしました。Nugetパッケージ、MagicWandの3.0.0以降では修正されています。出版時の2.0.2をお使いの方は最新版のMagicWandWinもしくはMagicWandWinEas

      • 子供のプログラミング学習はこうサポートする!JavaScriptでやる『親子で1分間プログラミング』セッションノート パート❶:「サイレントリアル」で始めるテキストコーディング!

        今年の夏もKids Code Clubで『親子で1分間プログラミング』オンラインセッションを開催。国内外あわせた多数の親子が、テキストコーディング体験をします。今回は、基本的なプログラミング作業を実体験したあと、2Dキャラクターが画面上を動く「アニメプログラミング」と、カメラを通して体の動きを自動検知するボディトラッキングを使ったAIゲームを作る仕組みについて学習していきます。 本記事では、子供と一緒にプログラミング体験をしつつ、子供の学習をサポートしていこうとされているお

        • たった500円程度で自分オリジナルの仮想通貨トークンを作って皆に配ろう!(Solana版) - 英語ビデオチュートリアルの解説

          ビットコインなどの仮想通貨は実に3千種類以上もあるといわれ、コインを入手するにもあまりに高額なものが多く、価格の変動も激しいのが実情です。このため、子供のご褒美に仮想通貨をと思っても簡単には手が出せません。ところが、コインではなく、その仮想通貨と連携して作る「トークン」は実は簡単に作成することができます。今回はそのプロセスを詳細に解説した英語チュートリアルビデオを日本語で詳しく説明してみたいと思います。 英語に自信のある方は是非ビデオを見ながらトークン作りにチャレンジしてほし

          • 親子ではじめるJavaScriptプログラミング - 簡単レシピを利用して本格プログラミングを体験!

            小中学校ではプログラミング授業が始まり、子供たちの会話に「プログラミング」という言葉が目立ってきた家庭も多いと思います。でも実際に子供がプログラミングの授業で何をやっているのかご存じないおうちの方も多いと思います。その一方で、子供たちもプログラミングがどのようなものかよくわからないのも実情です。かつての難しいプログラミングとは異なり、今の高度なプログラミング言語ではたった数行書いただけで楽しい結果が出たり、簡単なゲームを作ることができるものもあります。その一つがJavaScr

          マガジン

          マガジンをすべて見る すべて見る
          • 『親子で1分間プログラミング』ワークショプ関連記事
            子供から大人まで、プログラミング力と英語力を伸ばす!
          • 『JavaScriptでやる 1分間プログラミング』
            子供から大人まで、プログラミング力と英語力を伸ばす!
          • 英語YouTubeビデオでリスニング力の強化!
            子供から大人まで、プログラミング力と英語力を伸ばす!
          • オンライン会議で通用する英語力を身に付ける!
            子供から大人まで、プログラミング力と英語力を伸ばす!
          • 『株式投資でプログラミング学習』シリーズ5回
            子供から大人まで、プログラミング力と英語力を伸ばす!
          • 『英語学習にプログラミングを活用』シリーズ
            子供から大人まで、プログラミング力と英語力を伸ばす!

          記事

          記事をすべて見る すべて見る

            子供と一緒に”プログラミングと英語”を楽しもう! - Kids Code Club 『親子で1分間プログラミング』冬休みワークショップ

            この冬休み期間中にKids Code Clubにてプログラミングの基礎を体験する『親子で1分間プログラミング』オンラインワークショップを開催します(詳細日程は未定: LINEでお問い合わせください)。今夏休みに開催したワークショップと同様、プログラミングの楽しいところ、大切なところを親子で一緒に体験・学習してもらいます。 今回のテーマは「プログラミング英語」!Scratchやビスケットなど、だれでも簡単にプログラミングを始めることができるビジュアルプログラミングツールが人気

            背景が動いているように見せる「流し物体」ー 配列の中で要素をグルグル回す方法を解説 -JavaScriptでやる1分間プログラミング

            今回から「バーチャルドライビング」のプログラミングを始めますが、まずはどんなものを作るのか、その概要は前回記事を見てください。 ボディートラッキングを利用したベースアプリ前回記事でも説明しましたが、今回はml5.jsのPose NetというボディートラッキングのAIライブラリを利用します。それを使って、ウェブカメラからの映像の中で鼻と両肩の位置をトラックするベースアプリを用意しました。まずはこれを開いてプログラムを実行してみてください 【バーチャルドライブ ベース版1】

            ボディートラッキングAIを利用してドライビングゲームを作る - ml5.jsとPoseNetでハンドル操作を検知 - JavaScriptでやる1分間プログラミング

            さて、「恐竜ゲーム」では基本的なモノの動きのコーディングをやってきました。図形や画像を継続的に動かしたり、跳ね返りやジャンプをプログラミングで表現できるようになったと思います。 今回からそれを応用してもう一つのゲームを作っていきます。それが、 バーチャルドライビングゲーム です。百聞は一見にしかず。どんなゲームかご覧ください。 もうどんなゲームかお分かりかと思います。青い車が左右に動き、向かってくる障害物(工事中の道路標識)を避けるという超単純なゲームです。ただ、大き

            自分の好きな絵をキャラクターにしてみよう!- p5エディタに画像ファイルをロードする - JavaScriptでやる1分間プログラミング

            いよいよ最後の仕上げです。前回まででユニコーン(円形)をスペースバーでジャンプさせ、次から次へと出てくるトレイン(四角形)を避けるという「恐竜ゲーム」の基礎ができました。 ところが、背景もない上にユニコーンは円、トレインは四角と、なんとも素っ気ないデザインです。もちろんそれは意図したところです。つまり、プログラミングの根幹ができるまではこんなシンプルなデザインで十分なのです。ゲームのロジック(ジャンプや衝突など)がしっかりすることにまずは集中し、外観の部分はあとでやればよい

            障害物との接触はたった1行で解決!- クラッシュディテクションのライブラリを利用する - JavaScriptでやる1分間プログラミング

            さて、これまでのコーディングで次のことができるようになりました。 ✅ ユニコーン(円形)がスペースバーでジャンプする ✅ 地面でもジャンプ中でもユニコーンを左右の矢印キーで移動させる ✅ トレイン(四角形)が右からランダムに登場し、左に流れていく ユニコーンのジャンプは当然、障害物を避けるためですが、今のところトレインの四角と接触しても何も起きません。そこで今回はこの「接触」を処理するコードを書いていきます Collision(=衝突)を検知するキャンバス上にある物体が

            ゲームの”障害物”もクラスで作る!- 次々と現れる物体は「配列」にまとめる - JavaScriptでやる1分間プログラミング

            さて、ここまでで物体をジャンプさせることができました。おさらいですが、今回のプログラミングの目標はジャンプで障害物を避ける「恐竜ゲーム」を作ることでした。 そして以下が今現在のコードです。まずはユニコーンと称したクラスを作り(今のところ円の形になっています)、スペースバーを押すことで円がジャンプします。Coding Trainのビデオにはない左右の動きも追加しています(どうしてこの動きを入れたかはゲームが完成するとわかります)。 コードは以下の通りです。またコメントなどは

            「〇〇キーが押されたら…」はとても簡単!- パート❸:keyPressedでキー操作をすべて検知できる - JavaScriptでやる1分間プログラミング

            前回パート❷ではジャンプの動きのロジックを考えてみました。ジャンプ量をvelocity(速度)という値で表現し、このvelocityを重力分だけ毎回小さくしていくと飛び上がった後に頂点に達し、その後落ちていくジャンプの動きが表現できました。 ゲームのようにキーを押したらジャンプさせたいところが、今のところプログラムを実行したらジャンプはするのですが、たったの一回のみ。それ以降は何も起こりません。もう一度ジャンプが見たい場合はプログラムを実行し直さないといけないわけです。これ

            「ジャンプ移動 - 重力」でリアルなジャンプになる- パート❷:クラスにジャンプのロジックを追加する - JavaScriptでやる1分間プログラミング

            「ジャンプをプログラミングで表現する」のパート❶では2つの処理をやりました。 1⃣ ユニコーンのclassを作り、様々な動作を追加できるようにした 2⃣ ジャンプを表すmove関数を追加した。 ユニコーンはまだ単純な円ですが、とりあえずmoveを使って上の方に上昇していくところまではコーディングが完成しました。 ジャンプとは何なのか?こんなことはあまり考えたことはないでしょうが、ジャンプとは何でしょう?あなたがジャンプした時どうなるかを考えてみてください。まず思いっきり

            「重力」はどうやってプログラミングする?- パート❶:まずは「クラス」で物体を表現してみよう - JavaScriptでやる1分間プログラミング

            これまでp5.jsエディタを使って、まずは円や四角など簡単な図形を描き、次に図形を一方向に動かし、そしてキャンバス内を動き回るロジックについて解説してきました。 ところが、モノが永遠に動き続けるというのはある意味コンピューターゲームの中だけの話です。現実には摩擦や抵抗、重力、加速などが存在しているため、モノの動きというのはもっと複雑です。 「ジャンプ」の動きをプログラミングするそこで、もうちょっとリアルなものの動きをプログラミングで表現してみます。今回のベースとなるCod

            ボールがキャンバス内を跳ね回る仕組みを理解しよう- ”ブロック崩しゲーム”の基本 - JavaScriptでやる1分間プログラミング

            前回のp5.jsの基本解説では、簡単に四角や円などの図形をキャンバス内に描き、それを一方向に動かす仕組みについて説明しました。 簡単におさらいすると、まず図形を描く場合はXとYの値、そしてその大きさを指定するだけです。p5.jsエディタを立ち上げたら、draw関数のところに次の2行を加えるだけです。 //図形をピンク色で塗りつぶすfill(200, 0, 200);//円(circle)を、X:100、Y:100、大きさ80で指定circle(100, 100, 80);

            p5.jsの超基本を理解しよう! ー 2Dプログラミングは「パラパラ漫画」と同じ仕組みで絵を描く - JavaScriptでやる1分間プログラミング

            プログラミングを始めようという方に是非おすすめなのがp5.jsというJavaScriptのライブラリです。p5.jsウェブエディタというツールを使えば、ブラウザでコーディングができるのでどのマシンでも気軽に、いつでもどこでもプログラミングができるのが特徴です。p5.jsエディタの詳しい使い方は次のnote記事で解説をしました。 p5.jsエディタを使ったことのない方は是非この記事を読んで基本的な使い方を理解してから読み進めてください。 p5.jsを理解する秀逸な英語ビデオ

            小学生でも簡単にJavaScriptプログラミング!ー p5.js ウェブエディタの使用方法を詳細解説!

            プログラミングを始めようと思い立ってまずぶち当たる疑問は「何を使ってプログラミング」するかです。プログラミング言語によって使える開発ツールも変わってくる一方で、ツールにも様々な種類があります。そこで、JavaScriptでプログラミングを始めようと思った時、一番簡単でお手頃なツールがあります。それがp5.js Web Editorです。 プログラミングを学習するのにはベストな環境!まずこれを薦める利用をざっと挙げてみましょう。 ✅ インストール不要:ブラウザ内でプログラミ