はてなブックマーク

こんにちわ、ななきです。 だいぶ前にVueをTypeScript化した的な記事書いたのですが、それから案件でもTS化したVueを使っていたのと最近の界隈の流れもありNuxtもTypeScript化してみました。 結果的にデコレータを使わずに、vuexもコンポーネントも型が効いており満足です。 ちなみにvuex部分にかんしてはこちらのリポジトリを参考にさせて頂きました。 コンポーネントのTS化 コンポーネントに関してはびっくりするほどやることないです。 $ yarn add ts-node $ yarn add -D @nuxt/typescript $ touch tsconfig.json $ nuxt build

Vue・Reactをやるなら知っておきたい JavaScriptの書き方 2019.05.11 | javascript こんにちわ、ななきです。 VueやReactの学びはじめの頃はどう書いていいかわからなかったり、どのメソッドを使うと効率がいいのかわからなかったりしたことが多くありました。 多分今学び始めてる人の中にも同様の方がいると思うのでいくつか自分が便利だと思うものをまとめたいと思います。 三項演算子 trueかfalseかで返す値を変えれる短いif文ですね 使い方は下記の様にします

const state = () => ({ posts: [], isPostsLoading: false }) const mutations = { setPosts(state, payload) { state.posts = payload }, onPostsLoadingStart(state) { state.isPostsLoading = true }, onPostsLoadingFinished(state) { state.isPostsLoading = false } } const actions = { async fetchPosts({ commit }, payload) { commit('onPostsLoadingStart', {}) const { response } = await // ここで非同期処理 commit('setPo

こんにちわ、ななきです。 ReactのプロジェクトをNext.jsにのせようってことがあり、Nextを触っていたのですが意外とハマりどころが多かったのでいろいろまとめてみます。 プロジェクトの作成についてはcreate-next-appをしておけばいいと思います。 基本のページ遷移 ページの遷移は基本的にはnext標準のLinkコンポーネントを使うようです。 import React from 'react'; import Link from 'next/link' const Component = () => { return( <Link href="/"> <a> リンクです </a> </Link> ) } export default withRouter(Component);