JavaScript:インタラクティブWebサイトの開発を開始する方法

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


JavaScriptは、世界で最も人気のあるプログラミング言語の1つです。 HTMLとCSSに加えて、JavaScriptは事実上すべてのWebサイトが依存する3つの基本的なテクノロジーの1つです.

HTMLはWebサイトのコンテンツの各ビットに意味を割り当てるために使用される言語であり、CSSはHTML要素のスタイルとレイアウトをフォーマットするために使用される言語ですが、JavaScriptはWebページに動作を追加します.

JavaScriptの概要

JavaScriptとは?

まず、名前の混乱を取り除きましょう。JavaScriptはJavaとは何の関係もありません。 JavaScriptとは何かがわかったところで、JavaScriptとは何かについて話しましょう。.

あなたがあなたのウェブサイトでしたいすべてがいくつかの基本的なテキストと画像を表示することであるならば、HTMLとCSSは仕事をするのに十分です.

ただし、スタイルを動的に変更したり、メニューをアニメーション化したり、機能ボタンを作成したり、フォームに入力されたデータを検証したりするなど、さらに多くのことをしたい場合は、別のツールが必要になります.

JavaScriptは、これらの一般的なWebサイトの動作タスクを処理するために最も頻繁に使用されるツールです.

JavaScript入門

手を汚して、JavaScriptの学習に取り掛かる準備ができている場合は、2種類のリソースをチェックしてください。.

実践学習を好む場合は、ブラウザベースのインタラクティブコースで簡単なスクリプトを作成するように求められたら、JavaScriptを学習するインタラクティブコースを1〜2回実行することを検討してください。.

深く掘り下げて真のJavaScript開発者になる準備ができたら、オンラインブックとチュートリアルを利用して、そこにたどり着くことができます.

完全な初心者の場合は、いくつかの無料のインタラクティブコースから始めるのが最善です。 JavaScriptがどのように機能するかについての基本的な理解が得られたら、初心者から有能なプログラマーにレベルアップするのに役立つ、より充実した本やチュートリアルに向かいます。.

無料のインタラクティブコース

Codecademy 無料のプログラミング教育の第一人者です。 JavaScriptの学習を始めるための最も効果的な方法である可能性があるJavaScriptトラックを提供します.

コードスクール プレミアム(有料)教育プロバイダーです.

ただし、JavaScriptの簡単な入門コースは無料であり、JavaScriptの10分間の概要を説明するので、教育を正しい方向に進めることができます。完全な初心者であれば、このコースではほんの数分で多くのことを学びます.

jQuery Foundation, Code Schoolと協力して、インタラクティブなjQuery入門コースをまとめました。.

私たちを含め、ほとんどすべての人がjQueryに飛び込む前にJavaScriptを学ぶことをお勧めします。 CodecademyでJavaScriptトラックを修了したら、このコースを試してみてください。jQueryで何ができるかを理解できます。.

オンラインブックとチュートリアル

猫のためのJavaScript オンラインで読むことができる無料のチュートリアルであり、JavaScriptプログラマーの初心者として立ち上げて実行することを目的としています。.

猫のために書かれているだけでなく、人間の仲間にも適しているこのチュートリアルでは、本格的な開発者になることはありませんが、基本をカバーし、上に構築するための強固な基盤を開発するのに役立ちます.

雄弁なJavaScript Marijn Haverbeke著、オンラインで無料で読むことができます。または、昔ながらのペーパーバックのコピーを入手することもできます。.

Eloquent JavaScriptは、MozillaやHack ReactorなどのWebヘビー級の支持を得て開発されており、経験豊富なプログラマーから高い評価を得ています.

Mozilla Developer Network (MDN)は、JavaScriptを含む基本的なWebテクノロジーの包括的なガイドを提供します.

MDNが提供するコンテンツは非常に詳細であり、初心者のステータスから有能なフロントエンド開発者になるまで、訓練を受けた学生を獲得するのに十分であると考えられています.

あなたはJSを知らない カイル・シンプソンによる本シリーズは、カバーされる各トピックの習熟を開発するのを助けることを目的とする詳細なシリーズです.

これは「開始して実行する」シリーズではありません。それを始める前に、あなたはすでに比較的有能でなければなりません。基本的なJavaScriptの使用法を超えて真に有能なJavaScriptプログラマーになる準備ができている場合は、この本シリーズを使用して、深いところまで飛び込みます.

JavaScriptライブラリとフレームワーク

JavaScriptライブラリとフレームワーク

JavaScriptの学習を初めて始めるときは、JavaScriptをネイティブ形式で学習して使用する必要があります。ただし、JavaScriptで日常的に行われることの多くは、大量のコーディングを必要とすることがすぐにわかります.

これがJavaScriptライブラリとフレームワークの出番です。これらは、一般的なタスクを実行するために必要なコードの量を削減します.

JavaScriptをネイティブ形式で使用できることは確かですが、先に進む前に純粋なJavaScriptについてしっかりと理解しておく必要がありますが、多くのライブラリのいくつかを使用し、フレームワーク.

W3Techsによると、jQuery、Bootstrap、およびModernizrは、最も人気のあるJavaScriptライブラリおよびフレームワークです。.

jQuery 最も人気のあるJavaScriptライブラリであり、大幅に少ないコードで、少ないコードで記述できるように設計されています.

また、純粋なJavaScriptとほとんど同じ構文を使用しているため、JavaScriptライブラリを始めるのが最も簡単なライブラリの1つでもあります。基本的に、JavaScriptでタスクを実行できる場合、jQueryを学習することで、はるかに少ないコードで同じタスクを実行できます。.

ブートストラップ JavaScriptライブラリだけではありません。レスポンシブウェブサイトを開発するための完全なフレームワークまたはツールスイート.

