てぃぐれのプログラマwiki

ワクワクに従う

CSSの設計ってどうやって?【CSS】

ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか?|菱川拓郎|note

 

経緯

CSSの設計ってどうやってるんだろうと触ってみると思う。もともと、WindowsアプリケーションのエンジニアだとCSSとか触らない。

前回の記事でUIコンポーネントにmarginをつけるなという話もした。

 

もう設計とかいらんやろ

っていう話が、ユーティリティファーストなtails css。classの名前とか考えるの面倒だよな。どこで使ってるか考えながらcss書いたり修正したりするの面倒じゃない?だったら直接書く風にしたらいいんじゃないの?という考え。

しかし、cssをインラインで書くということでもない。そこが、フレームワークたる所以。ある程度縛りを入れることで、ルール化させ、チーム開発を簡単にさせてくれる。

css初心者はもうtailwindowcssから入った方がいいのだろうか。

 

CSSの設計 その1【CSS】

UIコンポーネントにはマージンをつけるな!絶対にだ!! - Qiita

 

経緯

BlazorStrapというUIフレームワークCSSを充てる方法を探していて、見つけた記事。CSSの初心者には、とても参考になる記事だった。

 

UIコンポーネントにはマージンをつけない

というか可変になるスタイルはラッパーで処理してあげようという話であろう。

marginなどの位置を指定してあげるような値は当然、ページ等で変わってくるのでコンポーネントCSSに位置情報を含ませてはいけない。

 

 

 

BlazorStrapでモーダル【Blazor】

経緯

Blazorというjsが使いにくい環境でjsのように動きを出させるのは一苦労するもの。そこで、「Blazor モーダル」と調べると出てくるBlazorStrapというUIフレームワーク?を使ってみることにする。

 

始め方

ここを見てやるとできる

BlazorStrap V5

 

モーダルはここのをコピペ

https://blazorstrap.io/V5/components/modal

 

詰まったところ

あれ?

ボタンはでるけど処理ができない。

キャッシュかも。更新させたりするとうまくできるようになる。

 

こんな感じ

 

疑問

divで書いていくのとUIフレームワークで書いていくのと、みんなはどのようにわけているのだろう。

プロジェクトでどのように、どの観点で進めていくのかはちょっと悩みどころだ。

 

 

 

 

 

 

一意制約とインデックス自動作成【SQLServer】

経緯

最近、プロジェクトでSQLServerを使用し、設計を行っている。

Oracleでは一意制約をかけると一意索引が自動で作成されていたが、SqlServerではどうだろうか。

 

調査結果

「制約に依存しない一意インデックスを作成することの間に大きな違いはありません。」とある。

Unique インデックスの作成 - SQL Server | Microsoft Docs

つまり、SqlServerでも一意制約を作成すると一意索引が作成されるということなのであろう。

 

実際にやってみる

まずuniqueTテーブルを作成する

まだindexはない

SQL 複合ユニーク制約追加
ALTER TABLE uniqueT ADD CONSTRAINT testU
    UNIQUE ( xid,yid );

Indexが追加されている

■Index取得SQL

SQL Server: データベース内の全てのインデックス (index) を取得する - 便利なT-SQL&クエリー集 - SQL Server 入門

SELECT  S.name AS SchemaName,
    O.name AS ObjectName,
    I.name AS IndexName,
    I.type_desc AS IndexTypeDesc,
    I.is_primary_key AS IsPrimaryKey,
    I.is_unique AS IsUnique,
    I.is_disabled AS IsDisabled
FROM    sys.indexes AS I
       INNER JOIN sys.objects AS O
          ON I.object_id = O.object_id
       INNER JOIN sys.schemas AS S
          ON O.schema_id = S.schema_id
WHERE   I.index_id > 0
    AND O.is_ms_shipped = 0
    and O.name= 'uniqueT'
ORDER BY S.name,
     O.name,
     I.name;

 

 

 

 

 

Blazor Server vs Assembly

経緯

Visual Studio でBlazorのアプリを作るときに、Web Assemblyで作るの Server で作るの?とちょっと良く違いが分からなくなったので、自分なりに考えてみた。

 

WebAssemblyとは?

低水準のアセンブラ言語でweb上で動いてくれる。

 

メリットは?

スタンドアロンなアプリの作成

 →そうでない場合はASP.NET CoreでホストしAPI経由でサーバーとやりとりをする

PWAの構築

 

Blazor Server

SingalRによる通信

 →非同期、双方向通信を実現してくれるライブラリ

 

結果

SignalRをバンバン使いたいならBlazor Serverであろう。

しかし、WebAssemblyでもSignalRは頑張れば使えるとのこと。

スタンドアロンがどうか一つの基準だろうか。。

 

参考

WebAssembly の概要 - WebAssembly | MDN

Blazor Server と Blazor WebAssembly: 特徴をまとめてみました - インフラジスティックス・ジャパン株式会社Blog

Blazor WebAssemblyとSignalRでチャットアプリを作ってみたCCT-recruit | CCT-recruit

.NET CORE MVC の自動コード作成のためのルール【C#】

経緯

元々WEB系ではない自分がWeb開発で.ASP.NET Core MVCをノリで使っていたらドはまりしてしまった。

 

ルール

.ASP.NET Core MVCでは、ルールに沿った開発をすることで自動でコードを生成させて、開発の時間を短縮させるようだ。これは、昨今のwebでは割と当たり前らしい。

 

・Modelクラスとデータベースのテーブル名は同じにする

 →クラスに沿ったテーブル名にする

 

・Modelクラスのプロパティはテーブルのカラム名とする

 →プロパティメインのカラム名にする

 

・Controller名はModelクラスの複数名にする

・外部キーがあれば、スキャディングフォール時に自動で1:多みたいなデータにも対応したコードを作成してくれる

 

他にもルールはあるだろうが、自分が今一番気になっていたのはこの辺である。

今までの現場ではカラム名は大文字で「_」でつないでいたのが当たり前でそういう風にしてたら、時間を簡単に浪費してしまった。

 

昨今はSQLも書くことが少なくなってきているという。PL/SQLを書いてきた自分には衝撃すぎて。。井の中の蛙。大海を知る。

 

 

DTOとは【C#】

Data Transfer Objectってなに。

オブジェクト設計(デザイン)パターンらしい。

データベースからとってきた値を別クラスで別オブジェクトとして、クライアント用に加工するためのクラス・オブジェクトというイメージ。

 

①セキュリティのため

持ってきたデータの中で必要なデータだけを抽出したい

ん?なら持ってくるなよ?まともにsqlを書かなくなってきている昨今では、有効。

 

②クライアントが欲しいデータを同じクラスにもつ

データベースから抽出したデータだけでクライアントに渡すだけなら、問題ないが、例えば、そのデータを別の型にしたかったり、別のクラスのプロパティもひとまとめにしたり、するのに便利?

 

そのほかにもあるだろうが、一旦ここまでにして、下記の動画が一番腑に落ちたので紹介したい。

www.youtube.com

 

C#での実装の動画はこちら。

C# Web App Activity 5b Code a DTO Data Transfer Object - YouTube

 

日本語で探していたほかのどの記事たちも理解しやすかった。

DAO、エンティティ、DTOの関係が分かりにくかったり、ごっちゃになったりしてる感じ。自分も当たっているかわからないが。というか自分も知りたくてぐぐりまくってた。

 

DAO→データベースへのアクセスを疎結合にし、簡略化?

↓↑

エンティティ→データベースのデータをクライアントで持つ

↓↑

DTO→エンティティのデータを見せるように加工

 

今のところこんなイメージ。

 

tigretic.hatenablog.com