木脇

エンジニア転職目標に勉強中の人です。 大学→青年海外協力隊→事務→整体師（10年）

木脇

エンジニア転職目標に勉強中の人です。 大学→青年海外協力隊→事務→整体師（10年）

Cloud Firestore セキュリティルールの基本的な読み書き方法

firebaseからセキュリティが甘いです危険ですっていうメールが来てたので、いい加減設定しようと思いまして勉強しました。 firebaseは細かなルールを設定できるようにもなっていますが、今回はルールの基本的な読み書きができるようになるところまで調べました。ここを抑えていれば、あとは自分で都度調べてルールが書けるってところまでできるようになります。 例として、以下のようなデータに対して、認証（ログイン）済みのユーザーであればuserというコレクションに含まれるすべてのド

木脇

    • 【Vue.jsとfirebase】Authenticationだけを使用する方法について調べた件。

      vue.jsとfirebaseを使用して投げ銭アプリなるものを作成しています。 日本にも「いんすたぐらまー」とか「ゆーちゅーばー」とかいますけど、韓国、中国、台湾あたりじゃ「らいばー」ってのもアツいわけですよ。それこそ2019年にはナショナルジオグラフィックで取り上げられてますからね。 話をもとに戻しまして、 今作成中のアプリにはユーザーの新規登録画面やログイン機能、認証といった機能を実装したいわけです。 vue.jsとfirebaseを使用して前述した機能を実装するの

      木脇

      • ラジオボタンの文字をクリックして選択できるのなんで？を調べてみた。

        ありますよね。 ラジオボタンの文字をクリックしても選択できたり、 インプットタブの文字をクリックしたら、入力バーが表示されたりするやつ。 あれってどうやってんのかなーと調べてみました。 結果、<label>を使えばいい。あっさり答えが見つかりました。便利なタグがあるもんですね。 ２パターンの実装方法があったので、それを学んで終了です。 ①labelのfor属性とinputのid属性を一致させる。 <div><label for="egg">卵アレルギーはありますか？<

        木脇

        • v-forとv-ifの併用はダメらしいんで対策した件

          v-forとv-ifを同一タグで使っちゃダメだよ！公式が言っています。 v-for と同じ要素に v-if を使わないでください。 こうしたくなってしまう2つの一般的なケースがあります: リスト内のアイテムをフィルタする(例: v-for="user in users" v-if="user.isActive")。このような場合は、フィルタリングされたリストを返却する算出プロパティに users を置き換えてください(例: activeUsers)。 非表示にする必要が

          木脇

        Cloud Firestore セキュリティルールの基本的な読み書き方法

        木脇

        • 【Vue.jsとfirebase】Authenticationだけを使用する方法について調べた件。

          木脇

        • ラジオボタンの文字をクリックして選択できるのなんで？を調べてみた。

          木脇

        • v-forとv-ifの併用はダメらしいんで対策した件

          木脇

          v-showとv-ifのちがいについて

          Vue.jsでマルチステップの申し込みフォームを作成しています。 その中でv-showとv-ifのどちらを使用するか迷ったので、どんなちがいがあるのか調べてみました。 ってことで、この記事はv-showとv-ifの使い分けについて知りたい方向けです。 v-ifとv-showの使い分けまずは結論、表示/非常時の頻度で使い分けます。 v-ifは単発の切り替えがメインの時に、 v-showは表示／非表示の切り替えが多い時に使います。 理由はこういった使い分けをした方がブラウザ

          木脇

          v-showとv-ifのちがいについて

          木脇

          参照渡しと値渡しがスッキリわかった件【VueでToDoリスト】

          Vue.jsでToDoリスト作成中です。 タスクを追加する際に二つのプロパティを持たせたオブジェクトを作成し、それを配列にpushすることでtodoリスト管理しようと思い以下のようにコードを書きました。 <html>//一部抜粋//<input type="text" v-model="todo"><button @click = "addTodo">追加</button><script>data:{ todo:{ comment: ''

          木脇

          参照渡しと値渡しがスッキリわかった件【VueでToDoリスト】

          木脇

          [JavaScript]複数の子要素を削除する。

          複数の要素を削除したい！以下のように実行をクリックするとfizzbuzzが表示されるコードを書いた。 しかし、このままだと２回目以降の結果が前回の結果の下に表示される。 クリック毎に前回の結果を消去して、新しい結果を表示するようにしたい。 remove()を使おうと思ったが、どうやらremove()は一つの要素しか消去できない。 なので、他の方法を調べてみた。 結論から言うと、 ループ処理で一つずつ子要素を削除する にたどり着きました。 <html> <body>

          木脇

          [JavaScript]複数の子要素を削除する。

          木脇

          冗長なmutationsがスプレッド構文でスッキリした件

          Vue.jsとVuexを使ってマルチステップの申し込みフォームを作っています。 ユーザーが入力する情報は、性別や生年月日など8項目。 8項目それぞれに対してmutationsで処理を作っていましたが、完成したらそれはそれは冗長なコードになってしまったので、なんとかスッキリさせようと調べた結果、スプレッド構文を使ったら劇的ビフォーアフターしました。 storeとv-modelをうまく使い方ときに参考になるかと。 ビフォー(元のコードの一部抜粋) //store.jsim

          木脇

          冗長なmutationsがスプレッド構文でスッキリした件

          木脇