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アドレス）
- パス
- 参照先ファイルの場所
- スキーム名（http（https））
-
DNSサーバ（Domain Name Systemサーバー）による名前解決
- URLのみではデータに辿り着けない
- なぜURLやDNSが必要なのか？
- IPアドレスは人間には分かりにくい
- IPアドレスは変更される可能性があるため
-
Webサーバー
- クライアント側にwepページを表示させるために必要なファイルを返す
- Perlやphpなど、サーバー側でプログラムを実行し、実行結果を返す
- https
- セキュアな通信方式
- 公開鍵と秘密鍵、証明書を用い、お互いを認証することで安全な通信を確立