『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】』を読んだ個人的まとめを書いていきます。 ほとんど引用で、大事・知らないかったところについてまとめます。 booth.pm 第１章 フロントエンド開発に Node が必要な理由 ・J…

Cyber Agentさんが主催されたWeb Speed Hackathon2021 に参加したので、やったことを殴り書きでまとめてみようと思います。 参加方法 Cyber Agentのサイトから参加登録をします。特に面接などはありませんでした。 ハッカソン当日 お題は「 めちゃくちゃ遅い…

Vueには$attrsというAPIがあります。 jp.vuejs.org 使い方についてはここら辺を参考にしてください。 isoppp.com 使い方は分かってもこれの使い所がよくわからなかったのですが、先日先輩に教えていただいたので書き記しておきます。 結論から書くと 親コン…

今回の目標 AWS公式チュートリアルのサーバーレスのウェブアプリケーションを構築を素直に進めていきます。 手順は公式が書いてくれているので、ここでは主につまりポイントをまとめていきたいと思います。 開始時の筆者のステータス いつもTSとNuxtでフロン…

まずreq.userの中身が何なのかはわかりますでしょうか？ここでは簡単な確認方法を記してみます。例えばroutes/login.jsファイル内でrouter.get('/', (req, res, next) => { res.render('login', { user: req.user }); console.log('req.userの値: ', req.use…

イベントと値を送出する イベントを特定の値付きで送出すると便利なことがあります。例えば、<blog-post> コンポーネントにテキストをどれだけ拡大するかを責務とさせたいかもしれません。そのような場合、$emit の2番目のパラメータを使ってこの値を提供することができ</blog-post>…

子コンポーネント button-mark.vue<template> // {{ name }}を追加して表示させる<button v-on:click="mark = mark + \'!\'">Hello {{ name }}{{ mark }}</button></template> <script>export default{props: ['name'], // propsで’name’を列挙data: function () {return {mark: '!'}},}</script> 続いて親コンポーネント main.vue<template><p></p></template>

setup(｛ name, color｝) こういう書き方の時、｛｝自体は「props」を表し、そのpropsの中にあるnameやcolorといったデータを使うよというのを上のような書き方で表せる。 setupの中ではいちいちprops.nameと書かなくても、単にnameだけで良いので簡単

<slot>を勉強した。slotには「名前付き」と「名前なし」がある。名前なしだと、コンポーネントを使う側でvalueを決めるけど、名前付きだとその名前を通じてslotのvalueにアクセスできる。あと、slotには範囲があって、子供のslotのデータと親のデータが同じでバッ</slot>…

ユーザーの行動を追跡するために付与される Cookie のことをトラッキング Cookie と呼びます。

この時は愚直にfor ofで回すしかない for async (let num of numbers) 的な

rl.on('close', () => { for (let [key, value] of prefectureDataMap) { value.change = value.popu15 / value.popu10; } const rankingArray = Array.from(prefectureDataMap).sort((pair1, pair2) => { return pair2[1].change - pair1[1].change; }); co…

URLが動的に変わる場合、pagesのファイル名は「_hogehoge.vue」のように先頭に「_」アンダーバーをつける。 こうすることで_をつけたディレクトリやファイルがルートのパラメータとして扱えるようになる。 プラグインを使うときはインストールしてpluginsに…

プロパティdataここではidを設定したり、表示されるデータをとり扱う。 computedcomputedプロパティは、computedプロパティのなかに記述されている変数が変更された場合のみに実行される。それ以外の場合は１度実行してキャッシュしたデータが返される。関連…

VuexとはVuexとはvueで使われる、状態管理のためのライブラリポイントはアプリケーションの状態を一つの場所において管理するstore(ストア)というデータの入れ物を作り、各コンポーネントからストアにアクセスしてデータの出し入れを行うVuexの機能はAction,…

Vuetify使った場合、templateタグはclassでCSS適応できる。v-text-field ではtemplateの下にv-slot labelとせることでラベルをテキストフィードへ追加できる。 そもそもslotはVuetifyが作っていて、呼び出し側はそれをただ書けば良い。そのslotに何を書くか…

Vuetifyのrulesで、入力は非必須だけど、入力されればrules適応させたいみたいな時の書き方。 v => !v || !!v.match(hohefuga) || "エラー文" !vで「vが入力されていないケース」を表す。これによって 「入力されていない」もしくは「vが入力されていてhohef…

①ページを開いた時 よくデータの一覧ページなんかを開いた時にデータの一覧が画面いっぱいに出る時とかに使う。 ②データに何かしらの変更を加えた場合 アップデート、デリートなどでGraphQLを使ってデータを変更した場合に一連の変更処理が終わった時に変更…

GraphQLでデータを取得する時、 dataの中に色々入ってるけど、その中にあるデータをなんかの変数に代入したりする時は、そのデータはdata.getInvoiceみたいな書き方をしなくては行けない。 仮に全く同じデータ(真偽値で言うとTrue)の場合でも、ビュー側の持…

親コンポーネントで扱っているデータを子コンポーネントで書き換えると思わぬエラーやバグにつながるので、 データフローは必ず親→子の一方通行にする。 データを書き換える際には2通りのやり方がある。 ①子から$emitでプロパティを親へ渡す ②storeを使って…

読む時はqueryで読みたいプロパティを指定すれば読める。 書く時(追加する方法)は2通りある ①queryで定義してからクエリ変数で具体的な値を入力する ②mutationで直接追加したいプロパティへ値を入力する どっちでもいけるけど、mutationで追加できそうなやつ…

コンポーネントでバックエンドからデータをfetchすることは出来ない。 もしそうしたい時はpagesのビューのファイルでfetchしてから、propsで子コンポーネントへ渡すというやり方を使おうね。 (2020/07/15 追記) 最新のNuxtではコンポーネントからもデータのf…

Vuetifyのformのvalidationなんかで使うrulesプロパティの書き方が少し変わったらしい。 たとえば、必ず入力して欲しい欄があるとき v=>!!v || 'この欄は必ず入力してください' このように「!!v」とすることで「v」を純粋なBooleanの値にしなければいけない…