GitHub Pages とは、GitHub による、静的サイトのホスティングサービスになります。GitHub のアカウントがあればすぐに静的サイトが公開できますので、非常にお手軽です。, 2016年8月にアップデートされ、今までよりもさらに簡単に使えるようになりましたので、利用方法をまとめておきます。, なお、サイトの容量や転送量などには制限があります。詳細は公式サイトのヘルプをご確認ください。, 今回は以下のような感じで適当に index.html を作りまして、コミット〜プッシュを行いました。JavaScript が動くことも確認したかったので、console.log() を1行入れています。, いよいよ GitHub Pages の設定です。GitHubリポジトリの Settings → GitHub Pages → Source のところで、master branch を選択し、その後 Save ボタンを押します。, これだけで、masterブランチの内容がそのまま GitHub Pages として公開されるようになります。(ここが 2016年8月からの追加機能です。以前は別途ブランチを切る必要がありました), URLは https://ユーザまたは組織名.github.io/リポジトリ名 となります。今回のサンプルだと

GraphQLと相性良い. 内部の例では、コードの周りにこの構造を見ることができます：, これはブラウザーの "DOMContentLoaded" イベントをリッスンするイベントリスナーで、HTML body が完全に読み込まれて解析されたことを示します。このブロック内の JavaScript はそのイベントが発生するまで実行されないため、エラーは回避されます (コースの後半でイベントについて学習します) 。 Content is available under these licenses. を作成するには、自分の Functions プロジェクトの, すべてのページ フィードバックを表示, JavaScript、Visual Studio Code、Azure を使用した生産的なフロントエンド開発, Productive front-end development with JavaScript, Visual Studio Code, and Azure, 静的な Web サイトの Azure へのデプロイ, Azure のデータベースを Node.js アプリに統合する方法, How to integrate Azure databases in Node.js apps, Visual Studio Code から Azure Functions をデプロイする, Deploy Azure Functions from Visual Studio Code, Azure でサーバーレス Node.js コードを作成する方法, How to write serverless Node.js code on Azure, チュートリアル:Blob Storage で静的な Web サイトをホストする, Tutorial: Host a static website on Blob Storage, 以前のバージョンのドキュメント. そのメッセージを元に、Webサーバ… ではどのようにWebページを表示させているかについてですが、 例えば、ユーザーがGoogleで何か検索したいなと思った時、ブラウザ上のURL欄に https://www.google.comと入力してアクセスすると思います。 実際にアクセスしたらGoogleのページは一瞬で表示されますが、クライアントとサーバー間で見た場合、 ユーザーがGoogleのページにアクセスしようとする間に以下のようなやりとりが行われます。 1. https://tipsnote.github.io/gh-pages-sample/ です。, もちろん、ブラウザ上から直接 GitHub 内でコードを編集してもOKです。つまり、サイトのちょっとした修正を GitHub のサイトからも行えます。, こんな感じで、ブラウザ上でコードを修正しコミット → 即座にサイトに反映、というのも可能なお手軽さです。, という設定を選ぶことも可能です。リポジトリの全体ではなく、一部分だけを公開できるようになりますので、いろいろと使えそうですね。以前までの gh-pages ブランチを使った方法と比べると、コードとドキュメントを別のブランチで管理する必要がなくなります。 静的ページとは、いつどこでアクセスしても毎回同じものが表示される、HTMLファイルで作成されたWebページのことです。ユーザーの要求に対して、Webサーバーが要求されたデータをそのままブラウザに送信し、表示します。静的ページは、そのWebページの制作者が更新をしない限り内容は一切変化しません。静的ページは企業の紹介サイトなど、ユーザーの入力内容や環境によって表示に差が出てしまうと困る内容を掲載するのに適しています。 GitHub Pagesとは、GitHub による、静的サイトのホスティングサービスになります。GitHub のアカウントがあればすぐに静的サイトが公開できますので、非常にお手軽です。 2016年8月にアップデートされ、今までよりもさらに簡単に使えるようになりましたので、利用方法をまとめておきます。 IBM、PayPal、Braun、Airbnb などが利用 この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます: テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— ソースコードを見るかライブ実行するか)！, JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。, JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。, さらにワクワクするのは、JavaScript からすぐに使えるように構築されている機能です。それは Application Programming Interface (API) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。, API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。, ブラウザー API はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、, 注: 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といったモダンなブラウザーを使うのがよいでしょう。プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、クロスブラウザーテストを読んでみるとよいでしょう。, サードパーティ API はブラウザーには組み込まれておらず、さらに普通は Web上のどこかからそのコードと情報を探さなければなりません。例えば、, 注: このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ Client-side web APIs module で扱っています。, ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！, まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。, ブラウザーをウェブページに読み込んだときの話を簡単に説明します (How CSS works の記事で最初に出てきました)。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。, JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。なお、ウェブドキュメント上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。もし JavaScript がロードされ、影響を受ける HTML および CSS がロードされる前に実行しようとすると、エラーが発生する可能性があります。この回避策については、記事の後半の「スクリプトの読み込み方針」セクションで学習します。, ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。互いに干渉することが出来てしまえば、Web の悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。, 注: 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。, ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。つまりどの順番で実行されるかということに気を配らなければなりません。例えば、最初の例で見た　JavaScript のブロックに戻りましょう。, このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、updateName() というコードブロック (5 行目から 8 行目) が実行されるようにしています。updateName() というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。, もし、最初の 2行を入れ替えた場合、動かなくなってしまいます。代わりにブラウザーの開発者コンソールに TypeError: para is undefined というエラーが出るでしょう。この意味は para オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。, 注: これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。, もしかしたら、インタープリタとコンパイルという用語をプログラミングの文脈で聞いたことがあるかもしれませんね。インタープリタでは、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。コードはプログラマーに親しみやすいテキストで受け取って、それから直接処理されます。, 反対に、コンパイル言語はコンピューターで実行する前に他の形式に変換 (コンパイル) しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。, JavaScript は軽量なインタープリタ型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリタは just-in-time compiling というテクニックを使ってパフォーマンスを向上させています; スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリタ言語と考えられています。, サーバーサイドとクライアントサイドという言葉も聞いたことがあるかもしれません。特に Web開発でよく聞かれます。クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。この JavaScript モジュールのことを明示的にクライアントサイド JavaScript と言います。, 反対に、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。Web で人気のあるサーバーサイドの言語は、PHP、Python、Ruby や ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については Dynamic Websites – Server-side programming のトピックを見てください。, クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに動的という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。, 動的に更新されるコンテンツを含まないウェブページは静的と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。, JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では 要素を使用することで外部のスタイルシートを適用することができ、また、