開発初心者の開発日記~38日目~

備考

8/12,13を合わせた内容

就活の最終段階だったのであまり時間を取れなかった。

また、他にやっていることに時間を費やしたいので、数日間はこちらの日記を更新できない。

内容

  • HTML/CSSの基本でのアウトプット
    • 130分程度
    • 178ページから196ページ
    • ワイヤフレームを元にindex.htmlindex.cssを作成
    • また、他のページについても随時作っていこうと思う

HTML/CSSの基本でのメモ

Chapter4

4-3 「head」を記述しよう

  • ファイルの準備
  • HTMLの骨組みを記述(head、body、など)
  • 「meta」情報と「title」の記述
  • 必要なCSSファイルの読み込み
    • デフォルトCSSとオリジナルCSS

4-4 「header」部分を作ろう

  • (一般的には)ナビゲーションメニューなど
    • (今回は)アカウントを列挙してみる
  • 共通部分のCSSファイルの準備
    • 行の高さ、色、フォント、フォントの大きさ、画像の大きさ、など
  • 余白の調整(「header」部分)
  • ナビゲーションメニューの装飾
    • 疑似クラス(a:hoverならaタグにカーソルを合わせた時)
  • コンテンツの最大表示幅の設定
    • 大きい画面でも違和感なく表示できるように
    • headerをwrapしておく(中央配置、最大幅、横のpaddingによる余白、など)

4-5 コンテンツ部分を作成しよう

  • 各種コンテンツのHTMLを書く
  • HTMLに対しCSSの設定
    • 配置の設定→色やフォントなどの設定
    • :hoverの設定なども
  • 背景画像の設置
    • 背景画像を設定する場合はwrapして指定する
  • 位置指定
    • 今回は特殊な配置にしたかったので、位置を指定した
    • positionプロパティ
  • 各種CSSのプロパティなどを

4.6 ファビコンを用意しよう

  • ファビコンとは?
    • タブ表示した際にサイト名の横に表示されている小さなアイコンのこと
  • どんなデザインのファビコンが良いのか?
    • Simple is the best.
  • ファビコン用の画像の用意
    • 画像を作成して保存する
    • <header>
      • <link rel="icon" type="image/png" href="リンク">で指定

4.7 フルスクリーンページのカスタマイズ例

  • 背景画像にブレンドモードを適用する
    • ブレンドモード(複数の画像や色を重ね合わせる機能)を適用することができる
    • background-blend-modeプロパティ
    • (今回は一旦使わないことにする)
  • 背景をグラデーションカラーにする
    • back-groundプロパティに〇〇-gradientを指定する
  • 背景画像×ブレンドモードでグラデーションを重ね合わせることも可能

開発初心者の開発日記~37日目~

内容

JavaScript本格入門のメモ

Chapter3:組み込みオブジェクト