Bootstrapを使用してWebサイトのフロントエンドを構築すると、HTML、CSS、およびJavaScriptコードが生成されます。ブートストラップは、あらゆるタイプのウェブサイトのフロントエンドを開発するために必要なすべてを提供します.

Modernizr は、Webサイト訪問者のブラウザで使用可能な機能を検出し、検出された機能に基づいて配信されるコンテンツとスタイルを調整するために使用される小さなJavaScriptコードです.

jQueryやBootstrapとは異なり、ほとんどすべての目的に使用できますが、Modernizrは非常に特定の目的で使用されるニッチスクリプトです。訪問者のブラウザーでサポートされている機能に基づいてWebサイト訪問者のエクスペリエンスを調整します.

今日最も高度なWebアプリケーションの開発に使用されている追加のJavaScriptフレームワークには、Angular.js、Backbone.js、Ember、Reactがあります。.

JavaScriptを単純なフロントエンド操作から本格的なカスタムアプリ開発に移行したい場合は、これらのフレームワークの調査に少し時間をかけることで、プロジェクトに最適なフレームワークを特定し、それらが提供する能力に目を向けることができます。.

Modernizr

Modernizrは、ブラウザーがHTML5およびCSS3に準拠しているかどうかを検出するJavaScriptライブラリーです。これにより、ブラウザで実行できることだけを実行できます。コードに機能を追加することはありませんが、ブラウザが実行できるコマンドのみがブラウザに送信されるようにします.

これがあなたが使用すると思うものである場合、あなたは見つけることができる多くのチュートリアルと本があります.

Modernizrチュートリアル

Modernizrはかなり専門的であるので、Modernizrに関する本はそれほど多くありません。そして、周りにあるものは十分にレビューされていません。あなたはオンラインチュートリアルにこだわるほうがいいです:

  • Modernizr:これはModernizrの公式サイトであり、必要なだけの詳細が含まれています.

  • Modernizrの使用開始:これは簡単な紹介ですが、セットアップすることができます。そして、あなたのニーズがそれほど大きくないなら、それはあなたが今までに必要なすべてであるかもしれません.

  • Modernizrを使用してクロスブラウザーの課題を解決するための初心者/デザイナーガイド:短時間で立ち上げて実行できるようにする優れた基本的なチュートリアル.

jQuery

jQueryについてはすでに説明しました。そしてJavaScriptを習得したら、jQueryを調べたくなるでしょう。これにより、JavaScriptプログラミングが本当に簡単になります。.

Learn and Master jQueryについての記事がすべてあります。jQueryを使い始めるだけでなく、デザイナー向けのjQueryの使用に関するチュートリアルも含まれています.

Backbone.js

Backbone.jsは、CoffeeScript、LiveScript、およびUnderscore.jsを共同で作成したJeremy Ashkenasによって作成されたJavaScriptライブラリです。.

プロジェクトはGitHubでホストされており、進行中の開発は、オープンソースの貢献者のコミュニティとともにAshkenasが主導しています.

Backbone.jsは、単一ページのJavaScript Webアプリケーションを構築するために使用することを目的としています。ライブラリは、アプリケーションロジックとアプリケーションコンテンツのプレゼンテーションを完全に分離することを促進することにより、Webアプリケーションの開発に構造をもたらします.

Backbone.jsの基本

Backbone.jsは、クライアント側のJavaScriptライブラリです。その依存関係には、Underscore.jsおよびjQueryライブラリが含まれます。これらは、Backbone.jsをロードする前にブラウザでロードする必要があります。.

ライブラリにはRESTful JSONインターフェースがあります。つまり、軽量のJSONデータ形式を使用して、Webサーバーとの間でデータを送受信できます。.

ライブラリは、Model-View-Presenter(MVP)プログラミングアーキテクチャで設計されています。これは、ユーザーインターフェイスの一般的なソフトウェア設計パターンです。ただし、Backbone.jsエコシステムでは、「モデル、ビュー、コレクション」という用語が使用されています。.

モデル、ビュー、コレクション

Backbone.jsの背後にある哲学は、アプリケーションロジックとアプリケーションデータのプレゼンテーションを分離することです。この分離は、モデルとビューが作成および操作される方法で維持されます.

Backbone.jsでは、モデルは、データの操作に必要な関数とロジックとともに、データの単一のテーブルを表します.

データは1つ以上のビューを使用して表示されます。これは、モデル内のデータを変換し、一致するようにWebページDOMを調整するWebアプリケーションUIの一部です.

ビューはユーザー入力をリッスンし、その入力を適切なモデルに送り返して、モデルに保持されているデータを更新します.

Backbone.jsには、組み込みのJSON APIが含まれています。モデルが変更されると、JSON APIを介して変更をWebサーバーデータベースに伝達できます。.

事実上すべてのサーバー側プログラミング言語がJSONデータを送受信できるため、事実上あらゆるサーバー側言語またはJSON APIを備えたアプリケーションを使用して、Backbone.js Webアプリケーションとの間でデータをやり取りし、アプリケーションデータベースを更新できます。それに応じて.

関連モデルは、それらをコレクションにグループ化することによって編成および管理できます。これにより、単一のリスニングポイントを提供するという追加の利点が提供され、複数のビューを使用して1つ以上のビューを継続的に更新し続けることができます.

Backbone.jsのメリット?

Backbone.jsは、jQueryやModernizrなどの最も人気のあるJavaScriptライブラリほどユビキタスではありませんが、このライブラリは、すべてのクライアント側JavaScriptテクノロジーのトップ15に含まれています。.

さらに、Backbone.jsプロジェクトはそれほど多くない場合がありますが、ライブラリを使用するプロジェクトはトラフィックの多いWebアプリケーションである傾向があり、その一部は高度な名前認識を享受します.

