Web 開発者が犯しやすい 10 の間違い

同じタスクを達成する方法について、私たちの前にある選択肢は無限に思えます。特に、最新のネットワーク環境で動作できる Web サイトの開発となるとそうです。 Web 開発者は、まず Web ホスティング プラットフォームと基盤となるデータ ストレージ メカニズムを選択し、提供されているツールを使用して HTML、CSS、JavaScript コードを記述し、デザイン効果を実現する方法と、どのような潜在的な JavaScript ライブラリ/フレームワークを含めるかを検討する必要があります。

このレベルまで選択を絞り込むと、インターネット上で関連する記事、フォーラム、例をたくさん見つけることができ、より良い Web エクスペリエンスを作成する方法を学ぶことができます。しかし、どれだけ多くの選択肢があるとしても、開発者は選択肢の中で迷うことがあります。これらのエラーの一部は特定のシナリオに関連していますが、すべての Web 開発者が直面する共通の課題もいくつかあります。

そこで、一連の調査、経験、最近の観察を通じて、よくある間違いトップ 10 のリストを以下にまとめました。確かに、今でもその間違いに苦しんでいる Web 開発者はたくさんいます。私は彼らに独自の解決策も提供しました。 。

以下のリストは順不同です。

1. 古い HTML コードを書く

間違い: インターネットの初期には、少数のマークアップ オプションしか利用できませんでしたが、今ではそのようなオプションは非常に豊富になりました。ただし、いくつかの古い習慣は今でも残っており、多くの実務者は、あたかも前世紀に生きているかのように HTML コードを作成しています。具体的な例としては、レイアウトに

要素を使用すること、他のセマンティック タグの方が適切な場合には 要素を使用すること、およびHTML 標準タグは、ページ上に項目を配置するために多数の項目を使用することさえ現在サポートされていません。

影響: 前世紀の強力なスタイルで上記の HTML コードを記述すると、マークアップが過度に複雑になる可能性があり、ブラウザごとに異なる動作効果が生じる可能性があります。さらに、Microsoft Edge や新しいバージョンの IE (IE 9、10、11 を含む) でこのような複雑なマークアップを使用する理由はありません。

回避方法: コンテンツのレイアウトを処理するために

要素を使用しないでください。また、テーブル データを表示するときは、その使用頻度を厳密に制限してください。現在利用可能なマークアップ オプションをよく理解するには、whatwg.org で概要を確認してください。コンテンツの表示方法を定義するのではなく、HTML コードを使用してページのコンテンツを記述します。デザインコンテンツを正しく表示するには、最初に CSS を使用します。

2. 「私のブラウザには明らかに問題はありません...」

エラー: 開発者は、特定のブラウザを支持したり、別のブラウザを極度に軽蔑したりする可能性があり、この偏った見方を Web ページのテスト作業に持ち込んでしまいます。場合によっては、他のブラウザで正しくレンダリングされるかどうかをテストせずに、インターネットからのサンプル コードをプロジェクトに直接組み込むこともあります。さらに、一部のブラウザではスタイルのデフォルト設定が異なります。

影響: 特定のブラウザーにのみ適したサイトを作成すると、他のブラウザーを使用するユーザーに非常に悪いアクセス エクスペリエンスをもたらす可能性があります。

回避方法: 開発プロセス中にすべてのブラウザとバージョンの Web ページをテストするのは明らかに非現実的です。ただし、特定の間隔で複数のブラウザを使用して、Web サイトが適切に機能しているかどうかを確認できます。これは理想的な妥協案です。どの開発プラットフォームを使用する場合でも、無料の仮想マシンやサイト スキャン ツールなど、テスト作業に役立つ無料のツールが多数あります。 Browsershots や BrowserStack などの Web サイトは、特定のページがさまざまなブラウザー、バージョン、プラットフォームでどのようにレンダリングされるかを理解するのに役立つスナップショットを提供することもできます。 Visual Studio などのツールでは、現在開発中の 1 つのページを表示するためにさまざまなブラウザーを使用することもできます。 CSS を使用してデザインするときは、すべてのデフォルト値を「リセット」することを忘れないでください。

