2021年8月29日日曜日

React:コンポーネントのライフサイクル

1.Reactのコンポーネント

ReactではUIを構成する要素のことをコンポーネント(Component)と呼びます。

具体的にはボタンやヘッダー、コンテナなどのことです。Reactで開発する利点としてはそれらのUIパーツをそれぞれ細かくコンポーネントに分けておくことで、再描画が必要なものだけに更新を走らせてパフォーマンスをチューニングができます。

2.コンポーネントのライフサイクル

ライフサイクルにはまず、大きく分けて3つの期間があります。

それぞれ順に

Mounting、Updating、Unmountingと呼ばれます。

2.1.Mounting

UIにコンポーネントが描画されるまでの準備期間。

使用できるメソッド:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

2.2.Updating

UIにコンポーネントが表示されていて、基本的にユーザーが操作できる期間。

使用できるメソッド:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

2.3.Unmounting

他のコンポーネントに切り替える前に現在のコンポーネントを破棄するための期間。

使用できるメソッド:

componentWillUnmount()

3.ライフサイクルメソッド(基本編)

3.1.constructor()

Mounting時

JSXおよびTSXのフォーマットではまず見かけません。JavaScriptでReactを書く場合にstateの初期化やactionのバインドのために使用します。

3.2.componentDidMount()

Mounting時

1度目のrenderが呼ばれた後に1度だけ呼ばれるメソッドです。この時点ではまだUIに表示されていません。データをフェッチしたり、アニメーションやタイマーをセットする場合はここで行います。このメソッドからはDOMが作成されていますが、直接のDOM操作などライフサイクルを外れる処理は原則避けましょう。

3.3.render()

Mounting/Updating時

コンポーネントの根幹となる、一番呼ばれるかつ必須のメソッドです。ここに書いてあるコードが実際にUIに現れるものになります。

renderはpropsやstateが更新されるたびに呼ばれるため、ここで直接propsやstateを操作する処理を書いてはいけません。新しい関数を定義するのも避けましょう。そしてAPIのように、propsやstateの値が変わっても結果は冪等であるべきです。

※冪等：べきとうは、大雑把に言って、ある操作を1回行っても複数回行っても結果が同じであることをいう概念です

3.4.componentDidUpdate()

Updating時

第一引数に1つ前のprops、第二引数に1つ前のstate、第三引数にsnapshot(後述のgetSnapshotBeforeUpdateの返り値)が入ってきますが、必要なければ省略可能です。これもよく呼ばれるメソッドなため、パフォーマンスを低下させるpropsやstateを更新する処理は最低限にしましょう。また、if文や後述のshouldComponentUpdateで無駄な処理を避けることができます。

3.5.componentWillUnmount()

Unmounting時

現在のコンポーネントを破棄する直前に呼ばれるメソッドで、アニメーションやタイマーを設定していた場合はここで破棄します。そうしないと新しいコンポーネントのサイクルが始まった後も、その分のメモリが開放されないままになってしまいます。ちなみにもうrenderが呼ばれることはないので、ここでpropsやstateを変更しても意味がありません。

4.ライフサイクルメソッド(上級編)

4.1.getDerivedStateFromProps()

Mounting時

これだけはstaticです。第一引数に次のprops、第二引数に前のstateが入ってきます。propsの値によってstateの値を更新したい場合、propsが更新されてrender()が呼ばれる前にstateの更新が必要かどうかをチェックするメソッドです。更新があれば更新後のstate、なければnullを返します。

4.2.shouldComponentUpdate()

Updating時

第一引数に次のprops、第二引数に次のstateを持っており、前のpropsやstateの値やアドレスと比較し、変更がなければfalseを、あればtrueを返します。falseが返るとこのあとのrender()は呼ばれず再描画は行われません。PureComponentを使うと自動的にこの比較を行ってくれるため、自分で書くケースは稀ですが要のメソッドです。

4.3.getSnapshotBeforeUpdate()

Updating時

このメソッドの返り値はcomponentDidUpdateの第三引数に渡ります。具体例に挙げられているようなスクロール位置など、引き継ぎたい値がある場合に使います。

また上記に上げた以外で、エラーをハンドリングしたい場合はcomponentDidCatch()というメソッドが用意されています。

5.使用しないライフサイクルメソッド

補足として、React v16.2までで使用されていて、現在は使用を控えたほうがいいメソッドもここで上げておきます。古い資料ではこれらの記述がありますが、見かけても読み飛ばしてよいです。

5.1.getDefalutProps()

一度だけ呼ばれ、propsが渡されなかった場合に使う値を指定できます。constructorや、TypeScriptではデフォルト値を指定することで解決可能。

5.2.getInitialState()

Mounting時にまず呼ばれ、描画前にstateを変更するためのメソッド。TypeScriptではstateに初期値を指定できるので特に必要性を感じることはありません。

5.3.componentWillMount()

v16.3以降ではUNSAFE_componentWillMount()に改名されており、v17で完全に削除予定。1回目のrenderが呼ばれる直前に実行されます。

5.4.componentWillUpdate()

v16.3以降ではUNSAFE_componentWillUpdate()になっており、これもv17から削除予定です。使いたいと思ったら代わりにcomponentDidUpdate()やgetSnapshotBeforeUpdate()を使用すべき。

5.5.componentWillReceiveProps()

v16.3以降ではUNSAFE_componentWillReceiveProps()で、v17から削除予定。componentDidUpdate()またはgetDerivedStateFromProps()で代用できます。

2021年8月26日木曜日

React:開発手順

1.準備

簡単なデザインと、JSONデータを準備する。
設計書もよいが、テスト駆動型でかつアジャイルで開発するほうが、よりよいものができる

2.UI をコンポーネントの階層構造にする

モックを形作っている各コンポーネント（構成要素）を四角で囲んで、それぞれに名前をつけていくことです。

JSON のデータモデルをユーザに向けて表示することはよくありますので、モデルを正しく構築されていれば、UI（つまりコンポーネントの構造）にもうまくマッピングされるということが分かるでしょう。これは、UI とデータモデルが同じ情報の構造を持つ傾向があるためです。UI を分割して、それぞれのコンポーネントがデータモデルの厳密に一部分だけを表現するよう、落とし込みましょう。

5 種類のコンポーネントがこのアプリの中にあることが見て取れます。

FilterableProductTable（オレンジ色）：このサンプル全体を含む
SearchBar（青色）：すべてのユーザ入力を受け付ける
ProductTable（緑色）：ユーザ入力に基づくデータの集合を表示・フィルタする
ProductCategoryRow（水色）：カテゴリを見出しとして表示する
ProductRow（赤色）：各商品を 1 行で表示する