たとえば、Backbone.js Webサイトは、Backbone.jsで構築された既知のプロジェクトのリストを提供します。これには、有名なインターネットスタートアップの真の誰が誰であり、次のような確立されたデジタルタイタンが含まれます。

  • Hulu

  • 石英

  • ヴォックス

  • WordPress.com

  • Disqus

  • カーンアカデミー

  • ウォルマートモバイル

  • ベースキャンプ

  • Airbnb

  • パンドラ

  • コードスクール

  • トレロ

  • ストライプ

  • などなど.

Backbone.jsを他の多くの一般的なJavaScriptフレームワーク(特に、AngularJS)と区別するのは、開発者に提供する比較的自由なことです。.

他の主要なフレームワークには、組み込みのデフォルト機能が含まれている場合がありますが(たとえば、双方向のデータバインディングを利用できます)、Backbone.jsには含まれていません。これが、Backbone.jsがフレームワークではなくライブラリと呼ばれる主な理由です。.

代わりに、開発者にさまざまな事前決定を受け入れることを強いるのではなく、開発者に好みに準拠したWebアプリケーションを構築する完全な自由を提供します。.

一方、これは、Backbone.jsを使用してWebアプリケーションを構築するときに、事前に構築された基礎的な基礎を含むAngularJSなどのフレームワークを使用する場合よりも、基礎的な基礎を築く必要があることを意味します.

学習教材

Backbone.jsを学びたい場合は、まずJavaScriptとjQueryを習得する必要があります。.

Backbone.jsはjQueryと一緒に動作するように構築されたJavaScriptライブラリであるため、Backbone.jsに取り組む前にこれらの2つのプログラミング言語を習得すると、多くの時間とフラストレーションを節約できます.

  • JavaScriptの概要

  • jQueryを学び、習得する

  • デザイナー向けのJavaScriptとjQuery.

さらに、Underscore.js、またはその下位ライブラリであるLodashに慣れる必要があります。.

Backbone.jsでは、Backbone.jsをロードする前に、これら2つのライブラリのいずれかをロードする必要があるため、どちらか一方にある程度慣れておくと便利です。.

オンラインチュートリアル

Backbone.jsをできるだけ早く立ち上げて実行したい場合は、次のチュートリアルのいくつかに取り組むことが最善の策です.

複雑さの順にソートしました。したがって、初心者の場合は、最初に挙げたリソースのいずれかから始めてください。後者のリソースはかなりの予備知識があると想定しているためです.

  • Backbone.jsはじめに

  • Adrian Mejiaによる絶対初心者のためのBackbone.js

  • バックボーン、プライマー

  • Henrik JoretegによるBackbone.js、Underscore.js、jQueryを使用した単一ページアプリの作成

  • Backbone Contact Managerチュートリアル

  • バックボーンモバイルアプリの例.

Backbone.js GitHubリポジトリには、追加のチュートリアル、ブログ投稿、Backbone.js Webアプリケーションの例の広範なリストも含まれています.

本当にBackbone.jsをマスターしたい場合、または教育を印刷して製本したい場合は、以下の肯定的にレビューされたテキストを検討してください.

  • Abiee EchameaによるMastering Backbone.js(2016)

  • フルスタックJavaScript:Azat MardanによるBackbone.js、Node.js、MongoDB(2015)の学習

  • Swarnendu DeによるBackbone.jsパターンとベストプラクティス(2014)

  • Andrew BurgessによるBackbone.js Blueprints(2014).

Backbone.jsの最終的な考え

Backbone.jsは、1ページのWebアプリケーションの開発用に設計されたJavaScriptライブラリです。.

このライブラリは、アプリケーションデータとそのデータをアプリケーションユーザーに表示するビューを完全に分離し、JavaScript開発者に比較的自由と対応する責任を提供するという点で注目に値します.

機能的なJavaScript

機能的なJavaScript

プログラマーが関数型プログラミングについて話すとき、彼らは一般に2つの異なるが関連することについて話しています。

  • 隠れた入力と出力だけでなく、副作用の意図的な回避を強調するプログラミングスタイル.

  • ランバ計算から派生したカレー、マップ、フィルターなどのプログラミング関数のセット.

関数型プログラミングに関連する関数のタイプは、強力で複雑な数学的計算を実行することにより、より高度なコード抽象化を可能にするため、これらの概念は関連しています.

関数型プログラミングを機能させるもの?

すべての関数は1つ以上の入力を受け取り、1つ以上の出力を生成します。たとえば、この単純な関数を見てみましょう。

function example(a){
var result = a + 1;
結果を返す;
}

この単純な関数は、単一の入力aを取り、その値に1を加算し、結果をresultという変数に格納します。この場合、aは入力で、結果は出力です.

非常に単純です?

しかし、この少し複雑な関数はどうですか?その入力と出力は何ですか?

function example(a){
var result = doSomething(a)+ 1;
結果を返す;
}

さて、今、突然物事はより複雑です。関数の中にネストされた関数doSomething()があり、変数に作用します。 doSomething()を変更すると、example()の結果も必ず変更されます。.

この場合、いわゆる非表示入力があります。 doSomething()が実際にexample()関数への入力で実行することは何であれ、関数を正確に見て関数が何をするのかを見分ける方法はありません.

さらに、関数doSomething()には副作用があります。つまり、doSomething()が変更されると、他の関数に影響します。関数のスコープ全体が関数内に含まれていない.

関数型プログラミングは、すべての入力と出力を明示的に宣言する関数を記述することにより、すべての副作用と隠れた入力と出力を排除しようとするプログラミングスタイルです。.

たとえば、次のように、関数を別々に保ち、doSomething(a)をexample(a)への入力として宣言することにより、関数スタイルで上記の関数を作り直すことができます。

関数doSomething(a){
var b = a + 1;
リターンb;
}
関数の例(c){
var result = c + 1;
結果を返す;
}
var c = example(doSomething(1));