3.2 基本データを扱うためのオブジェクト

  • 3.2.1 Stringオブジェクト
    • Stringオブジェクトとは?
      • 文字列型(string)の値を扱うためのラッパーオブジェクト
    • 主要なメソッド
      • 例:JSファイル
      • substringメソッドとsliceメソッドの違い
        • (1)指定したインデックスがstrat>endである場合
          • substringメソッド:endとstartの関係を入れ替えて抽出
          • sliceメソッド:入れ替えをせずに空文字列を抽出
        • (2)start,endに負の数を指定した場合
          • substringメソッド:無条件に0とみなす
          • sliceメソッド:文字列末尾からの文字数とみなす(Pythonと同じ)
        • 例:JSファイル
    • サロゲートペア文字の長さをカウントする
  • 3.2.2 Numberオブジェクト
    • Numberオブジェクトとは
      • 数値型(number)の値を扱うためのラッパーオブジェクト
    • 主要な機能
      • 特別な値を表すプロパティ(他にもあり)
        • 無限大/無限小:演算の結果が実現可能な数値の範囲を超えた/下回った場合
        • 最大値/最小値:この値を超える/下回る演算の結果は保証されない
        • NaN:Not a Number、0除算などの不正な演算が行われた場合などの返り値
          • 任意の数値と等しくないという性質を持つ
        • 例:JSファイル
      • 数値形式の変換を行うメソッド(toXxx)
        • 文字列や指数形式や桁数揃えや様々な使い方があり
        • 例:JSファイル
      • 文字列の数値への変換
        • JavaScriptはデータ型を自動で暗黙的に変換するため、明示的に変換すべき時がある
        • 文字列の数値への変換の場合はparseFloat/parseInt/Numberが主にある
        • それぞれの挙動は微妙に異なるため、注意が必要
        • (発展的なので、今回は飛ばす)(実際に使用する際に気をつける)
      • 演算子を用いた変換
        • 文字列⇄数値の変換
          • 数値→文字列の場合:+演算子はいずれかが文字列の場合に文字列へ変換(空文字列を足す)
          • 文字列→数値の場合:-演算子はいずれかが数値の場合に数値に変換(0を足す)
          • 例:JSファイル
        • 任意の型から論理型への変換
  • 3.2.3 Symbolオブジェクト(ES6)
    • Symbolオブジェクトとは?
      • シンボル(物の名前)を作成するためのオブジェクト
    • シンボルの性質
      • シンボルの生成
        • Symbol(desc)
        • desc:シンボルの説明
          • descが同じでも別で作成されたシンボルは別物!
      • 文字列や数値への暗黙的な変換は許可されない
      • 例:JSファイル
    • シンボルの利用(他にもある)
      • 列挙定数を用いたい場合
        • 列挙定数におけるバッドノウハウ(const A=1,B=2,C=3,D=4;)
          • 識別子には意味があるが、それぞれの値には意味がない
          • 問題
            • 比較の際に数値を指定することでマジックナンバーが生まれる可能性
            • 複数種の列挙定数を利用する場合に値が同じになる可能性
        • シンボルを使うことで
          • 値に意味を持たさずに識別子に意味を持たせることができる
          • 例:JSファイル
  • 3.2.4 Mathオブジェクト
    • 数学に関わる数値の演算機能を持つオブジェクト
    • (必要な時にドキュメントを調べるのが良さそう)
    • Mathオブジェクトはメンバーとしてクラスプロパティ/メソッドのみを持つ
    • 例:JSファイル

開発初心者の開発日記~36日目~

内容

  • JavaScript本格入門
    • 140分程度
    • 72ページから114ページ
  • HTML/CSSの基本でのアウトプット
    • なし

JavaScript本格入門のメモ

Chapter2:基本的な書き方を身につける

2.4 演算子

  • 2.4.4 論理演算子
    • 基本
      • &&||!、などで一般的
      • falseとみなされる値(falsyな値):空文字列、数値の0、NaN、null、undefined
      • trueとみなされる値:上記以外の値
    • 短絡評価(ショートカット演算)
      • 左式が評価された際に右式の評価が行われない場合がある
      • 論理演算子の右式には、値を実際に操作する式を含めない方が良い(例も参照)
        • 例:関数呼び出しや代入演算など
      • コード例:JSファイル
    • 短絡評価を使うタイミング
  • 2.4.5 ビット演算子
    • ビットごとに計算を行う演算子
    • ビット論理演算子
    • ビットシフト演算子
      • >><<など
      • 左側の数を右側の数で指定したビット数ぶん移動させる
  • 2.4.6 その他の演算子(一部は他の章)
    • delete演算子
      • オペランドに指定した変数や配列要素などを破棄する演算子
      • ルール
        • (0)参照を切るのではなく、メモリを開放する
        • (1)配列の要素を削除した場合、該当の要素のみが削除される
          • 削除されてundefinedが格納される
          • 後ろの要素が繰り上がるわけではない -(2)プロパティを削除した場合、該当のプロパティのみが削除される
          • プロパティの参照する要素自体が削除されるわけではない
        • (3)明示的に宣言された変数を削除することができない
      • 例:JSファイル
    • typeof演算子
  • 2.4.7 演算子の優先順位と結合則
    • (いずれもなんとなくは覚えている)
    • 優先順位
      • 表は本を参照する
      • 覚えるのは困難なので適宜確認する+丸括弧を利用する
    • 結合則
      • こちらも適宜覚えていけば良い