サイトで単一のブラウザー用に作成された特別な CSS 機能を使用している場合は、-webkit-、moz-、または -ms- などのさまざまなプロバイダー プレフィックスに注意してください。業界動向のガイドとして、以下に提供されている参考サイトを注意深く確認することをお勧めします (すべて英語の原文です):

• Microsoft Edge 開発ブログ: 過去からの決別、パート 2: ActiveX、VBScript、attachEvent に別れを告げる…

• QuirksMode.org: CSS ベンダー プレフィックスは有害であると考えられています

• Bruce Lawson: -webkit- ベンダー プレフィックスをサポートする Internet Explorer について

上記の参考文献では、手続き型プレフィックスの提供を回避する方法と関連する理由について説明していますが、次のこともできます。具体的な提案を含むソリューションの詳細については、こちらをご覧ください (原文は英語)。

3. 形式の調整に注意してください

エラー: プロンプト (特にテキストフィールドの入力) を通じてユーザーに情報を要求し、期待どおりにユーザーからデータを取得できると単純に想定します。

影響: ユーザーがデフォルトで情報を入力することを信頼すると、多くの予期せぬトラブルに直面する可能性があります。要求されたデータが正しく取得されない場合、または取得されたデータが基礎となるデータ形式と互換性がない場合、ページでエラーが発生する可能性があります。さらに深刻なのは、Web サイトのデータベースに対する意図的な違反の一部は、インジェクション攻撃を構成するのに十分であることです。

回避方法: 最初のヒントは、Web サイトがどのような種類のデータの入力を求めているのかをユーザーに明確に理解させることです。現時点では、単純な「住所を入力してください」というプロンプトは、ユーザーが会社の住所、自宅の住所、さらには電子メール アドレスを入力する必要があることを意味する場合があります。的を絞った説明を行うだけでなく、最新の HTML が提供するデータの正当性検証技術も最大限に活用する必要があります。データがブラウザ側で有効であるとみなされるかどうかに関係なく、サーバー側でもデータを検証することが重要です。フィールドの内容がデータ型の要件に準拠していることを確認せずに、ユーザーが入力した複数行インデックスの T-SQL ステートメントでサイト データを使用することを決して許可しないでください。

4. 応答速度が遅すぎます

エラー: 高品質の画像や写真が多数含まれるページの場合は、 要素を使用して高さと幅の属性を調整する必要があります。また、ページから CSS や JavaScript などのファイルへのリンクは、多くの場合容量が大きくなります。さらに、ソース HTML マークアップの存在により、不必要な複雑さと読み込みの負担が生じることがよくあります。

影響: ページが完全に表示されるまでに時間がかかりすぎる場合、一部のユーザーはアクセスを諦めたり、ページ全体を焦ってリロードしたりする可能性があります。場合によっては、ページの処理に時間がかかりすぎると、他の不明なエラーが発生することもあります。

回避方法: インターネットの通信速度がどんどん速くなっているので、何の躊躇もなく肥大化したページ結果をデザインできるとは考えないでください。代わりに、ブラウザとサイト間のあらゆるトラフィックを運用コストと考えてください。画像はページの肥大化の元凶とも言えますので、画像によるページの読み込みコストを最小限に抑えるために、次の 3 つの観点から検討してください。

「ページに含まれるすべての画像は、必要ですか? 答えが「いいえ」の場合は、不要な画像を削除してください。ここをクリックして Web サイトをスキャンして、圧縮できる画像に関する推奨事項を取得することもできます。

Shrink O’Matic や RIOT などのツールを使用して、画像のサイズを最小限に制御します。