ProductTable を見てみると、表のヘッダ（「Name」や「Price」のラベルを含む）が単独のコンポーネントになっていないことがわかります。

これは好みの問題で、コンポーネントにするかしないかは両論あります。今回の例でいえば、ヘッダを ProductTable の一部にしたのは、データの集合を描画するという ProductTable の責務の一環として適切だったからです。

しかしながら、将来ヘッダーが肥大化して複雑になった場合（例えばソート機能を追加した場合など）は、ProductTableHeader のようなコンポーネントにするのが適切になるでしょう。

さて、モック内にコンポーネントを特定できましたので、階層構造に並べてみましょう。モックで他のコンポーネントの中にあるコンポーネントを、階層構造でも子要素として配置すればいいのです。次のようになります。

FilterableProductTable

SearchBar
ProductTable

ProductCategoryRow
ProductRow

3.Reactで静的なバージョンを作成する

データモデルを描画するだけの機能を持った静的なバージョンのアプリを作る際には、他のコンポーネントを再利用しつつそれらに props を通じてデータを渡す形で、自分のコンポーネントを組み上げます。

props は親から子へとデータを渡すための手段です。

state はユーザ操作や時間経過などで動的に変化するデータを扱うために確保されている機能です。今回のアプリは静的なバージョンなので、state は必要ありません。

コンポーネントはトップダウンで作っても、ボトムアップで作っても問題ありません。

つまり、高い階層にあるコンポーネント（例えば FilterableProductTable）から作り始めても、低い階層にあるコンポーネント（ProductRow など）から作り始めても、どちらでもいいのです。シンプルなアプリでは通常トップダウンで作った方が楽ですが、大きなプロジェクトでは開発をしながらテストを書き、ボトムアップで進める方がより簡単です。

ここまでのステップを終えると、データモデルを描画する再利用可能なコンポーネントのライブラリが手に入ります。このアプリは静的なバージョンなので、コンポーネントは render() メソッドだけを持つことになります。

階層構造の中で最上位のコンポーネント（FilterableProductTable）が、データモデルを props として受け取ることになるでしょう。元となるデータモデルを更新して再度 ReactDOM.render() を呼び出すと、UI が更新されることになります。このやり方なら、複雑なことをしていないので、UI がどのように更新されて、どこを変更すればよいか、理解できることでしょう。React の単方向データフロー（あるいは単方向バインディング）により、すべてがモジュール化された高速な状態で保たれます。

4.UI 状態を表現する state を決定

UI をインタラクティブなものにするためには元となっているデータモデルを更新できる必要があります。これは React なら state を使うことで実現できます。

適切に開発を進めていくにあたり、そのアプリに求められている更新可能な状態の最小構成を、最初に考えておいたほうがよいでしょう。

ここで重要なのは、DRY (don’t repeat yourself)の原則です。アプリケーションが必要としている最小限の状態を把握しておき、他に必要なものが出てきたら、そのとき計算すればよいのです。

例えば、TODO リストを作る場合、TODO の各項目を配列で保持するだけにし、個数のカウント用に別の state 変数を持たないようにします。その代わりに、TODO の項目数を表示したいのであれば、配列の length を使えばよいのです。

今回は、次のようなデータがあるとする

元となる商品のリスト
ユーザが入力した検索文字列
チェックボックスの値
フィルタ済みの商品のリスト

それぞれについて見ていき、どれが state になりうるのかを考えてみます。

各データについて、考えましょう。

親から props を通じて与えられたデータでしょうか？
もしそうなら、それは state ではありません
時間経過で変化しないままでいるデータでしょうか？
もしそうなら、それは state ではありません
コンポーネント内にある他の props や state を使って算出可能なデータでしょうか？もしそうなら、それは state ではありません

例で考えると

元となる商品のリストは props から渡されるので、これは state ではありません。
検索文字列とチェックボックスは時間の経過の中で変化し、また、算出することもできないため、state だと思われます。
最後に、フィルタ済みの商品のリストは state ではありません。何故ならば、元となる商品のリストと検索文字列とチェックボックスの値を組み合わせることで、フィルタ済みの商品のリストを算出することが可能だからです。

というわけで、state と呼べるのは次の 2 つです。

ユーザが入力した検索文字列
チェックボックスの値

5.state をどこに配置すべきか

アプリの各 state について、次の各項目を確認していきます。

その state を使って表示を行う、すべてのコンポーネントを確認する
共通の親コンポーネントを見つける（その階層構造の中で、ある state を必要としているすべてのコンポーネントの上位にある単一のコンポーネントのことです）
共通の親コンポーネントか、その階層構造でさらに上位の別のコンポーネントが state を持っているべきである
もし state を持つにふさわしいコンポーネントを見つけられなかった場合は、state を保持するためだけの新しいコンポーネントを作り、階層構造の中ですでに見つけておいた共通の親コンポーネントの上に配置する

それでは、例に適用してみましょう。

ProductTable は商品リストをフィルタする必要があり、SearchBar は検索文字列とチェック状態を表示する必要がある
共通の親コンポーネントは FilterableProductTable である
概念的にも、検索文字列とチェック状態が FilterableProductTable に配置されることは妥当である

state を FilterableProductTable の中に配置することが決まりました。では早速、インスタンス変数として this.state = {filterText: '', inStockOnly: false} を FilterableProductTable の constructor に追加して、初期状態をアプリに反映しましょう。その次は、filterText と inStockOnly を ProductTable と SearchBar に props として渡します。最後に、これらの props を使って ProductTable のフィルタ処理を行い、SearchBar のフォームにも値を埋めます。

6.逆方向のデータフローを追加

現在のバージョンのサンプルで文字を打ち込んだり、チェックボックスを切り替えてみると、React がその入力を無視することがわかります。これは意図的な挙動で、input の value props が、常に FilterableProductTable から渡された state と同じ値になるようにセットしてあるのです。

それでは、どんな挙動になってほしいのかを考えてみましょう。ユーザがフォームを変更するたびに、ユーザ入力を反映するように state を更新したいですね。コンポーネントの state を更新できるのは自分自身だけであるべきなので、FilterableProductTable は SearchBar にコールバックを渡しておいて、state を更新したいときに実行してもらうようにします。入力のたびに呼び出される onChange イベントを利用するとよいでしょう。このコールバックを実行された FilterableProductTable は、setState() を呼び出し、その結果としてアプリが更新されます。

2021年8月25日水曜日

React:デザインパターン

1.デザインパターンの重要性

