Lycolog

Laravel + SQLServerとかやるときのメモ

sudo yum install -y epel-release
sudo yum install -y http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
sudo yum update
# これがないと SQLServer への接続でコケる
sudo yum localinstall https://packages.microsoft.com/rhel/7/prod/msodbcsql17-17.4.1.1-1.x86_64.rpm
# Laravel が起動するのに必要な様々ないろいろ
sudo yum install -y php74 php74-php-common php74-php-cli php74-php-mbstring php74-php-gd php74-php-pear php74-php-pdo php74-php-mcrypt php74-php-xmlrpc php74-php-soap php74-php-devel php74-php-intl php74-php-xml php74-php-sqlsrv
# php で呼べるようにしとく
sudo ln -s /usr/bin/php74 /usr/bin/php

1. microsoft.comからWindows用のドライバを落としてきて適当な場所に展開する
2. コマンドプロンプトでphp -r "phpinfo()" > phpinfoする
3. 上記で吐き出した結果をThreadで検索、Thread SafeかUnSafeか調べる
4. 落としてきたドライバからバージョンとThreadが合うものを探してphp\extに配置
5. php.iniのDynamic Extensionsセクションに次のような感じで記述

# php_と.dllは勝手に補完される
extension=pdo_sqlsrv_74_ts_x64
extension=sqlsrv_74_ts_x64

1. php -r "phpinfo()" > phpinfoしてsqlsrvが確認できたらOK

TSの情報に乏しく無駄にハマったのでメモ程度に

• 確認環境
• サンプルコード
  • Child.tsx
  • Parent.tsx

確認環境

サンプルコード

• 今回はサンプルとして<input />をラップしたコンポーネントのフォーカスを変更するためにrefを使います

Child.tsx

import { forwardRef } from 'react';

export type ChildProps = {
  type: 'text' | 'password' | 'number';
  onChange(changeValue: string): void;
};

// function 記法でないと ESLint が怒るので無効化
// eslint-disable-next-line react/display-name
export const Child = forwardRef<HTMLInputElement, ChildProps>(
  // このpropsに明示的な型定義がないと型エラーが出る
  (props: ChildProps, ref) => {
    const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
      props.onChange(ev.target.value);
    };

    return (
      <input
        ref={ref}
        type={props.type}
        onChange={(ev) => onChange(ev)}
      />
    );
  }
);

Parent.tsx

• 下側の<Child />だけフォーカスが行くようにしてます

import { useEffect, useRef } from 'react';
import { Child } from './Child';

export const Parent = () => {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    ref?.current?.focus();
  }, []);
  return (
    <ul>
      <li>
        <Child
          type={'text'}
          onChange={(ev) => console.log('top input', ev)}
        />
      </li>
      <li>
        <Child
          ref={ref}
          type={'text'}
          onChange={(ev) => console.log('bottom input', ev)}
        />
      </li>
    </ul>
  );
};