Movatterモバイル変換

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

初めに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?

デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え？あのデイリーが？なんでそんな真面目なイベントを？」と驚くかもしれない。 急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。 僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。 大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー） 前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く ＞ 個人サイト

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>

標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[Symbol.species]インスタンスメソッドArray.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLast()Array.prototype.find

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 eleme

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimationFrame にするべき、のような記事タイトルが多かった。どういうことなのだろうと簡単な調査を行ったのでレビュー。 最初に結論 すべての setTimeout や setInterval を requestAnimationFrame に置き換えられるわけではない。requestAnimationFrame は、あくまで「反復処理」しかも「1秒間に30回もしくは60回」の反復処理をする際の話しであることが大前提。たとえば、5秒後に何かしらの処理を実行したい場合や繰り返す処理間隔を任意に指定したい場合は、これまで同様、setTimeout や setInterval を使うsetTimeout より requestAnimationF

WindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 mozInnerScree

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,

前のページ 次のページ <canvas> 要素は、ウェブで 2 次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバスAPI の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

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