デザインパターンとは、ソフトウェア開発において一般的に発生する問題に対する反復可能な解決策のことです。

デザインパターンは基本的なテンプレートとして機能し、与えられた要求に応じてプログラムの機能を構築することができます。

デザインパターンは、開発プロセスを高速化するだけでなく、コードの読みやすさやメンテナンスのしやすさを向上させます。

デザインパターンの一般的な例としては、SingletonパターンやGang-of-Fourパターンなどがあります。

ソフトウェア開発において、デザインパターンには2つの共通した役割があります。

開発者に共通のプラットフォームを提供する

デザインパターンは、標準的な用語や既知の問題に対する解決策を提供する。

ベストプラクティスの確保

デザインパターンは、広範な研究とテストの結果として作成されています。デザインパターンは、開発者が開発環境に容易に慣れることができるだけでなく、ベストプラクティスが守られていることを保証します。
その結果、エラーが少なくなり、適切なデザインパターンが実装されていれば簡単に回避できたであろう問題のデバッグや解明にかかる時間を節約することができます。

2.Reactjsの機能

reactは、Githubで公開されているcreate-react-appを使ってインストールできます。npmを使用すると、他のすべての依存関係を追加できます。

React.jsは、JSXを利用しています。これは、JavaScriptの構文拡張です。JavaScriptのフルパワーを備えており、Reactの「要素」と呼ばれるものを提供してくれます。

JSXの使用は必須ではありませんが、JSXが提供する便利な視覚支援とスタイリングオプションのため、好ましい方法です。また、有用なエラーメッセージや警告も表示されます。

React.jsの基本理念は、再利用可能なリアクトコンポーネントです。このコンポーネントベースのアプローチは、Webアプリケーションのリッチなユーザーインターフェースを構築するために活用できることがわかります。

これらのReactコンポーネントは、それ自体が小さなシステムであると考えることができます。各コンポーネントは、独自の状態、入力、出力を持ちます。

コンポーネントの入力は、プロップの形で取得されます。コンポーネントは、ブラックボックスと考えることができます。それぞれが独自の状態とライフサイクルを持っています。コンポーネントは簡単に構成することができます。

最終的なReactアプリは、保守性の高いコードで構成されています。

3.Reactのデザインパターン

3.1.ステートレスコンポーネント

ステートとは、コンポーネントにインポートされるデータのことです。通常、データはデータベースから取得されます。

コンポーネントには、ステートフルコンポーネントとステートレスコンポーネントという2つのタイプがあります。両者の違いは、単にステートがあるかないかだけです。

ステートレスコンポーネントでは、その内部でthis.stateに到達することはできません。

ステートレスコンポーネントは、機能的コンポーネントや提示的コンポーネントとも呼ばれます。Reactでは、このようなコンポーネントは常に同じものをレンダリングするか、propsで渡されたものだけをレンダリングします。

開発者としての目的は、たとえその特定のコンポーネントを再利用しなければならないシナリオがすぐになくても、ステートレスコンポーネントを作成することです。

多くの場合、開発者は、あるコンポーネントが状態を持つ必要があるかどうかを、コードを書き始めてから理解しますが、それは必ずしも事前に明確ではないからです。

階層構造のコンポーネントでは、親コンポーネントにできるだけ多くの状態を保持させ、ステートレスな子コンポーネントを作るのがベストな方法です。データの受け渡しはプロップで行います。

3.2.条件付きレンダリング

条件はソフトウェア開発者の武器の中で最も重要なツールです。

Reactコンポーネントを作成する過程で、状態に応じて特定のJSXコードをレンダリングする必要が生じることがよくあります。これを実現するのが、条件付きレンダリングです。

条件付きレンダリングは、ニーズに応じて個別のコンポーネントを作成し、アプリケーションに必要なものだけをレンダリングすることができるので、非常に便利です。

例えば、条件付きレンダリングを使って、ユーザーのログイン状態に応じて異なるメッセージをユーザーに表示することができます。メッセージは、 isLoggedIn というプロップの値に従います。

3.3.レンダリングプロップ

デザインパターンが共通の問題を解決するために存在することを説明しました。Reactでは、ロジックの繰り返しの問題を解決するためにRenderプロップが用意されています。

Reactの公式ドキュメントによると、レンダープロップは「値が関数であるプロップを使ってReactコンポーネント間でコードを共有するためのテクニック」と定義されています。

レンダープロップは、異なるコンポーネント間で同じ状態を共有することができるため、非常に便利なものです。各コンポーネント内のロジックをハードコーディングする代わりに、何をレンダリングするかを決定するために関数プロップを使用することができます。

Formik、React Router、Downshiftなど、レンダープロップを利用した人気のあるライブラリがあります。

3.4．制御されたコンポーネント

Webフォームは多くのアプリケーションで共通の要件であり、制御されたコンポーネントはフォームの状態を処理するためのReactの答えです。

コントロールされたコンポーネントは、プロップを通して状態を受け取ります。それは onChange のようなコールバックによって変更を通知することができます。親コンポーネントは、コールバックを処理し、自身の状態を管理することで、コントロールされたコンポーネントを制御することができ、その間、新しい値はコントロールされたコンポーネントにpropsとして渡されます。デフォルトでは、Reactフォームは制御されたコンポーネントと制御されていないコンポーネントの両方をサポートしています。制御されたコンポーネントを使用することを強くお勧めします。

次のコードスニペットは、制御されたコンポーネントを示しています。

<input type = "text" value = {value} onChange = {handleChange} />

3.5.Reactのフック

フックはReactの比較的新しい追加機能で、React 16.8で導入されました。

これらの機能により、開発者はクラスなしでReactを使用することができます。Effect Hook ( useEffect ) や State Hook など、さまざまなフックがあらかじめ用意されています。

利用可能なフックの完全なリストについては、 Hooks API Reference を参照してください。 Reactにあらかじめ用意されているフックとは別に、独自のフックを作成することもできます。これにより、コンポーネントのロジックを抽出し、再利用可能な関数を作成することができます。

フックはReactの歓迎すべき機能であり、開発者コミュニティはこの新しい機能を非常に熱心に評価しています。

しかし、フックの引数がオブジェクト、配列、関数である場合には、フックの扱いが少し難しくなることがあることを覚えておく必要があります。これでは少々混乱してしまいます。

一方で、カスタムフックは簡単で使いやすく、開発者にとっても大きなメリットがあります。

React:React

1.Reactとは

JavaScript フロントエンドフレームワーク

アプリケーションで各状態に対するシンプルな設計をすることで、React はデータが変更された時に、適切なコンポーネントだけを効率的に更新してレンダリングすることができる

