#author("2021-05-18T16:58:01+09:00;2021-05-18T16:37:46+09:00","default:inoue.ko","inoue.ko")
*ProblemFinding
HTML+CSS+JavaScriptのコーディングと問題の発見について
~
***はじめに
デザイン行為において最も重要なことは「問題を発見する」ということです。問題が特定できて、何をすべきかという「課題」が設定できた時点で、ほぼ７割は解決したといってもいい・・。それぐらい重要なことです。
Webデザインにおいては、次元の異なる以下のような「問題」があります。
-クライアントの抱える問題 ＞ 要求分析の段階でしっかり調査します
-開発チームが抱える問題 ＞ プロジェクトマネージメントが重要
-''開発途上で発生するバグ、すなわちコードの記述に関わる技術的な問題''
ここでは３つめの技術的な問題について、授業中によく見かける現象を念頭におきながら、その対処方法のヒントを説明します。
~
***menu
#contents2_1
~
**本当にコードの問題ですか？
何かおかしい、というとき、まず疑うべきは、''ほんとに書いているコードに問題があるのか？''ということです。初心者の方が陥りやすい事項を列挙しますので、まずは、それを確認してみましょう。
~
***あなたのページだけが異常ですか？
めったにないことですが、ブラウザそのものの異常で正しくレンダリングされていない・・ことがあります。他のサイトも同様に正しく表示されない場合は、ブラウザの問題であって、あなたの作り方の問題ではありません。
~
***再読み込み(リロード)しましたか？
ブラウザは一定の期間、キャッシュ(表示歴のあるページのデータ)を保持しているので、ブックマークなどからページを開いた場合、そのキャッシュを見ていることがあります。サーバーにアップし直した場合は、ブラウザの''リロードボタンを押す''ということを忘れないようにしましょう。
ただし、HTML以外のCSSやJSなど、リンクでインクルードするファイルについては、単にリロードしただけでは更新されない場合もあります。その場合は、閲覧履歴(キャッシュ)を消去してみましょう。
-Firefox：Shift + 「再読み込み」｜ Ctrl + F5 ｜Ctrl + R （Mac では ⌘ + R）
-Google Chrome：Ctrl + Shift + R （Mac では ⌘ +Shift + R）
-Safari： Shift + 「再読み込み」｜Ctrl + F5 or Ctrl + R （Mac では ⌘ + R）
-Internet Explorer：Ctrl +「最新の情報に更新」｜ Ctrl-F5
Chrome では、開発コンソールの表示中はリロードボタンにオプションがつきます。「キャッシュを消去してリロード」が可能なので、JSの開発などでは、これを用いると作業が楽になります。
~
***編集中のファイルと、チェックしているファイルは同一ですか？
ファイルやフォルダの場所に無頓着なPC初心者の方が最も陥りやすいミスで、実習中にはこのケースが結構あります。開発過程のフォルダが複数ある場合、編集中のファイルとブラウザでチェック中のファイルとが別フォルダのものになってしまう勘違い。これでは、いくらコードを修正しても、ブラウザ上の表示には反映されません。落ついて一旦全部閉じる。あらためてフォルダを確認し、編集中のファイルと、チェックしているファイルが同一であることを確認して下さい。
~
***別のブラウザで試してみましたか？
ブラウザを変えると正しく表示されることがあります。ということは、コードの問題というより、環境側の問題である可能性大です。
&size(12){ただし、動くブラウザの方がおかしい（後述）ということもあります。その場合は、コードの書き方に問題があることになります。};
-そもそも当該ブラウザにその機能が実装されていない・・ということであればあきらめるしかありません。
-実験段階の仕様であれば、[[ベンダープレフィックス>Google:CSS ベンダープレフィックス]]の追加で動くようになることがあります。
当該機能のブラウザ対応状況は、[[Can I Use?>http://caniuse.com/]]でチェックできます。
-特定のブラウザでは、環境初期設定で動作が「無効」になっている技術があります。その場合、設定を変更すれば動きます。
&size(12){そもそも閲覧者のブラウザの状況は様々なので、標準的でない技術を使うのは、実験的なサイト以外ではおすすめできません。};
~
~
**問題はそこですか？
''問題は他（注目対象の外）にある''ことが多いものです。画面に近づいて、そこばかり注目していると、他のところに潜んでいる根本的な問題に気付きにくくなります。どうしても「おかしくないはず」と思ったら、椅子を引いて、全体に目配せしましょう。
~
***全角スペースが混入していませんか？
タイトルや文章以外のところに全角スペースがあると、タグやスクリプトが正常に動かなくなります。アルファベットしか使わない文化圏では発生することのないこの透明なバグ。日本のIT業界にとってやっかいな存在です。文字列検索（[command]+[F]）などで随時確認しましょう。
~
***エラー箇所以外の場所をチェックしましたか？
開発コンソール(後述)にエラーが表示された場合、まずは当該行番号の場所を見るわけですが、文法エラーを除くと、問題はそこにはないことが大半です。
-HTMLタグのエラーの場合、それよりも上方のコードに問題があります。
--正しく閉じられていないタグがあるケース
--値がきちんとダブルクォート( ” ) で閉じられていないケース
-CSSの場合は、上も下もあります。
--当該箇所よりも上、文の最後にセミコロン( ; )が抜けていませんか？
--当該箇所よりも下に、同じセレクタに対する記述がありませんか。
CSSは後着優先。以前の指示を、後から書いた記述で上書きしています。
~
***問題はCSSではなく、HTML、JavaScriptの方ではありませんか？
テンプレート作りでは、多くの学生さんがCSSの記述に時間を割いていることから、うまくいかないと CSS の方にばかり意識が向かいがちですが・・・
-HTMLは正しくコーディングされていますか？
ブラウザは、部分的に閉じタグが無いなどの問題には、柔軟に対応するようで、一見正しく見える形にレンダリングしてくれます。しかし、タグが正しく閉じられていないと、CSSをいくら修正しても正しく反映されません。
''Firefoxの「ソースを表示」では、タグの構成にエラーがあれば、異常を検知した場所でタグを赤字で教えてくれます''。タグの構造に異常がないか最優先で確認してください。
-JavaScriptでスタイルを制御していませんか？
例えばウインドウのサイズをJS側で制御するようなコードを含んでいる場合、それとCSSとの整合性を考える必要がでてきます。規模が大きく複雑になると、この手の問題が多くなります。特に、JSライブラリとの衝突となると対処が困難になります。''どんな機能を持たせるかではなく、いかにいらない機能を捨てるか。''デザインの仕事は less is more です。
~
***「動く方がおかしい」ということありませんか？
ブラウザ間の比較で動かないものがあると、私たちは通常「動かないブラウザに問題がある」という先入観で対応しようとするのですが、''「動く方に問題がある」ということに気づかないと、問題解決できないケースがあります''。
例えば、Mac の Safari でローカルの動作確認をしている場合、Photoshop画像(.psd)でも<img>タグで表示できてしまいます（他ではできません）。また、拡張子をPSDからJPGに書き換えた（やってはいけないこと）ものでも表示されてしまう・・など、通常はダメなものが表示されてしまいます（これは、ある意味ブラウザが気を利かせているのですが・・）。さらにまた、ローカルMacでは、拡張子の大文字・小文字を区別しないので、実際の画像の拡張子が大文字の JPG、コード上では <img src="〜.jpg"> と小文字になっていても、それを同一とみなして表示してしまいます。これはサーバー上では区別されるので、ローカルでは表示されるのに、サーバーにアップすると崩れる・・という問題になるのです。
つまりこの場合、''動かないブラウザに対策を施すのではなく、ファイルそのものや、コード上の拡張子の記述に間違いがあることに気づかなければならないのです''。これは盲点になりやすく、問題解決に結構時間がかかります。
で、結論。''はじめからルールに厳しい環境で開発をする'' というのが賢明です。その意味では、OSは[[Linux]]((この環境を持っている人は２%程度なので少しハードルが高いのですが、本格的なWeb開発を目指す方は、ぜひ調べてみて下さい。[[こちらのページ>Linux]]にも簡単に紹介しています。))、ブラウザは Firefox での動作確認をおすすめします。
~
***ブラウザ間で差がある・・それは本当ですか？
ブラウザ間の違いではなく、たまたま開いている各ブラウザのウインドウサイズの違いが、表示に影響していた・・ということがあります。レスポンシブの確認以外ではウインドウ枠を動かすことを忘れがちですが、確認作業では常にウインドウ枠を動かしてみることが必要です。
私たちの視野は狭く、意識は偏見に満ちています（だから災害はいつも「想定外」のところからやってくるのです）。問題に気づくためには、椅子を引いて、視点を変えながら、あらゆる可能性に目配せすることが必要です。
&aname(DeveloperTool);
~
~
**ブラウザの開発ツールを利用する
記事を移動しました。＞ [[Browser]]
~
~
**ネット検索の活用
同じ問題で悩んでいる人はたくさんいて、特にWeb開発については、関連する記事も多数存在します。現象の問題点を適切なキーワードで検索すれば、解決策が書かれたサイトを見つけやすくなります。例えば、「CSS スクロールバー 非表示」や、「CSS3 アニメーション ドロワーメニュー」など、対象を絞り込むキーワードを知っていると、問題解決は早くなります。
-「どう書くか」は調べれば出てきます。重要なのは「どう質問すればいいか」つまり、「問題の現象をどんな単語で表現し、検索するか」ということです。多少の経験は必要ですが、日頃の対話の中で、それをうまく取捨選択できるようになれば、あとはGoogleが教えてくれます。
-記事の日付に注意
Webの技術は日々変化しています。かつて10行のJSで実現していたことが、今は１行のCSSで済む・・といったことがざらにあります。なるべく、最新の記事から解決策を見つけるようにして下さい。
~
~
