【自分用】フロントエンド技術色々勉強しなおしてみた。

Node.jsとは

• サーバーサイドでJavascriptを実行できるようにしてくれる
• チャットサービスなどリアルタイムな機能が得意
• クライアントサイドとサーバーサイドで同じ言語が使えるという利点がある

gulpとは

• タスク自動化ツール
• ファイル圧縮、Sassコンパイルの自動化・・・
• CSSプリプロセッサのコンパイルや、ファイルのminify化を自動化することで、開発をサポートする役目がある

webpackとは

• モジュールバンドラーツール
• JSファイルをモジュール毎に管理可能になる
• バンドル元（開発環境）dir構造と出力先構造の設定はentryに設定する
  • entry: { ' 出力先( js/edit/pc ) ' : ［ ' 参照元のpath ' ］}
  • 機能モジュールをrequireで参照する
  • requireはnode.jsでサポートしている機能
• babelを介すことで、es6以降を使用可能になる
• <蛇足>: windowsとmacで、dir構造のpathの'/'を変更しないと参照できない

gulpとwebpackの違い

• 基本的には別物
• 同じことができる部分もあるため混合されやすいのかな？
• gulpは様々な便利機能を管理・自動化できる
• webpackはバンドルをメイン機能とする。node.jsのrequire機能で様々なファイルをまとめて出力できる
• 環境にもよるが、ケースバイケースで、併用 or どちらかでいいかもしれない。
• gulp-webpackもあるので、gulpでwebpackを動かすこともできる。

CSS設計

なぜ？

• ルールを設けることでメンテナンス性を高める
• クラス名で悩む時間が減少する
• 再利用性を高める
• 上書きの上書きやimportant祭りを防ぐ（カオスにならないための管理方法）

BEM（Block、Element、Modifier）：ベム

• Block：自身を構成する部品（フォーム、ヘッダー、キービジュアル）
• Element：Blockを構成している要素（見出し、ボタン、画像）
• Modifier：状態を表す。KeyとValueで構成する。Block、Elementそれぞれに対するModifierがある。
  • 例：Block_key_value ： form_submit_done、header_state_fixed、kv_slidetype_loop
  • 例：Element_key_value ： btn_state_disable・・・

OOCSS（Object Oriented CSS） ：オーオーシーエスエス

• 共通スタイルと固有スタイルをclassで分けて当てる
• .btn （共通クラス） .red-btn（固有クラス）

SMACSS（Scalable and Modular Architecture for CSS）：スマックス

• Base
  • サイト全体のデフォルトスタイルを定義する（reset.cssなど）
• Layout
  • Moduleの配置を決める
  • プレフィックスに「l-」をつける（例: .l-main、.l-sub）
• Module
  • 再利用可能なパーツ
  • 親モジュールの名前をプレフィックスにつける（例: 親: .item、子: .item-box）
• State
  • LayoutやModuleの変化した状態
  • プレフィックスに「is-」をつける（例: .is-active、.is-error）
• Theme
  • LayoutやModuleのTheme（色を管理する）
  • プレフィックスに「theme-」をつける（例: .theme-color）

Webブラウザとは

• インターネット（World Wide Web（略称：WWW））上で提供されているシステムを利用するためのソフトウェア

URL

• URLの文法

  • スキーム名（http（https））
    • どんな約束事（プロトコル）でデータを送受信すればよいかを決める
    • http（https）：Webページ
    • https：そのページは、「SSL/TLS」によって通信が暗号化されていることを明示
    • mailto：メールの宛先
  • ホスト名・ドメイン名
    • ホスト名：ネットワーク上にある機器を識別するため個別に割り振られた名前
    • ドメイン名：ホストが所属するホスト、ホストが所属するネットワークの名前
    • ホストはドメイン名の一種
    • ネットワーク上の住所（IPアドレス）
  • パス
    • 参照先ファイルの場所

• DNSサーバ（Domain Name Systemサーバー）による名前解決

  • URLのみではデータに辿り着けない
  • なぜURLやDNSが必要なのか？
    • IPアドレスは人間には分かりにくい
    • IPアドレスは変更される可能性があるため

• Webサーバー

  • クライアント側にwepページを表示させるために必要なファイルを返す
  • Perlやphpなど、サーバー側でプログラムを実行し、実行結果を返す

• https
  • セキュアな通信方式
  • 公開鍵と秘密鍵、証明書を用い、お互いを認証することで安全な通信を確立