音楽作る人ってすごいですよね。私も何度かGaragebandを開いて挑戦したことがあるのですが、これがなかなか難しくて。できる人は尊敬します。 音屋さんの動画って必ず音に合わせて動くバーがついてますよね。あの棒グラフみたいなやつ。あれかっこいいですよね。作りたくありません？作りましょう。 音屋のアレ 音屋さんのアレ、かっこいいですよね。音に合わせて動くバー。 オーディオスペクトラムとか言うらしいですね。これJavaScriptで作っちゃいましょう。 今回のソースコード一式 https://github.com/subterraneanflowerblog/audio-spectrum デモ ここをクリックでデモを開く まずは普通の棒グラフ まずは普通の棒グラフスタイルのスペクトラムバーを作りましょう。 まずHTMLからですね。canvasとファイル選択ボタンを置きましょう。 <!DOCTY

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部

経緯や理由はわかりませんが、日本のビデオゲームとポーカーミニゲームは切っても切り離せない関係にあります。RPGのカジノコーナーに行けば、多くの場合はポーカーと出会うことができるでしょう。 さてそんなポーカーですが、自分で作ってみたくなったことはありませんか？今回は、JavaScriptを使って、簡単なポーカーを作ってみましょう。 ビデオゲームポーカー 日本におけるポーカーは、一般的に古典的で素朴なポーカーが採用されることがほとんどです。テキサス・ホールデムも有名ですが、特にビデオゲーム内のミニゲームにおいては、多くの場合、最もシンプルなものが採用され、対戦相手はおらず、1人で役を作って遊ぶものに仕上がっています。 ルールとしては、プレイヤーにカードが5枚配られ、プレイヤーは保持したいカードを複数選びます。1度きりの交換後、手札の役を見て、強い役ほど報酬が多くもらえる、という作りになっていま

DOMとは Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 （DOM | MDNより） つまりDOM APIを使うことでドキュメントを制御できます。JavaScriptを使えばDOM APIにつなぐことができます。 このことから、JavaScriptとDOMは分かれて扱われています。 DOMツリー WebページはDocumentオブジェクトによって表されていて、ブラウザがwebページにアクセスしHTMLを解析すると、文書の内容を表すオブジェクトのツリー構造が構築されます。 この構造のことをDOMツリー（またはドキュメントツリー）といいます。 ノード DOM

こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume

こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常識と言ってよいと思います。サーバーサイドのウェブ開発用フレームワークでは、ほとんどの場合HTMLのエスケープ用のメソッドが用意されていて、HTMLのエスケープは適切に行えるはずです。しかし、注意しなければいけないのは、HTMLのエスケープはJavaScriptにそのまま当てはめることはできないという点です。当たり前の話ですが、HTMLとJavaScriptではエスケープすべき文字が異なります。また、IEの6、7ではCSSにJavaScriptを埋めこむことができるのでCSSにも注

よく、2つのテキストフィールドの合計を算出するJavaScriptの実装サンプルに、 var leftValue = document.getElementById("left").value; var rightValue = document.getElementById("right").value; var totalValue = eval(leftValue) + eval(rightValue); というのがあるのでこれまでeval関数はこういうものだと思っていたのですが、使い方が違うそうです（結果的には動くけど、eval関数の使い方が間違っている）。 eval関数は「引数を評価する」ためのものだということです。 例えば、 var user = { f1 : function() {console.log(1)}, f2 : function() {console.log(2

JavaScriptを使っていて、文字列をプログラムとして実行する場合に便利に使えるeval関数の返り値が少し理解しづらかったので調査しました。 ちなみに、eval関数は、脆弱性の元として使用を危険視されていて、ユーザーが任意に発火できないように構築を行う必要があります。 公開サーバーで使用する場合は十分に注意して脆弱性の調査などを行うことをオススメします。 1. 数値計算 var res = eval("1+1"); > res => 2 文字列の数式は計算結果を取得できます。 2. 文字列 var res = eval("document.title"); > res = %titme% 環境変数や通常変数なども取得できます。 3. 返り値チェック 普通にreturn var txt = "return 'aaa';"; var res = eval(txt); > Uncaught

任意の文字列をJavaScriptとして評価/実行し結果を返すeval関数ですが、"var x = 3;"とか実行させたらどうなるのか疑問だったので、ちょっと試してみました。 基本ルール 文字列をJavaScriptとして評価/実行し、式が実行されていればその値を返します。 式が実行されていない場合undefinedが返されます。 複数の式が実行された場合、最後に実行された式の結果が返されます。 リテラル/オペレーター 1とか"aaa"とか、new とか function とかです。 リテラルやオペレーターは評価値を返す式になるので、それが返されます。(当たり前ですね。) ステートメント ifとかforとか。varも含まれます。 ステートメントを実行し、式が実行されていればその値を返します。 ただし、if文の条件式やfor文の初期化式などは、カウントされません。 サンプルです。 var s

DOM Based XSSの基礎と実例 第1回 DOM Based XSSとは フロントエンド実装者が注意したい脆弱の問題のひとつに、XSSがあります。今回は、その原理を理解してみましょう。 脆弱性トップ10に数えられるXSS 「脆弱性（ぜいじゃくせい）」という言葉を聞いたことはありますでしょうか。サービスにセキュリティ上の問題があり、情報の漏えいや改竄などにつながる状態を「脆弱」であると言い、その原因となる問題を「脆弱性」と呼びます。つまり、脆弱性があると、攻撃を受けて情報が漏洩したり、改竄されたりといった問題につながる可能性があるということです。 脆弱性には、さまざまなものがあります。Webアプリケーションのセキュリティに関する課題解決を考えるコミュニティであるOWASP（Open Web Application Security Project）は、Webアプリケーションにおけるセキ

JavaScript の基本的な数値演算 — 加算、減算、乗算、除算。 数値が文字列として定義されている場合、それは数値ではなく、計算が間違ってしまう可能性があります。 文字列を数値に変換する Number()。 演算子の優先順位。 インクリメントとデクリメント。 代入演算子と比較演算子。 Math オブジェクトの基本的なメソッド、 Math.random()、Math.floor()、Math.ceil() など。 みんな数学が大好き まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript （または同様の言語）のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりするこ

言葉の力 言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。ウェブは情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。 HTML はテキストを構造化して意味づけし、 CSS がきれいに体裁を整えることを可能にし、そして JavaScript は文字列を操作するたくさんの機能を提供しています。独自の挨拶文を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといったことを行います。 このコースのこれまで示したプログラムのほとんどすべてが、何らかの文字列操作を含んでいます。 文字列の宣言 文字列は最初の見た目では数値と同じように扱われますが、深く掘り下げるといくつかの顕著な違いが見えてきます。基本的な行をブラウザーの開発者コンソールに入力して慣れることから始めましょう。 始めに、次の

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

十六章第八回　オブジェクトリテラルこのページの最終更新日：2019年7月2日 今回は比較的短いですが、オブジェクトリテラルについて解説します。オブジェクトリテラルはこういうやつですね。 { foo: 'bar', hoge: 3, } ES2015にはオブジェクトリテラルにも便利な記法が追加されましたので、それを解説します。 最後のカンマその前に、皆さんは気づいていたでしょうか。オブジェクトリテラルの最後のカンマについて気づいていたでしょうか。 { foo: 'bar', hoge: 3, // ←これ } です。オブジェクトリテラルの中身はプロパティ名: 値というのをカンマで区切って複数並べる形をしていましたが、一番最後にもこのようにカンマを付けることができます。 かなり昔のJavaScriptではできなかったので後方互換性を気にして最後のカンマを付けない人もいましたが、最近はそのような