はてなブックマーク

こんにちは、ともです。 この記事ではES6からの構文であるimportについて理解をまとめたいと思います。 ES5の知識すらほぼ無かった状態でVue.jsをやってしまった僕は何となく動くものは作れるけど深くは理解できないという感覚でした。このような方は多いのではないでしょうか。 その状態から脱却するためにimportについて勉強していきます。 外部ファイルのクラスの読み込み アプリケーションが大きくなるとモジュール毎に機能を管理していく必要があります。 そのようなモジュールを読み込むためにimportを利用します。PHPであればrequireという構文があります。 他のファイルに記述されたクラスを読み込む際にimportを利用します。 ファイルを準備 モジュールとしてMemberクラスを『./lib/Util.js』に定義しました。 // ./lib/Util.js const AUTHO

こんにちは、ともです。 React.jsのチュートリアルを見ながら勉強中です。 Vue.jsだったらデータバインディングがありますが、あんな感じでstateとフォーム値を同期を取る方法についてReact.jsのチュートリアルを見ていきます。 React.jsのフォームとstateの値を同期を取る方法について書きたいと思います。 <input name="name" value="text"> だったり、textareaやselectがありますが、それらのフォームは自身にデータを保持しています。 つまり、 stateの情報源 フォームの情報源 の２種類が存在した状態になります。 しかし、React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させることができます。 このようにstateを信頼できる唯

こんにちは！ともです(@_tomo_engineer)！ Firebaseを利用してTwitter認証・Facebook認証・Google認証・GitHub認証を簡単に作成する事が出来、これらを解説していきます。 こちらでアカウントの作成からメール認証の作成までを解説しております。Firebaseのアカウントが無い方、メール認証が見たい方はこちらを参考にして下さい。 この記事では、FirebaseでSNS認証を作成する方法についてまとめます。 Twitter認証の作成 FirebaseでTwitter認証を有効化 FirebaseのサイドバーにAuthenticationの箇所を開きます。ログイン方法のタブを開くと各認証方法の有効化・無効化の設定画面が現れます。 Twitterの設定を上の様に有効化して下さい。 その他にAPIキー・APIシークレット・コールバックURLの設定があります。こ

こんにちは！ともです(@_tomo_engineer)！ 前回はコンポーネントを定義する方法について勉強しましたが、今回はコンポーネント間でデータを受け渡しする方法について見て行きます。 参考にしたものは以下です。 基礎から学ぶVue.js(書籍) Vue.js：日本語ドキュメント コンポーネントの間の関係 コンポーネントの関係には『親子』または『非親子』の２つが考えられます。 親子の場合 <div id="app"> <comp-child></comp-child> </div> ルートインスタンスを親と考えると、それに含まれたコンポーネントは子だと考える事ができます。 非親子の場合 <comp-friend1></comp-friend1> <comp-friend2></comp-friend2> また同じ階層のコンポーネントは非親子の関係にあると考える事ができます。 スコープ 親