LoginSignup
11
18

More than 5 years have passed since last update.

@MahoTakara(Maho Takara)

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

Last updated at Posted at 2017-07-02

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

CSS

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

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

JavaScript

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

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

要素技術

DOM とは？

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

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

CSSプリプロセッサ

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

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

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

JavaScript ライブラリ

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

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"... から始まる ドキュメントに対する操作命令

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

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

<!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

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

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

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

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

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

<!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

まとめ? というか感想

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

11
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
18