これは一見、より複雑に見えるかもしれませんが、var cを宣言する行を簡単に見て、出力の作成に2つの関数が含まれていることがわかりますが、前の例ではその情報を覆い隠しています。.

関数型プログラミングとは何かについてまだ少し混乱している場合は、関数型プログラミングとは何ですか? Kris Jenkinsは、このトピックの優れた技術的紹介であり、あらゆるプログラミング言語に適用されます.

JavaScriptによる関数型プログラミング

JavaScriptは関数型プログラミング言語ですか?さて、その質問への答えは、関数型プログラミング言語の意味によって異なります.

JavaScriptで関数型プログラミングスタイルを使用してコードを記述できます。ただし、単純なバニラJavaScriptには、ほとんどのプログラマーが関数型プログラミングについて話すときに求めているような強力な数学関数は含まれていません。.

もちろん、解決策は、関数型プログラミング関数のJavaScriptライブラリを作成または組み込むことです。そうすれば、JavaScriptは関数型コードを書くための素晴らしい言語になります.

関数型プログラミングスタイルの学習に主に関心があり、複雑な数学関数にはあまり関心がない場合、次のリソースは、関数型プログラミングスタイルとJavaScriptにどのように適用できるかをよりよく理解するのに役立ちます。

  • JavaScriptでの命令型、オブジェクト指向、および関数型プログラミングを簡単に比較する、SitePointのM David Greenによる関数型JavaScriptの紹介.

  • 関数型JavaScriptの穏やかな紹介:James Sinclairによる4部構成のシリーズ.

  • 関数型プログラミング:Eloquent JavaScriptの第6章.

機能的なJavaScript

JavaScriptは関数型のプログラミングに使用できますが、前述したように、JavaScriptは多くの関数型プログラマーが求めているような関数のライブラリーを欠いています.

2007年、Oliver SteeleがFunctionalをリリースしました。これは、関数型プログラマーが頻繁に使用する一種の数式と関数を導入するJavaScriptライブラリです。.

プログラマが関数型コードを書くように強制するのではなく、Functionalは基本的にJavaScript関数に変換されたラムダ計算式のセットです.

  • 関数型に含まれる高次関数には、マップ、リデュース、およびフィルターが含まれます。.

  • 関数レベルのメソッドには、カレー、部分的、構成、ガード、および終了までが含まれます.

  • さらに、Functionalにはラムダ式のサポートが含まれています.

FunctionalはGitHubでホストされており、完全に無料でオープンソースです。ただし、2007年以降、大きな更新はありません。つまり、古いライブラリを利用しようとすると、途中でいくつかのバンプが予想されます。.

Functional JavasScriptの詳細については、次のリソースをご覧ください。

  • 関数型JavaScriptライブラリ:GitHub.

  • 機能的なJavaScript:Oliver Steeleによる。これらのアーカイブも参照してください。

    • 機能するJavaScript:発表

    • 機能するJavaScript 1.02:ライブラリの更新.

機能JS

2007年頃のJavaScriptライブラリを使用するという考えで少し神経質になった場合-当然のことながら-より現代的な代替手段を試してみませんか?

Lee CrosslyによるFunctional JSは2013年後半にリリースされました。これは、プログラミングの関数スタイルを適用するための制約ではなく、基本的に微積分関数のコレクションであるという点でOliver SteeleのFunctionalに似ています。ただし、カレー、アリティ、ラムダ、マップ、リデュース、選択、パーティション、グループなど、はるかに幅広い機能が含まれています。.

Functional JSはGitHubでホストされており、プロジェクトの公式Webサイトでは、優れた完全なライブラリドキュメントを提供しています。ただし、ドキュメントは経験豊富な開発者が読んでいることを想定したスタイルで書かれていることに注意してください。.

関数型JavaScriptに関する最後の考え

関数型プログラミングは、ラムダ計算をサポートするために開発されたプログラミングスタイルであり、すべての入出力の明示的な宣言と副作用の回避を促進します。 JavaScriptでコーディングする場合、関数型プログラミングスタイルを使用できます.

ただし、標準のJavaScriptには、多くの関数型プログラマーが求めているような強力な数学関数は含まれていません。 JavaScriptは、Oliver SteeleによるFunctionalやLee CrossleyによるFunctional JSなどの無料のJavaScriptライブラリを利用することにより、関数型プログラミングスタイルによりよく適合するように拡張できます。.

JavaScriptスタイル

JavaScriptスタイル

JavaScriptは非常に寛容なプログラミング言語です。その結果、2人の異なるJavaScriptプログラマーによって記述された同じコードのコードは、かなり異なって見えることがよくあります.

一連のスタイルガイドラインに準拠することで、複数のプログラマーが関与する場合でも、すべてのコードが1人のプログラマーによって作成されたように見えます。また、コードが読みやすくなり、理解しやすくなります.

このガイドでは、よりクリーンでエレガントなコードを記述し、一貫したプログラミングスタイルを使用するために採用できる一連のJavaScriptコーディングガイドラインを提供します.

指導原則

JavaScriptを含む任意の言語でプログラミングするときは、賢さよりも明快さを強調する.

つまり、プログラマーの目標は、最小限のキーストロークを使用するのではなく、できるだけ読みやすい方法でコードを記述することです。.

物事を行う方法が2つある場合(JavaScriptの場合)、物事を行う方法が半ダース以上あることがよくあります。最も賢い方法ではなく、最も明確な方法を使用してください。.

例えば:

//賢いですが、混乱する可能性があります
; [‘foo’、 ‘bar’、 ‘baz’、 ‘qux’] .forEach(function(){
//関数コード
});

//ある程度冗長ですが、明確です
var foobars = [‘foo’、 ‘bar’、 ‘baz’、 ‘qux’];
関数somethingClever(){
//関数コード
};
foob​​ars.forEach(somethingClever);

コメント

