この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。
最終レビュー日: 2024 年 11 月
こんにちは、ようこそ！ここで探しているものが見つかることを願っています。
この投稿は完全な初心者を対象としています。私が初めて Web サイトやデータベースをいじり始めたときに知りたかったすべてが網羅されています。おそらくあなたはまだ学生、あるいは年配で転職を考えている、あるいは退職して（心はまだ若いですが）ただ好奇心だけを持っているかもしれません。重要なことは、新しいアイデアを受け入れ、チャンスをすぐに認識する若い心を持っていることです。吸収する必要がある新しいアイデアの数が膨大なので、これが必要になります。現代の情報システムの実践は、ツールとテクニックの完璧なジャングルです。さらに悪いことに、このジャングルは目まぐるしい速度で進化しています。一体どこから始めるべきでしょうか?
このシリーズは、このジャングルを通る特定のルートを提案することで、困難を最小限に抑えることを目的としています。このルートは、迅速で有益な結果が得られるだけでなく、その後独自の道を進むためのスキルとコンセプトも開発します。
驚くべきことに (これには私も驚きが止まりませんが)、ここで説明するツールやテクノロジーのほとんどは無料です。投資する必要があるのは個人的な時間だけです。残念ながら、これは重要な要素ではありませんが、よく言われるように、「痛みなくして利益なし!
」しかし、さらなる励ましとして、あなたには今、汎用のチャットボットという途方もない無料の味方がいるということも言っておきます。このシリーズには、退屈な手順が満載された、途方もなく長い投稿がいくつか含まれています。それにもかかわらず、手順を詳細に説明しようとすると、さらに長くなってしまうでしょう。私があなたを置き去りにしていると感じたとしても、ボットを呼び出して元の軌道に戻すことができると今では確信できます。 2022 年に chatGPT やその他のボットがリリースされるまでは、これが可能になるとは夢にも思わなかったでしょう。今ではすべてが変わりました。 デジタル家庭教師の紹介については、投稿 4.1 を参照してください。現時点では、無料枠で chatGPT40 を使用することをお勧めします。
そうは言っても、このシリーズの全体的な目的と、このシリーズがたどることを提案するルートの概要を以下に示します。
前提として、コンピューターに情報を読み込み、それを何らかの目的のある方法で処理し、結果を画面に表示するソフトウェアを開発することを目的としているとします。ああ、さらに、世界中の誰でも、どこにいても、自分の作品を使用できるようにしたいと考えています。これは確かに十分簡単なはずです...
IT の世界では、この単純なタスクを達成する方法が無数にあります。しかし、私の経験では、最も簡単なオプションは、Chrome や Safari などのインターネット ブラウザをアプリケーションの「起動パッド」として使用することです。これは奇妙に思えるかもしれません。誰もが携帯電話で自立した「アプリ」を使用しているのではないでしょうか?
これが理由の 1 つです。ラップトップ、タブレット、デスクトップ コンピューターなど、考えられるすべてのデバイス で作業するユーザーがアプリケーションを利用できるようにしたいのです。ブラウザは、アプリケーションを差異から隔離することでこれを実現する優れた方法を提供します。ハードウェアとオペレーティング システムにおいて。また、アプリケーションのロジックをサポートするための洗練された実用的な環境も提供します。一方、アプリは特定のハードウェア プラットフォームに関連付けられており、複雑さの中に陥っています。
もう 1 つの理由は、世界中のどこにいてもユーザーがアプリケーションの情報を利用できるようにしたいということです。ブラウザはすでにインターネット上に存在しており、その目的は情報共有を促進することです。これが、Amazon や Facebook などの大手企業が自社システムのプラットフォームとして Web ブラウザーを喜んで使用する理由です。
つまり、私が提案するルートは、現在一般に「ウェブアプリ」として知られているもの、つまりウェブアプリの「アドレス」をウェブブラウザに入力するだけで起動されるソフトウェアにつながります。この Web アプリは永続的なデータ ストア (「データベース」) を維持することができ、「サインオン」機能を介してこのデータにセキュリティを提供します。ブラウザベースのチャットボットは、Web アプリ テクノロジーの使用の優れた例を提供します。
最新の Web アプリを構築するために習得する必要があるツールとテクノロジーの概要を以下に示します。
OK、バックルを締めて、さあ始めましょう... あなたはこの投稿をオンラインで読んでいるので、すでにオンラインの世界にある程度慣れていると仮定します。このコースでは、デスクトップ コンピューターにアクセスする必要があります。わかりやすくするために、これは Microsoft Windows ラップトップであると仮定します。そうでない場合でも、私の指示を適宜修正していただけると思います。
あなたは、Web ブラウザにテキストを表示するソフトウェアを開発しています。このテキストを、位置、色、サイズなどのさまざまな洗練された構成で表示したいとします。Web ブラウザでは、コンテンツの表示方法を決定する「マークアップ」コードでテキスト コンテンツを囲むことで、これらの構成を指定できます。このシンプルな配置により、驚くほど強力な結果が得られます。
Microsoft のメモ帳などの単純なエディタでテキスト ファイルに指示を入力してサンプルを作成できます。この簡単な演習を試してください:
お気に入りのテキスト エディタ (Windows のメモ帳ユーティリティなど) に次の行を入力し、HTML 拡張子 ("my-first-app.html" など) を付けてファイルとして保存します。
<h1>Hello there</h1>
Windows エクスプローラーでそのエントリを「ダブルクリック」してファイルを「開く」と、Windows はデフォルトのブラウザを開いて「こんにちは」という言葉を表示する画面を表示することで応答します。おめでとうございます。最初の Web アプリが作成されました (ただし、あなた以外には誰も見ることができませんが、後で修正します)。
ここで期待どおりに物事がうまくいかない場合は、ChatGPT に問題の解決を手伝ってもらうのに良い機会です。上記の手順はデバイスの構成に依存します。理解できないこと、または特定のデバイスで動作しないことを ChatGPT に伝えると、問題を修正するために何をする必要があるかを正確に教えてくれます。
重要なことに、これらのドキュメントでは、タグのアクションを変更するために多数の修飾子が使用できることがわかります。たとえば、
Web アプリを作成するには、かなり大きなファイルを作成する必要があると感じているかもしれません。 Web アプリケーションのコードは冗長であり、ファイルに数千行が含まれることも珍しくありません。
上記の例に示すように、これらの行を基本的なテキスト エディタに入力するだけでもできますが、これは悪い考えです。ブラウザは容赦のない猛獣であり、コード内のスペルミスは意図を完全に裏切ることになります。理想的には、入力時にコードを監視し、構造の制御に役立つ方法でコードの書式設定や強調表示を行い、場合によってはコードを作成する専用テキスト エディターが必要です。
IDE は、これらのニーズだけでなく、それ以外にも多くのニーズを満たすように設計されています。
多数の IDE が利用可能ですが、私が推奨するのは Microsoft の VSCode です。無料でインストールでき、非常に広く使用されています。繰り返しますが、これは学習曲線が急峻ですが、Microsoft は優れたオンライン ドキュメントを提供しています。
無料の VSCode パッケージ内には、コードをフォーマットしたり、単純な自動補完メカニズム (JavaScript 命令や変数名など) を提供したりするツールなど、自動化された支援も多数含まれています。チェックメカニズムは構文エラーを検出し、未定義の変数などを強調表示します。
IDE は他にも多くの便利なサービスを提供します。これまでのところ、アプリケーションは 1 つの .html ファイルで表されています。実際には、最新のコンピュータ システムにはおそらく数百のファイルが含まれており、完全なアセンブリを「プロジェクト」と呼びます。大規模なプロジェクトの管理には多くの困難なタスクが発生しますが、これらはすべて IDE の責任となります。
たとえば、あなたが変わりたいと思ったとします>
もう一度、ファイルに対する最近の変更を破棄し、編集履歴の以前の状態にリセットするとします。 VSCode は、混乱を解消するために使用できるローカル ファイル履歴を保持します。さらに、VSCode は Github と呼ばれるバージョン管理システムとシームレスにリンクし、プロジェクトの安全な外部 Web ベースの「チェックポイント」コピーを作成します。これにより、ラップトップをバスに置き忘れた場合でも、ソースとその履歴は安全に保たれます。
最後に、VSCode は、デバイスのオペレーティング システムに直接リンクするターミナル セッションを使用してプロジェクトを実行するためのプラットフォームを提供します。 VSCode 内で多くの時間を費やすことになるでしょう。
これは、デバイスに VSCode をインストールし、Visual Studio Code の入門にある Microsoft のチュートリアルを試してみる良い機会かもしれません
JavaScript は初心者にとって素晴らしい言語です。習得が簡単で、多くの状況でうまく機能します。その本来のホームはブラウザであり、Web アプリの HTML セクションで定義されたデータ構造を読み書きできます。簡単に言うと、画面に対して直接読み書きすることができます。ただし、ブラウザ内とサーバー上でリモート実行しているときの両方で、リモートのサーバーベースのデータ ストアの読み取りと書き込みを行う機能も獲得しました。つまり、これが非常に便利になったので、学習する必要がある唯一の言語になる可能性があります。
始めましょう。 JavaScript は「インタープリタ型」言語です。これは、コードを実行する準備に特別な前処理が必要ないことを意味します。 「ランタイム エンジン」に直接起動して、結果をすぐに確認できます。あなたの素朴な Web ブラウザは、JavaScript ランタイム エンジンの一例です。 JavaScript を追加して、前に作成した my-first-app.html ファイルを「インテリジェントに」動作させる方法を見てみましょう。
JavaScript は、HTML 構文の厳密な性質から、画面に対して直接読み書きできる機能を獲得しています。これにより、ブラウザは画面レイアウトの「モデル」、つまり「ドメイン オブジェクト モデル」（略して「DOM」）と呼ばれるツリー構造を構築できるようになります。 DOM 内では、ツリーのさまざまな枝や葉はすべて JavaScript によって個別にアドレス指定できます。
これが例です。上記で紹介した my-first-app.html ファイルを次のように編集します:
<h1>
</h1><p>このコードは、コードの出力を時刻に依存させます。昼休み前 (具体的には、特定の日の正午 12 時前) にファイルを再実行すると、出力は青色で表示されます。昼食後、出力は赤で表示されます。おめでとうございます。最初の「インテリジェントな」Web アプリのコーディングが完了しました。 </p><p>HTML <script> 間の行</script>タグには、JavaScript コードの最初の部分が含まれています。 hourOfDay = で始まる行は、実行時の「日付」「オブジェクト」を含む「変数」を作成します。 Javascript の「オブジェクト」は複雑な概念であり、将来的には理解できるようになります。ただし、現時点で知っておく必要があるのは、コードの実行時に作成される「Date」オブジェクトのインスタンスのどこかに、ミリ秒単位の正確な時刻表現が含まれるということだけです。さらに、このオブジェクトには、ミリ秒データから「時刻」を表す 0 ～ 23 の整数を抽出する .getHours 「メソッド」も含まれています。コードの後続行の if および else JavaScript キーワードは、それらが参照する値に応じて適切に動作するロジックを提供します。</p>
<p>色変更ロジックをテストするために昼休みまで待たなければならないのが不便な場合は、分が偶数のときに色を切り替えるようにコードを変更してみてください。その日の分を取得する「メソッド」は getMinutes() です。数値 num が偶数か奇数かをテストするための Javascript は if (num % 2 === 0) です。 my-first-app.html のコードを変更して、1 分経過後にページを更新したときにテキストの色を変更できるかどうかを確認してください。</p>
<p>もうお気づきかと思いますが、<h1>ファイルの元のバージョンの最初の行にあるタグは、「id=」句を取得しました。これにより、タグに一意の文字列 (この例では「test」) が「ラベル」付けされます。賢い部分は、JavaScript が「test」<h1> の「スタイル」を変更できるようにする document.getElementById('test') 命令です。タグ。 </p>
<p><em>document.getElementById('test') 命令をいじるのに一生を費やすのではないかと恐れる前に、これは必要ないことを保証させてください。ソフトウェア エンジニアリングにおける最近の開発全体は、<b>意味のある</b>言語パターンを通じて画面レイアウトを制御できるように設計されています。これらによりタスクが大幅に簡素化されます。この投稿シリーズでは、前に示したように、SvelteKit と呼ばれる「コード フレームワーク」を使用してシステムを作成します。この例はポスト 2.1 でご覧いただけます。</em></p>
<p>では、JavaScript を流暢に話せるようにするにはどうすればよいでしょうか?ここで必要なのは良い本です。私がお勧めするのは、Marijn Haverbeke の「Eloquent JavaScript」です。 </p>
<p>必要に応じて、これをオンラインで読んでください (最新版は https://JavaScript .net/ で見つけることができます)。ただし、走り書きできる物理的なページを備えた、きちんと書かれた本ほど便利なものはありません。現段階では中古品 (および初期版) で問題ありません。おそらく、しばらくの間行う必要がある最良の (そして唯一の) 初期投資となるでしょう。 Haverbeke は、上で紹介した「オブジェクト」、「メソッド」、「機能」、「スタイル」の概念を、私が期待できるものよりもはるかにうまく説明してくれるでしょう。 </p><p>それでもオンラインで学習することを決意している場合は、Mozilla の JavaScript の基礎に関するチュートリアルが優れていると思います。</p>
<p>自分の仕事のテストプロジェクトについて考え始めるのも良いでしょう。このシリーズの後の投稿では、人工的な例をいくつか紹介しますが、個人的な観点から再解釈できた場合にのみ、物事は意味をなします。このプロジェクトに必要なデータの種類について今から考え始めてください。これはどのように表現されるでしょうか?ユーザーはそれをどのように操作するでしょうか?</p>
<h4>
2.4 ブラウザツール
</h4>
<p>コーディングの試みが最初から適切に機能する可能性はほとんどありません。 おそらく、画面レイアウトが意図したものと異なっているか、Web アプリのロジックに問題がある可能性があります。ブラウザーはエラー メッセージを表示する場合もありますが、ただ座って不機嫌になるだけの場合もあります。これをどうやって整理しますか?</p>
<p>幸いなことに、すべての主流ブラウザには、これらの問題を調査できる「検査ツール」が組み込まれています。 「インスペクター」は、ブラウザによる画面レイアウト定義の解釈に関する内部情報を提供し、クライアント側の JavaScript 命令の実行を監視できます。 Google Chromeの場合、ブラウザ画面を右クリックして表示されるポップアップから「検査」を選択するだけで、この検査ツールにアクセスできます。 </p>
<p>悪いニュースは、この検査ツールが初めて知ると、メニュー バーとサイズ変更可能なウィンドウを備えた憂慮すべき複合体であることが明らかになることです。ただし、一度コツを掴めば、このツールは楽しく作業でき、問題を追跡して修正する上で貴重なリソースであることがわかるでしょう。完全なドキュメントは Google devtools で見つけることができます。</p>
<p>レイアウトの問題に関しては、インスペクタは、表示要素の位置を決定するさまざまな「マージン」、「パディング」、「幅」パラメータがブラウザによってどのように適用されるかをグラフィックでデモンストレーションします。これに加えて、適切な調整を試すためのツールも提供されます。</p>
<p>ロジックの問題に関しては、インスペクターを使用すると、JavaScript ソース コードに「ブレークポイント」を設定できます。これらを配置すると、Web アプリを更新すると最初のブレークポイントで実行が停止し、その時点でのプログラム変数の値を表示できるようになります。その後、後続のコードを 1 行ずつステップ実行するか、次のブレークポイントまでスキップするかを選択できます</p>
<p>プログラムが「クラッシュ」した場合、インスペクターは何が問題なのかを教えてくれます。</p><p>以前は、ロジックの問題の原因を突き止める通常の方法は、「ログ」命令を追加することでした。これらは、プログラム全体の「制御フロー」を追跡し、検査ポイントでプログラム変数の値を表示します。ご想像のとおり、これは面倒な手順でした。さて、ブラウザーで Web アプリを「検査」すると、まるでスイスの時計の裏蓋を開けて、そのすべての複雑な機能が検査のために並べられているのを見つけたかのような気分になります。デバッグがとても楽しくなったので、コードでエラーが発生するのが楽しみになりました!</p>
<h4>
2.5 スヴェルテキット
</h4>
<p>上記のセクション 2.3 で紹介した Javascript の例では、醜い document.getElementById("idName") メソッドを使用して Web アプリの DOM にアクセスし、要素 "idName" のプロパティを変更しました。 Sveltekit のようなフレームワークは、よりフレンドリーで効率的な DOM インターフェイスを提供します。これらを使用すると、ポップアップの表示と非表示、リストの表示、ブラウザーのタブ履歴の作成などの一般的なタスク用の「意味のある」コードを作成できます。たとえば、「if PopUpVisible displayPopup()」という Svelte ステートメントは (構文が少し厳密ですが)、displayPopup 変数が true に変更されたときにポップアップを表示します。</p>
<p>初期開発中、フレームワークは、IDE ターミナル セッションで起動する「ローカル サーバー」を通じて動作します。これには、基礎となる Web アプリ コードを変更するたびにブラウザ ウィンドウが自動的に更新され、更新されるという魔法のような効果があります。 </p>
<p>フレームワークを使用すると、Web アプリ コードを実行する場所を指定することもできます。たとえば、リモート ストレージに読み書きするステートメントは、状況に応じて、ユーザーのブラウザでローカルに実行するか、サーバーでリモートで実行するのが最適な場合があります。今はこれに興味がないかもしれませんが、本格的なコードを書くようになると重要になります。ブラウザ上で実行されるコードはデバッグが簡単ですが、効率とセキュリティの問題に対処する必要がある場合は、「サーバー側」で実行できる機会が嬉しいかもしれません。 Sveltekit を使用すると、このようなアレンジメントを特にエレガントな方法で提供できます。</p>
<p>コードを実装する準備ができたら、フレームワークの最後の動作は、アプリケーションの「パッケージ化された」バージョンを「ビルド」することです。これにより、アプリケーションをコンパイル、バンドル、最適化して展開可能な「パッケージ」にするための一連の手順が実行されます。これにより、デプロイされた Web アプリが可能な限り小さく、高速で、効率的になることが保証されます。</p>
<p>現在、最も人気のあるフレームワークはおそらく Meta の React システムです。これは Facebook の開発をサポートするために 2010 年頃に作成されました。このアイデアは非常にうまく機能したため、Vue、Angular、Next.js などのライバルがすぐに現れました。 Sveltekit は最近登場したものの 1 つで、特に使いやすいのでここで使用しています。 Stack Overflow の 2024 年の開発者アンケートでの支持率の高さに注目してみてはいかがでしょうか。</p><p><em>余談ですが、私が時々 Svelteki について話した後、Svelte と呼ばれる別のものに切り替えようとするひねくれたように見えることに気づいたかもしれません。 Svelte は、JavaScript を「拡張」し、効率的な Web アプリを簡単に作成できるようにするために svelte.dev エンジニアによって作成された「言語」です。 Sveltekit は、Svelte Web アプリが実行される環境を作成するフレームワークです。</em></p>
<h4>
2.6 Firebase と App Engine
</h4>
<p>Web アプリ プロジェクトの開発段階を完了するために必要なものはすべて、適度に指定されたデスクトップ コンピューターで提供できます。しかし、期待される世界にプロジェクトを立ち上げたい段階に達すると、専門の「バックエンド」Web サーバーのサービスが必要になります。これにより:</p>
このコースでは、以下を使用します:
最初から Firestore を使用するため、まず Firebase アカウントを作成する必要があります。
これまでは、クラウド サービスを提供するために GoDaddy や HostPapa などの「インターネット サービス プロバイダー」を頼っていたかもしれません。これらのサービスにはまだ果たすべき役割があり、確かにヘルプ デスクを通じて個別に優れたサポートを提供しますが、クラウド プラットフォームは現在の目的に適した、より優れた包括的なパッケージを提供します。
このコースは 2 つの主要な段階で進行します。 1 つ目は、HTML、JavaScript、Firebase、Firestore の基本を理解できるように設計されています。このゲームをまったく初めて使用する場合は、ここで学ぶべきことがたくさんあり、混乱する可能性がたくさんあります。これにはしばらく時間がかかることが予想されます。時間をかけてチャットボット チューターを多用してください。
これを完了すると、第 2 段階では、Sveltekit Web アプリ設計のより高度な要素をいくつか紹介します。これを正常に完了すると、便利な Web アプリを開発するために必要なもののほとんどがわかります。
それでは、行きましょう。最初のステップは、SvelteKit をローカル マシンにインストールし、Web アプリ開発テクニックに慣れることです。手順については、投稿 2.1 を参照してください。
以上がNgSysV.A 若者向け AI 時代のシステム開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
