WEB

  • 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-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　ブランチからフェッチする

  • 2019-11-22

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

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

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

     

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

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

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

     

    で

    す

    が

     

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

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

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

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

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

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

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

     

     

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

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

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