このガイドではコメントを使用するので、最初にコメントのスタイルについて説明しましょう.

プログラマーは、コメントが少なすぎるのではなく、多すぎる側を誤る必要があります。コメントは、他の開発者が何が起こっているのかを理解し、元の開発者が各コードの目的を覚えるのに役立つ非常に貴重な方法です。.

JavaScriptで使用できるコメントには3つのタイプがあります。

  • 1行コメント.

  • 複数行コメント.

  • インラインコメント.

以下に、各タイプのコメントのフォーマットを推奨する方法を示します。

/ **
これは複数行コメントです。このタイプのコメント
ファイルの見出しと説明のために予約する必要があります
複雑な機能の目的.
* /

//これは1行のコメントです。それを使用して短いメモを提供する.

//以下のようにインラインコメントを避けてください.
var foobars = [‘foo’、 ‘qux’ / * quux and quuux * /];

単一行および複数行のコメントの前には必ず空白行を置く必要があります。さらに、1行のコメントは、その横または下ではなく、説明するコードの上に表示する必要があります。.

複数行のコメントはさまざまな方法でフォーマットできます.

/ ************************************************* **********
* *
*一部の開発者は大きなブロックを作成したい*
*複数行のコメントをネストします。確かに *
*は私たちの好みではありませんが、ここでの鍵は一貫性です。 *
*この形式を使用する場合は、必ず確認してください*
*一貫して使用してください。 *
* *
************************************************** ********* /

/ **
*私たちの好みは単純化です。複数行コメント
*タイプアウトするのに必要な労力は少なく、
*読みやすい-そして、
* 私達に聞いてくれ。 1つのスラッシュの使用をお勧めします
*複数行コメントを開くための2つのアスタリスク。その後,
*各行は2つのスペースインデントで始まり、
*アスタリスクとスペース。コメントは
* 2つのスペースインデント、アスタリスク、および終了
*スラッシュ.
* /

/ ************************************************* **********

しかし、このスタイルのコメントは間違いなく読みやすいです
他のスタイル。そしてそれはあるという利点があります
エディタに関係なく、メンテナンスが簡単
プログラマーが使用しています.

************************************************** ********* /

空白、改行、列、およびインデント

スペースの適切な使用は、コードを読みやすくするための最も重要な決定要因です。一定の間隔でインデントされているコードは、他のコードよりもはるかに読みやすい.

インデント

インデントから始めましょう。インデントの方法はさまざまですが、主なインデント方法(および推奨される方法)は、2つのスペースを使用してインデントすることです。.

インデントは、ほぼすべての統合開発環境(IDE)またはテキストエディターで構成できるため、インデントを2つのスペースに設定するだけで十分です。.

カラム

プログラミングの列について話すとき、私たちが言及しているのは、改行を追加する前に行に表示される文字の数です。読みやすくするために、改行を追加することが重要です。一般に、コンセンサスは80文字または列が適切なブレークポイントであるということです。 65のような他の完璧な短い長さ.

説明が必要なもう1つの問題は、改行後のインデントの使用です。その場合、次の例に示すように、ラップされたコンテンツを2ではなく4スペースインデントすることをお勧めします。

var foo = ‘この変数には非常に長い文字列が含まれています’ +
「複数にまたがる文字列」 +
‘行。明確にするために、 ‘ +
「新しい行に表示されるコンテンツは、 +
「インデントされた4つのスペース」,
bar = ‘この方法でインデントすることで簡単になります’ +
‘ラインを視覚的に区別する’ +
「列の折り返しと改行による中断」 +
‘ステートメントの終わりに;’;

(このWebページで見栄えをよくするために、短い行の長さを使用していることに注意してください。)

空白

空白の使用に関するいくつかの追加のベストプラクティスルールは次のとおりです。

  • 行末および空白行の空白は避けてください。つまり、コード行の最後または空の行に空のスペースを残さないようにします。ほとんどのテキストエディタとIDEで「非表示を表示」または「空白を描画」をオンにすると、これらの文字が表示されるので、それらを見つけて削除できます.

  • 次のように、リストのカンマの後にスペースを追加します。var foo = [‘bar’、 ‘baz’、 ‘qux’];.

  • 次のように、括弧とその内容の間に空白を追加します:function(foo)….

  • 次のように、文字列を連結するときに演算子とコンテンツの間に空白を追加します: ‘Hello’ + ‘world!’.

  • 単一の空白行を追加して、関連するコードのビットのグループを分離することは問題ありません。複数の行を追加することはお勧めしません.

ネーミング

