今さら人に聞けないFirebase Authenticationを使って新規会員登録する方法(メールアドレスとパスワード編)

Firebase AuthenticationのJavaScript SDKで新規会員登録する方法を調べた。

Twitter、Facebook、Googleの各種アカウントを使ってログインすることはできるのはもちろん、メールアドレスとパスワードを使って新規会員登録することもできる。

firebase.auth().signInWithEmailAndPasswordメソッドで新規会員登録をすることができる。

var _mailaddress;
var _password;

firebase.auth().signInWithEmailAndPassword(_mailaddress, _password).catch(function(error) {

});

新規会員登録した場合は、firebase.auth().onAuthStateChangedメソッドも呼ばれるので、その返り値であるfirebase.Userを保持すれば、以後、それを使ってユーザー情報を使って色々なことを実行することができる。

var _user;
var _mailaddress;
var _password;

firebase.auth().signInWithEmailAndPassword(_mailaddress, _password).catch(function(error) {

});

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

  }else if (user) {
      _user = user;
  }
});

React.Fragmentという最終兵器(またはリーサル・ウェポン)

少し前にReactでrenderを使う時に注意点について書いた。

jumbomonaca.hatenablog.com

renderメソッドを使う場合は、domで囲むか、false、nullまたは文字列でないとbabelでコンパイルする時にエラーを出してしまう。

例えば、エラーのパターンとして、dom同士を隣接させてしまうとエラーになってしまう。

// NGパターン
class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello</h1>
      <section>This is content</section>
    );
  }
}

// OKパターン
class HelloMessage extends React.Component {
  render() {
    return false;
  }
}

// OKパターン
class HelloMessage extends React.Component {
  render() {
    return null;
  }
}

// OKパターン
class HelloMessage extends React.Component {
  render() {
    return "hello";
  }
}

// OKパターン
class HelloMessage extends React.Component {
  render() {
    return (<div>Hello</div>);
  }
}

親のdomがないとどうしてもエラーになるということで、ダミーのdivを囲んでコンパイルエラーを今まで回避していた。

// OKパターンだが、ものすごく気持ち悪い
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <section>This is content</section>
      </div>
    );
  }
}

そこでどうにか仮のhtmlを置かなくてもエラーを回避することはできないのか、ドキュメントを眺めていた。

そしたらFragmentsというので対応できるみたいだ。

リファンレスでは、例としてtdタグについての言及があったが、別にtdタグ以外にも適用できる。

// OKパターンだが気持ち悪い
class HelloMessage extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Hello</h1>
        <section>This is content</section>
      </React.Fragment>
    );
  }
}

リファレンスでは、syntax sugarとして空のhtmlをおくことでも対応できると書いてあった。

が、しかし、全部のツールが対応していないので、React.Fragmentを使ってほしとのことである。

というか、最初からこのやり方を紹介しておけよって突っ込みたくなった。

脱jQuery ネイティブJavaScript(Vanilla JS)置換対応リスト

jQueryではなくネイティブJavaScript(Vanilla JS)に置き換えた場合の対応リスト

• なぜjQueryではなく素のJavaScriptで実装をするのか？

• Selector

• readyメソッド
• findメソッド
• clickメソッド
• resizeメソッド
• scrollメソッド
• parentメソッド
• appendメソッド
• attrメソッド
• addClassメソッド
• removeClassメソッド
• emptyメソッド
• removeメソッド
• beforeメソッド

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

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

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

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

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

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

// jQuery
jQuery(function(){

});

jQuery(document).ready(function() {

}

// JavaScript
document.addEventListener('DOMContentLoaded', function() {

});

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

すでに移行対象となっているメソッドだが、古いjQueryを使っているケースもあるのでネイティブJavaScipt(Vanilla JSまたは素のJavaScript)で実装する方法について書く。

// jQuery
$('a').click(function(e){
    
});

// jQuery
$('a').on('click', function(e){

});

// JavaScript
document.querySelectorAll('a')[0].addEventListener('click',function(e){
    
});

document.querySelectorAll('a').forEach(function(currentValue){
  currentValue.addEventListener('click',function(e){
  });
});

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

Selectorの書いたので、今日は、jQueryのfineメソッドについて書く。

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


// JavaScript
var _foo = document.querySelectorAll('#hoge')[0].querySelectorAll('.foo');

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


// JavaScript
var _foo = [];
document.querySelectorAll('.hoge').forEach(function(currentValue){
  currentValue.querySelectorAll('.foo').forEach(function(currentValue){
    _foo[_foo.length] = currentValue;
  });
});