フロントエンドのスキル獲得に挑戦してみた

Bluemix で Webベースのアプリケーションを作るために、フロントエンドの開発スキルが必要となったので、その自習のメモです。

# フロントエンドとは

> フロントエンドは各種入力をユーザーから収集し、バックエンドが使える仕様に合うようにそれを加工する。フロントエンドとバックエンドの結合部はインタフェースと呼ばれる。

参考資料: ウィキペディア フロントエンド https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89

> フロントエンド（front-end）とは、ユーザーと直接データのやり取りを行う要素のことで、Web制作ではWebブラウザ側（クライアント側）を指します。一方、バックエンド（back-end）はフロントエンドからのデータ入力や指示に基づき、ユーザーから見えないところでデータ処理や保存などを行う要素のことで、Web制作ではWebサーバー側を指します。

参考資料: INTERNET ACADEMY フロントエンドエンジニアとは？フロントエンジニアの仕事内容と年収 https://www.internetacademy.jp/it/work-and-annual-income-of-front-end-engineer.html

# フロントエンド・エンジニアとは

> Webサイトを作るとき、デザイナーが作成したデザインを元にHTMLやCSS、JavaScriptを使用してブラウザに表示できるようにコーディングをします。このコーディングを担当するのがフロントエンド・エンジニアです。

> HTMLやCSSはもちろん、JavaScriptなどの高い技術が要求されます。APIを利用したWebサービスの構築、CMSでのサイト制作や機能拡張など、業務は多岐に渡ります。

参考資料: CREATIVE VILLAGE http://www.creativevillage.ne.jp/20764


# フロントエンド・エンジニアの言語

> フロントエンド・エンジニアが主に使用する言語は、HTML、CSS、JavaScriptです。

参考資料: CREATIVE VILLAGE http://www.creativevillage.ne.jp/20764

* HTML
* CSS
* JavaScript

## HTML
> HTML (HyperText Markup Language) は web ページのもっとも基本的な構成成分であり、Web ページの製作および視覚的な表現に利用されます。HTML は web ページの機能ではなく、内容を決めるものです。

参考資料: https://developer.mozilla.org/ja/docs/Web/HTML

* やさしいホームページ入門 HTML入門 http://www.ink.or.jp/~bigblock/html/
* HTML5入門 http://html5.imedia-web.net/
* HTML5+CSS3入門 http://yoppa.org/taumedia10/1695.html
* HTML5 & The Web Platform  https://www.slideshare.net/myakura/html5-web-platform
* 【HTML5入門】今さら聞けない！HTML5の基本の書き方まとめ http://www.hp-stylelink.com/news/2013/12/20131204.php
* HTMLクイック・リファレンス http://www.htmq.com/html5/ (おすすめ）
* HTML5&CSS3 リファレンス https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/
* MDN Mozilla Developer Network HTML https://developer.mozilla.org/ja/docs/Web/HTML (おすすめ）
* All About ホームページ作成 https://allabout.co.jp/gm/gt/1053/


## CSS
> CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 

参考資料: HTMLクイック・リファレンス http://www.htmq.com/csskihon/001.shtml

* やさしいホームページ入門 CSS入門 http://www.ink.or.jp/~bigblock/css/index.html
* HTMLクイック・リファレンス CSSの基本 http://www.htmq.com/csskihon/001.shtml
* MDN Mozilla Developer Network CSS https://developer.mozilla.org/ja/docs/Web/CSS


## JavaScript
> JavaScript® (よく JS と略されます) は第一級関数を持つ軽量、インタプリタ方式、オブジェクト指向の言語です。Web ページ向けのスクリプティング言語としてもっとも知られていますが、ブラウザ以外の多くの環境でも使用されています。JavaScript はプロトタイプベースの動的なスクリプティング言語であり、オブジェクト指向、命令型、関数型のプログラミング方式をサポートします。

参考資料: MDN Mozilla Developer Network JavaScript について https://developer.mozilla.org/ja/docs/Web/JavaScript/About_JavaScript

* やさしいホームページ入門 JavaScript入門 http://www.ink.or.jp/~bigblock/js/index.html
* HTMLクイック・リファレンス JavaScript http://www.htmq.com/js/index.shtml
* MDN Mozilla Developer Network JavaScript https://developer.mozilla.org/ja/docs/Web/JavaScript

## 要素技術

### DOM とは？

> 文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。

参考資料: DOMとは何か http://www.doraneko.org/misc/dom10/19981001/introduction.html

* JavaScript初心者でもすぐわかる！DOMとは何か？ https://eng-entrance.com/what-is-dom
* MDN Mozilla Developer Network DOM リファレンス https://developer.mozilla.org/ja/docs/DOM/DOM_Reference

### CSSプリプロセッサ