2.5 制御構文

  • 2.5.0 構造化プログラミング
    • 順次(記述した順番に処理を実行)
    • 選択(条件によって処理を分岐)
    • 反復(特定の処理を繰り返し実行)
  • 2.5.1 if文
    • if(条件){処理}else if(条件){処理}else{処理}
    • 中括弧({})は省略可能
      • ブロック中の命令が一文である場合に可能
      • 中括弧を省略した場合は直近のif命令に対応する
      • 紛らわしいので、できるだけ避ける
  • 2.5.2 switch文
    • 同値演算子による多岐分岐に特化している
    • 同じような条件式を繰り返さずに済むので、コードが読みやすいという特徴
    • 使い方の例:JSファイル
    • defaultは省略可能(普通は省略しない)
    • caseごとにbreak文を指定する
      • 1つのcaseを終えても自動でswitchブロックを抜けるわけではない
    • break文を指定しない場合
      • 複数のブロックを続けて行う(フォロースルー)ことができる
      • わかりにくいので、通常は利用しないことが多い
      • 利用する例:JSファイル
        • 複数の値で同じ処理を行いたい場合
    • 注意点:switch式とcase値は===演算子で比較する
  • 2.5.3 while文、do-while文
    • while(条件式){処理}
      • 前置判定
    • do{処理}while(条件式);
      • 後置判定
      • ;が必要(省略の場合とのコンフリクトを避けたい?)
  • 2.5.4 無限ループ
  • 2.5.5 for文
    • for(初期化式;ループ継続条件式;更新式){処理}
    • カンマ演算子
      • カンマ演算子を使うと、初期化式、ループ継続条件式、更新式にそれぞれ複数指定できる
      • let文
        • let var1[=value1],var2[=value2],…
        • 複数の値の初期化を一気にできる
      • 例:JSファイル
  • 2.5.6 for…in文
    • for(仮変数 in 連想配列){処理}
    • 連想配列(オブジェクト)を走査する場合に用いる
    • 配列の走査での使用を避ける
      • 処理の順序が保証されない、for文を用いた方がシンプル、などの複数の理由がある
  • 2.5.7 for…of文(ES6)
    • for(仮変数 of 連想配列){処理}
    • 配列などの「列挙可能なオブジェクト」を列挙する文
      • 列挙可能なオブジェクトについては後述
    • 仮変数には値が与えられる
    • 例:JSファイル
  • 2.5.8 break文/continue文
    • break文:ループの強制終了
    • continue文:ループのスキップ
    • ラベル構文
      • 多重ループの場合、通常のbreak文では内側のループをbreakする
      • ラベル構文では、breakしたいループの前にラベル名:をつけ、break ラベル名;とすることで、一気にbreakすることが可能
      • 例:JSファイル
  • 2.5.9 try…catch…finally文
    • 例外によりスクリプト全体が停止することを防ぐための文
    • 使用方法の例:JSファイル
    • 注意点:例外処理はオーバーヘッドが大きい
    • 例外はプログラム中で発生するものだけでなく、自分で作成することも可能
      • throw文
        • throw new Error(メッセージ)
        • Erroオブジェクト以外にもSyntaxErrorオブジェクトなど様々
      • 例:JSファイル
  • 2.5.10 Strictモード(ES6)
    • 安全性や効率面で使うべきでない構文(バッドノウハウ)が存在する
      • 例:var文、将来的に追加予定のキーワードを予約語に追加、などなど
    • Strictモードを使用するメリット
      • 上記のような構文を避けることができる
      • 高速に動作する場合がある
      • 将来のJavaScriptで変更される点を禁止することで、今後の移行が簡単に
    • Strictモードの有効化
      • (1)スクリプトの先頭に"use strict";
      • (2)関数本体の先頭に"use strict";
      • "use strict";自体はただの文字列なので、Strictモードに対応していない環境でも無視される
        • できるだけStrictモードにて開発を行うべき

