JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。 Working with JavaScript Media Queries by Marko Ilic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに matchMedia()の使い方 条件の変化を継続的にチェックする方法 昔ながらの方法 まとめ はじめに メディアクエリと言われて最初に思い浮かぶのは何ですか？ おそらく、下記のようなCSSでしょ
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。 特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。 VS Code: You don't need that extension by Rob O'Leary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タグの自動名前変更と終了タグ補完 2. 設定の同期 3. モジュールの自動インポート 4. HTMLとCSSのスニペット管理 5. ダミーテキスト 6. 末尾のスペースを自動的に削除 終わりに はじめに 私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js
高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。 フレームワークなし（バニラJavaScript）でも使用
ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider
ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。
JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説
💡🎁 JavaScript Visualized: Generators and Iterators by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ES6ではジェネレータ関数と呼ばれるクールなものが導入されました🎉 ジェネレータ関数について尋ねると多くの人は、「知っているけど、混乱して二度と見ていない」「ブログで読んでみたけど、よく分からない」「分かるけど、みんななんで使ってるの」🤔 私も昔は同じように思っていました。しかし！実はかなりクールです！！ ジェネレータ関数とは何でしょうか？ まずは、通常の昔ながらの関数を見てましょう👵🏼 昔ながらの関数 これについては何も特別なことはありません。ごく普通の関数で、値を4回ログに記録するだけの関数です。 では、実行してみましょう！ 「通常の
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation
テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。 アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。 Rough Notation Rough Notation -GitHub Rough Notationの特徴 Rough Notationのデモ Rough Notationの使い方 Rough Notationの特徴 Rough NotationはRoughJSを使用して、SVGでマーカーを引いたり、下線をつけたり、丸で囲ったり、さまざまなスタイルでテキストを強調表示できます。マーカーや下線や丸はアニメーションにも対応しており、オフにすることもで
Webサイトやブログを高速化、PWA対応！静的サイトジェネレーターの導入方法を詳しく解説した入門書
これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。 ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。 本書は、6/1発売です！ 著者はWeb制作系の解説書で分かりやすさで評判のエビスコム様。初心者の人でもサンプルサイトを制作しながら、ステップ・バイ・ステップで静的サイトジェネレーターの構築を学ぶことができます。
ビフォーとアフターの画像を比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer
ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。 この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。 Image Compare Viewer Image Compare Viewer -GitHub Image Compare Viewerの特徴 Image Compare Viewerのデモ Image Compare Viewerの使い方 Image Compare Viewerの特徴 Image Compare Viewerは、ビフォーとアフターの画像をスライドして比較するビューワーを簡単に実装できます。 ということで、さっそく実装してみました。 中央のコントローラーをスラ
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
JavaScriptの基礎を楽しく学べるクイズ -Interactive JavaScript Quiz
JavaScriptの初心者向けに、楽しく学べるクイズを紹介します。 問題は3つ、解説はGIFアニメーションで分かりやすいと思います。 ⭐️ Interactive JavaScript Quiz #1 by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JavaScriptのクイズは混乱する可能性があることを誰もが知っています。 無意味なfoo bar bazなどの問題はJavaScriptの面白さを台無しにし、さらに混乱を招くことがあります。 私は昨年GitHubでJavaScript Questionsを公開しました。今回はインタラクティブなゲームにすると面白いのではないかと思い、私は視覚学習者なので、可能な限りGIFアニメーションで解説してみました🥳 callとbindの違い 何が
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js
360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。 パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモ デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
