読者です 読者をやめる 読者になる 読者になる

KDE.BLOG

web制作で学んだことを記していきます

【JavaScript基礎】JavaScriptの実行順序について

<目次>

  • ブラウザでのJavaScriptの処理の流れ
  • イベント登録のタイミング
  • async属性とdefer属性
    • async属性:非同期で読み込み開始し、読み込み完了後に実行
    • defer属性:非同期で読み込みDOM構築完了後に実行
    • 注意
  • 参考
続きを読む

【JavaScript基礎】関数定義の基礎、サーキット演算、三項演算子について

<目次>

  • 関数定義の方法
    • ①function命令で定義関数
    • ②関数リテラルで定義
    • ③Functionコンストラクタ経由で定義
  • ①function命令での定義と、②関数リテラルでの定義の関数の使用上の注意
    • 関数登録のタイミングの違い
  • 即時関数について
    • 即時関数とは
    • 書き方
    • 即時関数のメリット
      • 関数名を書かなくても良いので、1回しか使わない関数をスマートに記述できる
      • スコープの汚染を防ぐ
      • 即時関数が()で括られている意味
  • サーキット演算
    • サーキット演算とは
    • 書き方
    • 使用に関して
  • 三項演算子
続きを読む

プログレッシブ ウェブアプリの概要と期待できそうなこと

※本記事は具体的な実装方法については触れていません。

<目次>

  • プログレッシブ ウェブアプリとは
  • 特徴
  • PWAに対応しているサイト
  • 対応プラットフォーム
  • 期待できること
    • ネイティブアプリで作成するよりもユーザーへの負担が少なく、閲覧がされやすい。
    • オフラインによる離脱や機会損失を防げる可能性がある。
    • プッシュ通知によりユーザーに伝えたい情報をダイレクトに伝えることができる。
    • 認証情報の入力をスムーズに行える。
    • 決済方法の入力をスムーズに行える。
  • まとめ
  • 参考
続きを読む

CSS3 animationのまとめ(基本編)

前回のtransitionに続き、animationについてもまとめておきます。
transitionよりも長くなりそうなので基本編と発展編に分けたいと思います。
まずは基本編から。

<目次>

  • animationのできること
  • 対応ブラウザ
  • 各プロパティの概要・構文
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state
    • animation
  • @keyframesの書き方
  • animationのイベント
  • まとめ
続きを読む

CSS3 transitionのまとめ

個人的に使うことがとても多いCSS3のtransition。
細かい設定をするとなると忘れてしまっている事柄もあるので整理してまとめておきます。

<目次>

  • transitionができること
  • transitionが適応できるcssプロパティ
  • 対応ブラウザ
  • 各プロパティの概要・構文
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
    • transition
  • プロパティ値の数による注意
  • transitionendイベント
    • 使いどころはwill-change?
  • まとめ
  • 参考記事
続きを読む