画像プリロードソリューションを採用します。これにより、最初のダウンロードにかかる実際のコストは削減されませんが、関連画像を使用するサイト上の他のページの読み込みが速くなります。

コストを削減するもう 1 つの方法は、CSS および JavaScript リンク ファイルのサイズを圧縮することです。現在、この評価を完了するために、Minify CSS や Minify JS などの多数のツールから選択できます。

4 番目の間違いを終える前に、HTML で

5.「動くはず」のコードを書く

エラー: JavaScriptであろうと、サーバーサイドで実行されるコードであろうと、開発者としては、実際の動作をテストを通じて検証し、デプロイ後に意図したとおりに機能することを確認する必要があります。コードは実行前に十分にテストされているため、実行時にエラーが発生することはありません。

影響: テストされていないコードを含むサイトでは、エンドユーザーにとって非常に悪い方法でエラーが発生する可能性があります。これは実際のユーザー エクスペリエンスに重大な影響を与えるだけでなく、特定の種類のエラー メッセージの内容によって、サイトを侵害しようとするハッカーに対して厳密に保護する必要がある詳細が明らかになる可能性もあります。

回避方法: 人は必ず間違いを犯すので、この哲学的思考をプログラミング作業に導入する必要があります。 JavaScript では、エラーを回避し、実際にエラーが発生したときにエラーを捕捉するために、あらゆる最善の技術的手段を必ず使用する必要があります。コードの品質を向上させるもう 1 つの方法は、将来の変更に対してコードを単体テストすることです。

サーバー側のコードエラーは、ユーザーが気づく前に発見して修正する必要があります。必要なエラー プロンプトのみをユーザーに表示し、より注意深く HTTP 404 エラー ページをより美しくデザインしてください。

6. フォークコードの作成

エラー: すべてのブラウザとそのバージョンをサポートするという崇高な考えから、開発者によっては、考えられるあらゆる実行シナリオに対応するために異なるコードを作成することがあります。これらのコードは if ステートメント ループに基づいており、さまざまな実用的な方向に対応するフォーク バージョンを提供します。

影響: ブラウザーのバージョンが更新され続けると、フォーク コード ファイルの管理が非常に複雑になるか、不可能になる場合があります。また、最初の点で述べたように、これは実際にはまったく不要です。

回避方法: ブラウザ/バージョンをターゲットにするのではなく、コード内で機能検出を実行します。機能検出テクノロジ ソリューションの出現により、コードの量が大幅に削減され、コードの読み取りと管理が容易になります。 Modernizr などのライブラリの使用を検討すると、HTML 5 や CSS 3 に適応できなくなった古いブラウザーのバックアップ サポートを自動的に提供しながら、関数検出の実装に役立ちます。

7. 非レスポンシブデザインを使用する

エラー: サイト開発に取り組むとき、ユーザーは開発者/デザイナーと同じモニターサイズを持っていると想定されます。

影響: モバイルデバイスや特定の非常に大きな画面でサイトを表示すると、ユーザーエクスペリエンスにも影響します。たとえば、ページの特定の重要な部分が表示されなくなったり、他のページに移動できなくなったりすることがあります。

回避方法: 開発ではレスポンシブデザインを考慮してください。サイトでレスポンシブ デザインを使用し、同じ方法で画像サイズを調整することも、この点で非常に役立つ人気のライブラリである Bootstrap です。

8. 意味のないページの構築

エラー: 公開ページには有用なコンテンツと情報が含まれていますが、検索エンジンに関連するキーワード、タグ、ヒントは提供されていません。アクセシビリティ機能は提供されません。

影響: この場合、ユーザーが検索エンジンを通じてページを見つけることが難しくなり、理想的なトラフィックを獲得することが困難または不可能になります。さらに、ページのコンテンツは、閲覧中にユーザーの視覚が操作されないように慎重に設計する必要があります。