自身の状態を管理するカプセル化されたコンポーネントを構築することで、それらのコンポーネントを呼び出し複雑なUI もコンポーネント呼び出しで作成できる

2.Reduxとは

Fluxアーキテクチャの一種

2.1.構成用要素

2.1.1.Reduce

状態を変化させる関数

引数

store 今の状態を示すオブジェクト
action どんな動作を行ったかを示すオブジェクト

ES2015仕様：Spread Operator

const hoge = [2, 3];
console.log(1, ...hoge, 4.5);

// 実行結果　[1,2,3,4,5]

const fuga = { name: 'Taro', age: 25 };
const piyo = { name: 'Jiro', location: 'Tokyo' };
console.log({ ...fuga, ...piyo });

// プロパティがかぶる場合、後のものが優先する
// 実行結果　{name: 'Jiro',age: 25 ,location: 'Tokyo' }

const myFunc = (x, y, z) => [x, y, z];
const age = [0, 1, 2];
mfFunc(...age);

// 実行結果　[0,1,2]

注意点

値渡が基本　オブジェクトや配列は参照渡しとなるため、Object.assignを用いる

onst target = { a: 1, b: 2}
const source = { b: 3, d: 4}

const returnedTarget = Object.assign(target, source);

console.log(target);
console.log(source);
console.log(returnedTarget);

// $ node test.js
// { a: 1, b: 3, d: 4 }
// { b: 3, d: 4 }
// { a: 1, b: 3, d: 4 }

let user = {
    username: "John",
};

let user_id = {
    id: 1,
};

let email = {
    email: "john@example.com",
};

user = Object.assign(user, user_id, email);

console.log(user);

  //結果
  //{ username: 'John', id: 1, email: 'john@example.com' }

Object.assignを使った例(form)

const form = {
    firstName: null,
    lastName: null,
    Email: null,
    zipCode: null,
    Address: null,
    Phone: null
}

const input = {
    firstName: 'John',
    lastName: 'Doe',
    Email: 'john@example.com'
}

Object.assign(form, input)

console.log(form)

// $ node test.js
//  {
//  firstName: 'John',
//  lastName: 'Doe',
//  Email: 'john@example.com',
//  zipCode: null,
//  Address: null,
//  Phone: null
// }

2021年8月24日火曜日

JS:Atomic Design

1.Atomic Designのコンポーネント

Atomic Designで有名なのは、UIの構造を次の5段階で考える

Atoms（原子）
Molecules（分子）
Organisms（有機体）
Templates（テンプレート）
Pages（ページ）

あらゆるものが原子の集まりでできているように、ページもAtoms（原子）の集まりであると考え、Atomsが組み合わさってMolecules（分子）になり、Molecules（分子）が組み合わさってOrganisms（有機体）となる。

Organisms（有機体）の集まりでページのフレームであるTemplates（テンプレート）を作るが、このTemplatesは具体的なコンテンツの入っていない空っぽのページの枠組み。そこに具体的なテキストや画像を入れ込んでPages（ページ）を作る……というふうに、UIを階層構造で考えます。

1.1.Atoms（原子）の例

Atomsの例は、検索フォームのパーツです。ここでは「ラベル」「テキスト入力欄」「ボタン」というように、これ以上分けられないような単位のUIをAtomとしています。

1.2.Molecules（分子）の例

「ラベル」「テキスト入力欄」「ボタン」といったAtomを組み合わせて作った「検索フォーム」がMoleculeです。

1.3.Organisms（有機体）の例

そして、この「検索フォーム」やその他「メニュー」や「サイトのロゴ」など、他のMoleculeらが集まってできている「ヘッダ」がOrganismです。

1.4.Templates（テンプレート）の例

Organismを組み合わせ、ページの枠組みを構成します。ただ中身はすべてダミーです。これがTemplate。

1.5.Pages（ページ）の例

Templateに具体的なコンテンツを入れ込んだのが、最終的なアウトプットとなるPageです。

このように、UIを分解して考え、他の画面でも共通で使えるAtom、Moleculeをどう設計するか、細部を作りながら全体を俯瞰し、また細部が適切かどうか、具体的にコンテンツを入れながら考えるというのが、Atomic DesignのUIデザイン方法論です。

このようにしてUIを考え、サイト全体として共通のUIライブラリを作り上げます。

React:React + Material-UI

ReactとMaterial-UIを利用した管理画面などを作成することが多くなりました

また、前提としてJavaScriptやTypeScriptの知識があるとより分かりやすいです。

1.アプリの作成

Create React Appで新しいReactアプリを作成します。

npx create-react-app react-material-ui-sample --template typescript

プロジェクトのディレクトリへ移動して実行します。

cd react-material-ui-sample
npm start

2.ディレクトリ構成

ディレクトリはあまりネストさせすぎずシンプルな構造にしました。
コンポーネントの分け方はAtomic Designを参考にしています。

3.ルーティング

ルーティングを実装するためのライブラリをインストールします。

npm install --save react-router-dom
npm install --save-dev @types/react-router-dom

4.Material-UIを導入

Reactアプリの準備が出来たので、Material-UIを導入していきます。

4.1.Material-UIをインストール

npm install --save @material-ui/core @material-ui/icons

4.2.フォントを導入

Material-UIと相性の良いGoogle日本語フォントとフォントアイコンを導入しておきます。public/index.htmlのヘッダーにCDNのURLを追加します。

index.html

<head>

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

</head>

4.3.テンプレートを作成

src/components/templates/にページのテンプレートを作成します。Material-UIが公開しているテンプレートを参考に実装します。

import React from "react";
import clsx from "clsx";
import { createTheme } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Container from "@material-ui/core/Container";
import { Link } from "react-router-dom";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import IconButton from "@material-ui/core/IconButton";
import HomeIcon from "@material-ui/icons/Home";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";

const drawerWidth = 240;

