歩き出しエンジニアブログ

「これがあってる」ではなく、「こう思ったよ」の技術日記的なもの。

学んだこと①

仕事のタスクで学んだことをつらつら。。。

 

現在、Nuxt3, Vue3, TypeScriptsで開発をしております。

 

・ログイン画面の「パスワード忘れの方」という文言の位置(スマホのボタン)

→基本的には右利きの人が多いので、左の方にあるとタップしにくい。また、テキストボックスは左らへんをタップする人が多い。そのため右側らへんにあると押しやすい。

→このように位置や大きさには理由がある。デザインを考える、または変更する際は、どこにあるといいのか、他のものとの関係を考える、知る必要がある。「なんとなく、それでいいんじゃない?」はデザインでもありえない。

 

・デザインを変更する際は、他でそのでそのCSSを使っていないかも確認する。

 

・あらかじめよく使うCSSは「variables.scss」や「helper.scss」にまとめておく。

variables.scss:CSSの値

helper.scss:blumaなどのヘルパークラスベースなどをみるといい。

&.is-flex-direction-column {
flex-direction: column;
}

 

・try catch分の「finally」はエラー出なくても、エラーでも行われる。

 

・型定義の際の『「プロパティ?: 型」の?は、あるときは、この型よ』という意味。

 

 ・pinia

 state:data

 getters:dataにしたいことを返す

 action:メソッド

 

CSS  var関数は、stylesheetsフォルダのvariables.scss で以下のように設定したものを設定する際に使う。

 

:root { // メインカラー --primary-color: #FF8286; } 

span { background: var(--primary-color);

 

・型定義の仕方の書き方はいくつかある。

interfaceを使ったもの、typeを使ったもの。reactiveで繋げて書くもの。

(詳細後日書きます。)

 

vue3, Nuxt3, TypeScript, SCSSなどを使ってやっております。

メモ書きで、自己解釈等入っています。

ご注意を。