条件分岐とは何かを理解すること。条件に応じて異なるコードパスを実行するためのコード構造。 if/else/else if を使用した条件の実装。 比較演算子を使用して条件を作成すること。 条件に AND、OR、NOT 論理を実装すること。 switch 文。 三項演算子。 すべては条件次第 人類（と他の動物たち）は 小さいもの（「クッキーを 1 つ食べるべきか、2 つ食べるべきか」）から大きいもの（「故郷に残って親父の農場を継ぐべきか、アメリカに渡って宇宙物理学を学ぶべきか」）まで、生活に関わるすべての決定を下します。 JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢（例えば「クッキーを 1 つまたは 2 つ食べる」）からそれを選んだ場合の結果を導き出します（おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が

LocalStorageの使い方 LocalStorageは、ブラウザにデータを保存するためのWebストレージAPIの1つです。LocalStorageは、セッションやクッキーとは異なり、データの保存期間が長く、ブラウザを閉じても保存されます。 LocalStorageを使用すると、JavaScriptを使用して簡単にデータを保存および取得できます。データは、キーと値のペアとして保存されます。キーは一意であり、値は文字列である必要がありますが、JSON.stringifyを使用してオブジェクトを文字列に変換し、JSON.parseを使用して文字列をオブジェクトに変換することができます。 LocalStorageに保存できるデータの量には制限がありますが、通常は5MB程度です。また、同じオリジンのページ間でのみアクセスできます。別のオリジンのページからアクセスしようとすると、セキュリティ制限

.htaccessとは、Webサーバーの動作をディレクトリ単位で制御できるファイルです。 ファイル内にルールを守った記述をすれば、アクセス制限やリダイレクト指定、404ページの作成といったことができます。 非常に便利な機能ですが、具体的な仕組みがよくわからず活用できていない方もいるのではないでしょうか。 本記事では、.htaccessの記述方法や設定手順、使う際のポイントについて解説します。 「.htaccessを使ってみたいけどやり方がよくわからない」 「.htaccessの記述方法について詳しく知りたい」 このような要望・疑問がある方はぜひ最後までご覧ください。

初めに HtmlのdivタグやspanタグにCSSを適用するためには、id名もしくはclass名を付けます。特にcalssセレクタは頻繁に使われていますが、その中でも複数のクラス名を一つの要素に並べるケースについてその理由とcssの記述について纏めてみました。 目次 idとclassの違い 同じタグ内に複数のclass名を付ける理由 同じタグ内に複数のclass名が並んだ場合のCSS記述 複数のクラス名が入れ子構造（ネスト）の場合 複数のclassに同じcssを適用する場合 まとめ idとclassの違い id属性はhtml文書内でたった一つしかない要素に対してスタイルを適用する時に使います。なので同じ文書内に同じid名が複数存在することはあり得ません。これに対してclass属性の場合、複数のタグに同じclass名を付けてそれぞれ同じスタイルを適用することができます。「この部分は絶対このス

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

大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー） 前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く 「お前のものは俺のもの」的な勉強会 「なくなったサイトで見る場所へ行く」はWebサイトを長年つづけてきたからこそできる名作記事 デイリーポータルZは「してみよう！拾い食い」や「ペリーがパワポで提案書を持ってきたら」といったような記事を毎日3本ずつ更新しているサイトだ。真剣にふざけながらちょっとした狂気を交えつつ運営されている。 ベテランライター陣は10年以上もこういった記事を書き続けているのだがら狂気の沙汰ではない。賽の河原で石を積み続けていたら、いつしか鬼に認められて飲み友達に

HTML例<div class="item"> <button class="js-accordion"> <div> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </button> <div class="accordion-box"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <div class="item"> <button class="js-accordion"> <div> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </button> <div class="accordion-box"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br

<input id="btn" type="button" value="ボタン" /> <script> 'use strict'; function hoge(e){ console.log(e.target.id) } document.getElementById("btn").addEventListener('click', hoge, false) </script>

�Æપ Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module

HTML要素にidを連番振りする HTML要素にidを連番振りするJavaScriptのサンプルコードになります。 例えば以下のリストタグのHTML要素に連番付けしたidを付与する場合の方法です。 <ul id="target"> <li>ItTEM 01</li> <li>ItTEM 02</li> <li>ItTEM 03</li> </ul> サンプルではquerySelectorAll()を使って要素を取得しています。 配列のループ処理はfor ofを利用、連番用にキーも欲しいのでentries()メソッドを使ってキー（i）と要素（e）を取得できるようにする。 idプロパティにて連番を加えて作成したid名を付与しています。 let elements = document.querySelectorAll('#target li'); for (const [i, e] of ele

const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; const start = Date.now(); let myReq; function step(timestamp) { const progress = timestamp - start; d.style.left = `${Math.min(progress / 10,

html5のcanvasがなかなか面白い． お絵かき的な使い方がメインにはなるのだけれど，ほとんどすべてjsでいじくり倒せるので，とても面白い． そんなcanvasを重ねてみた． いわゆる，レイヤー的な使い方ができるので，おすすめです． ちなみに，レイヤー用canvasの生成もjs内で行います． そしてそこに画像を描画していく！（描画するものはなんでもいいです）． $("#figure").click( function(){ var $img_canvas = addCanvas(100,100); var img_ctx = $img_canvas[0].getContext('2d'); var img = new Image(); img.src = "filename.png"; img.onload = function(){ img_ctx.drawImage(img, 0,

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��着View in English ���着Always switch to English 前のページ 次のページ <canvas> 要素は、ウェブで 2 次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。