Chapter3:組み込みオブジェクト

3.1 オブジェクトとは?

  • 3.1.0 前提
    • 実装的な視点ではオブジェクトは連想配列(ハッシュ)
    • 概念的には単なる連想配列ではない
    • 連想配列:名前(値)が入った入れ物(プロパティ)の集合(のイメージ)
      • 主役は個々の要素
    • オブジェクト:プロパティの値はオブジェクトそれ自体の特性や動作を示す
  • 3.1.1 オブジェクト=プロパティ+メソッド
    • プロパティ:オブジェクトの状態や特性を表すための序方法
    • メソッド:オブジェクトを捜査するための道具
    • オブジェクト:データを捜査するための様々な機能を持った入れ物
  • 3.1.2 new 演算子
  • 3.1.3 静的プロパティ/静的メソッド
    • インスタンスを生成せずに利用できるプロパティ/メソッド
    • 静的プロパティ/静的メソッド or クラスプロパティ/クラスメソッド、と呼ぶ
    • オブジェクト名.プロパティ名オブジェクト名.メソッド名(引数)
  • 3.1.4 組み込みオブジェクトとは(この辺の本の記述は正確でないので修正した)
    • 組み込みオブジェクトとは?
      • JavaScriptの動作する任意の環境にて特別な定義なしで使えるオブジェクトのこと
      • 例:Array、Map、Set、String、Boolean、など
    • データ型とオブジェクト
      • データ型はそれぞれオブジェクトに対応する
      • インスタンス化とリテラル
      • 基本型と参照型
        • 参照型は全てオブジェクト
        • 基本型(undefinedとnullを除く)を扱うオブジェクトをラッパーオブジェクトと呼ぶ
          • ラッパーオブジェクト:単なる値に過ぎない基本型オブジェクトとしての機能を追加するためのオブジェクト

開発初心者の開発日記~35日目~

内容

  • JavaScript本格入門
    • 60分程度
    • 59ページから71ページ
  • HTML/CSSの基本でのアウトプット
    • なし
  • AtCoderでのアウトプット(JavaScript

JavaScript本格入門のメモ

Chapter2:基本的な書き方を身につける

2.4 演算子

  • 2.4.0 演算子(オペレーター)とは?
    • 与えられた変数/リテラルに対してなんらかの処理を行うための記号
    • また、処理の対象をオペランドと呼ぶ
  • 2.4.1 算術演算子
    • インクリメントやデクリメントを含め、主要なものは揃っている
    • +演算子の挙動
      • 数値同士→通常の足し算
      • それ以外→+が文字列の足し算と解釈される
      • 例:JSファイル
    • インクリメント、デクリメント
      • 前置演算と後置演算の挙動の違いにのみ注意(他の言語と同じ)
      • 例:JSファイル
    • 小数演算
      • 浮動小数点により、近似されて計算が行われる(他の言語と同じ)
      • 比較を行う際などは整数に直して有効桁数を保証した元で考える
      • 例:JSファイル
  • 2.4.2 代入演算子
    • 代入演算子=)、複合代入演算子+=^=など)
    • 基本型vs参照型
      • 参照型の場合はアドレスを共有するので、コピー先の変数にも影響することに注意
      • 例:JSファイル
    • 定数は再代入不可能
      • 定数の配列の場合、配列の一部を書き換えることは可能
      • 例:JSファイル
    • 分割代入
      • (これは至高の機能、Pythonでもよく使う)
      • 配列/オブジェクトの要素を展開してそれぞれの変数に分解して代入するための構文
      • スプレッド演算子...により、残りの部分をまとめて取り出すことも可能
      • 配列の場合
        • 例を見れば明らか([]で変数を囲む)
        • 例:JSファイル
      • swapで使う場合
      • オブジェクトの場合
        • プロパティ名の変数名を展開先の変数として用いる({}で囲む)
        • この時、一部のプロパティの値を利用することも可能
        • 目的のプロパティがなかった時のためにデフォルト値を利用することも可能
        • 例:JSファイル
        • さらに複雑なことも可能
        • 宣言と代入を切り離したい場合
          • オブジェクトの分割代入の場合は代入時に前後を()で囲む必要あり
          • 例:JSファイル
  • 2.4.3 比較演算子
    • 基本的な演算子は他の言語と同じ
    • 等値演算子と同値演算子の違いには気をつける必要がある
    • 等値演算子==
      • オペランドのデータ型が異なってもデータ型をなんとか変換して同じ値にできるのかを判定する
        • 例:console.log(1==true);true
      • 参照型は注意
        • 参照型が持つのはアドレス値なので、アドレスが等しいかで判定を行う
        • 参照先の値が等しいかどうかではないので、注意が必要
        • 例:JSファイル
    • 同値演算子===
      • データ型を含めて同じ値であるかを判定する
      • 前述の等値演算子では予想外の挙動を産む可能性がある(例を参照)ので、===をできるだけ利用する
      • 不等値演算子と非同値演算子の関係性も同じ
      • 例:JSファイル
    • 三項演算子?:

