tagty

• 追記
• noteにまとめました
• https://note.com/tagty/n/ncbfe96a3be23

課題

• ApolloClient とはなにか？
  • どのように使うのか？
  • どのような要素で構成されるのか？

tagty

GithubのPullリクエストのタイトルをCLIで検索するにはどうすればよいか？

• GithubのPull Requestを検索したいと思うことがあります。
• CLIで検索するにはどうすればよいでしょうか？

Github CLIとpecoを利用する

• 今回は、Github CLIとpecoを使って、fishのエイリアスを貼ろうと思います。
• 以下のように設定しました。

tagty

graphqlのクエリをfilterするにはどうすればよいか？

• React、apollo-clientを使って、フロントエンドを実装しているとする
• 子コンポーネントにデータを渡すときにすべてのデータを渡したくない場合がある
• どのように対処できるか？

graphql-anywhereのfilterを使う

• apolloのチュートリアルをコピーしてサンプルを作成した

tagty

前回は開発環境について説明した。
今回は本番環境について説明する。
本番環境ではコンパイルしたJSをviewが読み込むように設定する。
コードはこちら。

フロントエンド

こちらを参考にして、本番環境用のwebpackの設定をする。
webpack-merge を使って、環境ごとにwebpackの設定ファイルを作れるようにした。

tagty

2群に分けられた目的変数に対して、1つ以上の説明変数の影響を調べるにはどうすればよいか？

これを解析する手法として、ロジスティック回帰分析がある。
ロジスティック回帰分析をpythonで実行するにはどうすればよいか？

pandasでCSVを読み込み、statsmodelsのLogitを適用する

コードはgithubに公開する。
ロジスティック回帰分析は、2群に分けられた目的変数(従属変数)に対する，1つ以上の説明変数(独立変数)の影響を調べる統計解析の手法である。
今回はこのデータを用いる。

tagty

useFormikを使ったフォームのパフォーマンスを向上するにはどうすればよいのか？

useFormikを使って、大きなフォームを作っているとする。
そのとき、フォームに値を入力するたびにフォームが再レンダリングされてしまい、パフォーマンスが気になる場合がある。
どうすればパフォーマンスを向上することができるのか？

コンポーネントをメモ化することによって、パフォーマンスを向上する

CodeSandboxに公開する

tagty

RailsとwebpackでSPAを実装するにはどうすればよいか？

RailsでSPAを実装する方法はいくつかある。

• Webpacker
• Railsとwebpack
• Rails(APIサーバー)とNode.js(フロントエンド)

今回はRailsとwebpackを使った方法を紹介する。 Railsとwebpackを利用すれば、フロントエンドとサーバーサイドを疎結合に保ちつつ、コンパクトなコードベースでSPA開発ができる。

tagty

Formikでフォームにデフォルト値を設定するにはどうすればよいか？

FormikとはReactで簡単にフォームを管理できるライブラリです。 Formikを利用することで、以下を1か所で管理することができます。

• フォーム内外で値の取得
• バリデーションとエラーメッセージ
• 送信の処理

tagty

React Hooks で外部APIの情報を表示したいときにはどうすればよいのか？

React で Hooks を使っているとします。 画面を表示した時に、外部APIから取得した情報を表示したい場合には、どうすればよいでしょうか？

useEffect の中で axios を使う

React Hooks で画面を表示したときに一度だけ処理を行いたいときには useEffect を使います。 外部APIにリクエストをするのに、今回は axios を使います。

tagty

複雑なフォームを扱っていると、モデルが複雑になってしまう場合があります。 そのような場合にどのような対処法があるでしょうか？

フォームオブジェクトを導入する

フォームオブジェクトを導入すると、モデルからフォームに関するコードを取り除くことができます。

フォームオブジェクトを使わない場合

例えば、以下のようなアルバムの情報を編集するフォームがあるとします。

アルバムのタイトルとアーティストの名前と曲のタイトルを設定できるフォームです。