Javascript テンプレート文字列・アロー関数 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
JavaScript ES6モジュールシステムの基本的な使い方：初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、JavaScriptのES6（ES2015）モジュールを作成し、使用する方法を解説します。 JavaScriptモジュールを使い始めるために必要な全ての情報を提供します。 モジュールシステムの歴史 ES6 moduleとは？なぜ必要？ ブラウザでES6 module 名前付きエクスポート 名前空間のインポート export default Node.jsでES6 module 注意すべき重要な機能 ES6 moduleの利点 最後に モジュールシステムの歴史 JavaScriptには長い間、モジュールシステムがありませんでした。 以前のアプリケーションは単純で小規模であり、コードも単純でした。 しかし、アプリケーションが改善されて肥大化するにつれて、コードも大きくなり、管理するために複数のファイルに分割する必要性が生じました。 そこで、モジュールの概念が生まれました
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
history.backが、成功したり失敗したりする理由は？
恐らく質問1が動作しないので質問がどんどんズレて行っているのかと思いますが とりあえず回答します。 質問1 ブラウザの挙動によりけりですが恐らく １．"#"付きのURLに遷移する(Aタグの遷移が起動) ２．直前のページに移動(history.back()) ３．"#"が外れた元のURLに戻る Aタグに書くのであれば下記の何れかです。 <a href"javascript:history.back();">戻る</a> <a href"javascript:void(0);" onclick="history.back()">戻る</a> 他、"history"系の命令が失敗する可能性として ・history.lengthが1（履歴が無い) ・直前のページでPHPなどを使用し、リダイレクトを行っている ・"location.replace"などで現在のページを上書きし遷移してきている ・遷移
console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API - NxWorld
JavaScriptのデバッグ時などにconsole.log()を利用する人は多いと思いますが、Console APIには他にも呼び出された回数カウントや経過時間確認などといった便利なものが複数用意されています。 覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください。 ログレベルについて記載していないものは、Chromeが「info」に、FirefoxとSafariが「ログ」に出力されます。 console.assert()以降で紹介している出力イメージはChromeのものになります。 また、ブラウザによっては使用できなかったり出力内容が紹介しているものとは異なっている場合があります。 console.log()
JavaScriptを使って、どのブラウザかを判定するあれこれ
JavaScript（以下JS）で実装するものが増えてきたのに伴い、古いブラウザを判定して処理を分けることもあります。 そういう実装のたびに調べてるのでメモしておこうと思います。 UserAgentで判定する 一番わかりやすい方法かと思いますが、UserAgentを取得してその文字列を見てどのブラウザか判別する方法です。 var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); if (userAgent.indexOf('msie') != -1) { //IE全般 if (appVersion.indexOf("msie 6.") != -1) { //IE6 }else if (appVersion.inde
[jQuery] 異なるバージョンのjQueryを共存させる | un-T factory! Interactive blog
un-T factory!のインタラクティブチームのブログです。こんにちわ、榎戸です。 先日とある案件でフロントエンドの実装をおこなっていたときの話です。 ひと通り実装を終え明日はクライアント確認という段階で ステージングサーバにデータをアップしたところ動きません… 弊社テストサーバでは問題なく動いていたものが なぜかステージングサーバだと動かないのです。 時は刻一刻と過ぎていき 空が白み始めたころ原因がわかりました。 jQueryの競合がエラーの原因だったのです。 実装を担当したページでは ほかにも様々なモジュールが読み込まれていたのですが、 モジュールごとに違うバージョンのjQueryを読み込んでいて それが私の書いたスクリプトと衝突していたのです。 調べてみるとこの「jQuery競合問題」には さまざまな解決法がありました。 自分自身の反省をこめて 今
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話
WordPressづかいなら頻繁にお世話になっているであろう、wp_enqueue_script関数。 自作やどっかから拾ってきたjQueryプラグイン（=not WordPressプラグイン）とかを使う時に、JavaScriptライブラリを正しく、あるべき順序で読み込んでくれるというアレです。 wp_enqueue_scriptをちゃんと使えたら、初心者から中級者にランクアップって言ってもいいんじゃないかと勝手に思ったりしてます。中級者の定義って難しいですけど。 それはどうでもいいとして、このwp_enqueue_scriptの仕様が3.3から微妙に変わったのに、あまり話題に登場しないなーと思っておりまして。 そうこうしてるうちに3.3.1が出て久しくなってしまったので、誰かが書く前に自分で書いときます。
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
Greasemonkeyスクリプトの開発で役に立ったサイトや本 - Alone Like a Rhinoceros Horn
Firefox にこんな機能があればいいなあ → ん、Greasemonkey というのでできるらしいぞ → ユーザースクリプトとやらを書けばいいのか → どうやって書くんだ？ というところからスタートして、最終的に自作のユーザースクリプトを公開するに至るまでの間、参考にしたサイトや本をできるだけ自分の学習順に時系列に沿って列挙してみました。 JavaScript を少々かじったことのある人が Greasemonkeyスクリプトを書いてみようと思い立ったときに、その学習の指針というか、道標のようなものとして役立つリンク集になればいいなと思ってます。 Greasemonkey まずは Greasemonkey ってなんだとか、ユーザースクリプトってどう書くんだというのを調べるところからスタート。（以下小見出しがリンクになっています） Greasemonkeyの開発をまとめてみる ここで Gr
SITEINFOのnextLinkケーススタディ - os0x.blog
AutoPagerizeのSITEINFOを書くとき、ネックになりがちなのはnextLinkのXPath。 pageElementのXPathは割とシンプルに書ける*1し、insertBeforeは省略しても構わない。 というわけで、nextLinkのXPathのパターンを簡単にまとめてみる。 aタグを直接指定できるケース 次のページのURLを情報*2を含む要素を直接指定できるケース。精度が高く、メンテナンス面も優れる。 Microformats 例:はてなダイアリー AutoPagerize本体にも組み込まれている通り、aタグもしくは、linkタグのrel属性にnextが指定された要素を取得する。 html <link rel="prev" href="/os0x/?of=5" title="前の5日分"> XPath nextLink: '//link[@rel="prev"]' 大抵
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd012de25b70691c33af879e24161878bd017409/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1lNDMwM2E1MmY5YjQyOWZlYTUyNTI2MzcyZjhlMGRiYg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D665c9263d8fde7538f5a183884a145e5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4921f7432a9b21f0593f66774c8857d0)
アドレスバーのURLを書き換える - Qiita
ドメインパーキング