夏休みの終わりこそ復習しておきたい、ES2016以降のモダンJavaScript再入門
はじめに 夏も終わりに近づいてきましたね。みなさん夏休みはいかがお過ごしでしょうか？海に山に、はたまたエアコンの効いた部屋でJavaScriptでコーディング三昧もアリかなと思ったりもします。ところで、コーヒー片手にコードを書きながら、「うわっ...私のJavaScript、古すぎない...？」とふと思ったことがありませんか？ ECMAScript 6(以下ES6)が正式リリースされた2015年からかれこれ10年も経ちましたね。ES6はPromise、クラス構文やアロー関数など強力な機能を一気に導入しました。ES3から約10年間で標準仕様の策定がほぼ停滞状態だったJavaScriptにとって起死回生と言っても過言ではない節目でした。 もし手元にTypeScriptを使っているプロジェクトがあれば、tsconfig.jsonを覗いてほしい。高い確率でコンパイルのtargetにES6もしくはE
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！Macbook Pro の紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observer とは？従来、スクロールに合わせて要素を操るには scroll というイベントを
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
HOME | CBC | Webデザインやプログラミングの基礎学習
CBCCRI BOOT CAMPは広告・Webプロモーション制作、 デジタルソリューション事業を展開する CRI が運営する、 無料で学べるオンライン学習サイトです。 CBCとは、2016年より当社の業界未経験スタッフ向けに開発された、Webデザイナー・ディレクター・プログラマーを目指す方へのカリキュラムです。 CBCで学ぶことで、これまで多くの未経験者がIT・Web業界で就業することができました。 持続可能な社会づくり活動の一環として2019年10月より、すべての方が学習機会を得られるようにCBCを無料で公開いたしました。 学習意欲のある方がCBCで学習することで、当社スタッフと同様の学習が可能になりました。 プログラミング言語の“マニュアル操作”を学ぶことよりも、 CBCではwebデザイン・プログラミングの理解を「ゼロから体系立てて」カリキュラムを編集しているので、 “現場で必要なスキ
GSAPの基本的な記述をまとめる
はじめに JavaScriptのアニメーションライブラリ「GSAP」の基本的な記述や、よく使う機能をまとめたいと思います。 GSAPはとても高機能で基本の部分となる記述を抑えるだけでも、工夫次第でいろんな表現ができます。当記事では触れませんがSVGやcanvasなどと組み合わせるとアニメーションの幅が一気に広がります。また、scrollTriggerやMotionPathPluginなどプラグインもとても充実しています。 基本的な動きを組み合わせたイントロアニメーション ループやリピート制御を組み合わせたエフェクト 連続的な処理 応用：canvasと組み合わせたイントロアニメーション GSAPのインストール
画面縦スクロールでコンテンツを横スクロール : GSAPなしでハイブリッドスクロールを実装 | UNICO LABO
画面を縦スクロールしていくと、途中からコンテンツが横にスクロールするWebページ、たまに見かけると思います。代表的な製品やその特徴を並列的に提示したり、手順などを順番に示したいケースで、印象的に表現することができます。 その実装にはJavaScriptライブラリのGSAPを利用する方法もありますが、多機能なだけに融通が効かず、思ったようにコントロールするのが難しい印象です。 今回は、素のJavaScriptとCSSでシンプルに実装してみます。 サンプルコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hybrid Scroll Samp
JavaScriptとハイボリッド・スクロール
効果の基本 まずは、どのようにしてこの効果を実現したのか、実際のコードを見てください。 See the Pen hybrid scrolling by bibomato (@bibomato) on CodePen. HTML 見た目には、特別なことが起きているようには見えませんよね。 これはHTMLの構造を簡略化したもので、楕円で囲まれた部分が水平方向にスクロールする要素です。 <section> <div> <h1></h1> <p></p> </div> </section> <div class="scroll_container"> <div class="sticky_wrap"> <div class="horizontal_scroll"> ... ... </div> </div> </div> <section> <div> <h1></h1> <p></p> </di
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
【JavaScript】Swiperの使い方とオプション・カスタマイズ方法について解説 | ZeroPlus Media
この記事では、「Swiperの使い方とオプション」について詳しく解説します。記事の後半ではWeb制作でよく使われるSwiperの「スライドショー」「カルーセルスライダー」「レスポンシブ」の3つのカスタマイズ事例も紹介していきます！ プログラミング学習でこのような経験はありませんか？ 目標に向けて何を学べば良いかわからない調べても解決策が見つからない現場レベルのスキルが身につくのか不安これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 なんでも相談できる専属メンターいつでも技術相談ができるプロ講師元IT企業CTO監修のカリキュラム条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 ただし、無料サービスの提供には参加者の数に制限があります。 少しでも興味がある方は
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
トロイの木馬化された「jQuery」がnpmやGitHubで拡散|セキュリティニュースのセキュリティ対策Lab
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 jQueryを悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規のjQueryへ、トロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザーがnpmや
JavaScript | xxx.forEach is not a function エラーの原因と修正案
JavaScriptで発生するコンソールエラー「 xxx.forEach is not a function」の原因と対処・修正案について紹介しています。 Uncaught TypeError: xxx.forEach is not a function ～ キャッチされていない型エラー: xxx に forEach 関数ありません xxx.forEach is not a function エラーの発生原因 「xxx.forEach is not a function」というJavaScriptのエラーはオブジェクト型など配列型以外のデータに対してforEach()関数を実行しようとした際に発生するエラーです。 このエラーはキャッチされていない型エラー（Uncaught TypeError）に分類されています。 例えば、以下のようなオブジェクト型を定義したJSコードを実行する場合にエラー
【JS】スクロールしたら要素を表示させる | WEB-DEN
今回はスクロールすると表示されるボタンの作り方を解説します。 Web制作などでページをある程度スクロールしたらTOPに戻るボタンをふわっと表示させたい、 みたいな要望って結構あると思います。（実際に制作した経験あります） この記事ではそういったスクロールに応じて表示される要素の作り方を、 jQueryを一切使わず、純粋なJavaScriptのみで対応する方法をお伝えします。 できるだけ丁寧な解説にしてみましたので最後まで読んでいただけるとありがたいです。
【JavaScript】スムーススクロールを実装する方法
*{ margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } .nav-menu { list-style: none; } header { background: #02153f; padding: 0 10px; position: fixed; width: 100%; height: 84px; } nav { height: 100%; } .nav-menu { display: flex; justify-content: space-around; align-items: center; height: 100%; } .nav-item:not(:last-child) { margin-right: 15px; } .nav-item a { color: #FFF;
【CSSとJavaScriptのみ】ページ内リンクでスムーススクロールさせる方法
この記事を書いている僕はプログラミング歴2年5ヶ月です。webエンジニアとして”社内転職”に成功しました。 ページ内リンクとは、同じページ内の特定部分にジャンプ(移動)するリンクのことです。 ※目次をクリック → 該当する見出しまでジャンプ！ aタグのhref属性には”#1″、ジャンプ先の特定部分にはid=”1″というように設定します。つまり、href属性の#(シャープ)以降の文字列と、特定部分のidの文字列を完全一致させることでページ内リンクをつくることができます。コンテンツの多いWebページには必須の動作だと言えるでしょう。 設定するファイルはHTMLだけです。ただし、HTMLだけでは一瞬でジャンプするのみでスムーススクロールの挙動が起こりません。スムーススクロールさせるにはCSSもしくはJavaScriptで設定する必要があります。 実際にどうやるのか。CSSから説明していきます。と
JavaScriptで指定した要素の位置までスクロールするには2022年現在なら scrollIntoView() が便利
TL;DR JavaScriptで指定した要素の位置までスクロールするには2022年現在なら scrollIntoView() が便利 Element.scrollIntoView() | MDN https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView 2022現在、各ブラウザの最新バージョンならサポートされている scrollIntoView | Can I Use https://caniuse.com/?search=scrollIntoView 画面に表示してない要素には scrollIntoView() しても動かなかったりするので注意 JavaScriptで指定した要素の位置までスクロールする方法色々 Element.scrollIntoView() わりと新しい方法みたい。 スムーススクロール（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
JavaScript Uncaught TypeError: array.forEach is not a function 連想配列 書き方 – 勉強メモ
https://tekrog.com/get-absolute-position