ここで作成しているWebサイトのデモを表示できます。このGithubリポジトリでこのリポジトリのコードを見つけることができます。
キーテイクアウト
CREATE REACT APPとCRACOを利用して、手動CSSとの反応を効率的にセットアップし、手動構(gòu)成の複雑さを回避します。
- テールワインドCSSユーティリティクラスとバリエーションを活用して、広範なカスタムCSSを作成せずにコンポーネントを簡単にスタイリングします。
- テールワインドCSSの単純な構(gòu)成変更でダークモードを?qū)g裝して、ユーザーのOSの好みに適応します。 レスポンシブデザインと擬似クラスのためのユーティリティクラスの力を探索し、スタイリングをよりダイナミックで柔軟にします。
- Configファイルで色、フォント、その他の要素を直接変更することにより、ブランドのニーズに合わせてTailWindのテーマをカスタマイズします。 Tailwind CSSプラグインを使用し、機能を拡張して、追加のスタイル、ユーティリティ、およびカスタムコンポーネントを含めます。
- ホバー狀態(tài)とレスポンシブ調(diào)整のための特定のテールワインドCSSバリアントを有効にし、ウェブサイトのインタラクティブで応答性のある側(cè)面を強化します。
- 前提條件
- 開始する前に、node.jsとnpmをインストールする必要があります。 node.jsがインストールされている場合は、npmをインストールします。 ノードがインストールされているかどうかを確認するには、コマンドラインで以下を?qū)g行します。
- バージョンを見ることができるはずです。 npm：
- についても同じことをします
どちらのエラーが発生した場合は、ノードをインストールする必要があります。 Node Webサイトのインストール手順をフォローするか、「nvmを使用してnode.jsの複數(shù)のバージョンのインストール」という記事に従うことができます。
reactとtailwind css
のセットアップ 注：Create Reactアプリに不慣れな場合は、「React Appの作成：React Projectsを早く準備する」をチェックしてください。<span>node -v </span>最初に、Create-React-App：
を使用してReactプロジェクトを作成します
<span>npm -v </span>次に、作成されたプロジェクトにディレクトリを変更します：
次に、Tailwind CSS：
に必要な依存関係をインストールします
Create React App（またはCRA）はこの記事を書いている時點でPostCSS 8をサポートしていないため、PostCSS 7互換性ビルドを使用してTailwind CSSをインストールしています。また、バージョン2.0の後にTailwind CSSに必要なAutoprefixerもインストールしています。craco
のセットアップ
通常、CRAを構(gòu)成するには、React-Scriptsを?qū)g行する必要があります。ただし、これは非常に不便です。これは、プロジェクトにCRA（WebPack構(gòu)成、Babel構(gòu)成、PostCSS構(gòu)成など）に隠されているすべての構(gòu)成を排除するため、非常に不便です。もはやサポートできなくなります。
これは、Create React App Configuration Override（またはCraco）が入る場所です。Cracoは、CRAに単純な構(gòu)成レイヤーを追加するライブラリです。 CRA內(nèi)のすべての構(gòu)成をプロジェクトに排出する代わりに、たとえば、WebPackに構(gòu)成を追加するためだけに、元の構(gòu)成のすべての新しい構(gòu)成または変更が新しいファイルcraco.config.jsに配置されます。 CRACOを使用すると、手間をかけずにCRAを構(gòu)成するように構(gòu)成することができます。ここでは、PostCSS構(gòu)成をオーバーライドし、TailWindCSSプラグインを追加するにはCracoが必要です。それでは、最初にインストールしましょう：
craを使用する場合、package.jsonのスクリプトは次のようになります。
<span>node -v </span>
CRACOを使用してCRAではできないことをデフォルトで行うために、スクリプトを変更してプロジェクトの構(gòu)築または開発で実行するためにCRACOを使用する必要があります。
<span>npm -v </span>最初、ビルド、テストスクリプトで、React-ScriptsをCracoに置き換えました。 ejectスクリプトに変更を加えていません。
次に、プロジェクトのルートでcraco構(gòu)成ファイルcraco.config.jsを作成します：
npx create-react-app react-shop
この構(gòu)成ファイルは、PostCSSにTailWindCSSとAutoprefixerプラグインを追加します。
次に、Tailwind CSS：
の構(gòu)成ファイルを生成します<span>cd react-shop </span>注：node.js v14を使用している場合、「モジュール「Autoprefixer」を見つけることができない」というこのコマンドを?qū)g行しているときにスローされたエラーについて報告された問題があります。 node.js v15への更新は機能するはずですが、それを行うことができない場合は、ここで回避策のいずれかをフォローしてください。
これにより、プロジェクトのルートにファイルtailwind.config.jsが作成されます。次のコンテンツがあります：
<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 </span>
構(gòu)成キーのそれぞれが意味するものは次のとおりです
- purge：これは、ファイルを指定するために使用されますCSSはスキャンして、どのTailwind CSSクラスが使用されているかを確認します。 DarkMode：これは、プロジェクトのダークモードの動作を指定します。値はメディアにすることができます。つまり、ダークモードのスタイリングは、ユーザーのOSのデフォルトモードに依存するダークモードメディアクエリに基づいて適用されます。また、クラスになることもあります。つまり、HTMLドキュメントの親要素が暗いクラスを持っている場合、ダークモードのスタイリングが適用されます。
- テーマ：これは、テーマ、フォント、ブレークポイントなどのカラーパレットを変更するために使用できます。チュートリアルの後半でテーマを変更する方法を確認します。 バリアント：これにより、Tailwind CSSのコアプラグインに追加のバリアントを適用できます。チュートリアルで後でどのように機能するかを確認します。
- プラグイン：追加のユーティリティクラス、カスタムバリエーション、ベーススタイルなどを追加できるプラグインを追加するセクション。
- 今のところ、2つの変更を加えます。まず、パージキーを変更します：
- これは、Tailwind CSSに、SRCディレクトリ內(nèi)のすべてのJS、JSX、TS、およびTSXファイルを調(diào)べるように指示し、Public/Index.htmlファイルを介してTailwind CSSから使用し、未使用のクラスを削除するクラスを把握するように指示します。 ??>
このチュートリアルで簡単にするために、ユーザーのOSの好みに基づいてダークモードを維持します。
<span>node -v </span>Tailwind CSSとのReactプロジェクトをセットアップする最後のステップは、Src/index.cssにTailwind CSSスタイルの一部を含めることです。このファイルの內(nèi)容を次のものに置き換えます
@TailWind Directiveは基本的にStylesをIndex.cssにインポートします。デフォルトでは、CRAはSRC/index.jsでsrc/index.cssをインポートします
これは、Tailwind CSSスタイルがReactプロジェクトに適用されることを意味し、美しいWebサイトの構(gòu)築を開始する準備ができています！
<span>npm -v </span>Tailwind CSSユーティリティとバリエーションを理解する
コーディングに入る前に、Tailwind CSSユーティリティクラスとバリアントが何であるかを理解しましょう。 Tailwind CSSは、スタイリングコンポーネントを簡単にし、再利用可能なコンポーネントの作成に集中するのに役立つように設(shè)計されています。ユーティリティクラスは、CSSを作成せずに考えることができるような方法でコンポーネントをスタイリングできる幅広いクラスです。 たとえば、境界線を備えた
Tailwind CSSを使用して、ユーティリティクラスを使用するだけで行うことができます：
npx create-react-app react-shop
この例では、各クラスが意味するものです。
- 境界線：境界幅を1px に設(shè)定します
- border-red-100：ボーダーの色を赤の色合いにします（テーマに基づいて）
- Text-LG：フォントサイズ1.125REMとラインの高さ1.75REM を示します
- bg-red-400：背景色を赤の色合いに設(shè)定します（テーマに基づいて）
- Text-White：テキストの色を白に設(shè)定します
使用できる他の多くのクラスがあり、さまざまな色の色合いもあり、テーマが容易になります。ユーティリティクラスを使用すると、実際にCSSを書く必要はめったにありません。
わかりましたが、メディアの質(zhì)問はどうですか？ Psuedoクラスはどうですか？ダークモードはどうですか？これらは自分でCSSを書く必要なく行うことができますか？バリエーションが入ったときです。バリエーションを使用すると、デバイスのブレークポイント、要素の狀態(tài)、またはダークモードが有効になっているかどうかに基づいて要素にスタイリングを追加できます。
したがって、以前は、デバイスのサイズに基づいて要素の幅を変更するためにこれを行った可能性があります。
Tailwind CSSを使用すると、これを簡単に行うことができます：
<span>node -v </span>これは、min-width：1025pxが現(xiàn)在の畫面幅に適用される場合、W-1/2クラス（幅：50％を意味する）を適用します。 -WIDTH：768PXは現(xiàn)在の畫面幅に適用され、他のバリアントがもう適用されない場合、w-fullクラス（幅：100％を意味します）を適用します。
これは間違いなく、すべてのプロジェクトでやらなければならない退屈な仕事をより簡単かつ速くします。最初は混亂するように見えるかもしれませんが、より多くのことに手を出し始めると、ユーティリティクラスとバリアントを使用することがどのように第2の性質(zhì)になるかを理解できます。
プロジェクトの公式ドキュメントでTailwindの構(gòu)成について詳しく読むことができます。 コンポーネントの実裝<span>npm -v </span>
私たちのウェブサイトに戻ります。きちんとしたデザインで製品を表示するシンプルなWebサイトを作成しています。簡単にするために、偽のストアAPIの偽のデータを使用します。実際にAPIにリクエストを?qū)g行する代わりに、サンプルJSON応答を取得し、プロジェクトのJSONファイルに配置します。繰り返しますが、これはチュートリアルの単純さのためだけです。
製品のエンドポイントに移動し、応答をコピーします。次に、ファイルsrc/data/products.jsonを作成し、その中の応答を貼り付けます。これに類似したオブジェクトの配列である必要があります：
製品コンポーネントの実裝から始めましょう。このコンポーネントは、製品に関する情報を表示するカードコンポーネントになります。次のコンテンツを使用して、SRC/Components/Product.jsを作成します
ご覧のとおり、製品コンポーネントには製品の詳細が表示されます。現(xiàn)時點ではスタイリングのクラスを追加していません。
次に、src/app.jsにアクセスして、コンテンツを次のように変更します。
<span>node -v </span>
ここでは、製品としてProducts.jsonファイルをインポートしています。次に、以前に作成した製品コンポーネントを使用して、製品をループし、各製品を表示します。繰り返しますが、スタイリングのクラスを追加していないことに注意してください
今すぐサーバーを開始しましょう。次のコマンドを?qū)g行します：
<span>npm -v </span>テキストがたくさんあることがわかりますが、スタイリングはまったくありません。
いくつかの背景色
スタイリングの追加を始めましょう。まず、ページの背景色を変更します。そのために、Tailwindの背景色のクラスを利用します。バックグラウンドカラークラスは、形式のbg- {color} - {numericscale}で、numericscaleはオプションです。
デフォルトの色は、白、黒、灰色、赤、青、緑、黃色、オレンジ、インディゴ、紫、ピンクになります。數(shù)値スケールは色の色合いを定義し、50は最も明るい色合いで、900は最も暗いものです。たとえば、背景色を明るい赤にしたい場合は、BG-RED-200を使用できます。 私たちのウェブサイトでは、背景色を明るい灰色に設(shè)定します。そのため、クラスBG-Gray-200をSRC/app.jsの最も外側(cè)の
今すぐウェブサイトをチェックしている場合（サーバーがまだ実行されていない場合は、再度実行してください）、背景が灰色の明るい色合いに変更されていることがわかります。
npx create-react-app react-shopコンテンツの幅の変更
次に行うことは、畫面の幅が少なくとも768pxの場合、コンテンツの幅を畫面の実際の幅の50％に変更することですが、小さなデバイスでは幅を全幅に保つことです。 Tailwindの幅クラスを利用します。幅クラスはフォーマットw- {size}であり、サイズは0?96の範囲になります。これはremの値を指します。 1/2または3/5などの比率、またはパーセンテージを參照するその他の比率。または、自動幅または100％の幅のフル用の自動のようなキーワード。
畫面サイズに基づいて幅を指定するには、SM、MD、LGなどのバリエーションを使用します。これらのバリアントは、ルールを適用するために必要な最小畫面サイズを指定します。
私たちの場合、畫面の幅は少なくとも768pxの親の50％にしたいので、W-1/2：
のMDバリアントを使用します。
<span>node -v </span>
幅は、畫面の幅の半分に変更されます。ただし、水平に中心に集中する方がはるかに良いでしょう。そのために、Tailwindのマージンユーティリティクラスを使用します。マージンクラスはフォーマットm {side} - {value}であり、側(cè)面はオプションであり、上部のtのような要素の両側(cè)に固有、下部のb、左のl、右のr、または特定yを水平に使用するか、xを使用して垂直に使用します。値は0?96の範囲で、わずか1pxでpx、または自動することができます。それだけでなく、クラスの先頭に追加することで負のマージンを追加することもできます。たとえば、-m -2。
要素を水平に中心にしているので、MX-Auto：
を使用します<span>npm -v </span>
そして、あなたはそれが中心にあるのを見ることができます。
次に、製品コンポーネントに進みましょう。製品カードの背景色も追加します。白くして、BGホワイトを使用します。また、W-Fullを使用するため、全幅になります。製品カードを互いに分離するために、MB-5：
を使用して要素にマージンボトムを追加します。npx create-react-app react-shop
そして、ウェブサイトで変更を見ることができます：
製品コンポーネントで見ることができるように、最も外側(cè)の要素內(nèi)には2つの要素があります。1つは製品の背景畫像があり、もう1つは情報があります。隣同士に表示したいと思います。最初に行う必要があることは、最も外側(cè)の
<span>cd react-shop </span>次に、以前の幅クラスを使用して
今すぐウェブサイトをチェックすると、畫像とテキストが隣同士になっていることがわかります。
<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 </span>
いくつかの間隔を追加
したがって、製品情報コンテナにP-5を追加します。また、MT-4：
を使用して、説明コンテナにマージンを追加します。また、src/app.jsのコンテナ全體に上部と下のマージンを追加して、最初と最後の製品が両側(cè)からページの端にないようにします。それを行うには、クラスPY-4：
を追加します<span>node -v </span>
ウェブサイトが今より良く見えるようになります。
今度はタイポグラフィに少し取り組みましょう。製品情報はすべて同じように見えることがわかります。タイトルをカテゴリから説明などと區(qū)別することはできません。まず、テキストの一部の色を変更しましょう。そのためには、Tailwindのテキストカラークラスを使用します。これらのクラスの形式は、バックグラウンドカラークラスに似ていますが、Bをテキストに置き換えます。たとえば、テキストの色を緑にするには、クラスText-Green-100を追加します。
それでは、カテゴリのテキスト色をText-Gray-400に変更して、他のテキストと比較して少しフェードを付けて、テキストの色をText-Red-500に変更して目立つようにしましょう。また、価格に最高のマージンを追加して、最も際立っていることを確認します。今すぐウェブサイトにアクセスすると、テキストが異なる部分を區(qū)別するという點で少し明確に見えることがわかります。
<span>npm -v </span>
次に、フォントサイズを変更しましょう。そのために、Tailwindのフォントサイズのクラスを使用します。これらのクラスの形式はText- {size}で、サイズはSMから9xlの範囲です。
MDバリアントを使用して幅が少なくとも768px以上の畫面にクラスのText-4XLを追加し、小規(guī)模な畫面にテキストXLを追加することにより、価格のフォントサイズを価格のフォントサイズを大きくします。タイトルを作成します。少なくとも768pxの幅もある畫面にクラスText-2XLを追加することにより、より大きくなります：
テキストは今でははるかに良く見えます。
npx create-react-app react-shop
製品畫像の配置
次に、畫像を修正して完全に表示し、背景畫像を適切に配置しましょう。
2番目に、背景リピートの屬性を変更して、畫像が複數(shù)回繰り返さないようにします。そのために、Tailwindの背景リピートクラスを使用します。これらのクラスの形式はBG- {RepeatValue}です。ここでは、RepeatValueはバックグラウンドリピートプロパティに與える値、またはラウンド値のBGリピートラウンド、およびスペース値のBGリピートスペースです。私たちの場合、BG-No-Reepeatを使用します。
3番目に、畫像が常に中央に配置されるように、バックグラウンド位置屬性を変更します。そのために、Tailwindのバックグラウンドポジションクラスを使用します。これらのクラスの形式はBG- {Position}であり、位置はバックグラウンドポジションプロパティに與える値です。クラスBGセンターを追加します：
<span>node -v </span>
今、畫像を完全に見ることができます。
いくつかの畫像が容器の端に觸れていることに気付くでしょう。それを修正するために、背景畫像要素にラッパー
<span>npm -v </span>以前に背景畫像に與えた幅をラッパー要素に移動し、背景畫像要素にWフルとHフルを追加して、親の幅の100％が必要になることに注意してください。と高さ。
ボックスシャドウと丸い角を追加
私たちの製品は今ではずっと良く見えています。現(xiàn)在のスタイルに2つの最後のタッチを追加します。まず、各製品に影を追加します。 Tailwindのボックスシャドウクラスを使用します。これらのクラスの形式はShadow- {size}であり、サイズはオプションであり、SMから2XLの範囲です。また、影を內(nèi)側(cè)にするためにボックスシャドウまたは內(nèi)側(cè)を削除することもできません。第二に、製品カードの境界線を少し丸くします。 TailwindのBorder Radiusクラスを使用します。これらのクラスの形式は丸められています - {位置} - {サイズ}。サイズはオプションであり、SMから3XLの範囲であるか、境界半徑またはフルの場合は、完全に丸くするためにはありません。位置もオプションであり、上部または左のLのような特定の位置になることができます。また、左上のTLのような特定のエッジに固有の場合もあります。
製品カードにシャドウ-SMを追加して小さな影を追加し、丸いlgを丸くして境界線を丸くします：
最後に、製品リストページは以下のスクリーンショットのように見えます。
npx create-react-app react-shop
テーマのカスタマイズ
で行われます
色を少し変更してみましょう。テーマの色を変更するにはさまざまな方法がありますそれを行う1つの方法は、獨自の色を定義することです。たとえば、テーマに新しい色を追加するために、Tailwind.config.jsで以下を?qū)g行できます。
內(nèi)側(cè)のtheme.extendで、色オブジェクトを追加したことに注意してください。その後、ターコイズ色の16進コード付きのキーターコイズを追加しました。これで、デフォルトの色を使用するのと同じように、その色を使用できます。たとえば、背景色をターコイズに設(shè)定するには、BG-Turquoiseを使用できます。
テーマの色をカスタマイズする別の方法は、デフォルトの色を変更することです。前述のように、テールウィンドのデフォルトの色は、白、黒、灰色、赤、青、緑、黃色、オレンジ、インディゴ、紫、ピンクです。これらの色の実際の値を変更できます たとえば、
黃色をマスタードイエローに変更するには、これを行います。ここで、黃色にデフォルトのクラスを使用すると、ここで定義した黃色が得られます。また、數(shù)値スケールを使用して色のさまざまな色合いの値を指定することもできます。
<span>node -v </span>
最も明るい、明るい、デフォルト、ダーク、ダークなどのキーを使用することもできます：
<span>npm -v </span>
カラーパレットの追加
npx create-react-app react-shop色を変更する3番目の方法は、Tailwind CSSの他のカラーパレットを使用することです。
最初に、tailwind.config.jsの最初にtailwindcss/colorsの色が必要です：
次に、赤をバラのパレットに、灰色から青灰色に変えます。
今すぐウェブサイトをチェックすると、使用した色にわずかな変更が表示されます。
<span>cd react-shop </span>
<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 </span>
色の違いをよく見たい場合は、灰色をmberに変えようとすることができます：
背景が黃色くなっていることがわかります
ダークモードの追加
<span>npm install @craco/craco </span>ダークバリアントにより、ダークモード用の要素を簡単にスタイリングできます。同時に、ライトモード用にスタイリングしています。
最初は、ウェブサイトをセットアップしていたとき、Tailwind.config.jsの暗いキーをメディアに変更しました。これは、ブラウザまたはOSがダークモードに設(shè)定されているときにダークモードが適用されることを意味します。
ウェブサイトがダークモードでどのように見えるかをテストしたいが、暗いモードに設(shè)定されていない場合は、Chrome Devtoolsでこれをエミュレートできます。f12
を押してdevtoolsを開き、（または
cmdShift p）および表示されるドロップダウンでは、「表示レンダリング」を入力し、表示するオプションを選択します。最後に、「CSSメディア機能をエミュレートするカラーシェームを好む」までスクロールして、より好ましいカラー - スcheme：darkを選択します。同じことを選択して、ライトモードをテストするために、より好ましい色のスcheme：light。
製品カードを変更しましょう。 Class Dark：BG-Gray-300を最も外側(cè)の要素に追加します： 今すぐ確認すると、製品カードの背景色が変更されていることに気付くでしょうが、白い背景があるため、畫像が見栄えが良くないことにも気付くでしょう。
すべての製品カードをグループにし、ホバーで畫像にズームインします。そのため、製品コンポーネントの最も外側(cè)の要素にグループクラスを追加し、次のクラスに背景畫像を持つ要素に追加します。
FAQ NPMまたはYARNでインストールし、ビルドプロセスを構(gòu)成してTailwind CSSクラスを処理することにより、Tailwind CSSをReactプロジェクトに統(tǒng)合できます。 Tailwind CSS？ ClassName Propsを使用して、Tailwind CSSクラスをReactコンポーネントに直接適用できます。たとえば、<span>node -v
</span>
<span>npm -v
</span>
私たちのウェブサイトの最終的な外観を以下に示します
グループおよびプラグインのバリエーションを有効にしますいくつかのバリアントは、デフォルトではすべてのプラグインで有効にされていません。これにより、ファイルサイズが大きくなるためです。したがって、これらのバリアントを使用する必要がある場合は、必要なプラグインのTailwind.config.jsで手動で有効にする必要があります。ここにあるプラグインは、私たちがずっと使ってきたクラスです。たとえば、背景色はBackgroundColorプラグインに屬します
有効化されていないバリエーションの1つは、グループホバーです。グループは、グループ化された多くの要素であるため、どの狀態(tài)（ホバー）がグループ全體に影響を與える可能性があります。グループクラスをコンテナに追加することにより、グループは宣言されます。次に、コンテナの子である要素にユーティリティクラスの1つを使用して、グループホバーバリアントを使用できます。グループホバーで使用したユーティリティクラスは、グループ內(nèi)の要素（つまり、コンテナ要素內(nèi)の要素）がホバリングされない限り、適用されません。
注：ダークモードをエミュレートしている場合（またはダークモードを使用している場合）、ライトモードで効果が良くなる可能性があるため、必ずライトモードに切り替えてください。
<span>node -v
</span>
今すぐ製品の上にホバリングをしようとすると、影が拡大し、畫像が拡大していることがわかります。
Tailwind CSSとは何ですか？なぜReactで使用する必要があるのですか？
Tailwind CSSは、Webアプリケーションのスタイリング用の事前定義されたクラスのセットを提供するユーティリティファーストCSSフレームワークです。 Tailwind CSSを使用してReactを使用すると、開発プロセスをスピードアップし、一貫した設(shè)計システムを維持できます。
反応コンポーネントを使用して、Tailwind CSSでレスポンシブクラスを使用するにはどうすればよいですか？
Tailwind CSSは、さまざまな畫面サイズのさまざまなスタイルを定義できるレスポンシブクラスを提供します。これらのクラスをMD：：Classの定義などのブレークポイントを追加することで使用できます。Tailwind CSSは強力ですが、クラスの使用に注意しないと、ファイルサイズが大きくなる可能性があります。また、従來のCSSを使用することを好むデザイナーにとっても挑戦的かもしれません。
以上がReactとTailwind CSSを使用してWebサイトを構(gòu)築しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強力な機能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標を登録しようとするDeno Oracleの試みとのOracleの商標紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標をキャンセルするために請願書を提出しました。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します
Jul 06, 2025 am 02:36 AM
.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします?？栅螆龊?、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
