常連

注目の的

社会貢献

質問力

拍手喝采

自己紹介

### 前提・実現したいこと
ec2上でdocker-composeを使用しrailsアプリを立ち上げるが
No such file or directoryエラーが発生しcssが反映されない
### 行った手順
1 webコンテナ内にnode.js.yarnをインストール
2 以下コマンド実行
```
$docker-compose run web bundle exec rake assets:precompile　RAILS_ENV=production
```
コマンド実行後の結果
```
I, [2020-11-05T04:26:10.531648 #1]  INFO -- : Writing /myapp/public/assets/application-4122c59e9974a12cfc6eb9ab07c775381b1339358d7cf76ceeaae39bd007c680.js
I, [2020-11-05T04:26:10.552228 #1]  INFO -- : Writing /myapp/public/assets/application-4122c59e9974a12cfc6eb9ab07c775381b1339358d7cf76ceeaae39bd007c680.js.gz
I, [2020-11-05T04:26:10.715500 #1]  INFO -- : Writing /myapp/public/assets/application-d862790037b7672926579474fbe8292cf57ebaeafc19b449c4f615a87b4f7075.css
I, [2020-11-05T04:26:10.716247 #1]  INFO -- : Writing /myapp/public/assets/application-d862790037b7672926579474fbe8292cf57ebaeafc19b449c4f615a87b4f7075.css.gz
```

3 docker-compose up

### エラーメッセージ

```
nginx_1  | 2020/11/05 04:29:21 [error] 7#7: *1 open() "/app/public/assets/application.self-14537b66cf3bc71446e497a541ef83b052cf0726bb340eac3f08b7e9bf0e9da3.css" failed (2: No such file or directory)
```

### 該当のソースコード
production.rb
```
Rails.application.configure do

  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.assets.js_compressor = Uglifier.new(harmony: true)
  config.assets.compile = false
  config.active_storage.service = :local
  config.force_ssl = true
  config.log_level = :debug
  config.log_tags = [ :request_id ]
  config.action_mailer.perform_caching = false
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new
  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

```
nignx.conf
```
upstream app {
  server unix:///myapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name localhost; # TODO

  keepalive_timeout 5;

  # static files
  root /app/public;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    # static files
    if (-f $request_filename) {
      break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1/index.html break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1.html break;
    }

    if (!-f $request_filename) {
      proxy_pass http://app;
      break;
    }
  }

  location ~* .(ico|css|gif|jpe?g|png|js)(?[0-9]+)?$ {
    expires max;
    break;
  }
}
```

### 試したこと

**1 手動でコンパイルしたassetsのディレクトリとnginxが読み込んでいるディレクトリにズレがある？**
(手動でのコンパイル)
```
/myapp/public/assets
```
（nginx)
```
/app/public/assets
```

→nginx.confのドキュメントルートを/myapp/public/assetsに変更するがエラー解消せず

** 2 コンパイル後public配下にファイルは存在するか？**
```
$ docker-compose run web ls public/assets
Creating myapp_web_run ... done
application-084b9ffa601b37201c9fcc7a0c2bee2f5ebaae4be90bda0769f2a0f6fcc09cdb.js
application-084b9ffa601b37201c9fcc7a0c2bee2f5ebaae4be90bda0769f2a0f6fcc09cdb.js.gz
application-14537b66cf3bc71446e497a541ef83b052cf0726bb340eac3f08b7e9bf0e9da3.css
application-14537b66cf3bc71446e497a541ef83b052cf0726bb340eac3f08b7e9bf0e9da3.css.gz
exclusions.css-53c044d871c4ea98718fd024dd4c23a10163dceb3e59d3e7e86056c92bda73b1.map
```
→public/assets配下にコンパイル後のcss,js存在を確認



### 補足情報（FW/ツールのバージョンなど）
Rails　5.2

【EC2・Docker・Rails】ec2上でdocker-composeを使用しrailsアプリを立ち上げるが No such file or directoryエラーが発生しcssが反映されない

