ということで本題

http://jsfiddle.net/u3zbswhk/

いつもどおりjQueryを導入した（笑）

131行 -> 96行 -> 83行

速度てｗ

>>901
この状態で13押したら
こうなるぞ
失格
でなおしてこい

http://ics.media/entry/17451/
> WAI-ARIAはHTML要素の属性を動的に書き換えなければならないため、生JSやjQueryで制御しようとすると、正直、骨が折れます。

これ本当？
生JSで大変なのは分かるけど、jQuery使っても簡単にならないの？？

>>903
映ってねーぞバーカｗ

>>904
■ピュアJSの場合
要素.aria = 値;

■jQの場合
要素.attr({ aria : 値 });

ってのを、わざわざJS用意して書くじゃん？
なんならこれやる前に、要素にアクセスする必要もある

vueとかだと、それをHTML側に直に書けるから便利だねっつー話だと思う
まあそれぞれフレームワーク毎に特殊な書き方するわけだけど

>>885,888
ここで聞いて大正解でした
本当にありがとうございます

>>906
マジかー悩むなぁ
まあ、じゃあvueでいいか。しばらく生きてるだろ

>>903
ワロタw　いや失敬失敬。
でもそこは本質的な所じゃないから後よろ！
xとyの情報も持ってるからそれでできるはず！

>>904
相変わらず「脱jQuery」が目的になっちゃってる（感じがする）ダメなタイトルだなｗ

これ２つの意味がある。
1. ブラウザネイティブのDOM APIを使いましょう。
2. DOM操作（DOM API含む）をするのをやめましょう。

この記事は2みたいだけど、DOM操作をやめる = それが必要ないフレームワークを
使いましょうってことだけど、まあ、そのフレームワークの導入も正直骨が折れるだろうねｗ

で話を戻すけど、この人、頭がアプリ脳になってるんだと思う。
作り方がね。アプリの作り方。要素にARIA属性をつけようと思ったら、
その要素ごとにいちいちにコードを書かなきゃいけないと思ってる。
要素ごとにいちいち書くよりもフレームワーク使ってパーツを作ったほうが良い。という発想。

でもjQueryは特定のセレクタに対して横断的に処理を追加するもの。
要素ごとじゃなくて、クラスごとに1個書けばいいだけなの。

例えばリンク先のaria-checkedであれば、<button class="checked-button"> みたいに
クラスをつけておけば、jQueryでそのクラスに対して横断的に、aria属性を書き換える
処理を追加する。だから要素ごとにコード書く必要もないし、HTMLはシンプルになる。

> 昔のコードはHTMLを組み立てるのに文字列を結合するというストイックなやり方でした。

まあ、こんな事書いてるし、昔のコードがクソすぎるってだけなわけでｗ

