Forem: Seijiro Ozawa

ローカル開発環境にVirtualBoxを使用する

Seijiro Ozawa — Sat, 22 Feb 2020 03:35:51 +0000

経緯

DockerDesktop(Windows)、WSLとの戦いに敗れた.
プロジェクト単位での仮想環境というより適当に使えるローカル開発環境が欲しかった。

やったこと

VirtualBoxのインストール
Debian10(Buster)のイメージのＤＬ
HostOnlyNetworkの設定

1の手順

https://www.virtualbox.org/wiki/Downloads

2の手順

https://www.debian.org/distrib/

3の手順

ホストＯＳ側でホストオンリーネットワークを設定.

ゲストＯＳで下記の設定を追加

"/etc/systemd/network/enp0s8.network" というファイルを作り，次のように記入する．
[Match]
enp0s8

[Network]
Address=192.168.151.100
DNS=192.168.151.1

sudo service networkservice restart

以上.

以下の記事を参考にしました。
https://qiita.com/Yoshiki-Takahashi/items/7274dff15dbafee5b118

TypeScriptでRenderPropsをやった

Seijiro Ozawa — Fri, 09 Nov 2018 10:41:33 +0000

React Render Props in TypeScript - James Ravenscroft - Medium

Render Props - React

import { storiesOf } from '@storybook/react';
import * as React from 'react';

interface NumberHolderInjectionProps {
  num?: number;
  onChange(num: number): void;
}

interface NumberHolderProps {
  children(injection: NumberHolderInjectionProps): JSX.Element;
}

interface NumberHolderState {
  num?: Number;
}

class NumberHolder extends React.Component<NumberHolderProps, NumberHolderState> {
  state = {
    num: undefined
  };

  onChange = (num: number) => {
    this.setState({
      num
    });
  }

  render(): JSX.Element {
    return this.props.children({
      num: this.state.num,
      onChange: this.onChange
    });
  }
}

interface NumberRendererProps extends NumberHolderInjectionProps {}

let isFirst = true;

const NumberRenderer: React.SFC<NumberRendererProps> = (props) => {
    // コレがないと無限ループする
  if (isFirst) {
    props.onChange(777);
    isFirst = false;
  }

  return (
    <div>
      <p>{ (props.num || 10000) } </p>
    </div>
  );
};

const WrappedNumberRenderer: React.SFC<{}> = (_) => (
  <NumberHolder>
    {(injection: NumberHolderInjectionProps) => <NumberRenderer {...injection} />}
  </NumberHolder>
);

storiesOf('TypeScript＆RenderPropsの実験実装', module)
  .add('Simple実装', () => (
    <WrappedNumberRenderer />
  ));

django-react-templatetagsでdjangotemplateからreact コンポーネントを描画する

Seijiro Ozawa — Fri, 09 Nov 2018 10:39:52 +0000

はじめに

この記事は django advent calendar 12日目の記事です。

今回は django-teact-templatetagsを紹介させていただきたいと思います。

https://github.com/Frojd/django-react-templatetags

特徴

サーバーサイドから django template をレスポンスを行う
pythonのモデルを componentsに渡すデータに変換可能なMixin
SSR をサポート（未検証）

機能としてはたったこれだけですが、SPAでないアプリケーションにreactを導入したい場合やSSRしたい場合には重宝すると思いました。

使い方

基本的にREADMEの通りにすればOK
https://github.com/Frojd/django-react-templatetags/blob/develop/README.md

installed_app に追加

INSTALLED_APPS = (
    # ...
    'django_react_templatetags',
)

context_processor に追加

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            'templates...',
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': True,
            'context_processors': [
                ...
                'django_react_templatetags.context_processors.react_context_processor',
            ],
        },
    },
]

django templateに load react と {% react_render component="Component" props=my_data %} を追加

 {% load react %}

<body>
<p>...something</p>
{% react_render component="Component" props=my_data %}
{% react_print %}
</body>

modelからreact-componentに変換

READMEを参考に RepresentationMixin を実装するだけです。
https://github.com/Frojd/django-react-templatetags#working-with-models

使ってみた困った所

フロントエンドを今どきの作りにした場合は webpackやgulp からコンパイルされ、minifyされてjavascriptを読み込むと思います。

その際にはjsのトップレベルがローカルクロージャとなる場合が多くサーバに描画されたhtmlからreact-componentがスコープの対象外になりました。

最終的には(極力避けたかったのですが)ビルドされるjavascript内でブラウザのwindow変数にトップレベルの ReactComponentを代入するようにしました。

// こんなかんじのコードをrootに置く
const RootComponent = require("./Root")

window.RootComponent= RootComponent

まとめ

ライブラリそのものは薄く設計を工夫すれば捨てるのが容易で pythonのモデルからjavascriptへのデータ受け渡しまでサポートしてもらえるので個人的には結構アリな選択肢かと思いました。

特に従来のWebAppに部分的にReactを導入したい場合などは適していると思います。

また、今回は試していませんがSSRしたい場合も選択肢に入って良いと思います。