const theme = createTheme({
  typography: {
    fontFamily: [
      "Noto Sans JP",
      "Lato",
      "游ゴシック Medium",
      "游ゴシック体",
      "Yu Gothic Medium",
      "YuGothic",
      "ヒラギノ角ゴ ProN",
      "Hiragino Kaku Gothic ProN",
      "メイリオ",
      "Meiryo",
      "ＭＳ Ｐゴシック",
      "MS PGothic",
      "sans-serif",
    ].join(","),
  },
  palette: {
    primary: { main: colors.blue[800] }, // テーマの色
  },
});

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: "flex",
    },
    toolbar: {
      paddingRight: 24,
    },
    toolbarIcon: {
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end",
      padding: "0 8px",
      ...theme.mixins.toolbar,
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      transition: theme.transitions.create(["width", "margin"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`,
      transition: theme.transitions.create(["width", "margin"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    menuButton: {
      marginRight: 36,
    },
    menuButtonHidden: {
      display: "none",
    },
    title: {
      flexGrow: 1,
    },
    pageTitle: {
      marginBottom: theme.spacing(1),
    },
    drawerPaper: {
      position: "relative",
      whiteSpace: "nowrap",
      width: drawerWidth,
      transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerPaperClose: {
      overflowX: "hidden",
      transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      width: theme.spacing(7),
      [theme.breakpoints.up("sm")]: {
        width: theme.spacing(9),
      },
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      height: "100vh",
      overflow: "auto",
    },
    container: {
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4),
    },
    paper: {
      padding: theme.spacing(2),
      display: "flex",
      overflow: "auto",
      flexDirection: "column",
    },
    link: {
      textDecoration: "none",
      color: theme.palette.text.secondary,
    },
  })
);

const Copyright = () => {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <Link color="inherit" to="/">
        管理画面
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
};

export interface GenericTemplateProps {
  children: React.ReactNode;
  title: string;
}

const GenericTemplate: React.FC<GenericTemplateProps> = ({
  children,
  title,
}) => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);
  const handleDrawerOpen = () => {
    setOpen(true);
  };
  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <ThemeProvider theme={theme}>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="absolute"
          className={clsx(classes.appBar, open && classes.appBarShift)}
        >
          <Toolbar className={classes.toolbar}>
            <IconButton
              edge="start"
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              className={clsx(
                classes.menuButton,
                open && classes.menuButtonHidden
              )}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              className={classes.title}
            >
              管理画面
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
          }}
          open={open}
        >
          <div className={classes.toolbarIcon}>
            <IconButton onClick={handleDrawerClose}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
            <Link to="/" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </Link>
            <Link to="/products" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </Link>
          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
          <Container maxWidth="lg" className={classes.container}>
            <Typography
              component="h2"
              variant="h5"
              color="inherit"
              noWrap
              className={classes.pageTitle}
            >
              {title}
            </Typography>
            {children}
            <Box pt={4}>
              <Copyright />
            </Box>
          </Container>
        </main>
      </div>
    </ThemeProvider>
  );
};

export default GenericTemplate;

簡単に記載している

2021年8月22日日曜日

JS:Babel

1.Babelとは

Babel(読み方：「バベル」)は、次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツールである。次の世代の標準機能を使って書かれたコードを、それらの機能をサポートしないブラウザでも動くコードに変換する。

JavaScriptのコードを新しい書き方から古い書き方に変換するツールである。
具体的には、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。

主に、es2015以降の新しい構文をes5の構文に変換するのに利用されています。もちろん、設定によってはes2018→es2015といった記述方法も可能です。その他にも、ReactのJSXやTypeScriptの変換にも使われます。

2.インストール

package.jsonがある場所で以下のコマンドを実行する。babel-cliはbabelをcliで実行するための本体モジュールで、babel-preset-envはES6の内容をES5に変換する情報のようなもの。

npmで三つのパッケージをインストールします。

$ npm install @babel/core @babel/cli @babel/preset-env --save-dev

@babel/core: Babel本体

@babel/cli: コマンドライン操作用

@babel/preset-env: 変換内容設定用

3..babelrcによる設定

Babelはそのままでは何も変換してはくれないので、どのように変換するのかを事前に設定します。作業フォルダのルートに.babelrcを作成し、JSON形式で設定情報を追記していきます。

{
"presets": ["@babel/preset-env"]
}

4.プリセット(Presets)の基本

プリセットは、Babelが変換処理を行う際に利用するプラグインのコレクションです。設定情報を基に、コンパイルに必要なプラグインのリストをBabel本体に渡す役割をしているそうです。公式では下記4つのプリセットが用意されています。その他にもいろいろ開発されています。

@babel/preset-env: ECMAScript用
@babel/preset-flow: Flow用
@babel/preset-react: React用
@babel/preset-typescript: Typescript用

利用したいプリセットをインストールした後、配列で名前を指定します。後ろから順に適用されます。下記のケースでは、typescript → react → env の順で実行されます。

{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

各プリセットにて詳細な設定をしたい場合は、配列で囲みます。0番目に名前、1番目に設定情報です。

{
"presets": [
["@babel/preset-env", {<@babel/preset-envの設定値>}],
"@babel/preset-react",
"@babel/preset-typescript"
]
}

4.1.@babel/preset-env

@babel/preset-envは、出力したいECMAScriptのバージョンを指定するためのプリセットです。基本的には、サポートしたい範囲（ブラウザバージョンやブラウザシェア、サポートの可否など）を指定します。指定内容に応じて適切なバージョンのJSに変換されるようにしてくれます。特に何も指定しない場合は、一律es5の構文に変換されます。

下記の設定は、Chrome40以上・iOS10以上をサポート対象とした場合です。es5で出力されました。

{
"presets": [
["@babel/preset-env", {
"targets": [
"chrome 40",
"iOS 10"
]
}
]
]
}

cover 80% in JPは、ブラウザシェア率を基に日本で80%のユーザをカバーするという指定です。es5で出力されました。モダンブラウザの新しいバージョンを指定すると、es2015以降のバージョンで出力されます。

4.2.PolyfillとuseBuiltInsオプション

初期設定では、@babel/preset-envが行うのは構文の変換のみです。Promiseやgeneratorなど、新たに追加された機能の変換には対応していません。オプションで、useBuiltInsにusageを指定すると、必要に応じてPolyfill(代替コード)に変換してくれます。（初期値はfalse）

{
"presets": [
["@babel/preset-env", {
"targets": [...],
"useBuiltIns": "usage"
}
]
]
}

@babel/polyfill

2019年2月現在、「useBuiltIns:'usage'」の項目には「experimental(実験的)」とあります。お使いの環境でうまく動かなかった場合は、@babel/polyfillと「useBuiltIns:'entry'」の合わせ業もあります。

@babel/polyfillをインストール

$ npm install @babel/polyfill --save

アプリ（サイト）内の一箇所にだけ、下記インポート文を記述します。複数個所に記述するとエラーとなるそうです。この記述は、必要に応じて個別のpolyfillのインポート文に書き換えられます。

// 記述する内容
import "@babel/polyfill";

// 最終的に個別のimport文に変換される
import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

4.3.設定ファイルをpackage.jsonにまとめる

設定ファイルを増やしたくない場合は、package.jsonにまとめることも可能です。babelという項目を追加します。記述方法は.babelrcの場合と同様です。またwebpack同様、コマンドをscriptsに登録して利用することも可能です。

{
"name": "sample",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "babel ./src/index.js --out-file ./dist/index.js"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.4",
"@babel/preset-env": "^7.3.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"babel": {
"presets": ["@babel/preset-env", {
"targets": [...],
"useBuiltIns": "usage"
}
]
}
}

以上がBabelの基本（の一部）となります。設定方法一つとっても手段が多種多様で迷います。。。

JS:Nodeと非同期処理

NodeJSでは、パフォーマンスを優先するためにファイルやネットワーク、データベースの入出力など時間のかかる処理には非同期処理になる仕様になっている

同期処理に対応するために
「XXXXSync」の関数が用意されている

例えば
　fs.readFile() : ファイルを読み込む非同期処理

　fs.readFileSync() : ファイルを読み込む同期処理

const fs = require('fs')
// 同期処理
const data = fs.readFileSync('gggg.tat', 'utf-8')
console.log(data)
// 非同期処理
fs.readFile('gggg.tat', 'utf-8', readHandler)
function readHandler(err, data) {
  console.log(data)
}

無名関数

const fs = require('fs')

// 非同期処理
fs.readFile('gggg.tat', 'utf-8', function (err, data) {
  console.log(data)
})

アロー関数

const fs = require('fs')

// 非同期処理
fs.readFile('gggg.tat', 'utf-8', (err, data) => {
  console.log(data)
})

コールバック地獄

const fs = require('fs')

// 非同期処理
fs.readFile('a.tat', 'utf-8', function (err, data) {
  console.log('a.txtを読みました', data)
  fs.readFile('b.tat', 'utf-8', function (err, data) {
    console.log('b.txtを読みました', data)
    fs.readFile('c.tat', 'utf-8', function (err, data) {
      console.log('c.txtを読みました', data)
    })
  })
})

Promise対応

const fs = require('fs');

// Promise
function readFile_pr(fname) {
  return new Promise((resolve) => {
    fs.readFile(fname, 'utf-8', (err, s) => {
      resolve(s)
    })
  })
}

// テキストファイルを呼び込む
readFile_pr('a.txt')
  .then((text) => {
    console.log('a.txtを読みました', text)
    return readFile_pr('b.txt')
  })
  .then((text) => {
    console.log('b.txtを読みました', text)
    return readFile_pr('c.txt')
  })
  .then((text) => {
    console.log('c.txtを読みました', text)
  })

Generatorを使った場合

const fs = require('fs');

// 非同期処理の完了を待って関数の続きを呼び関数
function read_gfn(g, fname) {
  fs.readFile(fname, 'utf-8', (err, data) => {
    g.next(data)
  })
}

// Generator関数を定義する
// yieldで停止
const g = (function* () {
  const a = yield read_gfn(g, 'a.txt')
  console.log(a)
  const b = yield read_gfn(g, 'b.txt')
  console.log(b)
  const c = yield read_gfn(g, 'c.txt')
  console.log(c)
})()

g.next()  // yieldとyieldとの間を実行

ES2017のasync/awaitを使った場合

// ES2017のasync/awaitを使った場合
const fs = require('fs');

// Promiseで非同期のファイルを読み込む処理
function readFileEx(fname) {
  return new Promise((resolve, reject) => {
    fs.readFile(fname, 'utf-8', (err, data) => {
      resolve(data)
    })
  })
}

// すべてのファイルを逐次読み込むasync関数を定義
async function readAll() {
  const a = await readFileEx('a.txt')
  console.log(a)
  const b = await readFileEx('b.txt')
  console.log(b)
  const c = await readFileEx('c.txt')
  console.log(c)
}

readAll()

ES2017ではプログラムが読みやすくなる

2021年8月20日金曜日

ご冥福をお祈りいたします

千葉真一さんの訃報に驚く
まさかの新型コロナウィルスに感染して肺炎で亡くなる
子供たちはみな、芸能界入りをしているので、アクションを活かした活動をしてくれるだろう

でもとても残念

健康体なので、ワクチン接種をしていないのは・・・さらに残念
ワクチン接種をしていればと思ってしまう

キーハンターをみてファンになりました
色々なアクションを見て感動しました

笑福亭仁鶴さんが、病気で亡くなる
話術が好きで、司会をしていた番組はよく観ていました
面白い話で、しかも分かりやすい

お二人で楽しんだ日々、忘れません

感動をありがとう

2021年8月19日木曜日

感染対策は限界か？

感染対策、国などをみていると、全く何もしていない
柔軟に対応することができないようだ

なぜできないのかといえば、形式にこだわり、官僚や政治家のプライドで行動しているからだ
何をいなすべきかをよく知っていれば、柔軟に対応させることが重要

提言としては

緊急事態宣言の全国に展開
解除条件は医療を圧迫させない
個人の行動および店舗などの法的規制
国民の安全保障法の設立
必要な医療などを確保するために人的・設備補充の拡充
国民の安全保障法に基づく、医療・企業などの支援
大企業に対してはテレワークをすること
テレワークができない大企業には税金をかける
中小企業には医療関係の製造などを行わせる(補助金あり)
大企業はすべて国の事業を行う(補助金なし)

コロナで守るべきものは医療など、生活に重要なものである

2021年8月15日日曜日

コロナ対策

雨がよく降りだし、各地で大雨により被害が出ている
川の氾濫などで冠水や山などの土砂崩れ、テレビで観ているだけで、心が痛む

何が起きるかわかりません

行動する際は情報を得て、動きましょう

新型コロナウィルス、デルタ株になり、感染者が急増
ウィルスがものにつくので、これでは感染者が急増するのは当然かもしれない
通販や宅配サービスに対して対策が必要だ

ワクチン接種を14日に受ける
打った箇所が筋肉痛で、腕を上げにくい、翌日から徐々に痛みが緩和されてきました
倦怠感はないが、眠くなり、接種を受けた日は帰宅後、2時間ほどを寝ると頭がすっきりする
1回で、効き目がある雰囲気を感じる

デルタ株は怖いので、今後も感染には気を付けて行動する必要があります
油断は大敵
自粛疲れで行動すれば、自分や周りの人の命を危険にさらす行為です
慎重に行動しましょう
人のいないところでストレス発散・・・といって人のいないところはないです

就活の際の注意点

日本という国は何事も形式にとらわれる
その代わり本質というものをみない
それによって、問題が出てくることが多い

このような社会では形式に合わせれば、何事にも傾向と対策が行える

就職活動において、相手を知れば傾向が立てやすい
まず大企業ほど、形式主義、そして人事も専門家ではない
人事をしている人間も、教育を受けて形式的なものしかできないのだ
人事の専門家と名乗る人は多いが、ほとんど形式主義のみで本質を見ることができない

では形式とは何だろうか？

学歴などの形式があっていること
経歴が形式にあっていること
面接の際の容姿(服装や髪形などのこと、顔だちなどの容姿ではない)や、言葉遣い、受け答え

面接をする人が形式主義なので、それに合わせて面接を受けるものも形式に合わせる
また、これは履歴書などもそのようにする

変わった質問をする場合もあるが、これは単なる人事での標準的な傾向であり、特別なことではない
また、今は、変な質問はハラスメントになるので、行えない、なぜなら、面接の際に面接の受けるものが録音をしている場合もあるからだ

何事にも傾向と対策

面接を受けた場合を想定して、面接の受け答えの対策をするときは、自分で録画して対策を立てましょう
回答をする際、顔の表情が変わりすぎる人もいますので

女性の場合、つい顔に出してしまう場合があるので気を付けましょう

2021年8月10日火曜日

業務委託契約について

ビジネスではないが
在宅の仕事関係が増えている昨今、それが業務委託という契約に基づいていることを知らない人が多い。

フリーランスなど在宅関係はほとんど、業務委託です。

1.業務委託契約には「委任契約型」と「請負契約型」がある

業務委託契約とは、自社で対応できない業務を、外部企業やフリーランサーに委託する契約です。また、雇用契約を結ぶのではなく、特定の業務を受託者が受託することで契約が成立します。

業務委託契約の主な種類として、「請負契約型」と「委任契約型」があります。それぞれの特徴ついては詳しく後述しますが、最も重要なポイントは「成果物の完成義務の有無」です。契約を締結する際は、業務内容によってどちらの性質に近いか決定し、契約書を作成する必要があります。

1.1.成果物の完成責任が発生する「請負契約型」

請負契約型では、成果物を完成されなければ報酬を受け取ることができない契約です。例えば、システムエンジニアが納期までにプログラムを完成させることで報酬を受け取るといった契約があてはまります。

また、請負型契約は、欠陥のない成果物を納品する責任を負い、欠陥があった場合には補修や損害賠償の義務を負う必要があります。また、成果物が完成しない間は、契約を解除できます。

1.2.完成義務が発生しない「委任契約型」

委任契約型は、契約期間中の断続的な業務に対して、一定額を受け取るといった契約です。例えば、受付業や事務作業などがあります。成果物がない業種で、一定期間業務遂行が行われる契約です。

2.業務委託契約のメリット・デメリット

外部企業や個人と業務委託を結ぶことは、企業にとってどのようなメリット・デメリットがあるのでしょうか。具体例を紹介します。

2.1.業務委託のメリット

・専門性の高い人材の確保

業務委託を活用すれば、スキルや専門知識を要する特定の業務を適した人材に委託することができます。高度な専門性を持つ人材に依頼することで、社内リソースのみでは実現できない業務を遂行できるだけでなく、他の従業員がコアな業務に注力できるようになります。

・コスト削減

専門性のある人材を育てようとすると、採用、育成、常時雇用と様々なコストがかかります。業務委託ではそれらの人件費を削減でき、雇用関係を結ぶわけでもないので、社会保険料といった費用も削減できます。

・必要なときだけ委託できる

継続的な雇用は必要ないので、必要になったときにだけ契約を結ぶことが可能です。一度依頼してみて自社と合わなかった場合は契約を打ち切ることができる流動性もメリットのひとつです。

2.2.業務委託のデメリット

・社内ノウハウの欠如

社外に専門性の高い業務を委託することで、そのノウハウや経験が社内に蓄積されないのはデメリットといえます。その分野はずっと業務委託することになったしまうため、継続的にみると逆にコストが高くなってしまうことも。

・クオリティの管理

業務委託契約では指揮命令権が発生せず、受託者の裁量によって仕事が進められるため、クオリティの担保が難しいという面もあります。自社に委託のノウハウがなかったり、初めての外注先に委託したりする場合は、着手前に綿密な打ち合わせが必要です。

・価格設定が困難

社内に専門家のいない業務を委託する場合、委託の適正報酬の相場がわからないといった声もよく聞かれます。委託する業務の専門性が高ければ高いほど報酬も高額になりますので、かえってコストが高くついてしまうこともあります。

3.業務委託契約の法律的解釈

実は、業務委託契約という言葉は、民法やその他の法律で明確に定められているものではありません。

この性質から、契約内容を完全に民法に任せることが難しくなるので、契約書面に書かれている契約内容がより重要性も持ってくるのです。

契約書があってもトラブルが起こった場合は、民法上の「請負契約」と「委任契約」のうち、委託したい業務内容と近い方を参照し、解決をはかります。

そのため、契約書を作成する時点で、委託業務の内容が請負契約と委託契約のどちらに近いか決定し、その要素を書面に盛り込むのが一般的です

4.業務委託契約の注意点

企業にとってメリットも多い業務委託契約ですが、締結には注意が必要な点も。初めての業務委託の場合には、以下のような点に留意してください。

4.1.請負契約と委任契約のどちらに近いか決定する

業務内容によって請負契約か委任契約かを決定する必要性を説明しました。なぜかというと、トラブルが起こった際に法律の定めに従って解決をはかるためです。

前述の通り、業務委託契約は明確に法律の定めがないため、基本的には委託契約書の内容によって解決をはかります。

しかし、契約書に記載ないことでトラブルが起こってしまった場合、請負契約と委任契約の性質が近い方の民法を採用して解決をはかるという方法が一般的です。そのため、契約書作成の段階でどちらに近いか決定しておくことが重要なのです。

4.2.労働契約と判断されないようにする

業務委託契約をしても、契約者同士は雇用関係にはあたらないため、依頼の受託者は労働法上の保護を受けられません。

しかし、業務委託でも契約内容に「使用従属性」が認められる場合は、労働者とみなされ労働法上の保護対象となる可能性があります。

一例として、勤務場所や時間が拘束されている、指揮監督の程度が強い、専属性がある、就労規則が適用されるといった契約内容が含まれると、使用従属性が認定されやすくなります。

労働契約とみなされた場合、各種社会保険が適用となったり、有休や残業代の請求が可能となったりします。

5.業務委託契約書の雛形・書き方

業務委託契約書で一般的に記載される内容は、以下のようなものがあります。

①委託者・受託者の署名・名称

契約書の上部に名称の記載欄、下部に署名欄を設けて、捺印することが慣例です。

②契約目的

委託者から受託者に特定業務の委託をする契約であることを記載します。

③委託業務の内容・遂行方法

業務の種類や業種など、業務の内容がわかるよう詳しく説明します。特に委託対象外となる業務を明記したいときは、こちらに記載してもいいでしょう。

④契約期間・納品期日

業務の遂行期間や納品日を記載します。契約期間満了後の自動更新や、途中解約についても記載事項があればこちらに追加します。

⑤報酬や委託料・支払い期間・支払い方法

報酬や委託料の具体的な金額を記載します。あわせて、経費の請求や源泉徴収、支払い方法と期日についても言及しておきます。

⑥再委託

受託者が、さらに別の受託者に再委託することが許されるか是非を記載します。

⑦権利の帰属

納品物がある業務の場合、著作権や知的財産権といった権利が受託者と委託者のどちらに帰属するか記載します。

⑧禁止事項

業務遂行における禁止事項について記載します。

⑨契約の解除・変更

どのような場合に契約解除や変更が可能になるのか説明します。契約終了後の対応についても記載します。

⑩秘密保持

業務上知り得た情報の取扱いについて記載します。秘密保持については、重要性が高いため、別途具体的な内容を定めた「秘密保持契約」を結ぶこともあります。

⑪紛争・損害賠償

紛争や損害賠償請求について記載します。損害賠償は、どのようなケースで請求されるのか、また責任の内容についても記載しておきましょう。

⑫反社会勢力の排除

どちらか一方が反社会勢力に属するときに、もう一方が直ちに契約を解除できることを記載します。

⑬合意管轄

契約上でのトラブル時に、どこの裁判所を適用するか明記します。

6.業務委託契約の場合の源泉徴収

源泉徴収とは、報酬から差し引かれて納税される主に所得税のことです。

ある分野での業務委託を個人や法人に依頼した場合、委託企業は、源泉徴収を行う義務を負います。

ただし、全ての業務委託契約で源泉徴収が必要なわけではありません。

6.1.受託者が法人の場合

受託者が法人の場合、源泉徴収はほぼ必要ありません。委託先が法人か個人か判断しづらい場合は、定款や規約の有無、法人登記されているかどうか調査し判断しましょう。

6.2.受託者が個人の場合

個人と業務委託契約を締結する場合、下記の受託者だと源泉徴収の対象となります。

原稿料、講演料など
弁護士、税理士、公認会計士など特定資格保有者への報酬
社会保険診療報酬支払基金が支払いをする診療報酬
プロの野球選手、プロサッカー選手、プロテニス選手、モデル、外交員への報酬
芸能人や芸能プロダクションへの報酬
ホテルや旅館で行われる宴会で接客するホステスやコンパニオンへの報酬
プロスポーツ選手などの契約金
広告宣伝を目的とした賞金や馬主に支払う競馬の賞金

Visual Studio Code の自動更新の無効化

1.自動更新の無効化

自動更新を有効化をしておくと、依存関係などで想定外の問題が生じる場合があります。
それを防ぐため、バージョンの固定化が必要となります。

VSCode 画面上部のメニューバーの「表示」 > 「コマンドパレット」を選択し、「Open Settings (JSON)」を選択する。

設定のタブが開いたら、検索欄に「update」を入力し、表示される候補の中から「Extensions: Auto Update」、「Update: Mode」を見つける

どちらも自動更新を無効にします

2.拡張機能のバージョン指定

拡張機能の無効は上記の1において行っていますが、これだけではインストールを行ったタイミングによってバージョン差異が生じます。

拡張機能のバージョン指定の方法を紹介します。

Extensionsメニューでは拡張機能を表示し、拡張機能の管理メニューのアイコンを押下します。メニューを開いたら、「別のバージョンをインストール」を選択します

2021年8月5日木曜日

10代が活躍する東京オリンピック

スケボーをする10代の活躍を観ていると感動を覚える

スケボーは転べば怪我することもあるが、それでも技ができるまで挑戦をすることをインタビューで答えているし、さらに、動画で技を観て実践をしている

コーチやアドバイスをする人がいないのに、成長している
そして試合会場で選手同士がお互いに情報交換をしている
ここに10代などの目標感が現在日本の未来を考えるヒントがありそう

あまりにもアドバイザやコーチなどが多い日本
仕事にしても学校にしても、ありすぎのではないだろうか？

のびのびと自分のあくなき挑戦をしたいのは10代や今の若者でないだろうか？

昔は、やはり技をみて覚えていたはず
それが余りにも周りの人が多すぎていろいろなことを言われるので何もできなくなる若者が多いのではないだろうか

形式ばかりで中身がないことが多い
だからそのような競技は若者には人気が無くなる
仕事もそのように思える

10代のスケボーをする人のコメント、子供の会話と思えることがあるが、大人のような回答もあり、未来はよい
スケボー練習場を増やすことは良いことかもしれない
痛い目に合うから痛みを感じることができ、選手同士のコミュニケーションが良くなるのだろう
仕事にも痛みがあり、その痛みを知らなすぎるから、何かおかしくなるのは当然かもしれない

2021年8月1日日曜日

8月だ

五輪を観ていると、メダル数が気になってしまう
気にしなくてもよい競技もあるのだが、応援していると気にしてしまう

選手によっては緊張、調整不足など様々
期待されている競技では、取れないと予想していたらやはり当たる
調整ミスや相手のことなど対策が不十分にみえた

チャンスをいかに活かすかが重要だ
型にはまったことだけをしていてもそれだけでは不十分
それなりの対策が重要だ
フェシング、バスケット、男子サッカー、アーチェリーについては準備がしっかりしている
対応策を行ってこそ、力が発揮できる

水泳、バトミントンは全く何もできない状態になっている
予想通りだった
ランキングがいくら良くても、相手方の研究を徹底的に行うことが必要
そして必ず、対戦相手は一発勝負のように望んでくる
挑戦者のほうが有利がある

社会に出ても、努力しても報われないのではなく、型にはまったことだけをしていても力はそのまま、人格など様々なもので力を発揮しなければ報われない
家族、チームとして働くことが重要です

五輪を観ていて、家族など、周りの力の重要性が特に感じた

感染者が急増しているので今は何をすればよいのかわからなくなるのは当然かもしれない
暑さに負けてマスクをしないものも多数見受けられる
マスクをしていても会話が自然と大きな声になってしまう

などなど、油断を生じている

デルタ型はすれ違っても感染するとか・・・
驚異的に感染者が増えるので、以前からの予防策をしっかり行うことが必要だ
油断は禁物