メタルスミスを使用して静的サイトを作成する方法
前の記事では、静的なWebサイトジェネレーターを使用するかどうかの理由について説明しました。要するに、静的なWebサイトジェネレーターは、テンプレートと生データ(通常はMarkdownファイルに含まれる)からのHTMLのみを含むページファイルを構築します。ホスティング、パフォーマンス、セキュリティのオーバーヘッドなしで、いくつかのCMSの利点を提供します。
静的Webサイトは、次のようなさまざまなプロジェクトに適している場合があります。
- 小さなウェブサイトまたは個人ブログ。数十ページのウェブサイト、まれな投稿、1人または2人の著者が理想的かもしれません。
- REST APIなどの技術文書。 一連のWebビューを必要とするアプリケーションプロトタイプ。
- e-books —マークダウンファイルは、PDFまたは他の形式およびHTMLに変換できます。
- 基本的に、静的なWebサイトジェネレーターは建築ツールです。それを使用して、タスクを実行したり、グラントやガルプのようにプロジェクトの足場をプロジェクトできます。
Metalsmithは、従来のCMSのオーバーヘッドなしで軽量のWebサイトを作成するのに最適な柔軟なプラグ可能な静的Webサイトジェネレーターです。
- メタルスミスのインストールとセットアップには、新しいプロジェクトディレクトリの初期化とNPM経由で必要なプラグインをインストールするnode.jsが必要です。
- メタルスミスのプロジェクト構造には、ソースファイル、テンプレート、資産の整理が含まれ、開発と生産構造を明確に区別します。
- Metalsmithは、さまざまなプラグインを使用して、Markdownファイルの処理、RSSフィードの作成、すべてのサイトマップをすべてビルドファイルで構成しているサイトマップなどの機能を拡張します。
- カスタムプラグインは、メタデータのセットアップやデバッグ情報の追加など、特定のタスクを処理して、ウェブサイトのコンテンツと構造の管理におけるメタルスミスの汎用性を強化するなどの特定のタスクを処理することができます。
- 金属スミスのビルドプロセスは、より複雑なシナリオに対処するためにGulpなどのタスクランナーと統合できますが、メタルスミス自体はより単純なプロセスに十分です。
- なぜメタルスミスを選ぶのですか?
このチュートリアルは、このチュートリアルにメタルスミスを選択しました
特定の種類のプロジェクト(ブログなど)をターゲットにしていません
さまざまなテンプレートおよびデータ形式のオプションをサポートしています
軽量- 依存関係はめったにありません モジュラー構造の使用
- は、シンプルなプラグインアーキテクチャと を提供します
- 簡単に開始できます。
- このチュートリアルは、デモのWebサイトを構築しました。デザイン賞は獲得しませんが、基本的な概念を示しています。 Metalsmithビルドコードは、GitHubリポジトリからチェックおよびインストールできます。または、ここで指示に従って、独自の基本サイトを作成することもできます。
数回金属スミスを使用しました。これがすべての静的Webサイトを構築する究極の方法だとは思わないでください!
インストールメタルスミス
node.jsがインストールされていることを確認してください(たとえばNVMを使用して)、プロジェクトや初期化などの新しいプロジェクトディレクトリを作成します。
<code>cd project && cd project npm init -y </code>
Metalsmith-Assets - メタルスミスビルドに静的資産を含める
- Metalsmith-Browser-Sync - browseryncをワークフローに統合します
- Metalsmith-Collections - グローバルメタデータにファイルのコレクションを追加
- Metalsmith-Feed - コレクションのRSSフィードを生成
- Metalsmith-HTML-Minifier - Kangax/HTML-MINIFIER を使用してHTMLファイルを圧縮します
- Metalsmith-in-Place - ソースファイルにテンプレートの構文をレンダリング
- Metalsmith-Layouts - ソースファイルにレイアウトを適用します
- Metalsmith-Mapsite - sitemap.xmlファイルを生成
- Metalsmith-Markdown - Markdownファイルを変換
- Metalsmith-Permalinks - ファイルにカスタムパーマリンクモードを適用します
- Metalsmith-Publish - ドラフト、プライベート、将来の日付をサポートする投稿Metalsmith-Word-Count - HTMLファイルのすべての段落の単語数/平均読み取り時間を計算します
- プロジェクト構造
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
次のようにサンプルファイルを作成するか、デモSRCディレクトリから直接コピーできます。
ページ
ページマークダウンファイルはSRC/HTMLに含まれています。これには、各Webサイトセクションの第1レベルのサブディレクトリ、つまり
を含めることができます。
src/html/start - 特定の順序でプロジェクトを説明するページ
- src/html/article - 反その順序で配置されたさまざまな記事
- src/html/連絡先 - 単一連絡先ページ
- 各ディレクトリにはindex.mdファイルが含まれています。これは、そのセクションのデフォルトページです。他のページは、一意の名前を使用できます。
などのディレクトリベースのパーマリンクに変換します
src/html/start/index.mdは/start/index.html
になります- src/html/start/installation.mdは/start/installation/index.html
- になります
- 各マークダウンファイルは、「序文」と呼ばれるコンテンツとメタ情報を提供します
優先度:0(低)から1(高)の間の数字。これを使用してメニューを並べ替えてXMLサイトマップを定義します。
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
パブリッシュ:必要になる前に公開されないことを確認するために、ドラフト、プライベート、または将来の日付として設定できます。
- 日付:記事の日付。設定されていない場合は、将来のリリース日またはファイル作成日を使用します。
- レイアウト:使用するHTMLテンプレート。
- テンプレート
- HTMLページテンプレートはSRC/テンプレートに含まれています。 2つのテンプレートが定義されています:
- src/html/template/page.htmlデフォルトのレイアウト
- src/html/template/article.md記事レイアウトは、リンクの前後に日付を表示するレイアウト
他のオプションはサポートされていますが、ハンドルバーテンプレートシステムが使用されます。典型的なテンプレートには、{{{contents}}}タグが必要です。ページコンテンツと{{title}}などの序文値を含む:
<code>cd project && cd project npm init -y </code>
{&gt; {&gt;
パートセクション - またはHTMLスニペットファイルは、SRC/Partialsに含まれています。これらは主にテンプレートで使用されていますが、次のコードを使用してコンテンツページに含めることもできます。
ここで、partialNameはSRC/partialsディレクトリのファイルの名前です。
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
静的資産
静的資産(画像、CSS、JavaScriptファイルなど)は、SRC/資産に含まれています。すべてのファイルとサブディレクトリは、Webサイトのルートにそのままコピーされます。
カスタムプラグイン
サイトの構築に必要なカスタムプラグインは、LIBディレクトリに含まれています。
build directory
Webサイトはビルドディレクトリに組み込まれています。 2つの方法でWebサイトを構築します
開発モード:HTMLは圧縮されず、テストWebサーバーを起動します。
- 生産モード:node_envが生産に設定されている場合、ビルドディレクトリがクリアされ、最終的な圧縮ファイルが生成されます。
- 最初のビルドファイルを定義します
node ./build.jsで実行し、静的Webサイトがビルドディレクトリに作成されます。マークダウンはHTMLとして解析されますが、ビルドプロセス中にテンプレートを含めなかったため利用できません。
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
表面上、金属製のビルドファイルは、Gulpで使用されているファイルと似ています(ただし、ストリームは使用しません)。適切な引数を使用して、プラグインをMetalsmith使用方法に渡して、プラグインを呼び出します。プラグイン自体は、3つのパラメーターを受け入れる別の関数を返す必要があります。
各ページに関する情報を含むファイルアレイ
メタデータや
などのグローバル情報を含むメタルスミスオブジェクト プラグインがその作業を完了した後に呼び出さなければならない完了関数- この単純な例は、すべてのメタデータとページ情報をコンソールにログに記録します(build.jsで定義できます):
- Metalsmithビルドコードを更新してこのプラグインを使用できます。 このデバッグ機能は、独自のカスタムプラグインを作成するのに役立ちますが、必要な機能のほとんどはすでに書かれています。MetalsmithWebサイトにプラグインの長いリストがあります。
より良いビルドを作成します
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>
node_env環境変数が生産に設定されている場合(mac/linuxまたはnode_env = windowsでの生産)、変数devbuildはtrueに設定されます:
<code>{{> partialname }}</code>
<code>cd project && cd project npm init -y </code>
ホームディレクトリはdirオブジェクトで定義されているため、再利用できます。
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
- 優れたbrowsersyncテストサーバーは、開発ビルドを作成するときにのみ必要です
- HTMLMINが参照する HTMLコンプレッサーモジュールは、生産ビルドを作成するときにのみ必要です
- 3つのカスタムプラグインが定義されています。SetDate、Moremeta、およびDebug(以下で詳しく説明します)
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
また、
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>
Metalsmithオブジェクトは以前と同じように初期化されますが、SiteMetaオブジェクトをメタデータメソッドに渡して、この情報が各ページで利用可能であることを確認します。したがって、サイト名を取得するには、任意のページの{{name}}のようなアイテムを参照できます。
<code>{{> partialname }}</code>
最初のプラグインコールMetalsmith-Publishを呼び出します。これは、序文の公開値がドラフト、プライベート、または将来に設定されているファイルを削除します:
<code>// basic build 'use strict'; var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert markdown to HTML .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>
setDateは、lib/metalsmith-setdate.jsに含まれるカスタムプラグインです。各ファイルには「日付」値が設定されていることが保証され、前の質問で値が定義されていなくても、リリース日またはファイルの作成時間にできるだけ戻ることで達成できます。
<code>function debug(logToConsole) { return function(files, metalsmith, done) { if (logToConsole) { console.log('\nMETADATA:'); console.log(metalsmith.metadata()); for (var f in files) { console.log('\nFILE:'); console.log(files[f]); } } done(); }; }; </code>
Metalsmith-Collectionsは、ソースディレクトリ内の場所またはその他の要因に基づいて各ページをカテゴリまたは分類に割り当てるため、最も重要なプラグインの1つです。日付や優先順位などの前メタルを使用してファイルを再注文し、コレクションにカスタムメタデータを設定できます。コード定義:
<code>ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert Markdown to HTML .use(debug(true)) // *** NEW *** output debug information .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>
SRC/HTML/STARTディレクトリの各ファイルの開始コレクション。ファイルの前の質問で設定された優先度の値によってそれらを並べ替えます。
- src/html/articleディレクトリの各ファイルの記事コレクション。それらを反その順序で並べ替えます
- index。*という名前の各デフォルトページのページコレクション。ファイルの前の質問で設定された優先度の値によってそれらを並べ替えます。
- 次はHTML変換へのマークダウンで、その後、ビルドのディレクトリ構造を定義するMetalsmith-Permalinksプラグインが続きます。 Moremetaセット:以下の各ファイルのMainCollection:
<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production') </code>
Metalsmith-Word-Countは、記事の単語の数を計算し、それを読むのにかかる時間を計算します。 parameter {raw:true}出力番号のみ:
<code>dir = { base: __dirname + '/', lib: __dirname + '/lib/', source: './src/', dest: './build/' } </code>
Moremetaは、lib/metalsmith-moremeta.jsに含まれるもう1つのカスタムプラグインです。各ファイルに他のメタデータを添付します:
- root:ルートディレクトリへの絶対または計算された相対ファイルパス
- ispage:indexという名前のデフォルトの部分ページにtrueに設定します。* MainCollection:メインコレクション名、つまり開始または記事
- レイアウト:設定されていない場合、メインコレクションのメタデータからレイアウトテンプレートを決定できます
- navmain:トップレベルのナビゲーションオブジェクトの配列
- navsub:二次ナビゲーションオブジェクトの配列
- ナビゲーションを処理するため、プラグインコードはより複雑です。よりシンプルな階層が必要な場合は、より簡単なオプションがあります。
Metalsmith-in-PlaceおよびMetalsmith-Layoutsプラグインは、それぞれインページとテンプレートのレイアウトを制御します。上記と同じTemplateConfigオブジェクトを渡します:
<code>cd project && cd project npm init -y </code>
htmlminが設定されている場合(生産ビルドで)、HTMLを圧縮できます:
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
debugは、lib/metalsmith-debug.jsに含まれる最終的なカスタムプラグインです。上記のデバッグ関数に似ています:
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
開発ビルドをテストできるように、browsersyncテストサーバーを起動します。以前に使用したことがない場合は、魔法のように見えます。変更を加えるたびに、ウェブサイトが魔法のようにリフレッシュし、Webサイトをスクロールまたは閲覧すると、2つ以上のブラウザのビューが同期します。
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>
最後に、
を使用できます<code>{{> partialname }}</code>
Metalsmith-MapsiteはXML SiteMapを生成します
- Metalsmith-Feed記事コレクションのページのRSSフィードを生成
- Metalsmith-Assetsは、SRC/アセットのファイルとディレクトリをコピーして、変更せずに構築します。
- 残りは、ウェブサイトを作成するための最後の.build()ステップです。
<code>// basic build 'use strict'; var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert markdown to HTML .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>
<code>function debug(logToConsole) { return function(files, metalsmith, done) { if (logToConsole) { console.log('\nMETADATA:'); console.log(metalsmith.metadata()); for (var f in files) { console.log('\nFILE:'); console.log(files[f]); } } done(); }; }; </code>
シンプルなメタルスミスのウェブサイトを構築するときに多くのことを学びましたが、次の問題に注意してください。
互換性のないプラグインプラグインは、他のプラグインと競合する場合があります。たとえば、相対ルートパスのメタルスミスルートパスを計算することは、カスタムビルドディレクトリ構造を作成するMetalsmith-Permalinksとあまり互換性がありません。 Lib/Metalsmith-Moremeta.jsプラグインにカスタムルートパス計算コードを作成することで、この問題を解決しました。
プラグインの順序は重要です
プラグインが間違った順序で配置されている場合、プラグインは依存または競合する場合があります。たとえば、RSSを生成するMetalsmith-FeedプラグインをMetalsmith-Layouts後に呼び出して、RSS XMLがページテンプレートで生成されないことを確認する必要があります。
BROWSERSYNC REBUILD ISSUE
browsersyncがファイルを実行および編集すると、コレクションは補償されますが、古いデータはまだ存在しているようです。これは、lib/metalsmith-moremeta.jsカスタムプラグインの問題かもしれませんが、メニューとフロントおよびバックリンクは同期していない場合があります。それを修正するには、Ctrl/CMD Cを使用してビルドを停止し、ビルドを再起動します。
まだガルプが必要ですか?
Gulpなどのタスクマネージャーを使用する人々は、Metalsmithがおなじみのビルドプロセスを提供していることに気付くでしょう。 SASSを使用して、CSSの前処理、画像圧縮、ファイル接続、中傷などのプラグインがあります。より単純なプロセスでは、それだけで十分かもしれません。ただし、Gulpにはより広い範囲のプラグインがあり、Lint、展開、Auto-Prefixerを使用したPostCSS処理などの複雑なビルドアクティビティを可能にします。いくつかのGulp/Metalsmith Integrationプラグインがありますが、いくつかの問題があり、Gulpタスクはメタルスミスを直接実行できるため、必要ではありません
このプロセスは、上記のBrowserSyncの再構築問題を防ぎます。 .clean(false)を使用して、他のタスクがアクティブなときにメタルスミスがビルドフォルダーをクリアしないようにすることを忘れないでください。
<code>cd project && cd project npm init -y </code>
メタルスミスは、シンプルまたは高度にカスタマイズされたWebサイトのニーズがある場合に理想的です。ドキュメントプロジェクトを使用して、一度に1つの機能を追加してみてください。メタルスミスはJekyllのような代替品ほど完全に機能していませんが、そのように設計されていません。独自のプラグインを作成する必要があるかもしれませんが、簡単に行うことはできます。これは、JavaScript開発者にとって大きな利点です。
メタルスミスビルドシステムの作成には時間がかかり、HTMLテンプレートと展開に関与する作業の量を考慮していません。ただし、プロセスを利用できると、マークダウンファイルの追加、編集、削除が非常に簡単になります。 CMSを使用するよりも簡単な場合があり、静的Webサイトのすべての利点があります。
金属スミスを使用して静的Webサイトを作成することに関するFAQ メタルスミスとは何ですか?なぜそれを使用して静的なWebサイトを作成する必要があるのですか?
Metalsmithは、シンプルで使いやすいプラグ可能な静的Webサイトジェネレーターです。 Node.jsに基づいており、プラグインを介して必要に応じて機能を追加できるモジュラー構造を使用します。これにより、信じられないほどの柔軟性とカスタマイズ可能性が得られます。 Metalsmithを使用して静的Webサイトを作成する必要があります。これにより、従来のCMSに制限されずにWebサイトを正確に構築できるようにする必要があります。さらに、静的なWebサイトは、動的なWebサイトよりも速く、より安全で、メンテナンスが容易です。
メタルスミスをインストールする方法は?
Metalsmithをインストールするには、コンピューターにnode.jsとnpmをインストールする必要があります。これらをインストールした後、ターミナルにCommand NPMインストールMetalsmithを実行してMetalsmithをインストールできます。これにより、Metalsmithとそのすべての依存関係がインストールされます。
新しいMetalsmithプロジェクトを作成する方法は?
新しいMetalsmithプロジェクトを作成するには、最初に端末でプロジェクトを作成するディレクトリに移動します。次に、コマンドメタルスミスを実行して新しいプロジェクトを作成します。これにより、プロジェクトの名前を含む新しいディレクトリが作成され、このディレクトリ内で静的Webサイトの基本構造が作成されます。
メタルスミスプロジェクトにプラグインを追加する方法は?
メタルスミスプロジェクトにプラグインを追加するには、NPM経由でそれらをインストールしてから、メタルスミス構成ファイルに参照する必要があります。たとえば、Markdownプラグインを追加するには、最初にNPMのインストールMetalsmith-Markdownを実行する必要があります。次に構成ファイルで、var Markdown = require( 'Metalsmith-Markdown')を追加する必要があります。 ))メタルスミスビルドチェーンに移動します。
メタルスミスのウェブサイトを構築する方法は?
Metalsmith Webサイトを構築するには、ターミナルでCommand Metalsmithビルドを実行する必要があります。これにより、すべてのファイルがコンパイルされ、それらをビルドディレクトリに出力し、サーバーに展開できます。
メタルスミスのウェブサイトのレイアウトをカスタマイズする方法は?
Metalsmith Webサイトのレイアウトをカスタマイズするには、ハンドルバーやJadeなどのテンプレートエンジンを使用できます。これらを使用すると、ヘッダー、フッター、個々のページなど、Webサイトのさまざまな部分に対して再利用可能なテンプレートを作成できます。
私のMetalsmith Webサイトにコンテンツを追加する方法は?
Metalsmith Webサイトにコンテンツを追加するには、ソースディレクトリにMarkdownファイルを作成できます。ウェブサイトを構築するとき、これらのファイルはHTMLに変換されます。 Netlify CMSなどのCMSを使用してコンテンツを管理することもできます。
メタルスミスのウェブサイトを展開する方法は?
Metalsmith Webサイトを展開するには、NetlifyページやGitHubページなどのサービスを使用できます。これらのサービスは、静的Webサイトをホストし、リポジトリにプッシュするときに変更を自動的に展開します。
メタルスミスのウェブサイトを更新するにはどうすればよいですか?
Metalsmith Webサイトを更新するには、ソースファイルを変更してWebサイトを再構築するだけです。変更はビルドディレクトリに反映され、サーバーに展開できます。
大規模で複雑なWebサイトにMetalsmithを使用できますか?
はい、Metalsmithは非常にスケーラブルで、大規模で複雑なWebサイトに使用できます。そのモジュラー構造により、必要に応じて機能を追加できます。また、静的ファイルを使用すると、減速せずに多くのコンテンツを処理できます。
以上がメタルスミスを使用して静的サイトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。