JavaScriptで関数、変数、およびその他のアイテムに名前を付ける場合、ここで注意すべきいくつかのルールがあります。

  • 可能な限り直感的に意味のある、人間が読める名前を使用する.

  • 配列には複数の名前を使用し、他のタイプの変数には単数の名前を使用します.

  • 次のように、キャメルケースを使用して関数と変数に名前を付けます。var longName = ”;.

  • 次のように、コンストラクター(オブジェクトクラス)に名前を付けるときはPascalCaseを使用します。function HostingCompany(name、url、rating){….

  • シンボリック定数を作成する場合は、次のようにすべての大文字とアンダースコアを使用して名前を付けます。var MAX_RATING = 100;.

  • 正規表現を作成するときは、名前の前に小文字のrを付けて、次のようにメールアドレスを検証します:var rEmail = /[A-Z0-9._%+-][email protected] [A-Z0-9.-] +。[AZ] {2,63};.

セミコロン

ほとんどすべての最新のJavaScript実装には、自動セミコロン挿入(ASI)と呼ばれる機能が含まれています。この機能は、セミコロンが表示されるはずの場所を直感的に認識し、自動的に追加します.

その結果、一部のプログラマーは、少数のエッジケースを除いて、セミコロンを使用しないように他のユーザーに勧めています。他のプログラマーは、ASIが存在しないかのようにそれらを追加することを勧めます.

私たちは後者の陣営にしっかりと入っています。連結したJavaScriptファイルが壊れているので、省略してもかまわないと思ったところです。.

次に、セミコロンを追加する必要があるのはなぜですか?一般に、セミコロンはすべての宣言または割り当ての後に追加する必要があります。例えば:

var foo = ”;
foo = 1;
foo ++;
foo = function(){
//この関数が変数に割り当てられているため、セミコロンが必要です.
};
alert(foo);
console.log(foo);

ステートメントまたは関数の閉じ中括弧の後にセミコロンは必要ありません—コードの最後のビットで示されているように、関数が変数の値として割り当てられている場合を除きます.

ただし、関数やステートメントの後にセミコロンを追加しても、何も壊さないでしょう。.

さらに、次のようなステートメントまたは関数の閉じ括弧と開き中括弧の間にセミコロンを追加しないでください。function(parameter); {…またはif(条件); {….

引用

JavaScriptでは、一重引用符または二重引用符を使用できます。ただし、ほとんどの公開されているスタイルガイドのコンセンサスは、単一引用符の使用に賛成です—合意に沿って喜んでコンセンサス.

JavaScript内でHTMLをネストする場合など、複数の引用符のセットを使用する必要がある場合は、一重引用符と二重引用符を交互に使用します。.

// これを行う
var foo = ‘bar’;

// これではない
var foo = "バー";

// これで結構です
var foo = ‘Some content here。’;

//しかし、これはより簡単で読みやすい
var foo = ‘Some content here。’;

変数

JavaScriptは、変数をさまざまな形式で宣言できるようにすることで非常に寛容です。できるだけ読みやすく明確な形式を使用することをお勧めします.

//読みにくいので、これは悪いことです。これをしないでください.
var foo = "", bar = []、baz = {}、qux = function(){
/ *ここにステートメントを挿入します。 * /};

//これは矛盾しているので悪い.
var foo = ”,
バー= [];
var baz = {};
qux = function(){/ *ここにステートメントを挿入します。 * /};

//一貫して読みやすいので、これは良いことです.
var foo = ”,
バー= [],
baz = {},
qux =関数(){
//ここにステートメントを挿入.
};

//これが一番.
var foo = ”;
var bar = [];
var baz = {};
var qux = function(){
//ここにステートメントを挿入.
};

関数内またはif…elseステートメント内で変数を宣言したい場合がよくあります。その場合は、すべての変数をグループ化して、最初に宣言します.

配列とオブジェクト

複雑な配列やオブジェクトを作成すると、非常に読みにくいコードが生成される可能性があります。このため、適切なインデントと改行の使用が重要です。配列とオブジェクトの作成に関するコーディングの良い例と悪い例をいくつか見てみましょう.

//短い単純な配列を1行で宣言しても問題ありません.
var foobars = [‘foo’、 ‘bar’、 ‘baz’、 ‘qux’];

//長い配列は改行して宣言する必要があります.
var emailAddresses = [
「[保護されたメール]">お問い合わせ’,
「[保護されたメール]">ウェブマスター ‘,
「[保護されたメール]">売上高,
「[保護されたメール]">サポート’
];

//オブジェクトは常に改行で宣言する必要があります.
var placeholders = {
1: ‘foo’,
2:「バー」,
3: ‘baz’,
4: ‘qux’
};

ステートメントと関数

ステートメントと関数を適切にフォーマットすると、それらが理解しやすくなり、コードがブラウザーによって連結またはレンダリングされるときの問題を回避するのにも役立ちます。次に、関数とステートメントの一般的なフォーマット方法を示します。

function functionName(){
//ここにコードを挿入.
}

関数、ifステートメント、ステートメント、whileステートメントなどについては、この基本形式に従う必要があります。そのスタイルを規定するルールは次のとおりです。

  • 必ず、次のように、関数またはステートメントのパラメーターと同じ行に開き角かっこを配置します:(parameters){….閉じかっこと開き角かっこの間に改行を追加すると、自動セミコロン挿入(ASI)が追加され、コードが壊れます。セミコロンが正しくない.

  • ステートメントと関数を常に複数の行に分割し、すべての関数またはステートメントコードを開き角括弧と閉じ角括弧の間の行に表示します.

入れ子関数

次の例に示すように、関数内に関数をネストすることは完全に許容できます。

function fooBar(foo){
var bar = function(){
//ここに関数コード.
}
関数nestedFunction(){
//ここに関数コードを追加.
}
nestedFunction(bar);を返す
}

ただし、ステートメント内の関数のネストは、関数が変数に割り当てられている場合にのみ行う必要があります。これは、ECMAScript標準がステートメント内のネストされた関数をサポートしていないためです.

ほとんどのJavaScript実装はこの不適切な使用をうまく処理しますが、ECMAScriptに厳密に従う実装はコードを正しく処理しません.

次の例は、違いを示しています。

if(foo > バー){

//これを行わない
function fooBar(foo、bar){
foob​​ar = foo + bar;
foob​​arを返します。
}
fooBar(foo、bar);

//代わりにこれを行う
var foobar = function fooBar(foo、bar){
foo + barを返します。
}
}

if…elseステートメントを書くときは、ステートメントの各部分の前に改行を追加しないようにして、ステートメント全体が関連していることを明確にしてください.

//次の形式を使用します.
if(条件){
//ここにステートメントを挿入.
} else if(condition){
//ここに追加のステートメント.
} そうしないと {
//ここにさらに多くのステートメント.
}

//これを行わないでください。ややこしい.
if(条件){
//ここにステートメントを挿入.
}
else if(条件){
//ここに追加のステートメント.
}
そうしないと {
//ここにさらに多くのステートメント.
}

比較

JavaScriptで2つの値を比較する場合、2つのオプションがあります。 ===と!==を使用して厳密な等価性を確認するか、==と!=を使用して抽象的な等価性を確認できます。.

2つのオプションの違いは、抽象等価性をチェックすると、JavaScriptマシンはfalseを返す前に値型を変換しようとすることです。.

ただし、厳密に等しいかどうかを確認すると、タイプと値の両方が一致する場合にのみ、マシンはtrueを返します。これが実際にどのように機能するかの例をいくつか示します。

// 数
var foo = 0;

// 文字列
var bar = ‘0’;

//「true」と評価されます
foo == bar;
foo == false;
bar == false;
foo!== bar;

//「false」と評価されます
foo!= bar;
foo ===バー;
foo === false;
foo === false;

抽象比較を使用すると、変数の型について混乱が生じる可能性があります。そのため、次のような問題を回避するために、厳密な比較を続けることをお勧めします。

// 文字列
var foo = ‘123’;

// 数
var bar = 123;

// trueを返します
foo == bar;

// falseを返します
foo ===バー;

抽象比較を使用する場合、fooが文字列「123」と実際に等しい場合、両方の値が数値「123」と等しいと考えるかもしれません。

その結果、foo内の文字列を使用して数学的な計算を実行しようとする場合があります。値の厳密な比較は問題の手がかりとなり、計算を実行する前にfooを数値に変換する必要があることを通知します.

JavaScriptスタイルの詳細

JavaScriptスタイルについて詳しく知りたい場合は、以下のソースが役立ちます。

  • 一貫性のある慣用的なJavaScriptを作成するための原則

  • JavaScript標準スタイル

  • jQuery Foundation JavaScriptスタイルガイド

  • Google JavaScriptスタイルガイド.

スタイルに関する最終的な考え

JavaScriptを書くときに一貫した思慮深いスタイルを使用すると、コードが読みやすくなり、理解しやすくなります.

さらに、複数の開発者が関与するプロジェクトで作業するときに一貫したスタイルを使用すると、すべてのコードが一貫した方法で存在することが保証されます.

このガイドでは、JavaScriptコードの記述に推奨されるスタイルを紹介しました。それを採用し、ニーズに合わせて変更し、よりクリーンで明確で一貫性のあるコードのメリットを享受してください.

CoffeeScript

CoffeeScript

CoffeeScript(CS)は、Jeremy Ashkenasが設計した簡潔なプログラミング言語であり、任意のJavaScript環境で実行可能な標準JavaScriptにコンパイルされます。.

それはオープンソース言語であり、アシュケナスと200人近くの貢献者の軍との共同で進行中の開発が完了しています.

CSは、開発者がシンプルで簡潔な構文を使用してコードを記述できるように設計されています。次に、プログラミングのベストプラクティスを利用し、任意のJavaScriptランタイム環境で簡単に実行できるJavaScriptコードにコンパイルします。.

CoffeeScriptの歴史

2009年12月、Jeremy Ashkenasは、「ミステリー言語の初期コミット」としてタグ付けされた初期コミットで、新しいGitHubリポジトリを作成しました。

この最初のコミットは急速に発展し、言語の最初の公式リリースであるCSバージョン0.1.0は、2009年のクリスマスイブに2週間も経たないうちにリリースされました.

CSコンパイラはもともとRubyで書かれていました。ただし、2010年2月にリリースされたバージョン0.5では、コンパイラがCoffeeScript自体で記述されたものに置き換えられました。ただし、プロジェクトが開始されてから約1年後の2010年のクリスマスイブにリリースされたCSの最初の安定バージョンであるバージョン1.0.0の前に行く方法はまだありました.

CoffeeScriptの最新バージョンは2018年5月のバージョン2.3.1です。.

CSで行われている最新の開発作業に遅れないようにするには、CoffeeScript 6.0 GitHubリポジトリを参照してください。.

ジェレミー・アシュケナス

CSの設計者であるJeremy Ashkenasは、影響力のある生産的なJavaScript開発者です。 CSに加えて、ジェレミーは以下の注目すべきプロジェクトを開発しました。

  • LiveScript:オブジェクト指向の命令型プログラミングスタイルをサポートする関数型プログラミング言語で、CoffeeScriptの間接的な子孫です。 CSと同様に、標準のJavaScriptにコンパイルされます.

  • Backbone.js:アプリケーションデータの表示を定義するコードからのアプリケーションロジックコードの分離を強調する、単一ページのWebアプリを考慮して設計された柔軟なJavaScriptライブラリ.

  • Underscore.js:一般的なプログラミングタスクに対処するユーティリティ関数を備えたJavaScriptライブラリ.

ジェレミーはニューヨークタイムズの開発者でもあり、カンファレンスで人気の講演者でもあります。次のような彼の講演の多くのビデオがYouTubeにあります。

  • トランスパイラーの台頭

  • JS.NextとCoffeeScript

  • 共生言語

  • JS / NextとしてのCoffeeScript

  • 一杯のCoffeeScript.

CoffeeScript構文

CSタグラインは「Unfancy JavaScript」であり、そのタグラインはCS構文の効果的な説明を兼ねています.

CoffeeScriptを設計する際の主要な目標の1つは、Ruby、Python、Haskellなどの言語をモデルにした、簡単に記述できる言語を作成することでした。このため、CoffeeScriptはJavaScriptに適用される多くの構文ルールを放棄します.

特に、中括弧、セミコロン、およびvarやfunctionなどの割り当てキーワードの使用は、CSではすべて省略されます。.

これにより、CSは非常に簡潔になりますが、読みやすさが犠牲になります。これがどのように機能するかを理解するには、次のJavaScript関数とそれに続くCSの同等の機能を検討してください.

// JavaScriptで平均ホスト評価を返す関数
var hostRating;
hostRating = function(totRatingsVal、totRatingsNo){
totRatingsVal / totRatingsNo;を返します。
}

// CoffeeScriptの同じ関数
hostRating =(totRatingsVal、totRatingsNo) ->
totRatingsVal / totRatingsNo

ご覧のとおり、CSバージョンはより簡潔で短く、含まれている言語演算子が少なくなっています。これにより、CSバージョンの入力が少し速くなりますが、舞台裏で起こっていることもある程度マスクされます.

CoffeeScriptの読み書き

CSの興味深いバリエーションの1つは、文芸的なCoffeeScriptと呼ばれます。コンパイラーは、ソースコードファイルが.coffeeではなく拡張子.litcoffeeで終わっている限り、このバリエーションを認識します。.

Literate CSでは、開発者はマークダウン構文を使用してコードを記述できます。インデントされたコードブロックがプログラムコードとして認識される間、すべての書き込みはコメントとしてコンパイラによって無視されます.

短い例を見てみましょう.

## CoffeeScriptの読み書き

[Literate CoffeeScript](http://coffeescript.org/#literate)では、[markdown](https://daringfireball.net/projects/markdown/syntax#precode)を使用してCoffeeScriptコードを記述できます。すべてのテキスト(見出し、段落、リストなど)は無視され、コンパイラーによって注釈として扱われます.

ただし、インデントされたコードブロック(以下のコードブロックなど)はJavaScriptにコンパイルされます.

fooBar =(foo) -> foo + 1
doSomething =(fooBar) -> アラートfooBar
もしfooBarなら?何か

この機能は、CoffeeScriptファイルをマークダウンで記述し、チュートリアルとしてWebページにレンダリングすると同時に、プログラムのソースコードの機能的な一部として機能する、興味深いシナリオをいくつか作成します。.

CoffeeScriptの入手方法

CSコンパイラーは通常、Node.jsを使用してインストールおよび実行され、CSはNPMパッケージとして使用できます。ただし、プロジェクトはGitHubからダウンロードまたは複製することもできます。.

CoffeeScriptをまだインストールする準備が整っていない場合は、CoffeeScript.orgにアクセスして、[CoffeeScriptを試す]タブを選択して、CoffeeScriptを試すこともできます。.

このタブには、ブラウザベースのCoffeeScript環境が含まれています。左側に「CoffeeScript」と入力し、右側にリアルタイムでJavaScriptにコンパイルされるのを確認します.

CoffeeScriptリソース

CSを学びたいなら、まずJavaScriptを学ぶことです。 CSは、JavaScript開発者の生産性を高め、エラーを減らし、ベストプラクティスを採用したJavaScriptを生成できるように設計された言語と考えるのが最善です。.

CSは標準のJavaScriptにコンパイルされるため、CSのデバッグにはJavaScriptプログラミングの強固な基盤が必要です。さらに、コンパイラの出力を確認してCSコードが何を行っているかを理解できるため、JavaScriptをすでに知っている場合は、CSの学習曲線が劇的に減少します。.

その警告を念頭に置いて、次のリソースは、有能なJavaScript開発者がCSを短期間で立ち上げて実行するのに役立ちます.

チュートリアル

  • 一口のCoffeeScript:CodeSchoolからの短い無料の入門コース.

  • 絶対初心者向けCoffeeScriptガイド:このチュートリアルはその名にふさわしく、ソフトウェアをインストールして言語の基本を教えます.

  • CoffeeScript.org:公式のCS Webサイトには、言語の詳細な紹介とブラウザベースのコンパイラが含まれています.

  • Smooth CoffeeScript:ブラウザベースのインタラクティブな無料電子ブック.

  • JavaScriptソースマップの概要:CSをデバッグするには、ソースマップを使用する必要があります。このチュートリアルは、CSコードのデバッグを開始するのに役立ちます.

  • CoffeeScript:Nicholas BrownによるCoffeScript(2016)を使用したアプリ開発に関するガイドブック.

  • Reg “raganwald” BraithwaiteによるCoffeeScript Ristretto(2014)。オンラインで無料で入手できます.

  • LeeとMarinoによるCoffeeScript in Action(2014).

  • Alex MacCawによるCoffeeScriptに関するリトルブック(2012)。オンラインで無料で入手できます.

概要

CoffeeScriptは、キーワードと演算子の使用を最小限に抑え、開発者がエレガントなコードをすばやく記述できるようにする簡潔な構文を備えたプログラミング言語です.

さらに、標準JavaScriptにコンパイルされた後、CSコードはJavaScript対応の任意の環境で実行できます。.

JavaScriptの概要

JavaScriptの概要

JavaScriptには不適切なラップがあります。しかし、これは非常に便利で使用されているという事実によるものです。 JavaScriptを知ることは非常に重要です。他の言語を使ってもっと多くのことを行うことができますが、JavaScriptは知っておくべき最も有用な言語です.

うまくいけば、この導入により、迅速に立ち上げて実行できるようになります—インタラクティブなWebサイトの作成.

参考文献

コーディングと開発に関連するガイド、チュートリアル、およびインフォグラフィックが他にもあります。

  • F#プログラミング:.NETフレームワークでの関数型プログラミングについて調べる.

  • Erlangプログラミング入門とリソース:並列コードの作成に使用される初期の関数型言語.

  • Swiftの紹介とリソース:これは最新のCライク言語の1つです。プログラミングの未来は?こちらをご覧ください!

どのコードを学ぶべきか?

あなたがコーディングするためにどのプログラミング言語を学ぶべきかについて混乱していますか?私たちのインフォグラフィックをチェックして、あなたは何のコードを学ぶべきですか?

これは、言語のさまざまな側面について説明するだけでなく、「生活のためにJavaプログラミングを行うことでどれだけのお金を稼ぐことができるか」などの重要な質問に答えます。

どのコードを学ぶべきですか?
どのコードを学ぶべきか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map