Javascript on POPWEB

window.top === window.selfは何をしているのか？

Tue, 04 Jan 2022 00:00:00 +0000

プロジェクトで「if (window.top === window.self) {…}」という条件式を初めて見たので、その意味を調べてみました。

この条件式は、開いているページがiframeで読み込んだページを表示しているかどうかを判定するためのものです。

【JavaScript】プリミティブ型（基本型）とオブジェクト型（参照型）について

Sat, 16 Oct 2021 00:00:00 +0000

JavaScriptにのデータ型には、プリミティブ型（基本型）とオブジェクト型（参照型）がある

プリミティブ型（基本型）

真偽値（boolean）
数値（number）
文字列（string）
null
undefined
シンボル（symbol）

オブジェクト型（参照型）

プリミティブ型（基本型）以外のデータ型

eslintのルールで特定ファイルのみ適用外にしたい場合の書き方

Fri, 28 May 2021 00:00:00 +0000

.eslintrcのrulesに「defalut export」の記述を禁止するルールを追加したとする。

module.exports = {
...
  rules: {
...
    "import/no-default-export": "error",
...
  }
};

このとき、sotrybookのstories.tsxにはこのルールは適用外にしたい。

【JavaScript入門】reduceについて説明と使い方

Tue, 26 Jan 2021 00:00:00 +0000

reduce()の説明と使い方を説明する。

reduce()は、配列の隣り合う値に対して関数を適用させて、その実行結果を返すメソッド。

コードを書いて動きを確認してみる。

【コンソールエラーの原因】front.js:8 Uncaught ReferenceError: browser is not defined at HTMLDocument.

Fri, 29 May 2020 00:00:00 +0000

Google Chromeのデバッグコンソールに以下のようなエラーが出た。

front.js:8 Uncaught ReferenceError: browser is not defined at HTMLDocument.<anonymous> (front.js:8)

色々調べた結果、今回の場合はGoogle Chromeの拡張機能が原因だった。

JavaScript（ES2015）アロー関数の省略の書き方とthisの束縛について

Sat, 09 May 2020 00:00:00 +0000

ES2015（ES6）から追加されたアロー関数だが、省略した書き方が色々あるのでまとめてみる。

アロー関数の基本形

アロー関数は基本的には、無名関数（匿名関数）の省略記法で、その名の通り=>を使って関数リテラルを定義する。

npm installしたがキャッシュとパッケージ（node_modules）を削除して再インストールする方法

Fri, 01 Nov 2019 00:00:00 +0000

npm installでパッケージをインストールしたが、再インストールして入れなおすには以下のようにする。

npm cache clean
rm -rf node_modules/
npm install

【JS初心者向け】async/awaitのついて解説

Fri, 13 Sep 2019 00:00:00 +0000

前回記事のPromiseについて解説の続きで、今回はasync/awaitについて解説していく。

async/awaitを使うことで、前回に解説したPromiseの処理を同期的な記述で簡潔に書けるようになる。

asyncとawaitと使う

Promiseインスタンスを返してくれるgetHello( )がある。前回のPromiseではこの関数にthenメソッドを繋いであげれば、非同期処理後の処理の記述ができた。

【JS初心者向け】Promiseについて解説

Fri, 06 Sep 2019 00:00:00 +0000

前回の「コールバック関数について解説」の続き。

非同期処理の際にコールバック関数を使うのは有効であるが、コールバック地獄に陥りやすいデメリットがある。

コールバック地獄対策として非同期処理を簡潔に書けるようにしたのが、Promiseである。

【JS初心者向け】コールバック関数について解説

Thu, 05 Sep 2019 00:00:00 +0000

JavaScriptをやっていて、「async/await」ってなんやって思って、ググったら「Promise」の進化版ってことらしい。

今度は「Promise」をググったら、コールバック関数の概念が必要ってことが分かった。

【初心者向け】JavaScriptモジュール使い方（import/export/export default）

Fri, 30 Aug 2019 00:00:00 +0000

JavaScriptのモジュールとは、そのままで部品というイメージ。

JavaScriptで書いたファイルを部品として、他のファイルに取り込むことで機能を拡張することができるのがメリット。

Gulp, EJS, SASS, browser-syncのgulpfileサンプル

Wed, 17 Apr 2019 00:00:00 +0000

HTML、CSSコーディング作業で使用している私のgulpfileのサンプルを置いておく。

"use strict"

const gulp = require('gulp')
const sass = require('gulp-sass') //scssコンパイル
const autoprefixer = require("gulp-autoprefixer")//べンダープレフィックス
const sassGlob = require("gulp-sass-glob")//import文を短くまとめる
const cleanCSS = require('gulp-clean-css')//cssフォーマッタ
const notify = require('gulp-notify') //エラーを通知
const plumber = require('gulp-plumber') //watch中にエラー防止
const sourcemaps = require('gulp-sourcemaps')//ソースマップ
const  ejs = require("gulp-ejs") //EJS
const rename = require('gulp-rename')//リネーム
const replace = require("gulp-replace")//置換
const browserSync = require("browser-sync")//自動リロード
const del = require('del')//削除

// paths
const paths = {
  src: 'src',
  dist: 'dist'
}

//scssコンパイル
gulp.task("sass", () => {
    return gulp.src(paths.src + "/scss/style.scss")
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(sourcemaps.init())
      .pipe(sassGlob())
      .pipe(sass())
      .pipe(autoprefixer({
        grid: true
      }))
      .pipe(cleanCSS({format: 'beautify'}))
      .pipe(sourcemaps.write(paths.dist + "/css"))
      .pipe(gulp.dest(paths.dist + "/css"))
      .pipe(notify({
        title: 'Sassをコンパイルしました。',
        message: new Date(),
        sound: 'Tink',
    }))
})

//EJS
gulp.task("ejs", () => {
    return gulp.src([paths.src + "/ejs/**/*.ejs", "!" + paths.src + "/ejs/**/_*.ejs"])
    .pipe(ejs({}, {}, {ext:'.html'}))
    .pipe(rename({ extname: ".html" }))
    .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
    .pipe(gulp.dest(paths.dist))
    .pipe(notify({
      title: 'EJSをコンパイルしました。',
      message: new Date(),
      sound: 'Tink',
  }))
})

// server
gulp.task('browser-sync', () => {
    return browserSync.init({
        server: {
            baseDir: paths.dist
        },
        port: 4000,
        reloadOnRestart: true
    })
})

// reload
gulp.task("reload", done => {
  browserSync.reload()
  done()
})

// clean
gulp.task('clean', (done) => {
  del(paths.dist + '/**/*');
  done();
});

// watch
gulp.task("watch", done => {
  gulp.watch(paths.src + "/scss/**/*.scss", gulp.series('sass', 'ejs', 'reload'))
  gulp.watch(paths.src + "/ejs/**/*.ejs", gulp.series('ejs', 'reload'))
  done()
})

// gulp
gulp.task('default',
  gulp.parallel('watch', 'browser-sync')
)

// build
gulp.task('build',
    gulp.series('clean',
        gulp.series('sass',
            gulp.series('ejs',)))
)