タイトルの通り、C#プログラマーのためのJavaScriptチートシートです。C#に慣れているプログラマーがJavaScriptの書き方を効率的に学べるように、2つの言語の書き方をまとめています。 LINQ編は別記事で公開しています。 基本構文 概要 C# JavaScript
C#プログラマーのためのJavaScriptチートシート
タイトルの通り、C#プログラマーのためのJavaScriptチートシートです。C#に慣れているプログラマーがJavaScriptの書き方を効率的に学べるように、2つの言語の書き方をまとめています。 LINQ編は別記事で公開しています。 基本構文 概要 C# JavaScript
JavaScriptのイテレータ, イテラブル, ジェネレータを理解する！
お久しぶりです。GMOインサイトの天河です。 ついこの間、JavaScriptのジェネレータについて社内勉強会で発表したのでその内容をまとめます。 ※ 注意 本記事で言及している「ジェネレータ」はJavaScriptでの言語仕様です。一部通ずる箇所もあると思いますが、Python や C# など他の言語での使われ方についてはしかるべき文献を見てください。 目的 ジェネレータ が何かわかるようになる ジェネレータについて面接で聞かれても余裕で答えられるようになる 実装時にジェネレータを選択肢として持てるようになる 対象読者 ジェネレータ が何か全くわかっていない人 ジェネレータ について認知はしているものの、どういうものかは把握していない人 ジェネレータ を知ってはいるものの、使い所がわからない人 はじめに ジェネレータを理解するためには、「イテレータ」と「イテラブル」について知る必要があり
自作アプリにおすすめの外部API（JS,Reactのコードあり） - Qiita
はじめに みなさん、こんにちは。Happiness Chainメンターのryoです。 今回は自作アプリを作る際に、導入するとおすすめな外部APIを紹介していきます。 ほとんどの現場では外部APIを1つ以上は使用しているので、これから紹介する外部APIを1つでも導入することで、転職が有利になることがあるので、是非参考にしてみてください。 ※各APIにて、実際に動作するJavaScriptのコードを記述しています。SDKが正常に動作するものに関しては、SDKを使用しています。 1. Slack API Slackを使用しているモダンな会社では、Slack APIを使用している所が多い印象です。例えば、ユーザーが特定のアクション（ユーザー登録など）を行った時や、メール送信時、エラーが起こった時等にslackの特定のチャンネルに通知します。実務だとSlackは常に開いているツールなので、ユーザーの
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
モグラ叩き - Angel21 HP Blog
モグラは畑の農作物を食い荒らす害獣だと思っていたが、動食性（ミミズや昆虫の幼虫）であり、実際に食害しているのはモグラのトンネルを利用したネズミとのこと。 モグラは、主にミミズ（土龍）を食うので「土龍追い」などと呼ばれた。モグラを「土竜」と書くのは実は誤りらしい。確かに竜というほどスマートじゃない。 そんなこんなで、日経ソフトウェア2014年3月号「HTML5でゲームを作ろう（第4回）」に掲載されたモグラ叩きゲームを制作してみました。 今回もプログラムソースには手を加えていません。 右の画像をクリックすると実際のゲームを実行します。 「STRAT」ボタンを押して、40秒間に、穴から顔を出したモグラをなるべく多く叩くだけです。 モグラを叩けば＋５点ですが、子供を叩くとスコアが減点（−１５点）されます。 ＰＣではマウスでクリック、タブレットやスマートフォンでは指でタッチすることでモグラを叩きます
Canvas のマウスとタッチのイベントを表示するプログラム
著者：関 勝寿 公開日：2020年1月7日 キーワード： javascript HTMLのCanvas要素におけるマウスとタッチのイベントの取り扱いを理解するために、発生したイベントの名前と位置を表示ながら線を描画するJavaScriptのプログラムを作成した。 Canvas 内のスワイプを無効にする クリア
JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA
アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ローディングアニメーションの設置手順こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSS だけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単な JavaScript も必要です。 1. ローディング画面の用意まずはコンテンツを用意しましょう。上部にローディ
HTML Canvasのインターフェイスのまとめ #3 - Qiita
HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。 本記事で3記事目となります。前記事で触れた内容は割愛するので必要に応じて前記事もご確認ください。 1記事目: 2記事目: テキスト 以降の各節ではCanvasのテキスト関係について色々触れていきます。 fillTextメソッド fillTextメソッドでは塗りを設定したテキストを描画します。第一引数には設定するテキストの文字列、第二引数にX座標、第三引数にはY座標を指定します。 <html> <body> <canvas id="canvas" width="500" height="350"> </canvas> </body> <script type="text/javascript"> let canvas = document.getElementById("canvas"); let context =
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
27210
みなさんこんにちは！Kotonoです。 JavaScriptに関わらず、プログラミングにおいて基本中の基本である変数の宣言。みなさん使いこなせていますか？ もしかしたら、 という人もいるかもしれませんね。今回はそんな変数の宣言方法のひとつ、varに注目して解説していきます。 varの使い方から特徴、さらにはvar以外の変数宣言方法まで網羅的に解説するので、これをきっかけに変数への理解を深めていってくださいね！ 変数とは？ プログラムでは値を使い回す場面が多くありますよね。その度にいちいち入力していたりすると面倒ですし、処理の途中で値を変更する必要があったりすると色々ややこしいですよね。 そんな時に使えるのが変数です。変数は値を入れておく箱のようなものです。変数名を決めて、その中に数値や文字列を入れることで その変数名＝入れた数値や文字列 という扱いができるようになります。 値を使い回す場面
JavaScriptで挑戦！ゲーム制作に役立つコード11選
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめに ゲーム開発は、創造性と技術的スキルが結集する舞台であり、特にJavaScriptはこの領域で非常に重要な役割を果たしています。 JavaScriptは、Webベースのゲーム開発において中心的な技術であり、そのアクセシビリティと柔軟性が開発者に高く評価されています。 この記事では、JavaScriptを使ってゲームを作るための基本的な構造から始まり、より高度なゲーム機能の実装に至るまで、段階的に解説していきます。 ○JavaScriptとは？ Java
Canvasでゲームを作る
HTMLのバージョン５からcanvasという要素が追加されました。 このcanvasはブラウザ上にグラフィックの描画エリアを作ることができます。 この描画エリアにはJavaScriptを使って様々なグラフィックを表示することができます。 なのでもちろんゲームも作ることができるわけです。 そしてこのcanvasを利用して作られたゲームのことをHTML5ゲームと呼んだりします。 JavaScriptを使った開発ではライブラリを使うのが一般的で、もちろんゲームに使えるライブラリも色々あります。 基本的にはライブラリを使ってゲームを作った方が間違いなく楽で良いものができます。 ただ、今回はライブラリを使わない素のJavaScriptだけでゲームを作ってみます。 今回のプログラムはCodePenに上げています。CodePen上で編集できるので好きに使ってください。 See the Pen JavaS
JavaScriptでフルスクラッチゲーム開発しよう 第1回 準備編 - Qiita
HTML5のゲーム開発向けフレームワークの乱立 昨今、HTML5のCanvas, WebGL, WebAudioAPiなど、Webフロントエンド技術でのゲーム開発に向いた技術が増えて、Webブラウザ向けのゲーム開発界隈が盛り上がりを見せています。 それに合わせて、JavaScriptによるゲーム開発向けフレームワークも広がりを見せ、どれを選べばいいか迷ってしまうほど、多くのフレームワークが登場しています。 習熟の道 しかし、HTML5ゲームの開発をする際にそういったフレームワークを使用することを選択した場合、CanvasやWebGLなどの特性を学ぶ他、そのフレームワークの使用方法や設計理念も学ぶ必要があり、目の前に登場する大きな要塞に立ちくらみを覚える人も居るかと思います。 「フロー体験」という考え方があり、技術の習熟においては、自分の現在の習熟レベルに合わせて技術を学習する必要があります
JavaScriptでもぐら叩きをつくる プログラミング | 鳩でもわかるC#
前回との共通点は絶対配置（position: absolute;）とz-indexを使うことです。 ではさっそくはじめましょう。 まずもくらの素材を仕入れます。これとかどうでしょうか？ モグライラスト – No: 805158／無料イラストなら「イラストAC」 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>鳩でもわかる もぐら叩き</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; } #container {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【熱望】javascript の for 文で var i を宣言するのはやめて下さい - Qiita
JavaScript+html+Canvas でゲーム作成（基本部分）｜sanbunnoichi
HTML5とCanvasを使ってみよう！ 小学生からのJavaScript
