サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
nanaki.design
こんにちわ、ななきです。 だいぶ前に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);
こんにちわ、ななきです。 最近Reactを書くことが多いのですが、CSSの変数管理やレイアウトの構成などどうしてるのか気になったので自分のやっているパターンを書いてみようと思います。 普段はstyled-componenttsを使っているので、それを前提として書いていきます。 CSS関連ファイル構成 ファイルのの構成は基本的に以下のようにしています。 - styles/ - index.js -> 各変数ファイルをまとめたファイル - colors.js -> 色の変数をまとめたファイル - mixins.js -> SCSSのmixinに当たる記述をまとめたファイル - GlobalStyle.js -> リセット用CSSを記述したファイル
このページを最初にブックマークしてみませんか?
『nanaki.design』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く