脱jQuery～JavaScriptに支配されないための真の思考法～ parent([selector])メソッド

jQueryのparentメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

// jQuery
var _$parent = $('#hoge').parent();


// JavaScript
var _parentNode = document.querySelector('#hoge').parentNode;

selectorを使う場合は、classListのプロパティーのcontainsメソッドで確認を行い配列に追加することで実現できる。

// jQuery
var _$foo = $('.hoge').parent('.foo');


// JavaScript
var _parentNode = [];
document.querySelectorAll('.hoge').forEach(function(current){
  var parentNode = current.parentNode;
  if(parentNode.classList.contains('foo')){
    _parentNode[_parentNode.length] = parentNode;
  }
});

脱jQuery～JavaScriptに支配されないための真の思考法～ scrollメソッド

jQueryのscrollメソッドもjQueryのonメソッドに移行対象となっているメソッドなのだが、古いjQueryを使っている人も当然いるわけなので、scrollメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書きたい。

// jQuery
$(window).scroll(function(e){
    
});

// jQuery
$(window).on('scroll', function(e){
    
});

// JavaScript
window.addEventListener('scroll',function(e){
    
});

Semantic UIのradioボタンのvalueについて

Semantic UIのJSを使ってradioボタンを作った時の話。

$('.ui.radio.checkbox').checkbox({
});

この場合のvalueつまり、チェックがついているラジオボタンの値を取得したい時はどうすればいいのか調べた。

inputのradioと同じようにselectorを使ってvalメソッドで取得できる。

console.log($('input[type="radio"]:checked').val())

webpackでSemantic UIの jsを使う

Semantic UIでCSSは、linkタグを使ってインクルードしている場合、semantic.jsだけをwebpackしたい場合がある。

Semantic UIのjsはjQueryも必要になるので、webpackにjQueryも含める必要がある。

jQueryはnpmで取り込んでrequire経由で呼び出せば問題はない。

semantic.js(正確にはsemantic.min.jsなのだが)は、zipファイルをダウンロードして解答するかgit cloneしたファイルを使ってrequire関数を使えば解決できる。

//main.js
var $ = require('jquery');

$(function() {
  window.jQuery = $;
  require("lib/semantic.min");


  $('.ui.radio.checkbox').checkbox({
  });

  $('select.dropdown').dropdown({
  });
});

webpack.config.jsの設定を行う

//webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './app.1.0.0.js',
  output: {
    path: './',
    filename: 'app.1.0.0.min.js'
  },
  resolve: {
    alias: {
      lib: path.resolve(__dirname, 'lib/')
    }
  }
}

最後に、ターミナルで、npx webpack --config webpack.config.jsコマンドを叩けば、semantic.min.jsがインクルードされている状態でjsを生成することができる。

今さら人に聞けないwebpackでFirebaseを取り込む

前回、npmでfirebaseをインストールする方法を書いた。

jumbomonaca.hatenablog.com

そこで今回は、インストールしたfirebaseをwebpackで一つにする方法を調査した。

app.js
webpack.config.js

ディレクトリ構造は、メインロジックを書いたapp.jsとwebpackの設定を書いたwebpack.config.jsが同一ディレクトリにあるとする。

まずは、app.jsでfirebaseをインクルード。

//app.js
var firebase = require('firebase/app');


//apiKeyとauthDomainとprojectIdは任意の値を設定
var config = {
  apiKey: "xxxx",
  authDomain: "",
  projectId: ""
};

firebase.initializeApp(config);

//mainロジック

app.jsと同一ディレクトリにあるwebpack.config.jsを設定する。

//webpack.config.js
const path = require('path');
module.exports = {
  //mode: 'production',
  mode: 'development',
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'app.min.js'
  }
}

あとは、ターミナルで、npx webpack --config webpack.config.jsをうつとpublicディレクトリの直下にあるjsディレクトリにapp.min.jsが出力される。

今さら人に聞けないFirebase Authenticationを使ってログアウトする方法

Firebase Authenticationを使って新規会員登録またはログインする手段はいくつかあるのだが、ログアウトする方法は、一個しかなく、firebase.auth().signOut()メソッドでログアウトすることができる。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

firebase.auth().signOut()メソッドが呼ばれた時も、当然、firebase.auth().onAuthStateChangedメソッドが呼ばれるので、それによって、firebase.User情報を保持していた変数をリセットすることができる。

var _user;

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

firebase.auth().onAuthStateChanged(function(user) {
  if(user === null){
    _user = null;
    // _user=false, _user=undefined,_user=0と書いてもいいかもしれない
  }
});

今さら人に聞けないFirebase Authenticationを使ってログインする方法(メールアドレスとパスワード編)

既に新規会員登録済みの場合、firebase.auth().signInWithEmailAndPasswordメソッドでメールアドレスとパスワードでログインすることができる。

var _mailaddress;
var _password;

firebase.auth().signInWithEmailAndPassword(_mailaddress, _password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

ログインした場合も、firebase.auth().onAuthStateChangedが呼び出されるので、それによってfirebase.User情報を取得することができる。

var _user;
var _mailaddress;
var _password;


firebase.auth().signInWithEmailAndPassword(_mailaddress, _password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});


firebase.auth().onAuthStateChanged(function(user) {
  if(user === null){

  }
});