回避方法: SEO (検索エンジン最適化) メカニズムを使用し、HTML アクセシビリティをサポートします。 SEO に関しては、必ずタグを追加して、キーワードと関連する説明を含む意味のあるページ コンテンツを提供してください。アクセシビリティを向上させるために、各 または の下にある alt="your image description" 属性を確認できます。もちろん、これを実行するだけでは十分ではありません。ここをクリックしてページにアクセスし、そのページが第 508 条に準拠しているかどうかを確認してください。

9. 開発されたページには更新操作が多すぎます

エラー: 作成されたサイトには、各操作のページ更新ステップが多すぎます。

影響: ページの肥大化 (ポイント 4 を参照) と同様に、ページの読み込み時間という重要なパフォーマンス指標も影響を受けます。更新が多すぎると、ユーザー エクスペリエンスがスムーズでなくなり、コンテンツが更新されるたびにページが短く (または長く) リセットされる可能性があります。

回避方法: この問題を解決する便利な方法の 1 つは、サーバーに接続するために各操作が本当に必要かどうかを確認することです。たとえば、処理のためにサーバー側のリソースに依存する必要がない場合は、クライアント独自のスクリプトを使用して結果を即時に提供できます。もちろん、AJAX テクノロジーを使用したり、さらに一歩進んでシングルページ アプリケーション SPA ソリューションを選択したりすることもできます。現在、JQuery、KnockoutJS、AngularJS など、さまざまな一般的な JavaScript ライブラリ/フレームワークが、この問題を単純化する多くの方法を提供しています。

10. 仕事が多すぎる

間違い: 開発者はWebコンテンツの作成に多くの時間を費やしすぎる可能性があります。この時間は、反復的なタスクの実行や、単に大量のテキストの入力に費やされる可能性があります。

影響: Web サイトが立ち上げられたばかりの場合、またはその後の更新が行われている場合、開発者が Web サイトに投資する時間が過大になりすぎることがよくあります。そして、より短い時間とより少ない労力で同じ効果を達成できる他の開発者がいる場合、私たちが投資した時間コストは理想的な利益を得ることができません。この単純で反復的な手作業はエラーにつながる可能性があり、エラーの診断にはプロジェクトの開発よりも時間がかかることがよくあります。

回避方法: 独自の解決策を見つけてください。開発の各段階を処理するために、新しいツールや新しいワークフロー テクノロジの使用を検討できます。たとえば、現在使用しているコード エディターは Sublime Text や Visual Studio よりも優れていますか?どのコード エディターを使用している場合でも、その機能設定を詳しく調べたことがありますか?おそらく、散発的に時間をかけてドキュメントを注意深く読むだけで、数時間、あるいは将来的にはさらに多くの時間を節約するのに十分な新しい用途を見つけることができるでしょう。

役立つかもしれないインターネット上の既製のツールもお見逃しなく！たとえば、dev.modern.ie で、(複数のプラットフォームおよびデバイスにわたる) テストとトラブルシューティングを簡素化するツールを検索します。

自動化されたプロセスを通じて、所要時間とエラーの可能性を減らすこともできます。たとえば、Grunt などのツールを使用して、ファイル サイズ圧縮などのタスクを自動的に完了できます。さらに、Bower は、ライブラリとフレームワークをより効率的に管理するのに役立ちます。

それでは、Webサーバー自体に最適化の余地はあるのでしょうか？ Microsoft Azure Web Apps を選択すると、ほぼすべての開発シナリオに適したサイトを迅速に作成できます。これは間違いなくビジネスを拡大するための理想的なソリューションです。

結論

上記のよくある間違いを列挙することで、Web 開発者は無数の先人たちに害を与えた罠の多くを取り除くことができます。これらの落とし穴を認識することに加えて、私たちはこれらのエラーの影響とその修正方法も理解し、習慣に適応しながら作業に自信を持てるように、それに応じて開発プロセスを設計しました。さあ、同志たち！

原題: 10 Common Web Developer Mistakes