ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
スレッドとプロセスの違いを完全に理解する
はじめに こんにちは、FarStep です。 プログラミングを学ぶ中で、「プロセス」と「スレッド」という言葉を耳にしたことがある方は多いと思います。 しかし、これらの違いを明確に説明できる自信がない方も多いのではないでしょうか。 本記事では、プロセスとスレッドの違いについて、エッセンスを抽出して 解説します。 説明を簡潔にしましたので、本記事は 5 分程度で読み終えることができます。 本記事の内容を自分の言葉で説明できるようになれば、プロセスとスレッドの違いの理解は十分でしょう。 それでは、始めます 🚀 プログラムとは プロセスとスレッドの違いを理解する前に、まずは「プログラム」について理解しましょう。 プログラムとは、プログラミング言語で書かれた一連の命令 のことです。 プログラミング言語の例としては、以下のようなものがあります。 C 言語 Java Python Ruby JavaS
【JS体操】JavaScript で頭の体操をしよう！〜第1問 44文字 解説編〜 - KAYAC Engineers' Blog
こんにちは！カヤック面白プロデュース事業部のおばらです。 普段は受託案件、特にインタラクティブな WebGL や Canvas2D を駆使する案件のデザイン＆実装を担当しています。 先日出題したJS体操 第1問目、挑戦してくださったみなさまありがとうございました！ 早速ですが最短文字数の回答は 44文字 でした！ export default x=>x-(x%=.2)+.2-(.04-x*x)**.5 みごと44文字を達成した方は、 halwhite さん koyama41 さん sugyan さん tkihira さん たつけん さん の5名！（※ Unicode コードポイント順） おめでとうございます！！ 最短文字数を狙った正統派の回答以外にも、裏技的な面白アプローチがたくさんありました笑 このアプローチは面白い、ぜひ紹介したい！という回答がいくつかあったので、解説記事は2回に分けて
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
<img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointerCapture(event.pointerId) } } </script>
MobX の使い方｜npaka
以下の記事が面白かったので、ざっくり翻訳しました。 ・MobX: Ten minute introduction to MobX and React 1. はじめに「MobX」は、シンプルでスケーラブルな、状態管理ソリューションです。このチュートリアルでは、「MobX」の重要な概念を10分で紹介します。「MobX」はスタンドアロンライブラリですが、ほとんどの人が「React」で使用しています。 2. コアとなるアイディア「状態」はアプリケーションでもっとも重要なものの1つです。一貫性のない状態や、ローカル変数と同期していない状態は、不具合の多い管理不可能なアプリケーションを生み出します。 多くの状態管理ソリューションは、状態を変更できる方法を制限しようとします。しかし、これは新しい問題を引き起こします。データは正規化する必要があり、参照の整合性は保証されなくなり、プロトタイプなどの強力な概
detailsタグのアニメーションについて - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
WordPress6.3でも実装されたdettailsタグ。 これはdetailsのSummaryタグ。 detailsのここが中身。 ↑こんな感じで開閉がCSSやJSを使わずに簡単に実装できる。 しかもアクセシビリティ面も配慮されているのがありがたいところ。 ただ、アニメーションをつけようとすると途端に難易度が上がっちゃう。 いろいろ調べてたどり着いた内容を残しときます。 CSSだけで実装 いちおうCSSだけでアニメーションをつけることは可能。以下は参考コード。 ※こちらの記事を参考に作成しました 属性「open」が付いたときに、animationを使って微妙に位置をずらす+フェードインを使って動きを付けてる。 JSを使わない実装をする場合はこの方法が現状の最適解かな。 ただ、閉じる際にアニメーションが効かない上に、高確率でアニメーションが効かない…。 もう少ししっかり動きをつけたい…。
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
【JavaScript】読みやすいコードの書き方 - Qiita
はじめに 私は他人のコードをレビューしたことも自身のコードを他人にレビューしてもらったこともない初学者として現在のプロジェクトに加わりました。そこから現在までの2年間毎月10から20ほどのプルリクエストをレビューし、またチームメンバー内で読みやすいコードについて議論することで、徐々に読みやすいコードを書くためのポイントが掴めてきました。 これらの経験を通じて、私が現在考えている読みやすいコードを書くためのポイントを本記事にまとめていきます✍️ 前提 言語はJavaScriptで、レガシーな環境での手続き的なJavaScriptを想定しています。 「JavaScriptの文法やメソッドは理解してきたけど、より読みやすいコードの書き方がわからない」と感じている初学者向けです。 筆者は一般的なコーディング規約や設計原則についての書籍や資料をほとんど参照していません（読んだことがある本と言えばリー
【JavaScript】アニメーションの処理負荷を軽減する - Web production note
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。 可読性や保守性など、よりクリーンなコードを目指す場合は不適切な書き方があるかもしれません。 コードは参考程度に見ていただき、各自の環境でデバッグのうえより適切なコードを選択していただければと思います。 パフォーマンスパネルでデバッグ今回はChromeのパフォーマンスパネルで検証をしました。 パフォーマンス計測後の詳細からJSファイルを参照すると、具体的な実行時間まで表示されるため重たい処理の特定に非常に重宝しました。 パフォーマンスパネルの使い方の詳細は以下をご参照ください。
共通パーツをインクルード化！効率よくコーディングする方法 | Build（ビルド）
HTMLの共通パーツのインクルード方法がわからない方 インクルードのメリットとデメリットを知りたい方 JavaScriptを使ったインクルード方法を学びたい方 このような悩みを持つ方にオススメです。 この記事では、HTMLの共通パーツをインクルードする方法について解説します。 共通パーツのインクルードとは？ 共通パーツのインクルードとは、複数のHTMLファイルで使う共通のパーツを別ファイルにまとめ、そのファイルを各HTMLファイルに取り込むことです。 よく使われる共通パーツには、以下のようなものがあります。 ヘッダー フッター ナビゲーションメニュー 共通パーツをインクルードするメリット 共通パーツをインクルードすることで、以下のようなメリットがあります。 同じHTMLコードを何度も書く必要がなくなる 変更時に1箇所の修正だけで済むため、保守性が向上する ページの読み込み速度が向上する こ
JavaScript でオーディオプレーヤーやプレイリストを作成
HTML .audio-controller を指定した div 要素で全体をラップし、その中に audio 要素とコントロールを配置します。audio 要素には controls 属性を指定しません。 ボタンは type="button" の button 要素にクラスを指定して識別し、再生位置とボリュームは type="range" の input 要素（レンジスライダー）にクラスと name 属性を指定して識別します。 この例の場合、ボタンのテキストが幅をとってしまうため、2段で表示しています。 HTML <div class="audio-controller"> <audio src="sample.mp3"></audio> <div class="controls"> <div class="row"> <button class="toggle" type="button"
JavaScriptデザインパターン入門 - Qiita
1. はじめに JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。 2. モジュールパターン モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。 これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。 JavaScriptでは、クロージャを使用してモジュ
iOS のラバーバンドスクロールを Web で実装する方法 - Katashin .info
2023年7月31日JavaScript,インタラクション,アニメーション,iOS普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか？その挙動をどう実装するか考えたことはありますか？ この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。 本記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。 ラバーバンド効果の単純化した例 #ラバーバンド効果はスクロールだけではなく、移動可能なオブジェクトが動ける範囲を暗に示すために使えます。例えば、この
【入門】『スーパーマリオ』で学ぶ、JavaScriptの非同期処理
はじめに 今回の記事では、JavaScriptの学習における最大の鬼門の一つ「非同期処理」を、任天堂のゲーム『スーパーマリオ』を具体例に、初心者でもわかりやすく解説する。 対象とする読者 プログラミング初心者 非同期処理が全くわからない初心者 タイトルで気になったひと 同期処理と非同期処理 まずは、「同期」と「非同期」のそれぞれの定義や違いについて解説する。同期処理とは、コードを上から下まで順番に処理することを意味する。一方で、非同期処理はある処理が終わるのを待たずに、別の処理を実行することを意味する。 参考までに、「分かりそう」で「分からない」でも「わかった」気になれるIT用語辞典では、以下のように説明されている。 非同期(読：ヒドウキ 英：asynchronous)とは相手との足並みを揃えないこと。あるいは、相手の反応を待たないで、ひょいひょい行動すること。 同期は何かと何かを「同じに
アニメーションの実装が劇的に簡単になるFLIPテクニック - Katashin .info
2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する
JavaScriptの非同期処理の歴史 - Qiita
はじめに JavaScriptにおいて、非同期処理の扱い・知識は欠かせないものとなっています。 この記事ではそもそも非同期処理とは何なのか、JavaScriptで非同期処理がどのような変遷を遂げてきたのかについて解説していきたいと思います。 同期処理 JavaScriptで以下のようにコードを書いた場合、各行の処理が完了するまで次の行の処理が開始されません。 変数numが初期化される前にconsole.log(num)が呼び出されることはなく、必ずnumの初期化が完了してからコンソールに出力されます。 このように、書いた順番にプログラムが実行され、現在行の処理が完了してから次の行の処理に移るような処理は同期処理と言われています。 同期処理の問題点 JavaScriptにおいて、HTTPリクエストや端末のカメラやマイクへのアクセス、ファイルの読み込みといった完了までに長い時間がかかる可能性の
JavaScriptでのアルゴリズムとデータ構造 part1 - Qiita
初めに 連結リスト、スタックやキューなどデータ構造のコア概念を模索しながらC言語で練習してみて思ったのは、理解したうえでどんな場面で応用していくかが大事なんですね。 しかし応用の前段階から、アルゴリズムの理解に時間がかかったり不慣れなところ（解決法の仕組みとかどうしてそういう発想ができるのかとか）もあったりして、自分はやはり初歩的な段階からもう一度勉強してみたいと思います。 今回はリハビリを兼ねて長い間触れてないJavaScriptでアルゴリズムとデータ構造の実現を理解してまとめていきたいと思います。（箇条書きが多い。） 教材はこちらです。 （この記事では単なる自分の理解や気になるところをトピックにして書いたメモです。トピックは基本的に教材と関連しているが、語る方向が全然違う可能性もあります。なお、有料映像であったため、映像のコードそのまま出すのを控えております。なので記事に書いてあるのは
JavaScriptクラスの基礎： ES6とES7のクラス構文の使い方と仕組みを解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日のチュートリアルはJavaScriptのクラスについて学習します。 JavaScriptクラスを学習し始めたあなたは中級者レベルに到達しています。 Reactなどの一般的なJavaScriptライブラリはクラス構文を頻繁に使用するため、クラスに精通していると非常に役立ちます。 本日はES6クラス構文およびES7クラス構文の解説を致します。 JavaScriptにおけるクラスとPrototypeの違いは、他の記事として取り扱いますが、Prototypeについて精通していない初心者様もいらっしゃるかと思いますので短めに解説します。 この記事では、すでに（Prototype）および（this）にある程度精通している方を対象としている事をご理解ください。 Prototypeとは？ クラスとは？ JavaScriptクラス構文 初期化 クラスのインスタンス化 クラスのメソッド 静的メソッド クラ
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでconsole.logを使用してませんか？
