ブックマーク / iwb.jp (6)

  • ES2016以降のJavaScriptを勉強してないと理解できない記法一覧

    知らない人は知らないES2016以降の記法 最近のJavaScriptはES2016以降の仕様について勉強していないと理解できない記法がいくつかある。 ES2015のletやconstやアロー関数程度であればよく見かけるので理解している人は多いが、ES2016以降のものだと認知度が極端に落ちる。 この記事では意外と知らない人が多い、ES2016以降の記法についてまとめました。 べき乗演算子 (**) ES2016から「**」のべき乗演算子が使用可能。 「**」が使用可能になる前はMath.pow()が使用されていた。 何も知らない人だと「2 * 3」の書き間違いと勘違いされるケースもある。 // 2の3乗の場合 console.log(Math.pow(2, 3)) // => 8 console.log(2 ** 3) // => 8

    ES2016以降のJavaScriptを勉強してないと理解できない記法一覧
  • getElementsByTagNameでhtml,head,bodyを取得しないほうが良い

    html,head,bodyは短いコードで取得可能 JavaScriptのコードを見ていると、いまだにhtml,head,bodyを取得するのにgetElementsByTagNameを使用しているコードを見かけることがある。 getElementsByTagNameは指定されたタグ名を持つ要素のHTMLCollectionを返すメソッドで、通常この3つはHTML内に1つしかないため、これに[0]を付けることで要素の取得ができる。 document.getElementsByTagName('html')[0] document.getElementsByTagName('head')[0] document.getElementsByTagName('body')[0] だが、html,head,bodyのHTMLタグに関してはgetElementsByTagNameを使用しなくても、以

    getElementsByTagNameでhtml,head,bodyを取得しないほうが良い
  • VivaldiブラウザのRSS機能を試したが使いものにならなかった

    VivaldiブラウザのRSS機能を試した 先日Vivaldiブラウザ4.0がリリースされてベータ版としてフィード機能(RSS)が実装された。 早速試してみたのだが、使い勝手が悪すぎて使いものにならなかった。 Vivaldiブラウザ4.0は以下のURLからダウンロードできる。 (RSSは設定 -> 一般 -> 生産性機能 を有効にすれば使える) https://vivaldi.com/ja/ 特に以下の点がひどかった。 インポート機能がないのでほかのRSSからエクスポートして読み込めない記事をアクティブにしても数秒経過しないと既読にならない (秒数の変更は不可)次の記事の表示が↓キーなので押しづらいショートカットキーで記事を開けないRSSなのに更新頻度のデフォルトが24時間ごとRSSなのにメールタブに件数が表示されるetc. ChromeブラウザでRSSベースの機能が近日中にリリースされる

    VivaldiブラウザのRSS機能を試したが使いものにならなかった
  • 検索で非表示にするのはnoindexタグ挿入だけではない

    例として日マクドナルドのお問い合わせページはユーザーが検索してお問い合わせページにアクセスされるのを避けるためにnoneが指定されている。 お問い合わせフォーム | お問い合わせ | McDonald's Japan robots.txtや.htaccessで検索避け 一般的には検索結果に表示されないようにするにはHTML内にnoindexを記述することがよく知られているが、前述の通りnoneを指定する方法もある。 さらにHTML内に記述せずにrobots.txtや.htaccessというファイルに検索エンジンのアクセスを禁止するコードを書くこともできる。 robots.txtはドメイン直下に置かれていることが多いので以下のようにすればアクセスできるが.htaccessは外部からファイルの内容を確認することはできない。 https://www.mcdonalds.co.jp/robots

    検索で非表示にするのはnoindexタグ挿入だけではない
    kumokaji
    kumokaji 2021/02/28
  • Chrome 65からCSSのborder-image, backgroundがおかしい件

    Chrome 65からCSS仕様変更 Chrome 65からCSSのborder-image, background, linear-gradientを組み合わせたときの表示がおかしくなってしまった。 表示がMicrosoft EdgeやIE11と同じになってしまったのだ。 なぜいまになってこのような仕様になったのかは不明。 表示がおかしくなる条件 以下のようにborder-width, border-style, border-imageを指定してbackgroundとグラデーションのbackground-imageを指定するとブラウザによって見た目が違ってしまう。 h1 { border-width: 10px; border-style: solid; border-image: url(https://iwb.jp/ss/iwbjp.png); background: pink;

    Chrome 65からCSSのborder-image, backgroundがおかしい件
    kumokaji
    kumokaji 2018/03/20
  • JavaScriptだけでサーバー時間を取得したタイマー作成方法

    通常現在の日時を取得する際はnew Date()が使用されることが多いがnew Date()はユーザーのデバイスの日時が取得されるためnew Date()だと都合が悪い場合がある。 例えば指定した時刻に何かを表示するためのタイマーなどは日のサイトであれば日の日時を基準にして実装されるためnew Date()だと意図した通りに動作しないことがある。 例えば3月14日の9時にホワイトデーのバナーをJavaScriptで表示したい場合、ユーザーのデバイスの日時が3月14日の8時になっていると指定した日時に表示されないという問題が発生する。 パソコンやスマートフォンはインターネットに接続していれば自動で時刻合わせが行われるため時間がずれることは通常は発生しないが、時刻合わせを自動にしていなかったり、逆に時刻合わせを自動にしていたため海外に行った際にその地域の時刻に変更されてしまい日時間で表示

    JavaScriptだけでサーバー時間を取得したタイマー作成方法
  • 1