function(d){
// 1から15までのパネル及びブランク(null)の位置関係を調べるための配列
// 長さは4x4の16。座標(x,y)に位置する要素は、配列上ではpannels[x+y*4]に存在する
const pannels = [];

let container = null; // パズル本体

// パネルをスライドさせる処理
//　x, y はパネルの座標でそれぞれ0以上4未満の整数
function slide(elem, dx, dy) {
const x = Math.max(Math.min(3, parseInt(elem.dataset.x) + dx), 0);
const y = Math.max(Math.min(3, parseInt(elem.dataset.y) + dy), 0);
elem.style.left = x * 25 + "%";
elem.style.top = y * 25 + "%";
elem.dataset.x = x;
elem.dataset.y = y;
}
助言を受け、スライドパズルのソースのここまでをchromeのデベロッパツールから実行してみたのですが、どういう処理が行われているか確認するには、これをコンソールなどに出力してみるってことでしょうか

>>911
ステップインを使う
これ分からないならもう止めたほうが良いぞ

>>909
間違ってるものをドヤ顔で晒して人様の手を煩わせておいて失敬失敬はないだろ

>>912
ステップ実行とステップインは違うってことですね
近藤してましたが調べてみます

>>904
http://ics.media/entry/17451/
> WAI-ARIAはHTML要素の属性を動的に書き換えなければならないため、生JSやjQueryで制御しようとすると、正直、骨が折れます。

って書いてあったから、サンプル作ったよ。リンク先にある。gridLayoutとlistLayoutの切替部分
http://jsfiddle.net/j3k94sz0/

正直、ボタンでラジオボタンのようなものを作るから面倒なことになるんだが、
そのお題で、汎用的なjQueryのコードにした。
「切り替えボタン＋関連する要素にボタン情報を伝える」汎用コンポーネント

リンク先には
> JSのロジックにはWAI-ARIAの一切の処理が入っていません。
とか書いてあるが、HTMLにWAI-ARIAの処理（JavaScript）が入っていて
思考の切り替えが必要になる。HTMLに埋め込まれたJavaScriptも「JSのロジック」とみなせば、
「JSのロジック」にWAI-ARIAの処理が入ってるじゃんｗってことになる。

俺が書いたコードは「HTMLにはJavaScriptの一切の処理が入っていません」
わずか6行のjQueryのコードで「ボタンによる切り替え」に対応している。
もちろんこれが複数あっても対応できる。別のプロジェクトでも使えるだろう。

っていうか、普通にラジオボタン使って作れば、もう少しわかりやすくできるんだがｗ

>>911
本家が懇切丁寧に説明してくださってるんで
読みながら真似してみれば良いんでね？
http://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints?hl=ja
http://developers.google.com/web/tools/chrome-devtools/javascript/step-code?hl=ja

unityに匹敵するjavascript用ゲームエンジンを作って欲しい。

>>917
よし、お前さんが基礎を作って旗を振るんだ

unityは以前、javascriptが使えていたのに…。
残念。

誰かつくって

>>919
結構最近だよね

htmlのonclickを使わず、idの取得だけでクリックイベントを作ることは出来ますか？

>>922
click()

>>922
Mouse鮻vent

ロジック学んでいれば他の言語でも同じようにやれますか？

じゃバスク版ユニティを作れ。
>>948

バスクってmsが発表した言語？jsと何の関係が？

>>874-878
前から配列内の要素を削除していくと、
削除した瞬間に、後ろの要素が前にずれるから、バグる！

だから、配列の要素の削除は、難しい

>>876
Ruby で作った。単純に、1文字ずつ比べる

filepaths = %w(abcd ab ab abc abcd aby)

index = nil
catch( :exit ) do # 2重ループを、一気に抜ける
filepaths.first.each_char.with_index do | char, idx |
# p [ char, idx ]

filepaths.each do | fp | # 1文字ずつ比較する
throw :exit if char != fp[ idx ]
end
index = idx
end
end

p index #=> 1。つまり、ab まで一致する

>>911
そんな、ややこしいものをやらなくて良い

君がやるべきは、x から、2, 3 には行けるけど、右・下には行けない。
こういうチェック

0 は番兵。行けない部分に、壁を作って、判定を簡単にしている。
プログラミングよりも先に、図を描くのが重要！

0 0 0 0
0 1 2 0
0 3 x 0
0 0 0 0

>>929
chromeでもfirefoxでもsafariでも動きませんでした。
もしかしてあなた私より初心者なのでは？ｗ

>>930
問題はそこではなくて、これはデータを1次元配列で持ってるのが面倒くさい原因
2次元配列で持っていれば、別に番兵を作る必要もない。配列の範囲外は必ずundefined。
Rubyと違ってa[-1]が配列の後ろから1番目なんて変な仕様はないから自然な番兵となる。

もしくは直感と反するが
0 0 0 0 0 0
0 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x 0
0 0 0 0 0 0

から上下の0を取り除いて
0 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x 0

最初と最後の0を取り除いて（_ に置き換えてる）
_ 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x _

1次元配列にして、連続する0を1個にする。
1 2 3 4 0 5 6 7 8 0 9 A B C 0 D E F x

このデータで、現在のパネルの、左右を+1/-1、上下を+5/-5として扱えば動くぞ。
それを実装たのがこれだhttp://jsfiddle.net/gqvn87k5/

>>913　ほれ、なおしたぞ。ドヤ？

出たよrubyのクソ仕様ｗ
C時代の番兵でいろんなスレでアスペ荒らししてたのはRubyのクソ仕様が原因だったｗｗｗ

jsでゲーム作るならどんなのが？

>>931
本人ではないが、サーバサイドスクリプトがクライアントサイドで動くわけなかろう
「サーバで動かせ」という意図ぐらいは察したらどうだ？

nodeでも動きませんでした。
せめて動くjs書けないのｗｗ

Rubyと書いてあるじゃん
まあJavaScriptのスレでRubyで答える方がおかしいんだけど

しかもこういう用途に例外を使うとかいうクソ発想の持ち主ｗ

爆釣やな

スレは、答えを書く所ではない。
Ruby などの擬似コードで、考え方・ヒントを教える所

それをヒントにして考える・コードを書くのは、質問者自身がやるべき！

答えをコピペする奴は、進歩もしないし、どうにもならない

>>940
ruby書くとこじゃねえんだよ
死ねや

> Ruby などの擬似コードで、考え方・ヒントを教える所

ダメなコードから学べるのは
ダメなコード例です。

>>940
＞Ruby などの擬似コードで、考え方・ヒントを教える所
死ね

2重ループ脱出には、catch, throw を使うのが定番。
本を読んでないだろ？

配列のインデックスが負数の場合は、配列を後ろから数えるのも定番。
色んな言語を調べてないだろ？

>>944
そもそも2重ループなんてするものじゃないから（笑）

filepaths = %w(ab abc abc abc abcd abc)

index = (filepaths.first.chars.find_index.with_index do |char, idx|
!filepaths.all? { |fp| char == fp[idx] }
end || filepaths.first.length) - 1

p index

あ、filepaths の内容戻すの忘れてたｗ

filepaths = %w(abcd ab ab abc abcd aby)

index = (filepaths.first.chars.find_index.with_index do |char, idx|
!filepaths.all? { |fp| char == fp[idx] }
end || filepaths.first.length) - 1

p index

これもう少し簡潔にかけそうな気がしてるんだけど、
すぐに思いつかない。

jQueryが得意な人は、いろんなものが得意なんやで？ｗ

>>942
jQueryばかり勧める人がよくいえたもんだな

http://video.fc2.com/content/20090104qC1kSMF2/&tk=TnpnMk5EVXdOalU9

>>948
jQueryを勧めるのはjQueryがふさわしいからであって、
何もアプリを作る時にjQueryなんか勧めませんよ？

ウェブでアプリ作ろうなんて人はめったにいませんからね。