開発初心者の開発日記~34日目~

内容

  • JavaScript本格入門
    • 90分程度
    • 1ページから58ページ
    • JavaScriptの常識を体系的に身に付けるために勉強する
  • HTML/CSSの基本でのアウトプット
    • 30分程度
    • 174ページから177ページ
    • Portfolopサイトの作成のためにHTML/CSSの基本を利用する
    • ワイヤフレームの参考になりそうなサイトを探している(1

JavaScript本格入門のメモ

Chapter 1:イントロダクション

1.1 JavaScriptとは?

  • 1.1.1 JavaScriptの歴史
    • 1990年代の後半に現れた言語
    • 当時に注目されていたJavaにあやかってJavaScriptと名付けられる
    • ブラウザ上での様々なエフェクトがJavaScriptにより実装される
    • 過剰な装飾によりユーザビリティの低いダサいページが量産されることに
    • ブラウザごとで実装を拡張していったため、ブラウザ間の仕様差が浮き彫りになる
    • 仕様の多さによる面倒さなどの複数の理由により、ユーザーの足が遠のくことに
  • 1.1.2 復権
    • Ajaxの誕生(2005年)
      • Ajaxとは:ブラウザ上でデスクトップアプリのようなリッチなアプリを作成する技術
      • JavaScriptAjaxを支える中核となる言語になる
    • 機能拡張合戦の落ち着き
    • HTML5の誕生(2000年代後半)
  • 1.1.3 マイナスイメージの誤解
  • 1.1.4 言語としての4つの特徴
    • スクリプト言語
      • 書き方が直感的で取得が容易な言語のこと
      • 動的型付け言語を指す場合もあるが、厳密な定義はない
    • インタープリタ型言語
      • プログラムを逐次的に解釈していく言語のこと
      • 欠点:コンパイル型に比べて最適化が働きにくいなど
      • 利点:コードを書いてすぐに実行することができる
    • 様々な環境で利用可能
      • ブラウザ上以外に様々なところで利用可能
    • 様々な要素で構成される
      • 標準の機能、DOM操作、ブラウザオブジェクト、など

1.2 ECMAScript 2015

  • 1.2.0 標準化されたJavaScript
    • ECMAScript 6(ES6)とも呼ばれる第六版のJavaScript
    • 新機能の採用
    • (自分はES6しか学ぶ気がない)
  • 1.2.1 ブラウザの対応状況
    • ブラウザによる、要確認

1.3 ブラウザ付属の開発者ツール

  • 1.3.1 開発者ツールの起動
    • (自分はChromeユーザなので、Chromeに限定)
    • Chromeデベロッパーツールがこれに相当(使ったことあり)
    • 下記の章は実際に使う際に利用する
  • 1.3.2 HTML/CSSのソースを確認する(Elementsタブ)
  • 1.3.3 通信状況をトレースする(Networkタブ)
  • 1.3.4 スクリプトデバッグする(Sourcesタブ)
  • 1.3.5 ストレージ/クッキーの内容を確認する(Applicationタブ)
  • 1.3.6 ログ確認/オブジェクト操作などのツール(Consoleタブ)

Chapter2:基本的な書き方を身につける

2.1 JavaScriptの基本的な記法

  • 2.1.1 JavaScriptでHello, World!
  • 2.1.2 JavaScriptをHTMLファイルに組み込む
    • <script>タグを用いて埋め込む
      • type属性:text/javascript
    • <script>を記述する場所
      • (1)<body>の配下(任意の位置)
        • コンテンツとコードの混在となるため、非推奨
      • (2)<body>の配下(閉じタグの直前)
        • ページの読み込みのボトルネックになるスクリプトの実行を最後に回す
        • これにより、描画速度の高速化を行うことが可能
      • (3)<head>の配下
        • 関数定義を先に記述するために、書くことがあり
    • 外部スクリプトのインポート
      • 構文:<script type="text/javascript" src="パス"></script>
      • 利点
        • レイアウトとスクリプトの分離により再利用性が高くなる&.htmlファイルが見やすくなる
      • 注意点
        • 外部スクリプトとインラインスクリプトを同時に用いることができない
        • src属性を持った時、コンテンツの内容は無視される
      • 例:HTMLファイルJSファイル
    • アンカータグへのスクリプトの埋め込み
  • 2.1.3 文(statement)のルール
    • セミコロンを文の末尾につける(省略は可能)
    • 文の途中に空白やタブを入れることも可能
    • 複数の文を一行で書くことも可能
      • デバッガがうまく働かない場合がある
      • 一行ごとに書くべき
  • 2.1.4 コメント

2.2 変数/定数

  • 2.2.1 変数宣言
    • (以降では、ES6より前の書き方を、ES6の書き方を、として表現する)
    • (書籍には昔の書き方も詳しく書いてあるが、ここでには記載しない)
    • 昔:var 変数名(=初期値)
    • 今:let 変数名(=初期値)
    • 複数の変数宣言は,で区切る
    • 今の場合の改善点
      • 同名変数の重複を許可しない
      • ブロックスコープを厳密に持つ
  • 2.2.2 識別子の命名規則
    • 識別子:それぞれの要素の名前のこと
    • 命名規則
      • 1文字目は英字/_/$のいずれか
      • 2文字目は1文字目に使える文字または数字
      • 変数名の大文字と小文字は区別される
      • 予約語ではない(され得るものも避ける)
      • すでに定義されているオブジェクトやそのメンバ名(Stringなど)
    • 読みやすいコードのために
      • 名前からデータの中身を類推できる
      • 長すぎず短すぎず
      • 見た目が紛らわしくない
      • 記法を統一する(camelCase、Pascal、snake_case)
      • 基本的には英単語を用いる
  • 2.2.3 定数宣言(今)
    • const 定数名(=初期値)
    • マジックナンバー(意味を持たない謎の値)を避ける
    • 大文字を使うことが多い

2.3 データ型

  • 2.3.1 JavaScriptの主なデータ型
    • 基本型(値そのものを格納、イミュータブル)
      • 数値型(number)
      • 文字列型(string)
      • 真偽値型(boolean)
      • シンボル型(symbol)
      • 特殊型(null/undefined)
    • 参照型(値を格納しているアドレスを格納、ミュータブル)、オブジェクト型(後述)
      • 配列(array)
      • オブジェクト(object)
      • 関数(function)
  • 2.3.2 リテラル
    • リテラルとは:データ型に収納できる値そのもの
    • 数値リテラル
    • 文字列リテラル
      • '"で囲む
      • エスケープシーケンス
        • 特殊な意味を持つ文字(改行など)
        • \ + 「文字」
    • テンプレート文字列
      • 文字列への変数の埋め込み
      • (コード上で)改行文字を含む文字列
      • 例:JSファイル
        • (以降では、Node.jsの環境で実行するように、JSファイルのみを用いる場合がある)
    • 配列リテラル
      • []で括る
      • 配列名[インデックス]でアクセス
      • (一般的)
    • オブジェクトリテラル
      • オブジェクト
        • 名前をキーとする配列
        • 連想配列、ハッシュ、と呼ばれることも
      • プロパティ
        • オブジェクトのキーをプロパティと呼ぶ
        • プロパティには文字列、数値、関数、などの値を格納できる
        • 関数を格納したプロパティをメソッドと呼ぶ
      • プロパティへのアクセス
        • オブジェクト名.プロパティ名:ドット演算子
          • プロパティ名を識別子として扱う
        • オブジェクト名["プロパティ名"]:ブラケット構文
          • プロパティ名を文字列として扱う
      • 例:JSファイル
    • 関数リテラル
      • (後述)
    • 未定義値(undefined)
      • 返る場合
        • ある変数が宣言済みであるが、値を与えられていない
        • 未定義のプロパティを参照しようとした
        • 関数で値が返されなかった
      • 例:JSファイル
    • ヌル(null)
      • 該当する値がない(空である)ことを指す

HTML/CSSの基本でのメモ

Chapter 4

  • 本章の内容を用いてポートフォリオサイトのindexの部分を作成する
  • (作成方法については後日Qiitaにて載せる予定)

4-1 フルスクリーンとは

  • 画像や動画などのメインビジュアルを画面全体で表示させるレイアウト
  • フルスクリーンの部分をスクロールするとコンテンツが表示されるパターンも

4-2 フルスクリーンページの制作の流れ

  • (ワイヤフレームの作成)
  • <head>の部分の記述
  • ページ上部の作成:ロゴ、ナビゲーション部分など
  • コンテンツ部分の作成:ページの肝
  • ファビコンの作成:ページのタブに表示される部分

開発初心者の開発日記~33日目~

備考

8/4~7の結果

かなりやる気のない数日間だったので、まとめて一日としている。

内容

  • HTML/CSSの基本でのインプット
    • 40分程度
    • 158ページから172ページ
  • AtCoderでのアウトプット
    • 130分程度
    • ABC194を解いた際に入力から詰まったのでだいぶ時間がかかった。
    • こちらに詰まった点を含めてまとめてある。

HTML/CSSの基本のメモ

Chapter 3

3-14 レイアウトを組もう

  • CSSグリッド
    • CSSグリッドとは?
      • タイル型レイアウトを実現する
      • グリッドコンテナー(親要素)の中にグリッドアイテム(子要素)を並べる
      • グリッドアイテム間の距離をグリッドギャップと呼ぶ
    • CSSグリッドの書き方
      • Flexboxと同様の書き方
      • containerクラスの<div>タグの中にitem<div>タグを入れる
      • CSScontainerクラスにdisplay: grid;を追加する
      • 例:HTMLファイルCSSファイル
    • grid-template-columnsプロパティ
      • 各グリッドアイテムの幅を指定することで横並びに設定するプロパティ
      • 3つのグリッドを各200pxずつ並べる場合はgrid-template-columns: 200px 200px 200px;
      • 例:HTMLファイルCSSファイル
    • gapプロパティ
    • 単位fr
    • grid-template-rowsプロパティ
      • それぞれの行ごとに高さを指定するプロパティ
      • (ちなみに、繰り返しで指定することも可能っぽい)
      • 例:HTMLファイルCSSファイル
  • 読みやすいレイアウトとは
    • 視線の流れを意識する
      • 左上、右上、左下、右下、の順(Z型)
      • 左上から下へ動きつつ途中で右に(F型)
    • 優先順位を決める
      • 上記のレイアウトに合わせた優先順位の順番に配置する
      • 優先順位によって配置する情報面積の大きさを変える
  • レイアウト別参考Webサイト一覧
    • メインビジュアル、タイル型、左右の分割、など

3-15 デフォルトCSSをリセットしよう

  • リセットCSS
    • デフォルトのCSSが異なるブラウザでも同じ表示となるようにCSSをリセットすることができる
    • 自分で作成しても良いが、外部Webサイトで公開されているものを使うこともできる
    • ブラウザ間の最小限の誤差を無くすためのファイル
  • HTMLへの書き込み方
    • HTMLの<head>にてstylesheetとして読み込めば良い
    • この時、自身で書いたCSSより前で読み込む必要がある
    • 例:HTMLファイル

開発初心者の開発日記~32日目~

内容

  • Webを支える技術でのインプット
    • 30分程度
    • 283ページから310ページまで
    • 飽きたので、少し適当
    • このタスクは終了
    • 次からは?
      • アウトプットによる知識の体系化
  • HTML/CSSの基本でのインプット
    • なし
  • Progate(JavaScriptコース)でのインプット
    • 10分程度
    • JavaScript
    • Progateのコースは全て終了
    • 次からは?
      • アウトプットと知識の体系化
      • ライブラリの勉強(React、Node.js)
  • AtCoderでのアウトプット
    • 80分程度
    • Node.JSの環境構築に時間を取られてしまった

Webを支える技術のメモ

第16章:書き込み可能なWebサービスの設計

16.8 排他制御

  • 前提
    • 複数のクライアントがいる場合のリソースの更新は面倒
    • 排他制御:1つのクライアントのみが編集するように制御する処理のこと
    • 目的:複数のクライアントが同時に1つのリソースを編集して競合が起きることを避けるため
  • 解決すべき問題
    • クライアントAとクライアントBが同時にリソースXを更新する場合
  • 悲観的ロック
    • ユーザを信用せずに競合の発生を避ける排他制御の方法
    • 更新対象のデータを取得する際にロックをかけることで他のトランザクションからの更新を避ける
    • (実現方法については今回は飛ばす)
    • 問題点
      • 大規模なシステムの場合はずっとロックされてしまうような状況が発生し得る
  • 楽観的ロック
    • 常に同じ文書を複数人が編集することはあまりないという仮定
    • 通常の編集ではロックせずに、競合が起きた時に対処する仕組み
    • (実現方法については今回は飛ばす)

16.9 設計のバランス

  • Webサービスの規模や対象を含む様々な要因が存在するため、最適な設計を見つけるのは難しい
  • Webサービス開発における重要事項
    • なるべくシンプルに保つ
    • 困ったらリソースに戻って考える
    • 本当に必要であればPOSTでなんでも実現可能

第17章:リソースの設計

17.1 リソース指向アーキテクチャのアプローチの落とし穴

17.2 関係モデルからの導出

  • (イメージしにくいので飛ばす)

17.3 オブジェクト指向モデルからの導出

  • (一番自分にとっては自然)

17.4 情報アーキテクチャからの導出

  • (イメージしにくいので飛ばす)

17.5 リソース設計で最も重要なこと

Progate(JavaScriptコース)のメモ

JavaScript

  • コールバック関数
    • コールバック関数:他の関数に引数として渡される関数
    • const 関数名=(引数)=>{処理}と定義して引数に渡すのではなく、無名関数を渡すのでもOK
    • コールバック関数は引数を取ることも可能
      • コールバック関数の引数の数と実行時に与える引数の数を合わせることに注意