整理整頓：サイトの作成中に作業を整理する方法。 （パート1）

ちょっとしたトピック



ilusha_sergeevichの同意を得て、 Habréのいくつかの記事の翻訳を投稿する予定です。彼は、「西部思想またはHabréに翻訳すべきもの」セクションの出版物「 Web開発者にとって興味深い、役に立つもの 」で引用しています。 この取り組みの最初の段階で、コミュニティにその実現可能性の程度を尋ねたいと思います（記事の最後の調査）。



実際には、テキスト自体



残念ながら、タイトルに「整理」という言葉を使用しました。 「光を消す」は、おそらく多くの人が考えていることです。 組織化は少し退屈ですが、重要です。 コンテキストでこの概念を検討する価値があるかもしれません。



ファッションアートカフェBeatのWebサイトを作成していると想像してください。 壁には20代の絵画、ジャズの生演奏、裕福なパトロンがいる雰囲気のある場所ですが、彼らはまだ自分のウェブサイトを持っていません。 状況を修正するためにあなたを雇います。 才能のあるデザイナーとして、素晴らしいサイトを作成できることは確かですが、機能について多くのアイデアを持っているため、サイトに必要なすべてのファイルを整理する方法がよくわかりません。



コンテンツを個別に編集し、写真をアップロードし、毎週ブログに投稿し、新しいコンテンツをアップロードできるようにしたいと考えています。 また、Twitterを接続して、メッセージがネットワーク上で自動的にブロードキャストされるように要求します。 顧客はスマートフォンを使用しているため、iPhoneとAndroid用のアプリケーションが必要であり、携帯電話から直接ブログとメニューを表示する機会を与えたいと考えています。 さらに、画像、リンクなどを追加する機能を備えた顧客レビューが必要です。



「レストランのFacebook」は彼らにあなたに言います。 おそらくこの段階で、あなたはそれらを地獄に送るでしょうが、あなたはその考えを理解しています。 おそらく過去に、より複雑なサイトを作成しようとし、称賛に値する熱意を持って作業するようになりましたが、最終的には処理するのが非現実的な悪夢の混乱がありました。 クライアントは興味を示さなくなり、新しい機能の追加が非常に問題になり、夜にエラーを見つけるために働き始めましたが、必要なファイルさえ見つけることができませんでした。 このようなプロジェクトの後、適切に編成されたファイル作成プロセスの関連性を理解するのは簡単です。



一般原則



すべてがシンプルで明確でなければなりません。 無理をしないでください。 一部のサイトおよびデータベースは、作成者が完璧な順序を作成しようとして楽しんでいるように見えます。 実用的な観点から、原則として、そのような構造で作業することは不可能です。



数十（または数百）の小さなファイルを作成し始めた場合、各ファイルには小さなクラスまたは関数しか含まれていないので、やり過ぎです。 ファイルとフォルダーの名前が抽象的すぎる場合やわかりにくい場合は、混乱が生じます。 サイト管理者のログイン用の検証コードが、場所WebsiteData / Items / GenericUser / AdminUser / Code /を持つauth.phpというファイルに保存されている場合、両方のエラーが発生します。 Code / users.phpファイルのcheck_login（）関数だけではどうですか？



サイトのさまざまな側面を混在させないでください。 機能要素と言語を分離します。 最近、私は開発者がCSS、ASP VBスクリプト、JavaScript、HTML、SQL、およびこれらすべてを1つの構造化されていないファイルのひどい混乱で使用するプロジェクトを扱っていました。 私は発明しません。



ワンサイズではすべてに適合しない



フォルダ階層の深さと個々のファイルの数は、プロジェクトのサイズにとって意味があります。 これを覚えておいてください。

以下は、典型的なサイトのサイズと可能な構造の短いリストです。



1ページ



画像、CSS、JavaScriptファイル、コンテンツおよびコード用のフォルダーを作成します。 これに対する特定の要件がない限り、コンテンツのテンプレートを作成しないでください。



5ページ



画像用のフォルダー、CSS、JS、コード用の1つのファイル。 別のフォルダーに複数のコンテンツファイルを作成することを検討してください。 繰り返しますが、サイトの最も頻繁に使用される要素に対して十分な空白をテンプレートに煩わさないでください。



20ページ



画像用のフォルダー、ダウンロード用の別のフォルダー、プロジェクトに関連する他のファイル（「資産」）、コンテンツ用のフォルダー（CMSの使用を検討する必要があります）。 JavaScript、CSS、およびその他のコードは、別のフォルダーを取得するように成長している可能性があります。 明らかにそれらを呼び出します：css /、javascript /、コード/。



すべてのファイルが適切なフォルダーにあることを確認してください。 たとえば、「Content」フォルダーに無関係な.jsファイルを置いてはいけません。単に便利だからです。 テンプレートまたはコードで、必要に応じてファイルを整理できない場合は、コードをリファクタリングして機能させます。



CSS、テンプレート、HTML、作業イメージ、またはJavaScriptを「アセット」/（「その他」、「リソース」、またはその他の名前で呼び出す）に入れないでください。 これらのファイルは、クライアントが考えてはならないコードの一部であり、「アセット」はプロジェクトに関連付けられたファイルのフォルダーです。 それをあなたのルールにし、無条件にそれに従ってください。



20ページ+ Webアプリケーション



上記とほぼ同じです。 この時点で、すべてのコードは別のフォルダーにある必要があります。 これは、 スクリプトの子供がコンピューターを攻撃しようとしたときに、Apacheが誤ってアクセスを開く可能性のあるフォルダーではないことを確認してください。



100ページ



コンテンツには適切なCMSを使用する必要があります。 データベースベースのシステムであるか、ファイルCMSであるかは関係ありません。 2番目のオプションを選択するときは、コンテンツファイルが適切に編成されていること、および個々のヘッダー、説明などのメタデータを指定できることを確認する必要があります。 そうしないと、SEOに多くの時間と労力を費やす必要があります。



ほとんどの場合、サイトにはすでにいくつかの異なるセクションが含まれています。 CSS、JS、画像、およびテンプレートを別々のフォルダーに配置することを検討する必要があります。フォルダーの構造はサイトの構造と一致します。 この時点で、SassまたはLESSを使用することもお勧めします。



2,500ページ以上



コンテンツエディター、デザイナー、プログラマー、SEOエキスパートなどの人材を採用することを絶対に考慮する必要があります。 また、データベースベースのCMSを使用してコンテンツを管理する必要があります（まだ行っていない場合）。 あなたはマネージャーになり、他の人によって行われた仕事に対処します。 生産に入る前に、素材を確認して編集できることを確認してください。



100,000,000+ページ



あなたはマイクロソフトであり、何をしているかを知る必要があります。



ほとんどの小さなサイトは20ページ以上に非常に急速に成長します。 FAQ、いくつかの記事、いくつかの製品を追加するだけです。 したがって、1回限りのサイトであるかどうかわからない場合は、20ページのサイトのように小さなプロジェクトを構成することも理にかなっています。 徐々にページを増やして、スムーズな成長を計画します。