【ロピタルの学習記録　3/5】応用情報午前合格点取り戻せた〜

Vue.js Vue Javascript 応用情報 非同期処理 CSS

今日学校で応用情報の午前問題を解きました。前回は47/80で１問足らずでしたが、今回は53/80でなんとか取り戻すことができました

基本情報と比べて一つ踏み込んだ知識が問われるのでその都度覚えていきたいと思います

Javascript

非同期処理 〜リベンジ編〜

結構長くなったのと、なぜか教えるような文調で書いていたので、一つの記事としてまとめました。

ropitaru.hatenablog.com

非同期処理とPromiseらへんについては、結構理解できたと思います

Vue

コンポーネント

jp.vuejs.org

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // コンポーネントフォルダの相対パス
  './components',
  // サブフォルダ内を調べるかどうか
  false,
  // 基底コンポーネントのファイル名に一致させるのに使う正規表現
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // コンポーネント設定を取得する
  const componentConfig = requireComponent(fileName)

  // コンポーネント名をパスカルケース (PascalCase) で取得する
  const componentName = upperFirst(
    camelCase(
      // フォルダの深さに関わらずファイル名を取得する
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // コンポーネントをグローバル登録する
  Vue.component(
    componentName,
    // `export default` を使ってコンポーネントがエクスポートされた場合に存在する
    // `.default` でコンポーネントオプションを期待していて
    // 存在しない場合にはモジュールのルートにフォールバックします。
    componentConfig.default || componentConfig
  )
})

プロパティ

jp.vuejs.org

  • プロパティはオブジェクトリテラルの形式で表現することで、型を指定することができる
  • 動的な値もv-bindで束縛すれば割り当てられる
  • 数値や真偽値の場合はJavascript式で表現しないといけないため、v-bindを使用する
  • 親コンポーネントからデータを変更すると、子コンポーネントの値も変更される（逆は無理）
  • 参照渡しの場合は親コンポーネントの値も変更されるので注意
  • プロパティにバリデーションをかけることもできる
  • inheritAttrs: falseを設定すると、属性の継承をしないようにできる

CSS

イケメンで説明超わかりやすいしまぶーさんの動画を見ました

www.youtube.com

応用情報

今回はなんとか取り戻せたということで少し安心です。でも午前は８割くらいまで伸ばしたい...あと１ヶ月ちょっと...ひえぇ

ということで復習をします。まだ途中ですが、今日やった分だけ。

スーパスカラ

スーパスカラは複数の命令パイプラインを利用し、１クロックで複数の命令を同時に実行できるようにした方式。

つまり命令を処理する小人が複数いるみたいな感じですかね

３層クライアントサーバシステム

  • データベース層: データベースアクセスを行なう
  • ファンクション層: 業務ロジックに従い、データ加工処理を行なう
  • プレゼンテーション層: ユーザインタフェースを提供する

MVCアーキテクチャで言えば、データベース層がモデル、ファンクション層がコントローラ、プレゼンテーション層がビューかな

用語

  • MEMS(Micro Electro Mechanical Systems)は微小な構造を持つ電気機器の総称
  • SoCは一つの半導体チップにプロセッサやメモリなどをまとめたもの
  • クロックゲーティングは、必要のない部品へのクロック共有を止めることで消費電力を減らす技術

TDCカレッジ

今日はWebサイトの土台部分を構築しました。具体的には、

  • VueCLIでSPA作成
  • Netlifyで自動デプロイの設定
  • Sassで記述できるように設定
npm install sass-loader node-sass --save-dev
  • Vue Routerの設定

tech-dig.jp

  • グローバルでスタイル適用できるように設定

ashesrl.hatenablog.com

  • リセットCSS (normalize.css)の読み込み

qiita.com

をしました。明日は実際に少し開発しながら便利に開発できるように整えていきたいと思います。

明日

インプット

アウトプット

  • TDCカレッジ: 少し開発
  • Poeta: ホットリローダを使えるようにする

今日はTDCカレッジの土台作りに専念してしまって、ホットリローダとの格闘ができなかったので明日はなるべくやります...

おやすみなさい💤