Reactライブラリを使用した開発においてテストを書く時、素のJavaScriptで書かれたコードや、VueやAngularなどのReact以外のフレームワーク(Reactはライブラリでありフレームワークではありませんが)を使って書かれたコードをテストする時には生じない、ユニークなプラクティスや考慮すべき点などがあれば教えていただきたいです。

具体的には、Reactのjsxを使った記法やコンポーネント志向の構造、またステートが更新される度にレンダリングが生じるなどといったライブラリ独自の特性のために生じる、テストにまつわる難点や、それを克服するための方法論やテストフレームワークなどを知りたいと思っています。

よろしくお願いします。

Reactを使用したコードをテストする際に気をつけることはありますか？

ご覧いただきありがとうございます。
DjangoRESTFrameworkとReactでSPAを勉強している初学者です、
現在トークンを使用したユーザー認証周りを実装しています。

SPAにおけるトークン認証について色々と調べていると、
API側でトークンの生成が確認→curlコマンドでリクエストにトークンを含めて通るか確認→終了の記事が多く、
その後フロントでトークンをどう保持するか、どうリクエストに埋め込むかのベストプラクティスにたどり着けず
今回質問させていただきます。

自分で色々と考えてみた結果現在は、
**新規登録時やログイン時に帰ってくるトークンをstateで保持し、認証が必要なリクエストのヘッダーに含める**という方法を取っているのですが、
これはベターな方法と言えますか？

また、stateで管理をしていると、ログイン直後にページを再読み込みなどすると、
stateで保持したトークンは消えてしまうので、
**ユーザーが自らログアウトを行わない限りstateにトークンを保持し続ける**という挙動を期待する場合、
reduxなどで状態管理を行うのが一般的なのでしょうか？

拙い質問で申し訳ありませんが、ご回答、アドバイスや参考リンクなどいただければ幸いです。
登録、ログインのリクエストを行なっているReactのソースコードを添付しますが、
他に必要なコードがあれば随時追加いたします。
何卒ご教授よろしくお願いいたします。

```Homejs
    signUp(username, email, password, password_confirmation){
        axios({
            method : 'POST',
            url : 'http://localhost:8000/api/v1/rest-auth/registration/',
            data : {username: username, email: email, password1: password, password2: password_confirmation}
        })
        .then(()=>{
            this.login(username, email, password);
        })
        .catch(err => {
            console.log(err);
        });
    }
    login(username, email, password){
        axios({
            method : 'POST',
            url    : 'http://localhost:8000/api/v1/rest-auth/login/',
            data   : {username: username, email: email, password: password},
        })
        .then(res=>{
            this.setState({key: res.data.key});
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });
    }
```

###使用ライブラリ
```ここに言語を入力
django-cors-headers
djangorestframework-jwt
django-rest-auth
django-allauth
```

ここ数日調べたり自分で考えてみた結果を書きますので、
こちらについてもご意見いただければ嬉しいです。

・react,reduxのstate管理→どうしてもリロードで消える
・localstorage→試したところやりたいことは実現できました。
しかし色々と調べていると重要情報を保存するのはよくないと目にしたので他の方法を検討中です。
・reduxのstoreを永続化できるライブラリを使う→結局localstorage
・帰ってきたトークンをReactでcookieにセットする→httponlyができなくなる？
・帰ってきたトークンをDjangoでcookieにセットする→現在これが実現できないか試しています

DjangoAPI⇆ReactのSPAにおけるトークンの保持方法

TypeScript + React（JSX）のコードを書いていたのですが、うっかり拡張子が`.ts`のままJSXを書いてしまってトラブルとなることがありました。もちろん拡張子を`.tsx`とすれば解決はするのですが、JSXの有無に関わらず、最初から全ファイルを`.tsx`としてしまって不都合なことはありますでしょうか。

全ファイルを`.tsx`で作った場合、「`.ts`はMPEG-2 TSと拡張子が衝突するけど`.tsx`はそうならない」「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」などのメリットが見込めます。

下に書いたように「`<type>`形式でのキャストができない」ということは承知ですが、それ以外に「`.tsx`ファイルだとこんな不都合がある」ということがありましたら教えていただければと思います。

