お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

httpsしか使えないGitリモートリポジトリで認証情報を保存する

投稿日：
ソフトウェア::Git

SSHが使えない悲劇に出会った時に。CentOS 7.7で確認。

パスワードは平文保存されるっぽいので、そこら辺は注意が必要。

  1. 認証情報をキャッシュする設定にする
    1. git config --global credential.helper cache
  2. キャッシュのタイムアウトを1年くらいにしとく
    1. git config --global credential.helper 'cache --timeout=31536000'
コメント（0件）

react-routerでRouteを切る

投稿日：
ライブラリ::React言語::TypeScript

react-routerでRouteを切る実装例

確認環境

Env Ver
React 17.0.1
react-router-dom 5.2.0
TypeScript 4.1.3

サンプルコード

index.tsx

  • ここに大元のルーティングを実装
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import { BrowserRouter } from 'react-router-dom';
import { RootRoute } from './routes/RootRoute';

// ドメインルート以外にReactを設置する場合に必要
// e.g. `https://www.example.com/react/` に設置する場合 `/react` を設定
const basename = process.env.REACT_APP_BASE_NAME ?? undefined;

ReactDOM.render(
  <React.StrictMode>
    {/* `useHistory()` 用のDIラッパー */}
    <BrowserRouter basename={basename}>
      {/* ルーティング設定をまとめたコンポーネント */}
      <RootRoute />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

AppRoute.ts

  • ルーティングの定義、これがあると後々の管理が楽
  • スプレッド演算子でRouteに対して展開できるように記述しておく
export const AppRoute = {
  // React のルート定義
  root: {
    path: '/',
    key: '/',
    exact: true, // 完全一致
    component: App,
  },
  // 404 定義
  notfound: {
    component: NotFound,
  },
  // `/foo` 以下のルーティング定義
  foo: {
    // `/foo` のルート定義
    root: {
      path: '/foo',
      key: '/foo',
      component: FooRoute,
    },
    // 以下、 `/foo` 配下のページのルーティング定義
    hoge: {
      path: '/foo/hoge',
      key: '/foo/hoge',
      component: HogePage,
    },
    piyo: {
      path: '/foo/piyo',
      key: '/foo/piyo',
      component: PiyoPage,
    },
  },
};

RootRoute.tsx

  • 各階層の基底ルーティング管理
export const RootRoute = () => {
  return (
  {/* `Route` は `Switch` で囲む */}
  <Switch>
    {/* root */}
    <Route {...AppRoute.root} />

    {/* foo */}
    <Route {...AppRoute.foo.root} />

    {/* bar */}
    <Route {...AppRoute.bar.root} />

    {/* 404 */}
    <Route {...AppRoute.notfound} />
  </Switch>
  );
};

FooRoute.tsx

  • /foo階層配下の管理用
export const FooRoute = () => {
  return (
  {/*
    `Context` は `Switch` の外に出す
    `Switch` の中に `Context` を書くと更に `Switch` でネストする必要がある
  */}
  <FooContext.Provider value={FooContextDefault}>
    <Switch>
    {/* eslint-disable-next-line array-callback-return */}
    {Object.entries(AppRoute.foo).map(([idx, route]) => {
      if (idx !== 'root') {
      /* `'root'` 以外の全ノードを展開 */
      return <Route {...route} />;
      }
    })}
    {/* 404 */}
    <Route {...AppRoute.notfound} />
    </Switch>
  </FooContext.Provider>
  );
};
コメント（0件）

npmコマンドの作り方

投稿日：
Node.js::npm

自作npmコマンドを蹴る方法のメモ

Env Ver
Node.js 12.18.3
npm 6.14.8

手順

  1. Node.jsのプロジェクトを作成
    1. npm initとか適当に
  2. package.jsonに以下を追加
"bin": {
  "my-npm-command": "./index.js"
}
  1. Node.jsのCLIを作成
    1. 以下はサンプル
#!/usr/bin/env node
console.log('my-npm-command');
  1. npm linkを叩き、my-npm-commandを実行して動いてればOK
    1. 外したくなったらnpm unlink
コメント（0件）