読者です 読者をやめる 読者になる 読者になる

新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。気づけば社会人3年目に突入。

学習記録:Web開発

[学習記録] Web開発

内容:フロントエンドエンジニアとしての基礎と準備

3章:UI/UXデザイン入門
UXデザイン
  • ユーザエクスペリエンス(ユーザ体験)
    • UIが与える体験と捉えられがち
    • UXデザインはUIデザインを内包するもの、UIはUXに影響を与える要素の一つに過ぎない
  • ユーザ体験の期間
    • アプリ(システム)を利用しているときのみに発生するものではない
    • 利用中の一時的UXのほか、利用前の予期的UX、利用後のエピソード的UX、期間全体の累積的UX
    • UXを考えるときにはUIやアプリの操作感のみ注力しがちだが、もっとマクロな視点で考える必要
  • ユーザ体験の5つの段階
    • 戦略>要件>構造>骨格>表面
    • 下から上へいくほど抽象的から具体的に、コンセプトワーキングから要件実装へと進んでいく
  • ペルソナとシナリオ
    • ユーザ体験を考える上でまずやらなければならないことは、ユーザの仮想モデル(ペルソナ)を作成すること
    • ユーザ体験の「ユーザ」とはどんな人物か?
    • 具体的なユーザ像を想定することで各ステークホルダが想像するユーザ像のブレを無くす
  • カスタマージャーニーマップ
    • 文字通りユーザの旅の地図
    • 利用シーン・チャンネル全てを俯瞰した状態を確認
    • 共通のユーザ行動モデルを共有することで問題解決をしやすくする
4章:HTML/CSS/JavaScript基礎
HTML5
  • HTML5とは
    • W3Cから08年に草案が発表され、12年に仕様策定が終了、14年に勧告予定
    • HTML4やXHTML1は「文書」を定義するための言語
    • HTML5は「Webアプリケーションプラットフォーム」を実現するための中核の技術
    • Ajax機能の登場以降、Webはアプリケーションとしての側面を年々増してきている
    • デスクトップアプリケーションなど、Webブラウザ以外でHTML/CSS/JavaScriptが採用されることも
  • HTML5で追加された主な要素
    • ドキュメントの構造を表す要素
      • セクション/アウトラインの概念が強化
      • セクショニング要素:section、article、aside、nav
      • ヘッダ/フッタ情報を定義するheader、footer要素
      • 装飾目的には従来通りのdiv要素を使う
      • DOCTYPE宣言の簡略化
    • マルチメディア要素
      • これまでは動画や音声の再生にはFlashなどのプラグインを使用する必要
      • video、audio要素
      • これを使用することでプラグインに依存せずにメディア再生が可能
  • HTML5の新機能
    • JavaScript APIを通じて利用できる
    • グラフィックス
      • Canvas:ブラウザ上でグラフィックスを描画する、canvas要素
      • SVGベクタ画像を扱う
      • WebGL:3Dグラフィックスを扱う
      • その他のライブラリ:CreateJsやthree.jsなど
    • 位置情報(Geolocation API
    • 履歴(History API
      • これまでのhistory・back()のほか、pushStateやreplaceStateなどが追加
      • 主な用途はAjaxを駆使したページへの対応
    • ストレージ(Web Storage
      • ブラウザ側にデータを保持しておくための機能
      • Key-Value型で保持、これまでのCookieよりも保持できるデータ量が大きく、APIが便利
      • ただし、データがサーバへは送信されないため、サーバとも共有したい場合はこれまで通りCookie
    • オフライン対応(Application cache)
    • ファイル操作(Drag and Drop API / File API
    • 平行処理(Web Workers
CSS3
  • CSS3とは
    • CSS:HTMLでマークアップしたコンテンツのスタイルを指定するための言語
    • その最新レベルとしてW3Cが仕様を策定しているのがCSS3
    • CSS3ではモジュール単位で仕様を策定(CSS Text、CSS Backgrounds and Borders)
  • CSS3で使える新機能
    • アニメーション
      • transition:マウスオーバした際に大きさを少し変えるなど、違うスタイルが指定された場合の変化をアニメーションに
      • animetion/@keyframes:transitionは2点間のアニメーションだが、こちらは任意のポイントを設定可能
    • グラデーション
      • linear-gradient:線形グラデーション
      • radial-gradient:円形グラデーション
      • background/background-imageプロパティに上記の値を用いることが可能
    • ドロップシャドウ
      • box-shadow、text-shadow
    • ボーダー
      • border-radius:ボーダーの角を丸めることができる
      • border-image:ボーダーの描画に画像を用いる
    • 変形
      • transformプロパティ
      • 要素を移動、回転、拡大・縮小、傾斜させることができる
    • ウェブフォント
      • @font-faceでサーバ上のフォントファイルを読み込ませることが可能
    • セレクタ
JavaScript
  • JavaScriptとは
    • 主にWebブラウザ上で動くスクリプト言語
    • サーバサイド言語として広く知られてきたNode.jsなど、活躍の場を広げる
  • 変数
    • varを付けて宣言し、保存したいデータを代入
    • 保持したデータを使用する際にはその変数を参照
var name = 'Your Name';
console.log(name);
  • データ型
    • Number型:数字全般
    • String型:文字列
    • Boolean型:true/false
    • Null型:null
    • Undefined型:undefined
    • Object型
    • Object型以外はプリミティブ型
    • 違う型同士の演算でも暗黙の型変換が行われる
  • 関数
    • function 関数名 (引数1, 引数2, ...) { 処理 }
function multiple(numA, numB) {
    var result = numA * numB;
    return result;
}

var a = multiple(4, 7);
console.log(a);
  • スコープ
    • 関数内で宣言した変数はローカルスコープ、それ以外はグローバルスコープ
  • オブジェクト
    • キーと値の組み合わせで管理
    • 各データ名をそのオブジェクトのプロパティと呼び、値をプロパティ値と呼ぶ
    • オブジェクトには関数も定義できる
    • プロパティ・メソッドにはobj.nameのようにドット演算子でつなげてアクセス
    • windowオブジェクト:すべてのオブジェクトの親、あらかじめ用意
var obj = {
    name ; 'Your Name',
    age ; 20,
    getAge ; function() {
        return this.age;
    }
};

console.log(obj.name);
obj.getAge();
  • this
    • 読み込み専用の変数、利用する関数の呼び出し元によって参照先のオブジェクトが変わる
    • 次のようなルールで参照される
      • コンストラクタ:生成するオブジェクト
      • オブジェクトのメソッド:呼び出し元のオブジェクト
      • イベントハンドラ:イベントの呼び出し元の要素
      • callまたはapply:指定したオブジェクト
      • それ以外:グローバルオブジェクト
  • 非同期通信
    • 従来のページ読み込み型ではなく、任意のタイミングで通信を行いコンテンツを取得
    • Ajaxを用いる場合、主流な方法は次の二つ
    • XMLHttpRequest通信
    • JSONP通信
      • 前述のXHRはドメインなどのオリジンが一致しないと通信できない
      • Webサービスから提供されるものを使おうとするためにはJSONP通信を使用