世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

オブジェクト オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。 今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトの元となるObjectというビルトインオブジェクトがあります。 ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。 ObjectというビルトインオブジェクトはECMAScriptの仕様で定義されているため、あらゆるJavaScriptの実行環境で利用できます。 この章では、オブジェクトの作成や扱い方、Objectというビルトインオブジェクト

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ

ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen

JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま

ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と

https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/ GOV.UK is the online home for the UK government, so we have to make sure that it works for everyone regardless of their device or connection speed. This means we’re always looking for ways to improve performance and user experience, as well as the code beneath. For a long time our frontend code on www.gov.uk - th

jQueryにおいても、ほかのプログラム言語同様に変数を扱うことが多々あります。取得した情報の処理や演算結果をページ内に反映するなど、より複雑な処理を行う上で変数の存在は欠かせません。 プログラマー jQueryでも変数を使っていろいろ処理したいのですが、扱い方はどうすれば良いですか？ プロジェクト リーダー 変数が扱えるようになると、やれることが増えるので使いこなしたいところですね！さっそく見ていきましょう。 変数とは 変数は様々な情報を入れるための箱のような存在で、ページ内にある情報を一時的に保持したり、指定した処理を加えて変更 したりするために利用します。例えば、Aという箱の中に情報Bを入れたとして、ほかの情報Cとの差を比較することが可能です。 また、よく使う設定値をコード上にそのまま入力していた場合、修正する際に手間がかかりますが、変数を用いていればその設定値を変えるだけで済みます

Vue.jsのコミュニティは活動は盛んで、日本にも、Vue.js 日本ユーザーグループがあります。Vue.jsの普及と、Vue.jsエコシステムへの貢献を行っています。大規模カンファレンスである、「Vue Fes Japan」を年に一度実施しており、2022年も10月16日オンライン開催を予定しています。 【参考】：Vue.js JP 【参考】：Vue Fes Japan Vue.jsの活用事例ですが、国内外問わず利用が拡大しています。最新の事例は、Vue.js 日本ユーザーグループが主催する「Vue Fes Japan」でも公開されています。 コミュニティを通じた活用事例発表の他にも事例は多くありますが、今閲覧しているサイトにVue.jsが使われているかどうかは簡単にわかります。具体的には、Chrome拡張機能の「Vue.js Devtools」をインストールすると、Vue.jsで開発さ

JavaScript による開発に向けて道具や環境を整えるにあたり、実に様々な用語があります。 N番煎じどころではない話題ではありますが、それらの主観的な説明を試みました。 Disclaimer: React やその他の各種フレームワークなどは入れていません。 すべて独学、かつメチャ小規模なものばかり作っている人なので、偏りがあります。 古かったり間違ってたりしましたらぜひ教えていただければ……。 冗長な読み物感を多少含みます。 同じような or さらに詳しい情報がググれば山のようにあるので、ぜひ個別の確認を。 なお、URLを明示しないリンクは基本的に記事内で飛ぶだけで、外部リンクは基本URL付きです。 目次 一般 言語 エディター／バージョン管理 実行環境 JavaScript 標準仕様 パッケージ コーディングスタイル モジュール バンドル コードのサイズ削減 書かなかったこと 一般

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

はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ

function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を

こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//

1. 変数のスコープ（概要） JavaScriptの変数スコープは、以下の３つに分けられます。 グローバルスコープ ローカルスコープ ブロックスコープ（ES2015） 各スコープを持つ変数の特徴は、以下となります。 グローバル変数 スクリプト全体（グローバルスコープ）から参照できる変数。 関数の外で定義した変数（例1）、もしくは var をつけないで宣言した変数（例2）がグローバル変数になります。 ローカル変数 関数内（ローカルスコープ）でのみ参照できる変数。 関数内で var を付けて宣言した変数が、ローカル変数になります。 関数内であっても var を付けずに宣言すると、グローバル変数になります。 ブロック変数 ブロック “{ }” で括られた範囲でのみ参照できる変数。 ブロック内で let 宣言された変数がブロッック変数になります。 ES2015に対応したブラウザで使用できます。 2

JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