マガジンのカバー画像

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

24
『今すぐ書ける 1分間プログラミング』ではC#とVisual Studioを使ってプログラミング体験するプロジェクトを進めていきましたが、本マガジンではJavaScriptとVi…
運営しているクリエイター

#プログラミング教育

自分の好きな絵をキャラクターにしてみよう!- p5エディタに画像ファイルをロードす…

いよいよ最後の仕上げです。前回まででユニコーン(円形)をスペースバーでジャンプさせ、次か…

障害物との接触はたった1行で解決!- クラッシュディテクションのライブラリを利用す…

さて、これまでのコーディングで次のことができるようになりました。 ✅ ユニコーン(円形)…

ゲームの”障害物”もクラスで作る!- 次々と現れる物体は「配列」にまとめる - Jav…

さて、ここまでで物体をジャンプさせることができました。おさらいですが、今回のプログラミン…

「〇〇キーが押されたら…」はとても簡単!- パート❸:keyPressedでキー操作をすべ…

前回パート❷ではジャンプの動きのロジックを考えてみました。ジャンプ量をvelocity(速度)と…

「ジャンプ移動 - 重力」でリアルなジャンプになる- パート❷:クラスにジャンプの…

「ジャンプをプログラミングで表現する」のパート❶では2つの処理をやりました。 1⃣ ユニコ…

「重力」はどうやってプログラミングする?- パート❶:まずは「クラス」で物体を表…

これまでp5.jsエディタを使って、まずは円や四角など簡単な図形を描き、次に図形を一方向に動…

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

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

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

プログラミングを始めようと思い立ってまずぶち当たる疑問は「何を使ってプログラミング」する…

「りんご」と言うと「ゴリラ」と言うのはどうやってプログラミングする? ー 第2章❸ …

前回はボタンをクリックすると音声認識がスタートし、そこでユーザーが「りんご」のように何か…

ボタンをクリックしてしりとりをスタート! ー 第2章❷ HTMLボタンと「しりとり関数」…

第1回ではコンピューターに向かって言葉をしゃべり(音声認識)、さらにしゃべったことをその…

「音声しりとりゲーム」開発の第一歩、コンピュータに自分の言葉を聞き取ってもらう …

今度は音声AIを使ったアプリ開発!前回第1章ではJavaScriptで画像認識をするプログラミングを…

「配列」という入れ物は中が”間仕切り”になっている- しりとりに使える言葉のリス…

第1章では、画像認識した結果が複数存在して、それをまとめて入れておくのに「配列」を使いま…

Google ChromeでWeb Speech APIの音声機能を正しく利用するための設定方法

ブラウザ内で音声認識と音声合成を利用する便利なWeb Speech APIがあります。これを利用すると…

英語のプログラミングチュートリアルは”つまみ食い方式”で聞くと英語力がアップする! 第1章❺ 英語でプログラミング解説を聞く ー 『JavaScriptでやる1分間プログラミング』

いよいよプログラミング英語と格闘する時間です!これまで4回にわたって「手描き画像分類アプリ」を作るためのJavaScriptプログラミングを解説してきました。冒頭で説明したように、この第1章の内容はCoding TrainというYouTubeチャンネルのチュートリアルで取り上げた内容がベースになっています。初心者でもコーディング作業ができるようにするのが一つの目的ですが、もう一つはこの英語のチュートリアルをベースにプログラミング英語を学習できるようにすることです。 これまで