pikesaku’s blog

個人的な勉強メモです。記載内容について一切の責任は持ちません。

フロントエンド関連勉強会参加時のメモ!

HTLM5はデファクトスタンダード
HTMLはスマホはほぼHTML5しか動かない

CSS3はCSS2に比べ表現できる範囲が広がった。
 透明度
 角丸ブロック
 アニメーション

CSS3はハードウェアアクセラレーターが利用できるようにあった。
主にスマホ

→最近の開発の現場では既存のJSだけでつくるわけではなく、CSS3で出来るところまで作るのが主流。

JavaScriptが一番飛躍的な変化をした。

javaScriptECMAScript(えくますくりぷと)のこと。

最近の開発の現場では、拡張言語(メタ言語)を使うのが主流
→直接CSS・JSは書かない。
  拡張言語でコードを書いてコンパイルするとCSS・JSが出力される。


著名なフレームワーク

jQuery

Bootstrap CSSフレームワーク(Twitter開発。きれいな感じになる)

ANGULARJS



マルチページ(1画面1ページ)

シングルページ(DIVの表示・非常時で切り換える)

※一つのやり方として、、、、
 入力、確認、入力後関連画面は、一つのシングルページにまとめる。

レスポンシブWebデザインとは?
→1HTMLでPC/スマホなど複数デバイスをサポートする

 CSSで実現(HTMLは1つ・CSSは2つ作る)
 デバイスで分けるのではなく、画面の解像度の横幅で決める。

 スマホファースト
 レスポンシブデザインを前提として、開発はスマホサイト優先でやる手法。

Webシステムのシステム構成

 HTML→(Ajax REST形式)→Web API→Buijiness Logic

 Web APIはHTMLを返すのではなく、JSONでデータのみ返す(これがREST)

 端末/ブラウザを限定する設定は現在はしない。(画面の横幅) ※実際は、倍率?もかけている。

 フロントエンドとエンドシステムは切り離す

JavaScriptの難読化

関数などを、aaとかに変換して分かりづらくする。

HTML4とHTML5の明確な違いは、、、
宣言文だけ。

セクション要素(header、scrtionタグ。文章を適切に表現)
 セマンティックWeb等で活用されている。
 音声読み上げ機能などは、

音声、動画がフラッシュやプラグインなしで再生可能になった。

ルビ表示
 電子書籍で使われる。以前はルビはjsでやってた。


クリックはイベントと呼ぶ
クリックで動作するプログラムをイベントハンドラーと呼ぶ


検索

hrefで#を指定しているのは、ページ内リンクで#だけならページ遷移しない為


SSASにはメタの書き方が2種類あり。
scss or sass

scssは比較的cssと似た書き方が可能。

難読化をすると、.min.jsにするのが、お作法。

jqueryは難読化済み。

CSS圧縮
 改行・スペースを削除する。


WebStorm便利なフレームワーク