【css】等間隔で左寄せしたい時は、擬似要素で残りを埋める！
wordpressの制作案件の時に多いのでメモ！！
justify-content: space-between; を使う際に
もし左寄せにしたい場合は擬似要素を使って残りの要素分を埋めてあげましょう！
ちょうどこちらのcodepenの三番目のレイアウトになります。
3カラムの場合、余白をマージンで設定して、 justify-content: left にしても
なかなか均等に配置することが容易ではありません。
cssとしては下記のような形になります。
横幅はアイテムの幅に合わせていきます。
.wrapper:after{
content: "";
width: 33%;
}
See the Pen 中央寄せのレイアウトのまま、左に詰める by たまき こう (@ulqvhvox) on CodePen.
おしまい
再帰についてのまとめ
再帰についての章を学習したので、
そのまとめ。
再帰について
再帰とは自身を関数として呼び出す処理のこと。
足し算がわかりやすい例です。
例えば 5 + 5 のような加算も 5 + 1 + 1 + 1 + 1 + 1 とすることで
「5に1を足す」を繰り返している処理だと気づくことができます。
プログラミングに直すと
function numberAddition(x, y){
// yがゼロになると終わり
if(y <= 0){
return x;
}
return numberAddition(x+1,y-1);
}
このような形を取ります。
(numberAdditionが何回も呼び出され、引数は xが一ずつ増加、yが一ずつ減少する)
図にするとこのような形です。
このような形で、自身を関数として呼び出す形を再帰(再帰的計算)とよびます。
また、ループを終了して戻り値を出力する処理をベースケースと言います。
まさに再帰を使って少しずつ切り崩すような処理を行うことができます。
例として以下のような文字列を逆から表示する関数を作成しました。
入力 konnichiwa に対して "awihcinnok" を返すような処理です。
function reverseString(string){
if(string.length == 1){
return string;
}
//終わり
return string[string.length - 1] + reverseString(string.substring(0,string.length - 1));
}
図のような形で出力しているのですが、中身をみてみると
「最後の文字を出力＋自身の呼び出し」で成り立っていることがわかります。
最大公約数のアルゴリズム
mod と言う余剰演算子を用いて、以下のような公式で表現することができます。
gcd(m,0) = m gcd(m,n) = gcd(n, m mod n)
これは数字の大きい方を小さい方で割り続け、
初めて両方の数字が等しくなった時の値を算出する公式。
ユークリッドアルゴリズムというんだとか。
これも自身を呼び出しているので再帰関数。
この章で学んだ単語
・再帰
自身を関数としてもう一度呼び出す処理のこと
・ベースケース
再帰的計算の処理の中で、ループを終了させる処理のこと。 ベースケースを持っていない関数は無限ループに陥る。
・総和計算
一般的にシグマを使って表すあらわされる、x ~ y の全ての数の和のこと。
・CCD
最大公約数のこと ユークリッドアルゴリズムというmodを用いたアルゴリズムを使うとすぐに算出できる
関数の抽象化
関数の抽象化
具体的な処理を一般化することをいいます。
関数の抽象化を行うと、現実に存在するような複雑な問題を
小さなステップに分解することで効率よく処理ができるようになります。
メソッドチェーン
メソッドを実行して、その結果に対してさらにメソッドを実行し、
メソッドを繋げながらなんらかの処理をしてく仕組みのこと
doubleSubstring(str).substring(1,doubleSubstring(str).length).indexOf("ll")
上記のように（.）でメソッドを繋げることが可能です。
関数の合成
関数の出力を別の関数の入力として使用することを関数の合成と呼びます。
関数の合成では利用可能な関数を再利用することによって、
複雑な問題を解決することができます。
以下の三点が関数の合成において重要になってくるとのことです。
・関数一つにつき一つのタスク ・Don't Repeat Yourself(DRY) ・関数の意図 → 関数は関数名、パラメーター名、入力、出力など多くの情報を提供します。 それらを名前の意味によってある程度理解できるものにしなくてはいけません。
おしまい
学習習慣が安定してきたのでちょっとだけやり方を変更します。
これまで
始業前2.5時間の学習 時間があれば記事を書いてアウトプット
これから
朝の学習(2h) 学習したことをツイッターにてアウトプット 隙間時間で学習(0.5h) 各単元が終わった際にまとめ記事を作成
今までの総学習時間が30.5時間で、
7/19から今日にかけて2.5~3時間の学習を目標に進めてきたので
出だしはいい感じなのかなと言った印象です。
ただ、こうすると始業の3時間前に起きなくてはならないので(笑)
ちょっとそこら辺をうまく改善していきたいなと思います。
今回は朝の学習を30分減らして、減った分は移動中などの隙間時間で補填できるようにしようと思います。
どやらrecursion、スマホでも確認できることがわかりました。
なので移動時間もタイマーなどをつかって5~10分くらいの時間をコツコツ積み上げていこうと思います。
カウント系は study plus を使うことに、、、！！日々の作業時間が記録できてすごくいいです。
今日で学習30時間を突破しました。
思ったより継続して作業できて嬉しいです。
とはいえ、reactの学習が捗っていない、、これは週末はreactかな、、、
おしまい。
day 5 問題
第１章の分野を終えたので
まとめの問題のようなものに取り掛かりました。
At Coder でよく見かけるような競プロ問題なので、
問題と学んだ関数について記載していきます。
まずはこちら
文字列 s と数値 i を受け取り、i 番目に「_」を入れた文字列を返す、 insertUnderscoreAt という関数を作成してください。 数値 i が受け取った文字列のサイズ以上の場合、文字列はそのまま返されます。
利用した関数としては
ハイフンを文字列の間に挟む際に使われる
substring(a,b)が使われました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring
return s.substring(0,i) + "_" + s.substring(i,s.length)
借金返済
Tayler は友達から年利 20% で 10,000 ドル借金をしています。 そこで関数を開発することによって数年後に借金がどれほど膨らむのかシュミレーションすることにしました。 年数 year が与えられるので、返済額を計算する howMuchYourDebt という関数を作成してください。小数点以下は切り捨てとします。
ここでは、借金に利率 x 年の数 をかけると溶けるので
pow関数を利用して冪乗を簡単に計算しました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
おしまい
最近午前中に2~3時間勉強すると
就業時間で頭がボーっとなる時があるのでやり方を変更します。
今まで使ってた午前中のゴールデンタイムは仕事に回して、
CS学習は終業後に進めようとおもいます。！！！！
あとreactも勉強してええ！
あと5問、頑張るぞ！！
d
day 4 関数
ライブラリ
関数は一つにつき一つのタスクを実行するものであり、
汎用性が高いファイルがまとめられたものをライブラリという。
例) Mathライブラリ ... 数学の関数を一括でまとめている図書館のようなイメージ
(pythonやJava は import する必要があるみたい)
// 小数点以下切り捨て
console.log(Math.floor(3.3)) // 3
// 小数点以下切り上げ
console.log(Math.ceil(3.3)) // 4
// 累乗を計算することができるpow関数
console.log(Math.pow(3,4)) // 3^4を計算(3 * 3 * 3 * 3)
//平方根を計算する関数
Math.sqrt(a*a) // a ルートaの2乗
//直角三角形の長編を求める公式とか、、、笑
function pythagoreanTheorem(a,b){
return Math.sqrt(a*a + b*b);
}
常にライブラリを用いて開発が進められるため、
説明書であるドキュメンテーションを理解することが必須になる。
ブラックボックス(公式のようなもの)
その関数がどのように動くかを知らなくても入力値と出力値を知ることで
利用することができるシステムのこと。
つまり中でどんな動きをしているかを理解せずとも僕らはライブラリを使うことができる。
ライブラリ関数で気をつけるべきこと
・ライブラリの目的は何か ・どのような出力を持つか ・どのような入力を持つか
おしまい
今回は関数についての学習でした
ブラックボックスって今までのエンジニアの会話に出てきたのですが、
中身がわからないというネガティブな印象を受けてたいました。
実はそうじゃなくて中身を詳しく理解しなくても
入力値と出力値と作成目的をしっかり理解したらめちゃめちゃ武器になる、ということだったのかなって
改めて考え直しました。
まだday4...!!
day3 関数
本日は関数について
関数の生成方法
プログラミングでは関数は以下のような構図になっている。
ヘッダー(データ型、関数名、パラメーター) 本体(処理内容)
ステートメント
命令や宣言内の実行されるコードのまとまりのこと
return 〇〇; や let squaredX = x * x; などの途中の指揮にあたるものもステートと呼ばれる。
ステートはセミコロンで終了を表す。
クラス
データと関数を持つ構造のこと。
クラス内でのデータはメンバ変数、クラス内での関数はメソッドと呼ばれる。
述語
プログラミングにおいて述語とは
真または偽の条件をテストして、boolean の値を返す関数や式のことを呼びます。
if(ホニャララ){ }
上記のようなよく使うif文の括弧内の部分のことを述語と呼びます。
短絡評価
&&(AND演算子) ||(OR演算子) などの演算子を用いた際に
必ずしも全ての式が評価されないこと。
//AND 演算子の場合 A && B でもしA = false であれば Bの評価をせずとも A && B = falseになるので Bの評価が行われません。 //OR 演算子の場合 A && B でもしA = true であれば Bの評価をせずとも A || B = true になるので Bの評価が行われません。
おしまい
day3 ほんとは昨日がday3だったのですが>< 旅行初日であったためにサボりました笑
でも隙間時間に学習を進めたりできたのでgoodです^^
今回は関数についての基礎的な部分を学習しました。
短絡評価や変数のヘッダーのことなど、実務では意識していない部分を改めて見返して
言葉とともに理解していく感覚があっておもしろいです。
明日は問題演習やってCS基礎の初級終了🔥
銭湯で友達と最近CSについて勉強し始めたことを話した時に
何ができるようになるのかがわかって作業進められるになるといいよね〜と
話してくれて、確かにな〜と思いました。
(1000時間学んで見ることがほんとにベストプラクティスなのか？
みたいなこと言ってくるもんで鋭い友達を持ったなと改めてしみじみ.... in the 銭湯)
データサイエンスを学習するとあらゆる点で「イイ」のは記事で読んだのですが、
具体的にどこに応用できるのかは未だ掴めず。
調べよ調べよ〜！
おしまい
演算子、変数
演算子の優先順位と結合性
演算子の優先順位
一連のルールに従ってどの演算子を実行するかを決定すること
()が一番優先順位高い
演算子の結合性
二つの演算子が同じ優先順位をもっている 時にどの演算子を優先的に実行するか決定すること。
リテラル
ソースコードに直接書き込んである文字や数字のこと。
文字の連結
「数値+数値」であればこのオペランドは両者を足すという意味だが、「"hello"+"world"="helloworld"」というふうにそれぞれの文字を繋げる役割になる。
このようにオペランドのデータ型によって演算子の意味が異なることをオーバーロードという。
インデックス演算子
文字列のデータ型だと文字一つ一つに背番号(インデックス)をもっている。
それらを呼び出す演算子[]
"helloworld"[6] // "o"
メモリアドレス
CPUのメモリは無数のセルによって分割されており、それぞれのアドレスをメモリアドレスという。
プログラミングで変数を宣言するとデータを格納するためのメモリを確保してくれる。
メモリアドレス自体は 0x00 や 0xFFFC0B00 のような表記がなされる。
OnlineUserCountのような変数を、コンピュータが読み取りやすい0xFFFC0B00のようにメモリアドレスに変換してくれるソフトウェアをコンパイラと呼ぶ
おしまい
おはようございます。
朝のルーティーンすっぽかしたせいなのか、
眠気たっぷりのまま学習を進めました。
ねむねむ
今まで何気なく変数を使っていましたが、
メモリアドレスの可読性につながっていたり、
変数の宣言とセルを確保することがほぼ同義だったりして
新たな発見がたくさんありました。
