HTML5開発者が犯す5つの最も一般的な間違い：初心者向けガイド
公開: 2022-03-11TimBerners-LeeとRobertCailliauがHTMLを指定してから、20年以上が経過しました。これは、インターネットの構築に使用される標準のマークアップ言語になりました。 それ以来、HTML開発コミュニティはこの言語の改善を求めてきましたが、この叫び声は主に、同僚のHTMLの問題を緩和しようとしたWebブラウザー開発者によって聞かれました。 残念ながら、これによりさらに多くの問題が発生し、多くのブラウザー間の互換性の問題と開発作業の重複が発生しました。 この20年間で、HTMLは4回アップグレードされましたが、ほとんどのブラウザーは2桁の数のメジャーアップデートと多数の小さなパッチを取得しました。
HTML5は最終的に私たちの問題を解決し、それらすべてを支配する1つの標準になるはずでした（ブラウザー） 。 これは、ワールドワイドウェブの作成以来、おそらく最も期待されていたテクノロジーの1つでした。 それは起こりましたか？ クロスブラウザと完全に互換性があり、すべてのデスクトップおよびモバイルプラットフォームで動作し、私たちが求めていたすべての機能を提供する1つのマークアップ言語をついに手に入れましたか？ わからない！ ほんの数日前（2014年9月16日）、W3Cによるレビューの電話がもう1つあったため、HTML5仕様はまだ不完全です。
うまくいけば、仕様がいつか完成したときに、ブラウザーにはまだ重要な廃止されたコードがなく、 Webワーカー、複数の同期されたオーディオおよびビデオ要素、その他のHTML5コンポーネントなどの優れた機能を簡単かつ適切に実装できます。長い時間。
ただし、HTML5に基づいてビジネスを展開し、成果を上げている企業は数千社あります。 何百万人もの人々が使用する優れたHTML5ベースのアプリケーションやゲームも多数あるため、成功は明らかに可能であり、HTML5は、その仕様のステータスに関係なく使用され、今後も使用され続けます。
ただし、私が言及したレシピは私たちの顔に簡単に吹き飛ばされる可能性があるため、回避できる最も基本的なHTML5の間違いのいくつかを強調しました。 以下にリストされている間違いのほとんどは、さまざまなブラウザでの特定のHTML5要素の実装が不完全または欠落している結果であり、近い将来、それらが廃止されることを期待する必要があります。 これが発生するまでは、リストを読んで、HTML5の初心者であろうと経験豊富な獣医であろうと、次のHTML5アプリケーションを構築するときにそれを念頭に置くことをお勧めします。
よくある間違い＃1：ローカルストレージを信頼する
ケーキを食べればいい！ このアプローチは、長年にわたって開発者の負担となってきました。 インターネットが多くの人に恐れられていた「暗黒時代」に、セキュリティ違反とコンピュータの保護に対するかなりの賢明な恐れのために、Webアプリケーションはコンピュータに不当に少量のデータを残すことを許可されました。 確かに、「Microsoft（r）の優れたブラウザマスター」から提供されたユーザーデータや、Flashのローカル共有オブジェクトなどがありましたが、これは完璧にはほど遠いものでした。
したがって、開発者が最初に採用した基本的なHTML5機能の1つがWebストレージであったことは合理的です。 ただし、Webストレージは安全ではないことに注意してください。 Cookieは有線で送信されませんが、暗号化されていないため、Cookieを使用するよりも優れています。 絶対にセキュリティトークンをそこに保存しないでください。 悪意のあるユーザーはいつでも自分のlocalStorageとsessionStorageの値を簡単に変更できるため、セキュリティポリシーはWebストレージに保存されているデータに依存しないでください。
Web Storageとその使用方法についてさらに詳しく知るには、この投稿を読むことをお勧めします。
よくある間違い＃2：ブラウザ間の互換性を期待する
HTML5は、単なるマークアップ言語ではありません。 動作とレイアウトを組み合わせるのに十分成熟しているため、HTML5を高度なJavaScriptを上に持つ拡張HTMLと見なす必要があります。 HTML + CSSの静的な組み合わせをすべてのブラウザーで同じように見せるために以前に発生したすべての問題を見ると、複雑さが増すと、ブラウザー間の互換性を確保するための労力が増えると考えられます。
異なるブラウザでのHTML5の解釈は、JavaScriptの場合と同じように、まったく同じではありません。 ブラウザ戦争のすべての主要なプレーヤーはHTML5仕様に手を貸していたので、ブラウザ間の偏差は時間の経過とともに減少するはずだと考えるのが妥当です。 しかし、今でも一部のブラウザは特定のHTML5要素を完全に無視することを決定したため、ベースラインと共通の機能セットに従うことが非常に困難になっています。 インターネットに接続されたデバイスとプラットフォームを方程式に追加すると、状況はさらに複雑になり、HTML5で問題が発生します。
たとえば、WebアニメーションはChromeとOperaでのみサポートされる優れた機能ですが、電子メールの配信など、発生したWebページのコンテキスト外でユーザーに警告できるWeb通知機能は、InternetExplorerでは完全に無視されます。
HTML5の機能とさまざまなブラウザによるサポートの詳細については、www.caniuse.comでHTML5ガイドを確認してください。
したがって、HTML5は新しく、明確に指定されていますが、ブラウザー間の互換性に関する多くの問題を予期し、事前に計画する必要があるという事実は変わりません。 ブラウザが埋める必要のあるギャップが多すぎるため、プラットフォーム間のすべての違いをうまく克服できないと予想するのは当然です。
よくある間違い＃3：高性能を想定する
HTML5はまだ進化しているという事実にもかかわらず、それは非常に強力なテクノロジーであり、その存在前に使用されていた代替プラットフォームに比べて多くの利点があります。 しかし、特にHTML5の初心者にとっては、大きな力には大きな責任が伴います。 HTML5は、デスクトップおよびモバイルプラットフォームのすべての主要なブラウザで採用されています。 これを念頭に置いて、多くの開発チームは、アプリケーションがすべてのブラウザーで同等に実行されることを期待して、HTML5を優先プラットフォームとして選択しています。 ただし、HTML5仕様にそのように記載されているという理由だけで、デスクトッププラットフォームとモバイルプラットフォームの両方で適切なパフォーマンスを想定することは適切ではありません。 多くの企業（khm！Facebook khm！）は、モバイルプラットフォーム用のHTML5に賭けており、HTML5が計画どおりに機能しないことに苦しんでいました。
ただし、ここでも、HTML5に大きく依存している優れた企業がいくつかあります。 HTML5とブラウザを限界まで押し上げながら、すばらしいことをしている数多くのオンラインゲーム開発スタジオを見てください。 明らかに、パフォーマンスの問題を認識し、これらを回避している限り、すばらしいアプリケーションを作成するのに最適な場所にいることができます。
よくある間違い＃4：アクセシビリティの制限
Webは私たちの生活の非常に重要な部分になっています。 支援技術に依存する人々がアプリケーションにアクセスできるようにすることは、ソフトウェア開発でしばしば脇に置かれる重要なトピックです。 HTML5は、高度なアクセシビリティ機能のいくつかを実装することにより、これを克服しようとします。 数人以上の開発者がこれで十分であると認めており、アプリケーションに追加のアクセシビリティオプションを実装するために実際に時間を費やしたことはありません。 残念ながら、この段階ではHTML5に問題があり、アプリケーションをすべての人が利用できるようにすることはできません。より広い範囲のユーザーを含める場合は、追加の時間を費やすことを期待する必要があります。
HTML5のユーザー補助機能と、最も一般的なユーザー補助機能の現在の状態について詳しくは、この場所を確認してください。
よくある間違い＃5：HTML5拡張機能を使用していない
HTML5は、標準のHTML/XHTMLタグセットを大幅に拡張しました。 新しいタグに加えて、かなりの数の新しいルールと動作が追加されました。 あまりにも多くの開発者がいくつかの拡張機能を採用し、HTML5の非常に優れた新機能のいくつかをスキップしました。
HTML5で最も優れている点の1つは、クライアント側の検証です。 この機能は、おそらくWebブラウザが採用したHTML5の最も初期の要素の1つでした。 ただし、残念ながら、デフォルトでフォームにnovalidate属性を追加する開発者は少なくありません。 これを行う理由は合理的であり、私たちはこれについて議論することになると確信しています。 下位互換性のため、多くのアプリケーションはカスタムJavaScriptバリデーターを実装し、その上にブラウザーですぐに使用できる検証を行うのは不便です。 ただし、2つの検証方法が衝突しないことを保証することはそれほど難しくありません。ユーザー検証を標準化することで、前述のアクセシビリティの問題を解決すると同時に、共通のエクスペリエンスを確保できます。
もう1つの優れた機能は、HTML5でのユーザー入力の処理方法に関連しています。 HTML5が登場する前は、すべてのフォームフィールドを<form></form>タグ内に保持する必要がありました。 新しいフォーム属性により、次のようなことを行うことが完全に有効になります。
<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> lnameがフォーム内にない場合でも、 fnameと一緒に投稿されます。
新しいフォーム属性と拡張機能の詳細については、MozillaDeveloperNetworkを確認してください。
要約
上記の間違いの多くは、さまざまなブラウザーでの問題のあるHTML5実装の直接的な結果であるため、Web開発者はブラウザー戦争の巻き添え被害であると理解しています。 ただし、一般的なHTML5の問題を回避し、HTML5の新機能を理解するために時間を費やすことは依然として重要です。 すべてを制御できるようになると、アプリケーションは新しい拡張機能を利用して、Webを次のレベルに引き上げます。