学んだこと②
仕事のタスクで学んだことをつらつら。。。
開発環境：Nuxt3, Vue3, TypeScript, scss
・scssの読み取りなどなど。
Nuxt /src/assets/stylesheets/global/helper.scss
（クラス名でflexをつける、margin, paddingをつける）
nuxt.cofigに以下を設定。
Nuxt /src/assets/stylesheets/global/variables.scss
（背景カラー、ボタンカラー、ボーダーカラーフォントサイズ、ブレイクポイント、ボタンの高さなど、汎用化したい※いちいち設定しないくていいもの）
※scss変数を使いたい場合は、nuxt.cofigに以下を設定。
vite: {
// 各Vueファイルに自動インポート
preprocessorOptions: {
scss: {
additionalData: '@import \'@/assets/stylesheets/global/
variables.scss\';',
},
},
},
},
例
:root {
// 背景色
--main-bg-color: #f4f4f4;
--white-bg-color: #fff;
}
コンポーネント別でも、CSSの読み取り（インポートできる。）
@import "@/assets/stylesheets/components/modal/modal";を各コンポーネントの<style></style>で読み込む。
・flex-grow: 1; はflexアイテムの数だけ平等に余白をふる。
flex-growは余白を分ける方法。
・flex-basis: 基本の幅の指定。
flex-basis: 0はflexアイテムは同じ幅にする。
・「vue-final-modal」ライブラリでモーダルが簡単にできる。
別途記事書きます。
・prposでは、ケバブケースは使えない。親コンポーネントで、ケバブで記載してても、キャメルケースの記載となる。
・関数()ありなしクエスチョン
結論：（）をつけないと実行されない。
イベントで関数を使いたい時は、イベントで発火なので、（）はつけない。つけるとイベント前に発火してしまう。
書きたいこと、色々溜まってきているな。
年末のお休みでいい感じに精査したいな。
かつ、もっと新しいことを学びたい。
学んだこと①
仕事のタスクで学んだことをつらつら。。。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・ログイン画面の「パスワード忘れの方」という文言の位置（スマホのボタン）
→基本的には右利きの人が多いので、左の方にあるとタップしにくい。また、テキストボックスは左らへんをタップする人が多い。そのため右側らへんにあると押しやすい。
→このように位置や大きさには理由がある。デザインを考える、または変更する際は、どこにあるといいのか、他のものとの関係を考える、知る必要がある。「なんとなく、それでいいんじゃない？」はデザインでもありえない。
・デザインを変更する際は、他でそのでそのCSSを使っていないかも確認する。
・あらかじめよく使うCSSは「variables.scss」や「helper.scss」にまとめておく。
variables.scss：CSSの値
helper.scss：blumaなどのヘルパークラスベースなどをみるといい。
・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などを使ってやっております。
メモ書きで、自己解釈等入っています。
ご注意を。
デザインの鉄則〜四大原則〜
先輩に教えていただいたデザインの鉄則をアウトプットする。
①近接
：関連するものを近づけて書く。まとまりを作る。
②整列
：縦横を揃える。見えない線を意識する。
Ex.ヘッダーのヘッダーの文初めと終わりをbodyのコンテンツの並びの長さに揃える。
以下のような高さを揃えるのもEx。
③強弱
：目立たせるものをしっかり目立たせる。
Ex.メインのコンテンツのタイトルを目立たせる。（「メインタイトルフォント」などで参考イメージを検索してもよい。）
④反復
：同じものは繰り返す。一貫性を持たせる。
Ex.ランキング一覧をフォントやカードの大きさを揃えるなど。
どの時点でこれを意識するといいのだろうか。
見えない線を意識するのは、作りながらだろうか。XD通りに作るときも、意識がないといけなさそうだ。
WEDのHP
Codestep（記事の下にURL）のHPからXDを見て作成。
作業時間
10時間ほど。
こんな感じ
学んだこと
line-height
：行ボックスの高さを指定。heightを同じ高さに設定すると文字が縦の真ん中にくる。
「line-height: 1px」は、文字の上下の余白を縮める役割。
vertical-align
：imgは下に空白ができるので、bottomでした揃えにして、空白をなくす。
align-items: center; display: flexいるやつ。
：直接の子要素を中央配置（縦に）。
letter-spacing
：字間のスペース。
timeタグ
：時間や日にちを表すもの。検索エンジンに日時を認識してもらうことができるためのもの。(SEO対策)
justify-content: space-between;
：各アイテム均等に並べる。最初のアイテムは先頭により、最後のアイテムも末尾による。
justify-content: space-around;
：均等配置、両側は各アイテムの半分の大きさ、空く。
同じwitdthになるところは事前にwapperで指定しておく。
marginは0 autoだと余白もバランス取れる。
li {
// 親要素を100%として3等分したwidthを持つ。
width: calc(100%/3); // marginがない場合は、/3で良い.
//ある場合は、その分引くと不要な余白はなくなる。
}
heightで高さ固定ではなく、余白を固定にする。（margin-bottom）
CSSのcontentプロパティ（選択したり、コピー＆ペーストできない。）
要素の前後に記事要素を使ってテキストや画像などのコンテンツを挿入する際に使用する。
※疑似要素
：HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素。
flex-wrap: wrap;
：フレックスアイテムを折り返しても良いか。
flex-direction: column;
：縦に並べる。flex解除。
＜自己解釈＞
重要なコンテンツのmax-widthは、ブレイクポイント（1024~1032とかにしておくとよさそう。）余白は自動調整にしておけば、体裁を保てそう。
.text {
width: 45%;
padding: 180px 5% 0 5%;
//可変%にしておくといい感じで縮んでも横の余白のバランス取れる？
// h2のmarginを考慮。写真の真ん中辺からスタート。
}
XDで見えないmargin（余白は）、topの位置とかの差で計算できる。
widthは基本的に%（余白のpaddingも）、ロゴやwrapper（max）は固定値のイメージ（？）。
リーダブルコード
リーダブルコードを読みました。
実践しようと思ったこと
誰かが読む前提で、コードを書くこと。
適当な変数名は避けて、長くなってもいいので、情報を盛り込んだ変数名をつける。
短縮系は避ける。
レビューを受けて読みにくいか、認識の齟齬がないか確認する。
言語自体の慣習も学ぶ。
英単語を学び、違う意味で捉えられることはないか、考えるようにする。
改行やTabを統一する。縦は絶対に揃える。
関連するものは、近くに書く。
考えていたことや情報の詳細をコメントに残す。できるだけ、簡潔に書く。
あまり複雑そうになるのであれば、コード自体が分かりにくい可能性があるので、リファクタリングする。
（間違っても、関数の名前を説明するようなものや処理をそのまま伝えるようなものは書かない。）
ネストは浅く。{{{}}}とか最悪。
余分な変数は使わない。代入してすぐ代入するならいらない。
同じコードを書くなら、汎用化する。
コードを簡単な言葉で説明してみると、コードがわかりやすくなりそう。
BikeHP
Codestep（記事の下にURL）のHPからXDを見て作成。
作業時間
11時間ほど。
こんな感じ
学んだこと
大きい枠から作ってみることに。
imgタグ(HTML)とbackground-image(CSS)の使い分け
結論
：必要不可欠なものはimgタグ。
そうでなくなくても困らないものはbackground。
＜問題＞
写真の下に隙間ができる。
＜回答＞
インライン要素は下に隙間ができる。（paddingやmarginではない。）
※HTMLが気を利かせて、若干の隙間（インデント）を開けてくれているようだ。
→対処法として、親要素のfont-sizeを0にするか。vertical-align: middle;（インライン要素を垂直方向（縦）に動かす）か要素自体をblock要素にするか。
＜今後参考＞
文字数が変わる可能性があるときは、長い時と短い時などチェックをする。最大のwidthは必要。
必要に応じて改行の管理をする。
white-space: nowrap; // 改行しない
overflow: hidden; // 隠す。
text-overflow: ellipsis; // ...で表現する。
＜今後参考＞
heightをつけないと子要素は親要素からはみ出る。親要素も100%だと大元の親要素と同じ大きさになるので、はみ出る。
短くてもscrollでる。
→overflow: auto;にすると出ない。
ただ、親要素のheightをmax-heightで設定すると、できない。
→max-heightは要素の高さを一定の場所まで固定したくないときに使用するとよい。
指定した高さまでは、子要素に合わせて動けるが、子要素がその高さ以上になるとはみ出てしまう。
＜何となく結論＞
親要素の高さを指定して、文字数が変わるところは適宜、スクロールをつけておく。
またそのまま親要素が伸びていい場合は、height: auto;で子要素のheightをつけない。
基本高さはあまり指定しない。（不変のものは大枠だけつけるのはアリかな？）
widthは大きくなった時、小さくなった時に、、、みたいなのは念頭に置いて作る。
やはり上から作る方がいいのかな。
その要素の最後のものを指定する場合は、その要素自体に&:last-childをつける。
プラスワン
navタグ aタグを使ってページ遷移をつける
idを指定すればそこに飛べる。
ロゴにもaタグ
「href=”index.html”」
その際、まとめてaタグの
a {
*`/* 今回は、サイト内のリンクに下線が表示されないように設定します */`*
`text-decoration: none;
}`
共通するものは先に指定しておく。
写真以外heightを指定していない。
御作法？
img {
/* 画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します */
max-width: 100%;
}
