フリーターからプログラマになったオヤジの備忘録

フリーターからフリーランスになった就職経験なしの オヤジ が物忘れと戦うブログ

React Material-UIのCardsで画像が表示されんのじゃー

MATERIAL-UIのCardsで画像が表示されない問題にぶち当たったオッサンです。

真剣な方が集う大人の婚活パーティー♪

楽天の商品検索API

https://webservice.rakuten.co.jp/api/ichibaitemsearch/ で取得した画像を表示しただけだったのですが、なぜか表示してくれない。

公式サイトを見ながらやってみたんですがね。。。

違いと言えば公式サイトは関数コンポーネント

オッサンはクラスで作成したぐらい。

とりあえず解決策

reactソース画像

CardMediaコンポーネントにcomponent="img"を追加で表示されました。



フロントエンドエンジニアになりたい人の Webプログラミング入門


【C# VB.net】オッサンのためのもっと早く教えてほしかった C# Visual Studio フォームデザイナ の使い方　【 tableLayoutPanel に複数コントロールを詰め込みたいお年頃 】

おっさんの忘れちゃいけないVisual Studio フォームデザイナ の使い方シリーズ

今回はwindows フォームでデザインを作る際によくお世話になる　tableLayoutPanel

グリッド上のテーブルにコントロールを配置していくので、統一感のある画面が作れるようになります。


選ばれて10年。エンジニアの気持ちが分かる転職エージェントは【アイムファクトリー】

話題沸騰！オタクに寄り添う婚活【とら婚】

アニメ・マンガ・ゲーム好きのヲタク（オタク）男女専門の結婚相談所・お見合い・婚活応援サービス【ヲタ婚】

ただし注意点として

1つのセルには1つのコントロールしか置けません。

オッサンは最初これに頭を悩ませました。


たとえばこんなラジオボタンを配置したい場合

普通に1セルずつ配置するとラジオボタンどうしの間隔が大きくなってしまいます。

もちろんグリッドのサイズは調整できます。

ただ幅を狭くしてラジオボタンの間隔を狭めるとと今度は上のTextBoxが狭くなりすぎたりしてバランスをとるのが難しくなってきます。

アニメ・ゲーム好きの異性と出会いたいなら【ヲタ婚】

解決方法としては

1つのコントロールの上に複数のコントロールを載せてしまう！

です。


オッサンがよく使うのは FlowLayoutPanel です。

実際の操作はこんな感じ

セルからすれば FlowLayoutPanel 一つ置かれてるだけなので何の文句もありません。

ちなみに FlowLayoutPanel はコントロールを整列してくれるので、ラジオボタン並べる時などすごく便利です。

【C# VB.net】オッサンのためのもっと早く教えてほしかった Visual Studio フォームデザイナ の使い方　【 DataGridVIew フォームサイズと共に 】

この業界で仕事を始めたころは、

プログラミング自体もさることながらIDE（統合開発環境）の使い方で苦戦する場面が多々ありました。

今回はオッサンが仕事で毎日使っているVisual Studioのwindows フォームアプリケーションで

「これもっと早く教えてほしかったわー！」って内容を忘れてしまわないようにメモ

※プロパティの設定とかって長年やってる人でも意外と知らない人が多いような気がします。


開発環境

Visual Studio Community 2019

Anchor（アンカー）

例えば画面に一覧（DataGridVIew）を配置して、フォームのサイズに合わせて一覧のサイズも変えたいような時は このAnchorプロパティを設定します。

デフォルトは「Top, Left」に設定されてます。

なのでそのままの状態ではフォームのサイズを変更してもDataGridVIew自体のサイズは配置した時のままです。


これに対し「Top, Bottom, Left, Right」を設定すると

このようにフォームのサイズに応じてDataGridVIewのサイズも変更されています。


ちなみに設定は画面右下部のプロパティの 配置 → Anchor で行います。


DataGridVIewの他にも

フォーム右下部に「閉じる」ボタンを配置した時などにも「Bottom, Right」を設定したり

頻繁に設定する項目となっております。