BLOG

  • 2021-09-14

    Reactのページネーション実装

    import React, { FC, useState, useRef, useEffect } from ‘react’
    import styles from ‘./Pagination.module.css’
    import classNames from ‘classnames’
    interface Props {
    first: number
    total: number
    current?: number
    onChange: (e: { page: number }) =>void
    }
    const Pagination: FC<Props> = ({ first, total, current = 1, onChange }) => {
    constisFirstRender = useRef(true)
    const [currentPage, setCurrentPage] = useState(current)
    // ページングした後に絞り込みするとページングのstateが戻らない
    useEffect(() => {
    setCurrentPage(current)
    }, [current]);
    useEffect(() => {
    if (isFirstRender.current) {
    isFirstRender.current = false
    return
    }
    onChange({ page:currentPage })
    }, [currentPage])
    consttotalPage: number = Math.ceil(total / first)
    // 最初に戻る
    consthandleAllBack = (): void=> {
    if (currentPage === 1) {
    return
    }
    setCurrentPage(1)
    }
    // 1つ戻る
    consthandleBack = (): void=> {
    if (currentPage === 1) {
    return
    }
    setCurrentPage(currentPage – 1)
    }
    // 1つ進む
    consthandleForward = (): void=> {
    if (currentPage === totalPage) {
    return
    }
    setCurrentPage(currentPage + 1)
    }
    // 最後のページに進む
    consthandleAllForward = (): void=> {
    if (currentPage === totalPage) {
    return
    }
    setCurrentPage(totalPage)
    }
    // 番号クリック
    consthandleMove = (page: number): void=> {
    setCurrentPage(page)
    }
    // 範囲の指定
    letrangeStart: number = currentPage – 3
    if (rangeStart < 0) {
    rangeStart = 0
    }
    letrangeEnd: number = currentPage + 1
    if (rangeEnd > totalPage) {
    rangeEnd = totalPage
    }
    lettotalPageArray: number[] = Array.from(newArray(totalPage)).map(
    (_, i) => i++
    )
    totalPageArray = totalPageArray.filter((range) => {
    returnrangeStart <= range && range <= rangeEnd
    })
    // 省略された時に…で表示する
    constbeforeRange: boolean = rangeStart > 0
    constafterRange: boolean = rangeEnd + 1 < totalPage
    return (
    <>
    {totalPage > 1 && (
    <ulclassName={classNames(styles.pagination)}>
    <span
    className={classNames(
    `${styles.pageAllArrow}${styles.pageAllArrowPrev}`
    )}
    onClick={() =>handleAllBack()}
    ></span>
    <span
    className={classNames(
    `${styles.pageArrow}${styles.pageArrowPrev}`
    )}
    onClick={() =>handleBack()}
    ></span>
    {beforeRange ? <span>…</span> : null}
    {totalPageArray.map((page) => {
    page++
    returnpage === currentPage ? (
    <li
    key={page}
    className={classNames(
    `${styles.pageItem}${styles.pageItemActive}`
    )}
    >
    {page}
    </li>
    ) : (
    <li
    className={classNames(styles.pageItem)}
    key={page}
    onClick={() =>handleMove(page)}
    >
    {page}
    </li>
    )
    })}
    {afterRange ? <span>…</span> : null}
    <span
    className={classNames(
    `${styles.pageArrow}${styles.pageArrowNext}`
    )}
    onClick={() =>handleForward()}
    ></span>
    <span
    className={classNames(
    `${styles.pageAllArrow}${styles.pageAllArrowNext}`
    )}
    onClick={() =>handleAllForward()}
    ></span>
    </ul>
    )}
    </>
    )
    }
    export default Pagination
  • 2020-09-04

    自作PC

    ご無沙汰してます。最近なんかいろいろ忙しいらしい吉田です。うれしいことです。

     

    さて表題の通りなんですけどPCを買いました。自作です。

    今まで2018年のMacBookProメインでやってまして、そろそろ自宅のデスクトップを変えたいなーと思ってたので思い切って購入です。（ちなみにもともと家にあったデスクトップは2011年製くらいのヤバいやつ笑）

     

    そもそもわたくしハードに全然強くないので、お友達の助言をかなり頂いて部品集め、組み立てしました。

    部品代は全部合わせて105000円！安い！！

    ちなみに内約は「マザボ、CPU(最新i5)、CPUファン、GPU(1650SUPER)、ケース(青く光るヤンキー用)、メモリ(16GB×2)」

    こんなもんですかね。SSDは元から持ってた1GBのやつを流用しています。

     

    組みあがったもの触ってますがとても良いです！

    これで動画制作とかごっついグラフィックとかもできそう！

    Macがカスに見える！

    やはりデスクトップは自作に限りますな！(チョロい)

    という近況報告でした。

    ・

    ・

    ・

    ちなみに、Windows買ってませんｗ

     

     

     

     

  • 2020-05-22

    gitコマンド忘備録

    おそらくこのブログとかかなり需要ないし誰もみてないと思われるので忘備録っぽく使ってやろうかと思います。

    最近やっとgitとか使うようになったので。。。

     

    git branch　今いるブランチを調べる

    git checkout feature/~~~　ブランチの切り替え

    git diff

    git log　ログを確認　Qで戻る

    git status　ステータス確認　変更したファイルが赤文字　addした後は緑文字

    git add . 　変更したファイルを登録する　ファイルごとに登録する場合は    git add FILENAME

    git reset　変更をリセット

    git commit　登録した変更をコミットする　Aでコメント追加　”[○○] コメントコメントコメント”の形式でコミットすること。

    ESC　コメントの編集終わり

    Shift + Z + Z　コミットの決定

    git push origin feature/~~~　コミットをブランチにプッシュ

    git fetch　ブランチからフェッチする

  • 2020-02-05

    カメラレンズ新調！

    そろそろ髪型でも変えてみようかなと思ってます吉田です。

    やっぱりwebデザインするなら写真も撮りたいのでちょっと前に一眼レフ買ってたんですが今回追加でレンズを買ってみました。

    広角単焦点の俗にいうパンケーキレンズってやつです。

    まだ試し撮りくらいしかできていないのですが、店内の写真とかお料理の写真なんかを撮るときに最適かなぁ～と思っての購入です。普通に使い勝手がいいのでなんでも撮れるらしいけど。

    飲食店のメニューの制作とか来ないかなぁ～

    来ないかなぁ～

    …

    撮影とデザイン、データ入稿まで一貫で出来るのでお任せください！！！

    このブログは割と独り言です。

  • 2020-01-20

    4041の由来

    はじめて会う人に4041って何？と聞かれるので違う名前にしとけばよかったかも…と思ってる吉田です。

    今更ですが明けましておめでとうございます。

    今年は2年目となるので去年よりたくさん仕事できるよう頑張りたいと意気込んでおります！

     

    というわけで4041DesignStudioって屋号の由来の話でも…

    実際そのままなんですけど吉田なのでヨッシーと呼ばれることが多いんですが、まんまだとなんかアレなので数字に当ててみましたって感じです。

    「ヨンマルヨンイチ」でも「よっしぃ」でもどっちでもいいけど個人的に「ヨンマルヨンイチ」っすね、長いけど。

    404サーバーエラーと被るんでちょっとミスった感否めないす。ちゃんと表示されるんで安心してください。笑

     

  • 2019-12-09

    PhotoShop art

    フォトショップの練習がてら遊びでつくってます。友人の写真勝手に使ってすまん。

    自分はiPhone7+を使っているのでちょうどピッタシのサイズで作ってます。オリジナル壁紙とかも作りたいですね。

  • 2019-11-22

    WEBサイトが検索にヒットするまで

    最近フォトショップが楽しくて仕事中いじりまくってる吉田です。

    たまにはweb関係のことも書かないとマズいような気がするのでってことでこのタイトルです。

     

    表題の通りですが詳しく説明すると「ホームページをサーバーにアップ、公開してからどのくらいの期間で検索にヒットするのか」ってことです。

    結論から言いますと「だいたい3日〜7日」です。

    なんだすぐじゃん、と思うかもしれません。

     

    で

    す

    が

     

    これはあくまで「4041 design studio」とか競合のない検索ワードや会社名でヒットするっていう話です。

    実際にホームページ制作をお願いしたい人は「ホームページ 制作　フリーランス」とかで調べるでしょう。

    webからの売上を狙っている場合このようなキーワードでヒットさせなければ売上は伸びないでしょう。

    もちろん広告を出せばヒットさせることは簡単です。

    広告なしで上位にヒットさせたい場合は記事・ブログを書いたり、コンテンツを増やすなどしてSEO対策をして行かなければなりません。

    これには競合などでバラつきが出ますが一週間に一記事書いて3ヶ月〜6ヶ月くらいはかかると思います。

    もちろん業務に関係ないブログを書いていても意味はありません。グーグルの評価を上げて上位表示されるには記事ひとつひとつの内容が大事になります。

     

     

    定期的に更新する。これはなかなか地道で大変な作業ですが、現代で集客を行うならWEBは必須だと思います。

    ホームページを作っても放置してしまう人があまりにも多いので、少しもったいないなぁと思ってしまいます。

    効果のあるブログの書き方などはまた次回書いていこうかな…と思います。

  • 2019-10-15

    早く乗りたい

    買ったクルマがなかなか出来上がらなくて悲しい吉田です。

     

    早く乗りたいです…このまま冬になってしまうと乗れなくなっちゃうので…

     

    さて最近非常に周りの方々の恩恵を感じてます。

    ボチボチと色んな繋がりからお仕事頂けてとても助かってます。

    感謝の気持ちはモノにたくさん込めたいと思います、仕事しよ～っと

  • 2019-09-16

    クリエイティブな人達

    蒙古タンメンに敗北した吉田です。言い訳すると別に辛いの得意じゃない。

     

    連休だったので、東京に遊びにいってきました。

    向こうでは3人くらいにしか正直会ってないんですけど、みんなクリエイティブ系の仕事をしてます。

     

    仕事と言っても自分と同じように半独立みたいな感じでそれだけで飯食える感じではないですけど、みんなと話してていい刺激もらえたかなと思います。

     

    会社に勤めてるのは正直楽ですけど、もっともっと上を見たいし自由になりたい。そのために考えなきゃいけないし、もっと手を動かさないといけない。

    実際かなり初歩的なことなんですけどね…

     

    こういう文書くのはずいんであまり深く読まないで下さい…

     

    とにかく、フィールドは違くともお互い頑張りたいですね！ありがとう！

  • 2019-08-17

    Portfolioを公開しました

    初めまして4041DesignStudioの吉田です。

    この度自身のポートフォリオを公開しました。

    制作事例とブログをﾁｮｺﾁｮｺと更新していきますので宜しくお願い致します。