【CSSおじさん】となりの松沢くん【2ch版火花】 [転載禁止]©5ch.io
■ このスレッドは過去ログ倉庫に格納されています
0001仕様書無しさん
2015/08/13(木) 08:44:49.19毛の壁先生の傍らで一生懸命に支えてきた「（通称）松沢くん」がピンでやれると判断できましたので、舞台を用意する運びとなりました。
当初ヲチ板での御披露目を考えていましたが、踊り子とのコミニュケーションが大事だと思い、此方での興行となりました。
興行の内容は、「（通称）松沢くん」をスレ講師に迎えてＣＳＳに関して”熱く”語って頂こうと思っています。
また、臨時講師に毛の壁先生が参加するかもしれませんので、その際は”生暖かく”見守ってあげて下さい。
興行進行に辺り、当面は次の２点を守って下さい。
１） 毛の壁先生のスレッドの前に出る事は、暴走を招きます。
「sage」進行でお願いします。
２） 「粘着（軍・君）」や「放射脳」の多用は他のスレッドに迷惑をかける可能性が有ります。
ＡＡ同様に極力控えて下さい。
となりの松沢くんを囲んで、正しいＣＳＳ・ＨＴＭＬの技術を学びましょう！
00021
2015/08/13(木) 08:47:50.000003松沢
2015/08/13(木) 10:44:27.62講師「（通称）松沢くん」です。
みなさん、適切なCSS書いていますか？
CSSはただ書くだけじゃダメですよ。
CSSにも設計というものが必要です。
CSSは記述方法がプログラム言語よりも簡単ですが、
簡単であるが故に手抜きをするとあっという間に
管理不能状態に陥ります。
さて何か質問はありますか？
どうぞ。
0004松沢
2015/08/13(木) 10:46:36.55CSSおじさんとなっていますが、もちろんHTMLの話もOKです。
0005仕様書無しさん
2015/08/13(木) 11:54:05.36VS2015のJavaScriptでアプリケーション作ろうと思っています。
CSSの単体試験って簡単なのですか？
0006松沢
2015/08/13(木) 12:13:00.48一般的に単体テストというのは
コードに対してやるもので
定義に対してやるものではないです。
例えば、変数Aに100を代入しているコードがあったとして
変数Aは100であるか？ などというテストを書いても意味は殆ど無いですよね？
変数に入れるものが変わればテストも同じように書き換える。
単に同じことを2箇所で定義してるにすぎません。
CSSの話に戻りますが、CSSはコードではなくて定義です。
この要素に対して、このスタイルを適用する。
こういうものに関してテストを書く意味は殆どありません。
特定のブラウザでこのCSSは有効か？崩れないか？というテストは
意味が無いわけではありませんが、そういうのはアプリケーションの
テストというより、CSSサポートのテストとして
アプリケーションとは別に行うべきでしょう。
世の中にはレンダリングされた画像を保存しておいて、
それと誤差n%以内ならOKみたいなテストをやると言ってる所もありますが、
デザインや文章が変わったらテストも作り直しで、各ブラウザの互換性が
高くなった今では工数の方が多く掛かり過ぎでメリットはないでしょう。
0007仕様書無しさん
2015/08/13(木) 12:13:54.43> コードに対してやるもので
> 定義に対してやるものではないです。
定義もコードじゃんて言われそうなので、
「振る舞い」に置き換えてください。
00085
2015/08/13(木) 13:33:19.86早速のお返事、ありがとうございます。(＾∇＾)
”表示内容の定義”を行う様な考え方なのですね。
実装表示する内容を定義して、正しい表示するのを確認する作業でしょうか。
マイクロソフトの設計にMVVMと云うモノが有ります。
MはJavaScriptを使って対応し、VはCSSを使って表す事は判るのですが
VMを実装するには、表示内容の訂正を行う為にCSSの更新（定義を切り替えて表示する）を行うのかと思いました。
作業の分担として表示内容が替わるものは画面遷移と考えて、表示単体のテストになると思いお聞きしました。
仕事で使う事のない私には、起動時のレイアウトから変わらないので
CSSも下画面の色や文字定義くらいしか使わないかと思います。
ありがとうございました。m(_ _)m
0009松沢
2015/08/13(木) 14:18:59.45ウェブの世界ではMVVMと似たようなもので
Googleが作ってるAngularJSというのがあります。
AngularJSはライブラリなので、それを直接使うには少し大変で
コーディング、実行環境、テスト、といった一連の作業を
スムーズに行えるように整備された環境を提供してくれる
generator-angular-fullstackなどというものが有るのですが、
そのやり方に従うと、CSSはビルドの段階で生成したものを使い、
実行中にCSSの更新はしません。
（ちなみにHTMLとJavaScriptもビルドしたものを書き換えたりしません。
Web APIで取得したデータを元にクライアント側でDOMを
書き換えるのがAngularJSのやり方です）
CSSというのはVというより、単なるデザインですね。
PC向けにどうみせるか、スマホ向けにどう見せるか、などと。
CSSはなくても、デザインが崩れるだけで実用上問題ない。というレベルがいいですよ。
アクセサビリティとして目が見えない人のためを考えてみるとわかると思います。
Vは表示というより、出力ととらえたほうがいいでしょう。
出力結果を人間向けに整えて見せるのがCSSです。
「CSSの更新（定義を切り替えて表示する）」の話に戻すと上で書いたようにCSSの更新はしません。
その代わりに、JavaScriptで"状態"を変更します。
何かを「押した状態」「話した状態」「開いた状態」「閉じた状態」
その状態をJavaScriptからHTML要素のclass属性（一般的な話。他の属性も使える）に設定します。
HTMLのチェックボックスなどは、JavaScriptを使わなくてもそれ自身で「チェックされた状態」となります。
JavaScriptの仕事としては状態をclass属性に設定する所までで、
その状態をどう表現するかを定義するのがCSSです。
■ このスレッドは過去ログ倉庫に格納されています