《JavaScript》jQueryみたいなセレクターでDOMを取得するES6なクラス - Qiita
jQueryなしのプロジェクトで、document.getElementById() や document.getElementsByClassName() を省略するためのヘルパーはいろいろ知恵がありますが、自分でも使いやすいものを作ってみました。 $(element) のようなものをclass構文で書きます。 DOMの取得をjQueryみたいにシンプルな記述にしたい セレクタにシンボルを付与して、その文字列からメソッドを振り分けるようにしています。 毎回 new を記述するのを避けてシンプルにするため、ラップして隠蔽できるようにしました。 /** * # / . / * を含むセレクタを受け取ってDOMを返す * # : getElementById * . : getElementsByClassName * * : querySelectorAll */ const Selecto
jQueryとは＋脱jQueryの理由＋基本書式
はじめに プログラング初心者がアウトプットのために記述しています🙇 jQueryとは 簡単便利に使えて、プログラミング初心者のファーストステップにおすすめなjQuery。 「JavaScriptを短いコードで簡単に書けるようにしたもの」がjQuery。 jQueryでできること 1.コードをJavasprictで記述するよりも、短く簡単に記述できる。 HTMLのDOM操作をとても楽に実装することができたり、Ajax通信（POST等）を簡単に実装できることなどが特に注目され、活用されてきました。 2.HTMLとCSSを操作して… 要素の大きさ・色・透明度などを変更できる 表示・非表示の切り替え フェードイン・フェードアウト・スライド・アニメーションなど動きを加える ユーザーが入力した内容を取得・反映など 外部ファイルを取得・表示 などなど… 脱jQueryと言われる理由 1.動作が遅くなる
【脱jQuery】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
とほほのTypeScript入門 - とほほのWWW入門
Microsoft が開発した言語で、JavaScript に型定義などの機能を追加したものです。 JavaScript 言語の完全なスーパーセットになっています。 型の異なる関数呼び出しや代入をコンパイル時に検出することによりプログラムの品質を高めることができます。 また、ECMAScript の最新機能を早めに取り入れるため、まだ、ブラウザが未対応の機能を早い時期から使用することが可能となります。 プログラムの拡張子には通常 .ts をつけます。 TypeScriptファイル(*.ts) を JavaScript ファイル(*.js)にコンパイル(トランスコンパイル・トランスパイル)します。 React や Angular などでも TypeScript がよく利用されています。
【爆速化】脱jQueryしたかったらこれを見なさい。【JavaScript】 | BableTechBlog
jQueryはJavaScriptライブラリの中で最も人気だと言えるでしょう。2021年の時点で世界の8割程度のWebサイトがjQueryを利用しているという調査もあったようで、いかにまだ愛されている技術かが分かります。 しかしながら、jQueryを使いつつ本当は「もうjQueryから脱却したい」と感じている人もいるかもしれません。 今回は なぜ脱jQueryする必要があるのか？ 具体的な脱jQuery方法（WordPress等） の二つについて語っていきます。 jQueryで何ができる？ この記事を見てくださっているということはある程度jQueryのことをご存じかと思うのですが、最初に軽く説明しておきましょう。 jQueryがJavaScriptライブラリの一種であることは恐らくご存じかと思いますが、では一体jQueryで何ができるのか、軽くおさらいしていきましょう。 コードを短くできる
【jQuery】URLによって条件分岐させる方法
そして今回は解説はWordPressではなく、静的サイトの場合になります。 ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。 実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。
jQuery Cookieの保存する期間を日時や時間で設定するいろいろ｜BLACKFLAG
jQuery Cookieで保存期間を指定するには、オプションの「expires」を使用しますが、保存日数や保存時間、また保存する時間を使用しているデバイスの日時設定を基準とするかサーバの時間を基準にするか、といった保存方法にはいくつかパターンがあるのでそれぞれ紹介してみます。 「expires」オプションで日数指定 まずは基本となるjQuery Cookieのオプション「expires」を使って保存日数を指定する方法です。 ※jQuery Cookieの基本的な使用方法は省かせていただきます。 $.cookie('名前', '値', { expires: 1 }); Cookieを保存するための「名前」と「値」を指定した後の{ expires: 1 }の値が保存する日数になります。 ここで「1」を指定すればCookieの保存期間は1日、「2」を指定すれば保存期間は2日になります。 「ex
【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?
いろんなサイトを検証モードで調べてみると、たまにscriptタグの中にdeferという記述を見ることがあるんあだけど、deferってなんだ？ この記述を入れるとどうなるんだろう？ 他社サイトの構造とかをデベロッパーモードで見てみると<script>タグの中にdeferやasyncという文字列が入ってたりしませんか？ 「defer属性」と「async属性」を正しく使うことでJavaScript（以下JS）の読み込みタイミングを調整でき、結果としてページの読み込み速度を改善することができます。 では詳しく解説していきます。 deferとasyncは何者？ deferとasyncは<script>タグ内に記述することができる属性です。 これらの属性はJSファイルの読み込みと実行のタイミングを調整するために使われます。 適切に使うことでWebページの読み込みスピードの改善につながります。 ページ読
【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)｜WEB CREATES
今回はサイトを最初に訪れた時のみ、ローディングを表示する方法をjQueryで作成する方法を共有しようと思います。 動きが確認できるデモサイトは下記になります。 ローディング デモページ ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない) jQueryを追加（全ページ共通の場所） <div class="loading"></div>用のHTML/CSSがあります。 下記は、クラス「.loading」にクラス「.active」を追加すると、loadingが非表示になるということを前提として作成しています。 $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { /* 2回目以降アクセス時の処理 */ $(".loading").addClass('is-act
CSSやJavaScriptでスクロールバーの横幅を取得する方法
コーディングをしていて、スクロールバー自体の横幅を取得したいときがあったので、取得方法についてまとめておきます。 macOSで常にスクロールバーが表示されるようにするmacOSでは設定によってはスクロールバーが表示されないこともあります。 ［システム環境設定］→［一般］の「スクロールバーの表示」で変更できます。 スクロールバーの幅を取得する1. CSSで取得する方法スクロールバーが表示されている場所がページ全体に対しての場合は、下記の記述で取得できます。 calc(100vw - 100%);100vwはビューポートの横幅全体が取れるのでスクロールバーを含む横幅、100%はbodyタグの横幅100%が取得できるのでスクロールバーを含まない横幅が取得できます。 それらの差をcalcで計算して取ることでスクロールバーの取得ができます。 100vwはビューポートの横幅になるので、ページ全体に対し
【JSモジュール化】ファイル分割してわかりやすいプログラムを書こう！
ファイル分割の方法いろいろ 長いプログラムコードって基本的に見たくないですよね。 昔の自分が勢いで書いた1000行超えのソースコードを、数ヶ月後に読まなければいけなくなった時、あなたはどうしますか。 「読みたくねえええええ！」と心の中では大声でムンクの雄叫びが響き渡ることでしょう。 一度に読むソースコードの量は少ないに越したことはありません。 となると、ファイルを役割ごとに分割して、1ファイルあたりのコード行数を減らそうと考えるのは自然な発想でしょう。 コードを分割するときにまず思い浮かぶ方法は「長いソースコードを上から区切ってファイル分割する」という方法です。 長いソースコードから、「データを保管している部分」や「関数をまとめている部分」などでファイルを分割して、呼び出し元のhtmlファイルから分割後のファイルを指定して呼び出していきます。 例えばこんな画像のように！ この方法はJava
【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。
<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
slickのページングにjQueryを使ってイメージを設定する方法 - NxWorld
引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 ページングをイメージに変更 #1 上のイメージのように、メインスライドの各イメージをそのままスライドを切り替えるページング部分に使用するもので、メインもページングも同じイメージを使う想定なのであれば、この方法で実装しておくことでスライドが増減する度に両方いじる手間を省くことができます。 まず、HTMLは下記のようにメインスライド部分のみ記述します。 <div id="slick"> <div><img src="img01.jpg" alt=
サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery｜I'll be NET
Amazonなどのように、メイン画像とサブ画像のある画像表示領域で、サブ画像をクリックするとメイン画像をふわっと変更するjQueryを書いてみました。 fadeIn処理が終わってから画像のsrc属性を書き換え、fadeIn処理をしています。 デモ 動いているサンプルはこちらからご覧できます。 DEMO <div id="mainImg"> <img src="./img-1.jpg"> </div> <ul id="subImg"> <li class="current"><img src="./img-1.jpg"></li> <li><img src="./img-2.jpg"></li> <li><img src="./img-3.jpg"></li> <li><img src="./img-4.jpg"></li> </ul> $(function(){ $('#subImg im
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="
JS webApiを叩く (JSアウトプット) - Qiita
あいさつ 初めての人は初めまして！知っている人はこんにちは！ 中学生バックエンドPGのAtieです！ 今回はJSでwebApiを叩く最低限の方法を学んできたのでアウトプットします！ では！ webApiとは？ まずはwebApiとは何かを解説していきます そもそもApiとはApplication Programming Interfaceの略で プログラムをの機能や管理するデータを外部からアクセスできるようにしたものです そしてそのApiの通信方式がhttpなどのwebだったらwebApiと呼ばれます 実際にApiを見てみましょう 今回はjsonplacefolderというサービスを利用します ここにアクセスしてみてください json形式のオブジェクトがありますよね？よく見てみると今回はプログラミングのデータが入っています これがApiです そしてこのApiは通信方式がhttpなのでweb
slick.jsのdots、arrowsのカスタマイズ方法
以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({
Vue.jsでSPAサイトを作成するチュートリアル【4. CSS編】
Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。 今回はコーポレートサイトを想定して作成していきます。 ※記事が長くなったのでチュートリアルを分割しました。 目次 表示編 ルーター編 コンポーネント編 CSS編 ←イマココ JS編 ライブラリ編 メタ編 ビルド編 前提 タスクはnpm scriptsで一限管理 コマンドはyarnを使用 vue-cliのwebpack-simpleを使用 CSSはSCSSを使用し用途に合わせてPostCSSを使用 バージョン "vue": "^2.5.11" "webpack": "^3.6.0" "node-sass": "^4.7.2" "postcss": "^6.0.16" "stylelint": "^8.4.0" CSSの環境構築 SassとPostCSSを使用するので以下のコマンド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホの時だけjsを無効にしたり有効にしたりしたい。