### 調べたこと

* [Allow JSX without using `.tsx` extension](https://github.com/microsoft/TypeScript/issues/30503) - 逆に、`.ts`でもJSXを書けるようにしてはどうかという提案（クローズされています）
* キャストの記法として`value as type`と`<type>value`の2通りがあって、後者は`.tsx`ファイルには書けないこと

### 補足情報（FW/ツールのバージョンなど）

* TypeScript 3.7.5
* React 16.12
* Webpack 4.41.6
* Webpackへの読み込みには`ts-loader`を使用（型チェックは`fork-ts-checker-webpack-plugin`に投げている）
* エディタはVisual Studio Codeを使用

Reactを使うプロジェクト内のTypeScriptをすべて.tsxで作るデメリットについて

###商品登録データベースを作成したいと思っております。
商品画像データをデーターベースに登録したいと思い、
初心者ながらgoogleで色々調べてみたところ、
データ型を「mediumblob」にすると画像を保存できるという記事を見かけましたが、
基本的にデーターベースには画像を保存しないほうがいいというご意見もありました。
普通は画像のパスをデーターベースに保存する、という意見でした。

基本的にはどちらが良いのでしょうか？
（データーベースに負荷を与えない画像保存？）

皆様のご意見をお聞かせください。

宜しくお願い致します。

データベースに画像を保存するのはありでしょうか？

reactでHOCをしつつreact-reduxでconnectするようなコードを書いています。

以下のようなコードサンプルを書いたときに(state等の定義、import は省略しています)、最後の行 `createCountableComponent(Component)`
の部分がconnectの引数の型とうまく合わずに型エラーになってしまいます。

```typescript
export type CountableProps = StateType & DispatchType

type StateType = ReturnType<typeof mapStateToProps>
const mapStateToProps = (state: AppState) => ({
  count: state.home.count
})

type DispatchType = ReturnType<typeof mapDispatchToProps>
const mapDispatchToProps = (dispatch: Dispatch) => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})

const createCountableComponent =
  <P extends CountableProps>(Component: React.ComponentType<P>) =>
    class ConfigurableComponent extends React.Component<P> {
      componentDidMount() {
        // do something
      }

      render() {
        return <Component {...this.props} />
      }
    }

export const countable = <P extends CountableProps>(Component: React.ComponentType<P>) =>
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(createCountableComponent(Component))
```

`connect()` の型定義が `InferableComponentEnhancerWithProps` で componentの型が `C extends ComponentType<Matching<TInjectedProps, GetProps<C>>>` であるようにすればいいのですが、この部分の定義がうまく理解できません。

どのように型を指定すればいいのでしょうか。

react-reduxのconnect()での型指定がわかりません。

タイトルの件について、皆様に意見を求めたいので質問を立てます。

様子を見て、賛同が多いようなら一週間後に運営宛に要望を送ります。

# 背景

teratailに投稿される質問はすべてが万全な状態ではなく、**コードやエラーメッセージが欠けている**、**エラーを再現できるだけの情報がない**、**マークダウンの不備**、**テンプレートのまま途中送信されている**、などの理由でそのままでは回答しづらい*1ものも多数あります。

その場合は質問に修正依頼を送ることができますが、これはそこそこ手間ですから、修正依頼を書く人は限られます*2。「一度触ったら解決まで責任を取らないといけない」と思って修正依頼を憚る人もいるでしょう。しかし、早く修正されないとつく回答もつかなくなります。

質問者の方も、
######質問を投稿してから無回答のまま何時間も経って、やっと通知が来たと思ったら『事務的な』修正依頼だけだった

という状況では**心が折れる**のではないかと危惧されます。

これは互いに不幸です。誰でもいい、回答するつもりがなくてもいい、気づいた人がさっさと修正依頼する……そういう状況が望ましいのではないでしょうか。そして現状はそうなっていないので、システムによるサポートを導入するべきだと思います。

# 提案

**大半の修正依頼は定型文で済ませられる程度のものなので、マウスをポチポチすれば定型文を送れるようにしとけば良いと思います。**

私が現時点で考えているUIのイメージは低評価機能とほぼ同じです*3。あれくらいごく手軽に修正依頼できるようにするということです。

# 詳細

クリック操作で
- コードはコードブロックに入れてください
- エラーメッセージは全体を示してください
- 実行環境を書いてください

などのメッセージを送ることができる*4。

更に欲を言えば、ヘルプ、質問するときのヒント、あるいはメッセージに対応したガイダンスページ（新規に作る）などへの、適切なリンクが付与されるとわかりやすいでしょう。

もちろん既存の修正依頼システムとは併存させ、定型文では対応できない修正依頼はちゃんと送れるようにします。

# この質問への回答について

以下のような回答内容を想定しています。

####賛否・コメント
なにか言いたいことがある方はご自由に回答していただいて構いません。あと、質問への高評価/低評価を賛否投票の代わりに使うのはお控えください*5。

####素案や提案など
「『○○』というメッセージが要る」「俺この内容で何回も書いた」「こういう仕組みだと使いやすい」みたいなのを投稿していただくと、運営が要望を聞き入れてくれたとき役に立つかもしれません。



# 注釈
*1 エスパーすれば回答できるかもしれないが、普通そんなことはしたくはない
*2 ヘビーユーザーなら一通り書いてテキストファイルにでもメモっておき必要になったときコピペする、という選択肢もあるかもしれないが、根本的な解決にはならない
*3 ただし匿名化する必要はない。システムを介して定型文として送られているのがわかれば十分であって
*4 もちろん実際にはもっと親切な文章であるべき
*5 スコアに反映されても困るし、純粋な高評価/低評価と見分けがつかないので

【要望案】修正依頼欄で定型文メッセージを送信できると嬉しい

下記のエラーが解消できません。
誰かわかる人がいたら教えてください

Property 'map' does not exist on type 'Readonly<{}>'.  TS2339
Property 'map' does not exist on type 'Readonly<{}>'.  TS2339


```ここに言語を入力
import React, { Component } from 'react'
import './Body.css';

type Props = {
    textTitle: string
    textBody: string
    memoList: string
}

class MemoList extends Component {

    constructor(props:Props) {
        super(props);
        this.state = {
　　　　　　　memoList: props.memoList,
            textTitle: '',
            textBody: ''
        };
    }
  
      render() {
          const memoItemList = this.state.map((m, i) =>{
            return <li key={i}>
                タイトル:{m.title}<br/>
                内容:{memoItemList.content}<br/>
                </li>;
          });

       return(
         <div> class Name= 'Main'>
          <ui id='MemoList'>
            <li className = "Memo">
              <div className="MainTitle" value={this.state.textTitle}></div>
              <div className="MainText" value={this.state.textBody}></div>
            </li>
          </ui>
        </div>
       );
  }
}

export default MemoList;
```

reauct　エラー解消できない

最近Haskellの勉強をしています。
モナドについて分からない点があるので教えてください。
[参考サイト]
[箱で考えるFunctor、ApplicativeそしてMonad](https://qiita.com/suin/items/0255f0637921dcdfe83b)

**１，returnについて。**
`return :: a -> m a`
**この関数の文脈mというのは、前後の文脈によって推論されるのでしょうか？？**

例えば、3つ例を上げます。
```Haskell
return "WHAT" :: Maybe String
Just 9 >>= \x -> return (x * 10)
return (0, 0) >>= landLeft 1 >>= ...
```
一番上は明示的に型を与えているので大丈夫ですね。
2番めは`>>=`の左辺のJustから推論されてMaybe型になるということで良いんですよね？
3番めはモナド則があるので推論しなくても良さそうですが・・・これは実際には右辺のモナドから推論されるんですか？

**２，モナドの連結について。**
`>>= :: m a -> (a -> m b) -> m b`
これは、１つのモナドに関してのみ連結できるという意味で合ってますか？
例えば、**Maybe型 >>= State型**　というふうに別のモナドを複数連結させることって可能なのでしょうか？
`m`と書かれていて両辺の型が同じなので、おそらくコレは出来ないものだと考えているのですが、自分の理解で正しいでしょうか？

それに近いものは見つけました↓
[MaybeとStateを合成](https://qiita.com/7shi/items/12036631dad1979a273b)

もし２の質問が正しくて異なる複数のモナドを連結可能でしたら、returnの文脈の型はどうなるのでしょうか？

**３，モナドの文脈を外すことはできるのでしょうか？**
どこかで、
> 値を一度モナドの文脈に入れた場合文脈を外すことはできない。

みたいな事が書かれているのを見かけたのですが、これは正しいのでしょうか？
どこに書かれていたか忘れてしまったので、記憶が曖昧なのですが・・・
Maybeモナドみたいなのだとパターンマッチで値を取り出すことができそうですが、任意のモナドに関して一般的にはできないですよね？例えば、IOとか？？

わかる方いたら教えてください。

Haskellのモナドについて。

```ここに言語を入力
array = [ [ {},{},{} ],[ {},{} ] ]
を
array = [ {},{},{},{},{} ]
```
にするにはどのようにすれば簡単にできるのでしょうか？

node v8.16.1を使用しています

配列[ [ {},{},{} ],[ {},{} ] ] を [ {},{},{},{},{} ]にする方法

いつもお世話になっております。

早速本題に入らせていただきます。

Django でModelを新しく作成し、makemigrations をしてみましたが、
新規で作ったModelは変更箇所に反映されませんでした。


**作ったModel**
````Python
from django.db import models


class Test(models.Model):
    class Meta:
        db_table = 'test'

    title = models.CharField(max_length=20, null=False)
```

**Model作成後のターミナル**
```
python manage.py makemigrations home
Migrations for 'home':
  portal\migrations\0002_auto_20191016_1719.py
    - Create model User
```

↑　このUserというModelは1回目のmakemigration時に作成したものです。
こちらは認識されていますが、新しく追加した Test は認識してくれませんでした。

---

**試したこと**

* home/migrations においてある__init__.py ファイル以外全削除

* home 直下のapps.py の確認　
　　→　HomeConfig に name='home' となっていることを確認
* settings.py のINSTALLED_APPS に home.apps.HomeConfig がいることを確認


なぜ1回目のmakemigrationはうまくいったのに2度目以降はうまくいかないのでしょうか・・・。

お時間ある方で、解決方法などご存知の方いらっしゃいましたらご助力頂けますと幸いです。

【Django】 新規でつくったModelが認識されない

カメラから取得した映像を画像認識するために
opencvで画像処理を行なってから，YOLOで画像認識を行うと思っていたのですが，
YOLOだけで十分で，opencvで画像処理を行っていない記事ばかり見かけました．

基本的にopencvでの画像処理はどのような状況で使用するのが適切なのでしょうか？
例えば，トレーニングモデル作成時およびテスト時など．

画像認識YOLOを使用する上で，OpenCVで画像処理を挟むか悩んでいます．

PythonスクリプトをVSCodeを使って開発しています。
今開いているフォルダとは異なるディレクトリにおいてあるpythonスクリプトを実行すると、
pythonスクリプトをおいてあるディレクトリで実行されません。
```
root_folder ←VSCodeで開いているルートディレクトリ
|
|__hoge
|__hoge2
        |__test.py
        |__test.2py　←このスクリプトを実行したときにroot_folder/hoge2ディレクトリで実行したい
```

Visual Studio Codeで実行時にファイルのあるディレクトリで実行したい

### 前提・実現したいこと
Node.jsでwebサーバをつくっています。
そのひとつの処理にDBデータを検索して取得する部分があるのですが、Node.jsは非同期処理なので処理が終わる前に次に進んでしまい、空のまま渡してしまってエラーが起きているという状況です。
そこでその処理が終わったあとに次にすすむよう同期処理にしたいのですが、うまくいきません。
以下のサイトを見ながらPromiseを使おうとしましたが、同期処理できない状況です。
[https://blog.honjala.net/entry/2018/08/08/022027](https://blog.honjala.net/entry/2018/08/08/022027)
何か解決策があればコメントお願いします。

### 発生している問題・エラーメッセージ

```
$ node webServer.js
Server running 
Connected correctly to server
/
/js/three.js-master/build/three.min.js
/js/OrbitControls.js
/css/index.css
/get_value
レスポンス
undefined
TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string or Buffer. Received type undefined
    at write_ (_http_outgoing.js:595:11)
    at ServerResponse.write (_http_outgoing.js:567:10)
    at Object.getValue (/home/hasegawa/デスクトップ/akiyama/Node.js/webServer.js:137:17)
    at process._tickCallback (internal/process/next_tick.js:68:7)
/favicon.ico
はいった

```

### 該当のソースコード

```ここに言語名を入力


//DB接続準備
const MongoClient = require('mongodb').MongoClient;
const url_db = 'mongodb://localhost:27017'; // Connection URL
const dbName = 'study'; // Database Name
const client = new MongoClient(url_db, { useNewUrlParser: true });
const assert = require('assert');
var collection;
//var value;



// Use connect method to connect to the server
client.connect(function (err) {
    assert.equal(null, err);
    console.log("Connected correctly to server");

    const db = client.db(dbName);

    // Get the documents collection
    collection = db.collection('user');

    /*collection.find({}).sort({ time: -1 }).toArray(function (err, docs) {
        console.log("はいった");
        for (var doc of docs) {
            value = doc;
            break;
        }
        //value = docs;
    });*/
});

function asyncFunc() {
    return new Promise((resolve) => {
        // ...何かしらの時間がかかる処理...
        let result;

        collection.find({}).sort({ time: -1 }).toArray(function (err, docs) {
            console.log("はいった");
            for (let doc of docs) {
                result = doc;
                break;
            }
            //value = docs;
        });

        process.on('unhandledRejection', console.dir)
        resolve(result);
    });

}


// http.createServerがrequestされたら、(イベントハンドラ)
server.on('request', function (req, res) {
    // Responseオブジェクトを作成し、その中に必要な処理を書いていき、条件によって対応させる
    var Response = {
        "renderHTML": function () {
           
        },
        "getThree": function () {
           
        },
        "getOrbit": function () {
           
        },
        "getCSS": function () {
            
        },
        "getValue": async function () {

            let value = await asyncFunc();
            //client.close();

            // HTTPレスポンスヘッダを出力する
            res.writeHead(200, {
                'content-Type': 'text/html',
                'Access-Control-Allow-Origin': '*'
            });

            console.log("レスポンス");
            //console.log(result);

            console.log(value);
            // HTTPレスポンスボディを出力する
            res.write(JSON.stringify(value));
            res.end();
        },
        "postData": function () {
            
    };
    // urlのpathをuriに代入
    var uri = url.parse(req.url).pathname;
    console.log(uri);


    // URIで行う処理を分岐させる
    if (uri === "/") {
        // URLが「IPアドレス/:1234/」の場合、"renderHTML"の処理を行う
        Response["renderHTML"]();
        return;
    } else if (uri === "/js/three.js-master/build/three.min.js") {
        // URLが「IPアドレス/:1234/js/three.js-master/build/three.min.js」の場合、"getThree"の処理を行う
        Response["getThree"]();
        return;
    } else if (uri === "/js/OrbitControls.js") {
        // URLが「IPアドレス/:1234/js/OrbitControls.js」の場合、"getOrbit"の処理を行う
        Response["getOrbit"]();
        return;
    } else if (uri === "/css/index.css") {
        Response["getCSS"]();
        return;
    } else if (uri === "/get_value") {
        // URLが「IPアドレス/:1234/get_value」の場合、"getThree"の処理を行う
        Response["getValue"]();
        return;
    } else if (uri === "/post_data") {
        // URLが「IPアドレス/:1234/post_data」の場合、"postData"の処理を行う
        Response["postData"]();
    };
});

// 指定されたポート(1234)でコネクションの受け入れを開始する
server.listen(1234);
console.log('Server running ');

```

Node.jsでのDBデータ取得を同期処理にしたい

# 概要

Djangoで検索機能のあるWebサイトを開発中です。
ブログ記事を投稿して、それをトップ画面でカテゴリごとに検索するものです。

カテゴリにより検索と、フリーワードによる検索をしたいと思っています。

フリーワードによる検索は機能していますが、カテゴリによる絞り込みがうまく機能せず、結果的に全カテゴリのものが出てしまいます。


# 今のコード（試したコードも含む）

```python
(models.py)
class Post(models.Model):
    title = models.CharField('タイトル', max_length=255)
    text = models.TextField(blank=True)
    category = models.ForeignKey('posts.Category', on_delete=models.PROTECT)


class Category(models.Model):
    category = models.CharField('カテゴリ', max_length=255)

    def __str__(self):
        return str(self.category)
```

```python
(view.py)

class Index(ListView):
    model = Post
    template_name = 'posts/index.html'

    def get_context_data(self, *args, **kwargs):
        searchform = SearchForm()
        post_list = Post.objects.all()
        params = {
            'searchform': searchform,
            'post_list': post_list,
            }
        return params


def Search(request):
    if request.method == 'POST':
        form = SearchForm(request.POST)

        if form.is_valid():
            selected_category = form.cleaned_data['selected_category']
            # selected_category =  request.POST.get('selected_category', None)
            # ↑これも試しましたが、やはり検索できずに全件出てきます。
            freeword = form.cleaned_data['freeword']
            search_list = Post.objects.filter(Q(text__icontains = freeword)|Q(category = selected_category))

    params = {
        'search_list': search_list,
        }

    return render (request, 'posts/search.html', params)

```


```HTML
(index.html)
<form action="{% url 'posts:search' %}" method="POST" novalidate="novalidate">
    <select class="form-control search-slt">
    <option value="none">カテゴリ</option>
    {% for item in category_list %}
        <option name="selected_category" value="{{ item.category }}">{{ item.category }}</option>
    {% endfor %}
    </select>
    
    <input type="search" class="form-control search-slt" name="freeword">
    <button type="submit" class="btn btn-danger wrn-btn">Search</button>
    {% csrf_token %}
</form>
```

```python
(context_processor.py)
from .models import Category

def common(request):
    context = {
        'category_list': Category.objects.all(),
    }

    return context
```

```python
(urls.py)
from django.contrib.auth.decorators import login_required 
from . import views

app_name = 'posts'

urlpatterns = [
    path('', views.Index.as_view(), name='index'),
    path('search', views.Search, name='search'),
]
```

# エラーについて
フリーワードがうまく検索できるので、selected_categoryにうまく値が入っていないような気がします。

ご教授いただけますと幸いです。

よろしくお願いいたします。

Django 検索フォームで、テーブルからの選択による検索がうまくいきません。

Djangoでアプリケーション開発をしているプログラミング初心者のものです。
シード生成をするためにfactory_boyを用いているのですが、どうもうまくいきません

-----
models.py
```Python

class A(object):
  acptr = models.ForeignKey("C", verbose_name="C")

class B(object):
  bcptr = models.ForeignKey("C", verbose_name="C")

class C(object):
  aptr = models.ForeignKey("A", verbose_name="A")
  bptr = models.ForeignKey("B", verbose_name="B")

```

factories.py
```Python
class AFactory(factory.django.DjangoModelFactory):
  class Meta:
    model = models.A

class BFactory(factory.django.DjangoModelFactory):
  class Meta:
    model = models.B

class CFactory(factory.django.DjangoModelFactory):
  class Meta:
    model = models.C

  aptr = factory.RelatedFactory(Factory, "acptr")
  bptr = factory.RelatedFactory(Factory, "bcptr")
```

のようにして、シードデータ生成を行おうとしたのですが、以下のようなエラーが出ました

```
django.db.utils.IntegrityError: NOT NULL constraint failed: app_c.aptr_id
```

どうやら、モデルAのidがNULLとなってしまっているために、NOT NULL制約に引っかかったようですが、これを解決する方法はないでしょうか？
※DBになにかシードデータが入っていないか確認しましたが、A,B,Cのどれも生成されていませんでした。