1月から2月にかけてフロントエンド実装してたからブログ記事を書いてました。 サーバーサイドエンジニア向けのクライアント実装とGraphQLの話です。 moneyforward-dev.jp

booth.pm 最近仕事でReactでの機能開発をやることがあって格闘していたところに社の同僚氏が貸してくれた。ありがたい。 サーバーサイドマンがReactを使えるようになるために、という語り口なので今のいいねにとってめちゃくちゃタイムリーな内容だった。 ず…

blog.vuejs.org Vue3.2がリリースされたらしい。内容がいい感じだった。 script setup Compositon APIで書くとどうしても気になる構文の縦長さ。 <template> <button @click="addNum">Num:{{ num }} </div> <template> <script> import { ref } from 'vue' export default { setup () { const num = ref(10) const addNu</template>…

スクロールバーのデザインの為 <template> <style>.scroll-bar-input::-webkit-slider-thumb {width: $ratio + %;}</style> </template> こういうことがしたかったが、 VueCompilerに怒られる VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. 対策 …

この部分はPokemon.vueをv-forで並べています。 タイプ別にtitleとtext部分に背景色をつけているんですが、検索などでv-forに使っているリストが増減したときに正しく背景色がつかない問題がありました。 わかったのでメモ。 v-forでVueインスタンスを追加す…

Twitter liteを初めて触ったときからPWAに憧れていたのでついにやってみた。 PWA化のためにやったこと 参考 michimani.net "dependencies": { "core-js": "^2.6.5", "firebase": "^6.6.1", "vue": "^2.6.10", "vuetify": "^2.0.0", + "register-service-work…

vue-pokedex-89790.firebaseapp.com タイプ絞り込みボタンと名前検索を実装してみました。 テンプレート <v-layout class="row"> <div v-for="type in types" v-bind:key="type.index"> <v-btn @click="selectType=type">{{type}}</v-btn> </div> </v-layout> <v-text-field v-model="keyword" label="ポケモンの名前を入れてね" ></v-text-field>

リアクティブなCSSを試したくて各カードに色をつけてみました。 まだ見栄えは悪いですが、その過程でv-bindを使ったクラスの切り替えができたのでメモ。 <v-card-title :class="titleClass">{{Pokemon.no}}:{{Pokemon.name}}</v-card-title> data() { return { titleClass: "", } }, created() { this.titleCls…

vue-pokedex-89790.firebaseapp.com 3連休だったのでVue.jsの勉強もかねてこんなの作りました。 Vue.jsのポケモン図鑑です。 データ データソースは古都ことさん(@kfurumiya)が公開しているpokemon_data.jsonです。 github.com 構成 Vue.js + UIフレームワー…

www.katonobo.com この記事を見てすごく手軽に環境が作れそうだったのでやってみた。 準備 Node.jsのインストール Chocolateyを使ってさくさくっと。 最新のLTSをインストール。 choco install nvm -y nvm install 10.16.3 Vue,jsのインストール npm install…