> CSSプリプロセッサは、プリプロセッサの独自の構文からCSSを生成するためのプログラムです。 多くのCSSプリプロセッサがありますが、ほとんどのCSSプリプロセッサでは、変数、ミックスイン、ネストセレクタなど、純粋なCSSには存在しない機能がいくつか追加されます。 これらの機能により、CSS構造をより読みやすく保守しやすくなります。
CSSプリプロセッサを使用するには、WebサーバーにCSSコンパイラをインストールする必要があります。

参考資料: https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor

代表的なCSSプリプロセッサには、次の様なものがあります。

* [SASS](http://sass-lang.com/)
* [LESS](http://lesscss.org/)
* [Stylus](http://stylus-lang.com/)


## JavaScript ライブラリ
フロントエンド・エンジニアが良く利用するとされる定番 JavaScript ライブラリについて調べました。

* jQuery https://jquery.com/
* Bootstrap http://getbootstrap.com/
* AngularJS https://www.angularjs.org/

### jQueryとは

> jQueryは、DOM操作の簡素化に焦点を当てたJavaScriptライブラリで、AJAX呼び出し、およびイベント処理が含まれます。 これはJavaScript開発者が頻繁に使用します。

参考資料: MDN jQuery https://developer.mozilla.org/en-US/docs/Glossary/jQuery

次は、最も簡単なレベルのJQueryを利用例です。 特徴は次の３つからなります。

* `<script src="https://ajax....`  から始まる jQueryのコードを取り込み  （同一サーバでも、例の様に外部からでも良い）
* `$(document).ready(...` から始まる イベント処理  (jQuery3.0 から`$(document).ready(fn)`は非推奨らしい)
* `id="test"...` から始まる ドキュメントに対する操作命令

この例のブラウザ上での動作は、<button>Click me</button> で表示される文字列をクリックすると、`$("button").click(function(){`　が呼び出されて、 `$("#test").hide()`によって、This is another paragraphの文字列がブラウザから消えるという動作になります。

この様に、ブラウザの表示エリアをクリックするなどのイベントを拾って、画面表示に関する動作を実行することを、実行するのが、jQueryの役割となります。

~~~html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
~~~
参考資料：W3Schools https://www.w3schools.com/jquery/default.asp

jQueryのライブラリは、ウェブサーバー上に置いても利用できます。 jQueryのダウンロードは、jQuery Download https://jquery.com/download/ に情報があります。


### Bootstrap とは

> もともとTwitterのデザイナーと開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドフレームワークとオープンソースプロジェクトの1つになっています。

参考資料： About Bootstrap http://getbootstrap.com/about/#team

Bootstrap を利用すると、ゼブラ・ストライプのテーブルなどを作ることができます。
![スクリーンショット 2017-07-02 13.06.30.png](https://qiita-image-store.s3.amazonaws.com/0/42829/ee1b533b-24e7-1f2e-8959-b5e08f33b068.png)

次が、このテーブルを作るためのHTMLになります。 この特徴は次の３点です。

* Bootstrap の CSS を取り込む
* Bootstrap の JavaScriptライブラリを取り込む、利用しているjQueryも取り込む
* Bootstrap が提供するクラスをHTMLへ指定する (このサンプルのBootstrap クラスは、http://getbootstrap.com/css/#tables-striped に説明があります。)


~~~html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS, JavaScript を取り込み -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>
  <!-- クラスの設定 -->            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>
~~~
参考資料: W3Schools https://www.w3schools.com/bootstrap/bootstrap_tables.asp

### AngularJS とは

> HTMLは静的なドキュメントを宣言するのに最適ですが、Webアプリケーションで動的なビューをHTMLでつくろうとすると、困難になります。 AngularJSを使用すると、アプリケーション用のHTMLの表現を拡張できます。 その結果、非常に表現力があり、読みやすく、迅速に開発できる様になります。

参考資料：AngularJS ホームページ https://www.angularjs.org/

次のスクリーン・ショットは、AngularJS の動作のサンプルです。 Quantity と Price に値を入れると即時に Total の金額を計算して表示します。

![スクリーンショット 2017-07-02 14.58.52.png](https://qiita-image-store.s3.amazonaws.com/0/42829/13c8e6ac-8f79-30c0-75ba-3fc9fbb7add6.png)

次が、上記スクリーン・ショットのコードで、ポイントは以下の３点です。

* AngularJS のライブラリを取り込み
* AngularJS の機能のパラメータ設定
* AngularJS のタグを設定

AngularJSが提供する機能は、AngularJS Developer Guide https://docs.angularjs.org/guide で知る事ができます。

~~~html
<!DOCTYPE html>
<html>
<!-- AngularJS のライブラリを取り込み -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<!-- AngularJS の機能のパラメータ設定 -->
<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

<!-- AngularJS のタグを設定 -->
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div>

</body>
</html>
~~~
参考資料: W3Schools Cost Calculator https://www.w3schools.com/angular/tryit.asp?filename=try_ng_binding

# まとめ? というか感想
網羅的に調べてみたのですが、フロンドエンドの技術も奥が深く、全然足りない感じがしています。 色々学ぶ事があるんですね。