画面実装 完成

ついに画面実装完了。

と、思いきや、、、

まさかのデータ消えやり直し。。。

 

なぜこんなことが起こったのか、それは

githubのcommitをせず、別のbrunchに移ってしまった

もうね、アホかと

涙出そうになりましたよ。

なんとかメンターさんの力も借りて復元。

 

とりあえず作業の際は変更するたびにこまめにcommitしていこうかなと

githubの大切さを改めて学びました。

 

では、また。

chat-space実装3

 かなり仕上がってまいりました。

メンターへの質問の仕方も少し精度が上がってきた気がします。

画面に謎の空間ができており困っていたところを

box-sizing (幅と高さの適用方法を制御)

という方法で解決していただきました。

div {box-sizingborder-box;}

 コードはこんな感じ。

要は一番大きな骨組みを作ってその中でscssを書いてくってことですね。

 

明日には画面実装完了させて休日を迎えたいです。

 

では、また。

 

 

chat-spaceの実装2

Webサービスの画面実装を行なっております。

 

「検証」が大切というのはわかったが、まだ全然使いこなせていないことが判明。

classを揃える。scssがそもそも当たっているのかを調べるということを繰り返して行うことが大切だと改めて学びました。

 

というか、本来は指示書を見ながら作らないといけないのに、

かなりズルしてる感は否めぬ。

 

まずは手本通りに作り上げることを目標に画面実装を行なっていこうかと思います。

 

では、また。

haml,scss

haml、scssの実装を行なっていますがかなり難しい。。。

お手本のサイトはあるので参考にしながら進めてはいるものの、

HTMLから変換しないといけなかったりで難易度高いです。

 

今日は「検証」を使用して中身がどうなっているのかを見ながら進めることの

重要性を学びました。

これで大丈夫なのかと相変わらず自分の知能の低さに心配しながらも

実装を進めて行きます。

 

ではまた

Sass

Sass

CSSの機能を拡張した言語のこと

メリット

・記述の簡略化ができる

・プログラムのような処理が可能

・複数のCSSを一つにまとめることができる

・同じ値を使いまわすことができる

 

Sassではパーシャルという機能を使用し複数のSassを一つにまとめれる。

→作成するには、ファイル名を_(アンダースコア)から始めます。パーシャルファイルを読み込むには、@import ファイル名と記述

例)

@import "reset";

 

mixinという機能を使用することで、同じスタイルをまとめることもできる

→定義するには、@mixin mixin名( ) { }のように記述

例)

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

 

&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指します。以下の例では、&は.menuに相当します。
つまり、擬似要素afterは、.menuに対して適用されているということです。

このmixinの呼び出しは@includeを使用して以下のように書きます。

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

 

まあ今日はこんな感じ。

CSSの上位互換て感じですかね。

では、また

データベース設計

データベース設計

次のテーマはこれらしい。

 

まあざっくりとまとめると、

サービスにおいてどのようなデータを使用し管理するかを決めること

 

データベースを構成する要素は以下の3つ。

  • サービスで扱う概念(エンティティ)

  • エンティティの属性

  • エンティティ同士の関係性(リレーション)

 

・エンティティとはユーザーやコメント、投稿といったサービスで扱う概念

・エンティティは属性を持っている(ユーザーなら名前やメールアドレスなど)

・エンティティとエンティティの間には関連性の場合があり、関連性をリレーションという

・エンティティはデータベースにおけるテーブルに相当する

・エンティティの属性はデータベースにおけるカラムに相当する

 

 

 

  • カラムの値には制約をつけてデータの正しさを保証する
  • 値が必ず設定されていることを保証するときにはNOT NULL制約を用いる
  • 値に重複がないように設定するには一意性制約を用いる
  • キーの存在を保証するときには主キー制約、外部キー制約を用いる
  • 検索する際に使うカラムにはインデックスを設定する

ざっくり今日はこんな感じでした〜。

ではまた。

データベースとSQL

今日学んだこと

 

SQL(Structured Query Language)

SQLはリレーショナルデータベース(RDB)の操作を行うためもの

RDBとはデータを行と列で表形式の構造で管理するデータベースのこと。

データを定義するDDLと操作するDMLの二つがある。

 

DDL

・CREATE  データベースやテーブルの作成

・ALTER   データベースやテーブルの更新

DROP   データベースやテーブルの削除

 

DML

・INSERT  データの登録

・UPDATE  データの更新

・DELETE  データの削除

・SELECT  データの検索

 

DDLがターミナル上から、DMLmySQL上からデータを動かすという認識かなと。

細かい入力のルール等はこれから学んでいこうかと思います。

 

では、また。