JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
ブラウザキャッシュの仕組みについてまとめた
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
【JavaScript】アニメーションの処理負荷を軽減する | Web production note
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。 可読性や保守性など、よりクリーンなコードを目指す場合は不適切な書き方があるかもしれません。 コードは参考程度に見ていただき、各自の環境でデバッグのうえより適切なコードを選択していただければと思います。 パフォーマンスパネルでデバッグ今回はChromeのパフォーマンスパネルで検証をしました。 パフォーマンス計測後の詳細からJSファイルを参照すると、具体的な実行時間まで表示されるため重たい処理の特定に非常に重宝しました。 パフォーマンスパネルの使い方の詳細は以下をご参照ください。
【入門】『スーパーマリオ』で学ぶ、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でのアルゴリズムとデータ構造 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クラス構文 初期化 クラスのインスタンス化 クラスのメソッド 静的メソッド クラ
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
JavaScript初学者【 応用力が身につく！実践トレーニング 】 動画リスト2023年 - Qiita
JavaScript/jQueryを使っていますが「コードを学習」することではなく 「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。 応用実践トレーニングの内容( 必ず読んで進んでください ) 内容は 「基礎を学んだ」レベルに合わせています。 JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。 そういった教材で「自分で考えて作れるようにならなかった人」が対象です。 「変数・分岐処理・繰り返し処理・関数・オブジェクト...」を応用できるようにするための教材として作りました。 他の学校、提携校の皆さんもご活用ください！ 「学び方・作り方・考え方」全て揃っています！ ◆JavaScript初学者「効率よく学ぶためのポイントを紹介」準備編 サムネ１ サムネ２
超インタラクティブなWebサイトやゲームが作り放題の「Playful」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、インタラクティブ性の高いWebサイトやミニゲームなどを簡単に開発できる無料のWebサービスをご紹介します。 一般的なWebサイトはもちろんのこと、ノーコードで高度なロジックを組み立てる機能も提供されているので、アイデアしだいでとてもユニークな作品を作れるのが特徴です。 オリジナリティあふれるWeb作品を手軽に作りたい人はぜひ参考にしてください！ 【 Playful 】 ■「Playful」の使い方！ それでは、「Playful」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign Up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 「メールアドレス」と「パスワード」を入力します（Googleアカウントも利用可）。 次に好きなユーザー名を設定しましょう。 最後に「LET'S PLAY
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 前編 - Qiita
javascriptはオブジェクト指向言語なのに、手続き型で書いてしまいがち... javascriptはオブジェクト指向言語であるものの、ちょっと特殊な言語です。Java、C++、C#、Rubyといったクラスベースの言語とは違い、プロトタイプベースのオブジェクト指向言語であるというのがオブジェクト指向で書きづらい要因になっているように思います。 クラスベースの言語であれば、まずはともあれクラスを作ってインスタンス化する...という一連の流れが自然と書ける一方で、javascriptでは「DOMを操作する」という任務を任されることが多いために、要素を取得して、計算して、要素を書き換えて、ということを手続き的に書いてしまう。 そして、記述量が多くなればなるほど待ち受けるのは、、、 「このjsはどこで何をやってるんだ...」 「同じようなコードがいろんなところでコピペされてる...」 「この処
Javascript における Hoisting を理解したい
🌼 はじめに Javascript の Hoisting をなんとなくは知ってたけど正確にどういう動きをするのかをあまり把握してなくて、一度ちゃんと理解したいという気持ちは昔からありました。 が、なかなか実行できず、、（^_^）だったので今年アドベントカレンダーを機会にちゃんと整理したいと思います！！ 1. Hoisting とは Javascript における Hoisting は「変数や関数などの宣言をスコープの先頭に巻き上げること」です。 「hoist」という英単語自体が「持ち上げる、巻き上げる」という意味を持っているので、日本語では Hoisting のことを「巻き上げ」とも言うらしいですね。 まあ言葉だけではピンとこないかもしれないので、これから変数と関数の具体例で説明します。 2. 変数の Hoisting 2-1. var まずvarの Hoisting による事象の一つを
JavaScriptのthisを8種類試してみた - Qiita
はじめに JavaScriptのthisの使い方で苦戦をしたので、整理と備忘録のために8種類のthisの動きを試してみました。 主にこちらの2つの記事を参考に勉強した内容の記事となります。 ui's blog JavaScript JavaScriptの"this"を完全解説！！【開眼JavaScriptまとめ】 JavaScriptのthisについて 1. トップレベル（関数外）のthis 結論 thisの参照先 = グローバルオブジェクト= windowオブジェクトとなる。
初心者、新人が来たらコレ見せて！多分一番わかりやすいJavaScriptDOM操作解説（JQueryは使いません） - Qiita
初心者、新人が来たらコレ見せて！多分一番わかりやすいJavaScriptDOM操作解説（JQueryは使いません）JavaScript新人教育新人プログラマ応援dom操作 0.はじめに 0-1.はじめに Web開発をするならJavaScriptは触る。 これは避けられないことなんだよなぁ… 今回はモダンなJavaScriptでのDOM操作を可能な限り簡単に解説するよ。 「jQueryわからん」 「JavaScriptの基本を押さえたい」 「新人に１から教える時間がない」 そんな方向けの記事となってますよ。 0-2.効率よく学ぶためには？ 使い方とまでは言わないけど 個人的にオススメしたい学習方法はこんな感じです。 ・CodePenのサンプルを触る ・「大事な所だけ抽出すると」のコードを見て、ポイントを押さえる ---------------------ここまでを全チャプターおこなう----
JavaScript: オブジェクトの分割代入とスプレッド構文を使ってみる - Qiita
ECMAScript 2015の分割代入は、配列のほかオブジェクトに用いることもできます。また、ECMAScript 2018では、オブジェクトにスプレッド構文が採り入れられました。これらの構文の使い方を、簡単にご説明します。なお、配列の場合については、「JavaScript: ECMAScript 2015のスプレッド構文・残余引数・分割代入を使ってみる」をお読みください。 スプレッド構文を使う スプレッド構文(...)をオブジェクトに用いると、プロパティと値の組みが展開されて取り出せます。つぎのコードは、オブジェクトを複製する例です。 const rect = {type: 'rectangle', width: 50, height: 20}; const rectClone = {...rect}; console.log(rectClone); // {type: "rectan
思えばちゃんと理解していなかったJavaScirpt関連基礎知識 17問 - Qiita
初めは動かすことだけを意識し過ぎていて、当時は何となく使うことも多かった. 全部答えられますでしょうか? 簡単なもの多いですが、力試しにどうぞ. ※参照リンク貼っていますが、怪しいブログやプログラミングスクールは極力抜いています. 含んでいたら教えてください. JavaScript関係なく 0.1 + 0.2 == 0.3はFalse 英語 : Why 0.1 + 0.2 ≠ 0.3 in JavaScript https://javascript.plainenglish.io/why-0-1-0-2-0-3-in-javascript-d7e218224a72 日本語 : Pythonで、0.1+0.1+0.1==0.3 がFalseなのは何故でしょうか？ https://jp.quora.com/Python%E3%81%A7-0-1-0-1-0-1-0-3-%E3%81%8CFal
インスタンスとオブジェクトの違い - きしだのHatena
インスタンスとオブジェクトは混同しがちで区別がようわからんになりがちです。 とりあえず某所で説明したものを再構成します。 ※2022/12/10追記: クラスに対するのはインスタンスになるべき(たとえばクラス変数とインスタンス変数)なので、ちょっと修正するべきですが、このエントリはそのまま残してます。 クラス・インスタンス・オブジェクト クラスをインスタンス化(実体化)したものがオブジェクト(物)です。 実際に在るものはクラスとオブジェクトで、インスタンスはそれらの関係です。colorsやsportsが並んでるツリーが「オブジェクト」で、右のパレットに並んでるTreeが「クラス」、Treeからみたときのツリーが「インスタンス」ということになります。 ここでツリーはオブジェクトでもインスタンスでもあります。 このように、同じものをオブジェクトともインスタンスともいうことができるので混同してし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
