Clever Geek Handbook

初心者向けのNode.jsのクイックガイド





良い一日、友達！Node.jsマニュアルの



翻訳を1ページのプログレッシブ適応アプリケーションの形式でご紹介します。



この形式は次のことを意味します。



  • SPA-新しいデータ（手動セクションまたはチャプター）はページの再読み込みなしで読み込まれます-動的インポートを使用して実装されます
  • PWA-アプリケーションは携帯電話またはコンピューターにインストールできます。アプリケーションは、ネットワーク接続がない場合でも機能します-ServiceWorkerとキャッシングを使用して実装されます
  • モバイルファースト-このアプリケーションは主にスマートフォンでの使用を目的としていますが、ワイドスクリーンでも見栄えがします


ここでアプリケーションを表示およびインストールできます：Netlify、PWAストア。



→ GitHubのプロジェクトコード



サンドボックス：





デスクトップでは、アプリケーションは次のようになります。











スマートフォンでは、次のようになります。









このアプリはNode.jsの簡単な初心者向けガイドであり、このツールに既に精通している人にはほとんど興味がありません。ただし、質問への回答をすばやく見つけるためのポケットガイドとして使用できます。



元のガイドは、その時点での最新バージョンのNode.jsとES2018を考慮して、2019年に作成されたものであり、その関連性が説明されています。



マニュアルは54のセクション（章）で構成されており、アクセス可能な形式でNode.jsの基本といくつかの機能の概要を説明しています。このチュートリアルでは、サーバー側のJavaScriptの専門家にはなりませんが、JavaScriptの学習を開始し、今後の方向性を判断するのに役立ちます。



表示されたページの番号はローカルストレージに保存されるため、いつでもアプリケーションを終了でき、戻ったときに中断したところから開始できます。



ボタンとキーボードを使用してページを切り替えます。マテリアライズは



、アプリケーションのスタイル設定に使用されました。



実装について一言


アプリケーションの実装はひどく単純です。



各セクション（章）は、次の内容のモジュールです。 



export default `
  
`


メインページのマークアップには、次のリンクがあります。 



<a class="link" data-url="1" href="#">1. </a>


およびボタン： 



<!--    -->
<button>
    <i class="left">navigate_before</i>
</button>
<button>
    <i class="right">navigate_after</i>
</button>


リンクまたはボタンをクリックすると、ページ表示機能が呼び出され、ページ番号が渡されます。アプリケーションが初期化されると、ページ番号がローカルストレージから要求されます。存在しない場合、ページ番号= 1です。リンクをクリックすると、ページ番号がリンクの「data-url」属性の値になります。ボタンを押すと、ページ番号が1ずつ増減します。関数自体は次のようになります。 



const showPage = i => {
    //    
    const url = `./chapters/${i}.js`
    //   
    import(url)
        //     
        .then(data => container.innerHTML = data.default)
    //      
    localStorage.setItem('NodejsGuidePageNumber', i)
    //  
    scrollTo(0, 0)
}


ご覧のとおり、これで特別なことは何もありません。コードの最初の2行は、マテリアライズナビゲーションバーです。ここでサービスワーカーについて読むことができます。



ご存知のように、何もしない人だけが間違いではないので、間違いやタイプミスの可能性をお詫びします。それらを見つけて修正するのにあなたの助けに感謝します。



このアプリを楽しんでいただければ幸いです。清聴ありがとうございました。


More articles:


All Articles