セガがjavascriptでぷよぷよを作るプログラミング講座を出しているが、とても良いプログラミングの教材になっている「写経はとても大事」
ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki プログラミング学習中の方へ👨💻 これ面白い！！セガがjavascriptでぷよぷよを作るプログラミング講座を出してくれてます😊 動作ごとに細かくコメントも入ってるので、ちゃんとソースコードを読んでから写経していったらめちゃくちゃいいプログラミングの勉強になると思う！ puyo.sega.jp/program_2020/ pic.twitter.com/Xr5hmPzZXI ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki このぷよ開発に使う『Monaca』は、本来iOS用はswift・Android用はJavaと、別々に開発が必要なアプリを、HTML・jsなどのWeb標準言語でまとめて開発できるという開発プラットフォームです。 無料で使えてブラウザだけで開発可能
vis.js
vis.js community edition * A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.
PromiseベースでImage().onloadする - Qiita
やりたいこと JavaScriptで、画像の width/height が知りたいとき、以下のようにする。 const img = new Image(); img.onload = () => { console.log(img.width, img.height); } img.src = '画像のパス'; img.src にパスをつっこんで、読み込み完了したタイミングで onload が走る。 このとき、 onload で完了を待たずに img.width などとしても0が返される（読み込み完了前の値が返される）。 これを Promise ベースで書いて、 async/await や、 then/catch の構文で使えると便利なのでは。 結果 こう書ける。Imageに限らず、onloadにコールバック指定する系はだいたい書き換え可能。 new Promise((resolve, r
[Javascript] Mapクラスを使った連想配列の定義方法
Javascriptで連想配列を定義 連想配列(あるいは辞書型やハッシュテーブル)は、従来のJavascriptの機能として直接的には提供されていませんでした。代わりに、Javascriptでは連想配列の機能を実現するためにObjectを使っていました。 // 連想配列を定義 var dictionary = { "a": 100, "b": 200, "c": 300 }; // データの追加・更新 dictionary.d = 400; dictionary["e"] = 500; // データの削除 delete dictionary.a; delete dictionary["b"]; // データの参照 var d = dictionary.d; var e = dictionary["e"]; console.log(d, e) // 400, 500 // データの列挙 va
![[Javascript] Mapクラスを使った連想配列の定義方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/39345b783600478f9f7560588281a42a5162c520/height=288;version=1;width=512/https%3A%2F%2Fwebbibouroku.com%2Fwp-content%2Fuploads%2Feye_javascript.png)
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
アールエフェクト | IT初心者スキルアップ応援ブログ
IT初心者がつまずきやすい事柄を中心に簡単なコードとわかりやすい解説でスキルアップを応援します。
Casual Developers Note
Casual Developers Noteエンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。 2020年もWeb業界の進歩は止まりません。今回は、JS周辺のバックエンド寄りの注目技術である「Deno」と「Entropic」をざっくり紹介します。 はじめに 2020年に入り、Web業界の特にJavaScript周りの動向を調査していたところ、「Predicting the Future of the Web Development (2020 and 2025)」という面白い動画を見つけました。2020年から5年後までのWeb業界の予測の動画で、ざっくり言うと、以下の4つの予想が示されています。 TypeScriptが爆発的に人気を集めており、React/Vue/Anguarなどのフロントエンドフレームワークで利用可能になっ
[JavaScript]動的なテキストの幅を取得し、スタイルを適用する
動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。 しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。 バイト数による判定も、同様の違いや文字コードによる違いがある。 「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。 ということで、動的に表示されるテキストの幅（width）を取得し、幅にあわせてスタイルを適用できるようにする。 テキストの幅を取得する テキストの幅を取得する方法は、以下の手順で行う。 span要素を作成し、テキストを設定する bodyなどに一時的にspan要素を追加する HTMLElement.offsetWidthで要素の幅を取得する bodyに追加したspan要素を削除する このようにしてHTMLElement.offsetWi
![[JavaScript]動的なテキストの幅を取得し、スタイルを適用する](https://cdn-ak-scissors.b.st-hatena.com/image/square/916f05dd699f167c68e11a90a6b1dfa9b7b4896f/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhUDHdD0rmEbFG39SccSK2CcOrU9bBOr2xLeghJcIjDq3ihm_oDP1NGPmmgy6Kc2go1AC7f8Wga0h36kBmAU0YbfQj8dJdBiUA2pHieJPBJlPCa6vtbM2_QD1rXfg_dbf5Z1p7Ij3gIHYgb%2Fw1200-h630-p-k-no-nu%2Fcalculate-element-width-with-offsetwidth.png)
Full stack open
You can discuss the course and related topics in our dedicated group on Discord https://study.cs.helsinki.fi/discord/join/fullstack. Please join the conversation! See here how to ask questions in a proper way Parts 0-8 and 13 of the course material is written by Matti Luukkainen. The content of part 9 is written by developers from Terveystalo. Part 10 is written by Kalle Ilves. The content of part
純粋な JavaScript を使ったブロック崩しゲーム - ゲーム開発 | MDN
Web のゲーム開発紹介 Web のゲーム開発紹介 ビデオゲームとの違い ツール Canvas CSS Full screen Gamepad IndexedDB JavaScript Pointer Lock SVG Typed Arrays Web Audio WebGL WebRTC WebSockets WebVR Web Workers XMLHttpRequest ゲーム開発テクニック asm.js の同期スクリプトを利用する 起動パフォーマンスを最適化する ピア通信チャンネルとして WebRTC を利用する Web ゲーム向けの音 2D 衝突検出 タイルとタイルマップの概要 Web上の 3D ゲームの概要 Web上の 3D ゲームの概要 基本の 3D理論の説明 A-Frame Babylon.js PlayCanvas を利用した基本的なデモの制作 Three.js を使った
JavaScriptで簡易物理エンジンを実装する
本記事は、書籍「ゲームで学ぶJavaScript入門 増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく!」用に作成した簡易2D物理エンジン「Tiny2D.js」の詳細解説です。 はじめに 本記事は、書籍「ゲームで学ぶJavaScript入門 増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく!」用に作成した簡易2D物理エンジン「Tiny2D.js」の詳細解説です。Tiny2D.jsは角速度や質量は考慮しない、矩形と円しかサポートしないなど、物理エンジンと名乗るには僭越なほどシンプルなものですが、シンプルなだけに使い方も簡単で、修正も十分に可能です。「百聞は一見にしかず」です。まずはサンプルを実行してみて、どのような動きをするのか皆さん自身で確かめてみてください。 物理エンジンとは 「アングリーバード」や「モンスターストライク」など物理エンジンを活用したパズル系のゲーム
一人React.js Advent Calendar 2014 - Qiita
React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.
iframe のスクロールバーを出さない方法（高さを自動変更） | すぐ使えるサポート情報
新着情報（「短い一覧」）を <iframe>（インラインフレーム、アイフレーム）でホームページに組み込んだ場合、<iframe> の高さが足りずにスクロールバーが表示されてしまう場合があります。 この <iframe> の高さをコンテンツの量に合わせて自動変更し、スクロールバーが出ないようにする方法を紹介します。「scrolling="no"」でスクロールバーが出ないようにしてるため内容表示の方が欠けてしまう場合の調整にも使えます。
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
JavaScriptをやり始めた人が理解したほうが良いJSONパーサのコード - sifue's blog
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Subterranean Flower Blog
GitHub - stefanpenner/es6-promise: A polyfill for ES6-style Promises
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ja-JP.md
Servicii Web Design, mobile SEO, Creare Magazin Online- AjaxMasters
掲示板/JavaScript質問板［過去ログ］/一覧/ビックリマーク２本 - TAG index Webサイト