tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【目標】2022年後半

okinawanpizza.hatenablog.com ↑前半の振り返り 要約 ものづくり系 個人開発 x 1 LT x 1 threeを使ったポートフォリオ x 1 ``` 習慣系 毎日React記事 読書週一冊 毎週の振り返り # 後半はどういう年にするか 前半は転職先の情報のインプットが多い半年だった…

【振り返り】2022年前半の振り返り

人生で初めて振り返りの記事を書きたいと思います。 ということでいってみよう。 協賛 参考にした記事を三つ。 マイナビのいかにもって感じの記事です。 フレームワークを色々探すより、考えることがシンプルなのが好き。 gakumado.mynavi.jp 料理アドバイザ…

【Typescript】型定義のコツ 型と参照先を一つのオブジェクトから呼び出す

実装のレビューで素敵な書き方を教えていただいたのでメモ。 修正前 ステータスを受け取り その結果に応じてreturnが異なるコンポーネントがあります。 ここには主に以下のような改善点があります。 - マジックストリングを用いない (複製や多くの箇所でValu…

Atomic Design

現在開発中のサービスにおいて 既存のAtomic Design に沿ったコンポーネント設計をしております。 Atomic Design がよくわからなかったのでメモしていきます。 そもそもatomic Design とは Atomic design is methodology for creating design systems. There…

【typescript】sortを利用して配列を並び替える

sort()メソッドは、配列の要素をソートする関数のこと。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 一般的なuse case 配列にsort() を実行すると昇順に並び替えてくれます。 定義した配列そのものが変更さ…

【typescript】配列の二列目以降の取り出し

今まではsplice(num)などを利用して 配列を切り分けて取り出していたのですが、最近はもっと直感的な取り出し方があるみたいです。 まとめて取り出し 配列があります const smalls = [ "小動物", "小型車", "小論文" ]; まとめて取り出すことも可能!! cons…

【Typescript】Partial<T> ついて

今日はUtility Typesについて学んだので、その学習メモ。 さまざまなユーティリティーがあるが、その一つを例にとってみると少し理解が深まりました。 今回はPartialについて。 Utilty Types とは Typescriptが提供する型の関数のようなもの。 元のインター…

【Typescript】型ガードについて

型ガード(Type guard)について if分やcase文を始めたとした条件分岐で変数の方を判別し、ブロック内の変数の型を絞り込む機能のこと。 型を変数内で明示して変換する「キャスト」を使用することを防げる。 type of 変数の型をチェックできます。 type You = …

【Typescript】オブジェクトのキーの文字列のみを許容する動的な型宣言

オブジェクトのキーをオブジェクトの型のプロパティーとしてそのまま流用したい場合。 まず、オブジェクトの型を定義したい場合 type Panda = { age: number } const panda: Panda = { age: 11, } //型通り そのオブジェクトのキーをage, name, color, dream…

【Typescript】extendsを用いてジェネリクスの型パラメータに制約をつける

ジェネリクスで型定義をする際に、特定のプロパティーを持たせるように制限することができる。 引数に存在しないプロパティーがある場合 function showBirthday<T>(person: T): Date { const birthDay = person.getBirthDay(); // personの型は未知なのでgetBir</t>…

【Typescript】ジェネリクスについて

function test<T>(arg: T): T { 上記のHTMLタグのような表記のことをジェネリクスと言います。 ジェネリクスとは Genericsは抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラス、関数、インターフェイス、を実現するために用います。 具体的</t>…

インプットが全然追いつかないぜ!

日記です。 お久しぶりです。三ヶ月ぶりかな。 初めての転職が無事に終わりました。 前職とはまた違ったアウトプットを求められる職場で、毎日楽しいです。 職場の皆さんから多くのことを吸収する一方で、振り返る時間がなかなか取れず、 それでいて昔のよう…

【contentful】content field をマークダウン形式に設定する

contentful field というのは、contentful で利用されている入力項目の種類のことです。 こちらでマークダウン形式で入力できるようにフィールドを追加していきます。 手順 1 Add field ボタンでフィールドを追加 2 フィールドの種類は「text」を選択 (「Ric…

【vercel】【Next.js】vercelを使ってのデプロイ方法

vercelでのデプロイがうまくいかなかったので 最初から作りました。手順メモ。 特に難しくはないのですがポイントが二つあります。 * Create Team は skip すること * .env.localで設定した環境変数を設定すること 方法 ・vercelにアクセスし、下記画像からC…

オブジェクトから値だけを取り出す方法

apiの値を変数に代入する際に、以下のような方法だと可読性が上がります。 const obj = {name: "ko", age: 23, female: true} const {name, age, female} = obj; console.log(name); // "ko" { var } に代入すると、オブジェクトのキーがvarの値だけを取得で…

【contentful】Rich Text を表示するために documentToReactComponents関数 を使う

記事の詳細を作成するときに 記事内容をRich Text で記述するようにしました。 他の項目のようにpropsを渡すだけではなかったので方法を記述します。 contentfulの取得方法はこちら↓ https://okinawanpizza.hatenablog.com/entry/2021/10/21/010930 document…

【Next.js】【contentful】動的なルーティングを利用した詳細ページの作成

こんにちは、本日はcontentfulのエントリーの内容を詳細ページに追加していこうと思います。 なお、エントリーは一記事単位の呼び方です。 (下記図参照) 結果 以下が全体図です。 //pages/posts/[slug].js import { createClient } from "contentful"; impor…

【Next.js】getStaticPropsでurlを取得することが可能

//http://localhost:3000/posts/test2 export async function getStaticProps({ params }) { console.log(params) // {slug: "test2"} const { items } = await client.getEntries({ content_type: "article", "fields.slug": params.slug }) return{ props:…

【Next.js】contentfulのコンテンツをNext.js 側で取得する

contentfulと言うHeadlessCMSで作成した記事内容をNext.js側に出力する方法について。 手順 contentfulをインストール データの取得 コンポーネントに渡す contentfulをインストール npmでインストール npm install contentful index.jsxインポート import {…

【JavaScript】default export と default import について

モジュールの読み込み時によく見かける {} と そうでないものの違いがわからなかったのでまとめてみました。 今回は default export と default import について。 import React from "react"; import { BookDescription } from "./BookDescription"; defaul…

【typescript】interfaceは拡張ができる、typeは拡張ができない

今回は type と interface の違いについて。 # オブジェクトに型を定義する アノテーションの部分をオブジェクト{}にすることで可能。 ※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること //通常の型アノテーション let name: string…

HeadlessCMS と 従来のCMS との違い

HeadlessCMSと従来のCMSの違いについてまとめました。 HeadlessCMSとは Head(ビュー、見た目を構築する部分)less(がない)、つまりレイアウトをツール内で管理しないCMSのこと 入稿画面付きのapi作成ツールと考えるとイメージしやすい メリット マルチデバイ…

Contentfulの設定方法

こんにちはkoです。 来年に向けてブログのリニューアル行っています。 Contentfull × Vercel × Next.js でブログを作成しようと思っています。 今日はそのうち、Contentfulに関する設定方法を記述していきます。 目次 Contentfulとは 初回登録 Space Content…

【React】関数コンポーネントとクラスコンポーネントの違いについて

コンポーネント 見た目と機能を持つUI部品 「関数コンポーネント」「クラスコンポーネント」の二つが代表される クラスコンポーネント ① React.Component を拡張して作られるJavaScriptクラスである。 import React, { Component } from "react"; //拡張する…

【Typescript】モジュール 'styles/***.css' またはそれに対応する型宣言が見つかりません。

typescriptに scss を import しようとするとエラーになってしまう。 解決 next-env.d.tsファイルに以下を追記 //make it possible to import scss file declare module '*.css'; // or scss declare module '*.scss'; これで import が可能になります。 参…

PHPで「Parse error: syntax error, unexpected '['が出た時の解消法

はじめに wordpressサイトの目次に関する不具合の改修を行なっている際に起こったエラーのメモです。 次のような配列を作成しようとすると 「Parse error: syntax error, unexpected '[' in ~」というエラーになりました。 'hoge', 'bar' => 'hoge' ]; ?> …

【css】等間隔で左寄せしたい時は、擬似要素で残りを埋める!

wordpressの制作案件の時に多いのでメモ!! justify-content: space-between; を使う際に もし左寄せにしたい場合は擬似要素を使って残りの要素分を埋めてあげましょう! ちょうどこちらのcodepenの三番目のレイアウトになります。 3カラムの場合、余白をマ…

再帰についてのまとめ

再帰についての章を学習したので、 そのまとめ。 再帰について 再帰とは自身を関数として呼び出す処理のこと。 足し算がわかりやすい例です。 例えば 5 + 5 のような加算も 5 + 1 + 1 + 1 + 1 + 1 とすることで 「5に1を足す」を繰り返している処理だと気づ…

関数の抽象化

関数の抽象化 具体的な処理を一般化することをいいます。 関数の抽象化を行うと、現実に存在するような複雑な問題を 小さなステップに分解することで効率よく処理ができるようになります。 メソッドチェーン メソッドを実行して、その結果に対してさらにメソ…

day 5 問題

第1章の分野を終えたので まとめの問題のようなものに取り掛かりました。 At Coder でよく見かけるような競プロ問題なので、 問題と学んだ関数について記載していきます。 まずはこちら 文字列 s と数値 i を受け取り、i 番目に「_」を入れた文字列を返す、…