プログラミング

2021年5月31日 19:49

Material-UIでNext.jsのポイントを紹介する

reactで使う場合とnext.jsで使う場合でmaterial-uiの使い方が微妙に変わってくるので紹介します。

1. SSRへの対応material-uiはデフォルトではSSRに対応していません。以下のような警告が出ると思います。

Warning: Prop 'className' did not match. Server ...

この警告が出るとcssが反映されずページが崩れると思い

もっとみる

fumi

2021年5月25日 20:15

React勉強メモ~Next.js基礎~

# Next.js

## 立ち上げ

* プロジェクト立ち上げ

```shell
npx create-next-app next-crash-course
```

* サーバー立ち上げ

```sh
npm run dev or yarn dev
```

* ビルド

```js
npm run build or yarn build
next build
```

## ファイル構成

もっとみる

fumi

2021年5月24日 19:08

React勉強メモ~Material-UI~

# TypeScript & React & Material UI

## 導入

* js,ts共通

```shell
npm install --save @material-ui/core
# オプション
@material-ui/icons
```

## 使用方法

1. import

```tsx
import Button from '@material-ui/core/B

もっとみる

fumi

2021年5月23日 20:53

React勉強メモ~typescript~

# TypeScript

## js基礎

* 変数の前に+をつけることによって数値に変換できるもしその値が数値に変換できるものでない場合 NaNを返す

## 基本的な使い方

1. .tsファイルを作成
2. tsc 作成したファイル名でコンパイル

* ts,そのコンパイルしたjsをエディタで同時に開くと重複した定義としてエラーが出る

### lite-server

* サーバー

もっとみる

fumi

2021年5月22日 19:54

React勉強メモ~context api,reducer詳細説明~

# Context API

* context apiでは大きく分けて2つのセクションに分けることができる
* Provider：コンテキスト内の必要な情報にアクセスする必要があるものは全てこれで囲む
* value：引き渡す値

## 実装手順

1. contextファイル作成

* contetx.tsxとかではなく何のコンテキストかをファイル名にする

2. type定義

* 引き渡す

もっとみる

fumi

2021年5月21日 19:55

React勉強メモ~応用編②~

## Custom Hooks

* コンポーネントはhtmlを再利用できるようにしているのに対しcustom hooksは関数や動きを再利用することを可能にしている
* 公式や第三者が作ったものもあるので参考にできる

* 変数・コンポーネント名は use〇〇とし使うことができる(useの後の最初の文字は大文字であること)
* 中ではhooksを使ったりインポートしなければならないものをまとめ

もっとみる

fumi

2021年5月19日 19:16

React勉強メモ~応用編①~

## Hooks

* Reactと同時にimportし use と名前がつくもの直接importしなくとも使用回数が少なければReact.で使用しても良い

```js
// useStateを個別にimport
import React, { useState } from 'react';
const [text, setText] = useState('random title');

もっとみる

fumi

2021年5月18日 19:42

React勉強メモ~React基礎~

##　立ち上げ

プロジェクト作成

```shell
npx create-react-app react_tutorial
```

サーバー立ち上げ

```shell
npm start
```

### ショートカット

* rafc:テンプレート生成
* rafe:export付きのテンプレート生成
* rafcp:prop type付きのテンプレート生成

## コンポーネント

*

もっとみる

fumi

2021年5月17日 19:24

寄り道をしながらgo/wireを触ってみる

go/wireの公式チュートリアルを通して自分なりに改変しながら触ってみたいと思います。

wireを使わずに実行チュートリアルのA First Pass of Building the Greeter Programと言うセクションから進めていきます。wireを使わずに自分でコードを書いた場合のコードが書かれています。とは言ってもmain.goを作ってそこにコピペしていくだけですね。

とりあえ

もっとみる

fumi

2021年5月16日 19:11

React勉強メモ~js基礎~

# JS基礎

## npm package update

```shell
ncu -u
npm install
```

## map

```js
const list = [1,2,3,4,5,6];

const newList = list.map(function(item){
return item*item;
});

//コンポーネントの中で使用
{questions.

もっとみる

fumi

2021年5月15日 19:33

React勉強メモ~もくじ~

概要自分が去年reactを勉強するにあたりとったメモを公開します。自分なりに必要な事柄や要点はまとめているつもりです。ただ自分のために書いてあるので明らかな箇所は省いていたりと見にくいかもしれないです。形式はマークダウンで書いているのでそのまま読むかコピペしてエディタで閲覧するなどしてください。react勉強中の方には参考として、既にreactに詳しい方にはチートシートとして使っていただけたら幸い

もっとみる

fumi

2021年5月10日 21:26

説明をしながらreact+typescriptでカスタムフックを作っていく

カスタムフックについてreactで開発をしているとビュー、ロジックを同じページに書くことができて便利である一方再利用できなかったりロジックがあまりにも長かったりするとコード自体がとても見にくいといった課題があります。

それらの課題を解決するためにカスタムフックを使いビュー・ロジックを分離させ、コードを見やすくしましょう！

プロジェクト作成とりあえずプロジェクトを作っていきます。今回はreact

もっとみる

fumi

2021年5月3日 18:52

LaravelにおけるJWTの調査

久しぶりにLaravelに関する投稿です。

はじめに今回はLaravelでJWTがどのように活用されているかを調査していきたいと思っています。今回の調査でパッケージがトークンに対してどのような情報を保存しているか、リフレッシュトークンの使われ方を調べていきたいと思います。この知識を活かしてGoで作ったJWTを用いたログインシステムの改善ができればと思っています。

プロジェクト作成とりあえずプロ

もっとみる

フォローしませんか？

2021年5月の記事一覧