shiki0331’s blog

Web Developer. TypeScript / React.js を中心に学んでいます。 ブログ内容で間違っている箇所などありましたら、ご指摘していただけると助かります。

競技プログラミングを解こう part2

今回もAtCoderで問題を解いてみました〜

 

なんとか解けました！

 

問題文

高橋くんは、自動販売機でジュースを買ったときの音が好きです。

その音は 1 回 A 円で聞くことができます。

高橋くんは B 円持っていますが、お気に入りの音を C 回聞くと満足するため、B 円で最大 C 回まで聞けるだけ聞きます。

高橋くんはお気に入りの音を何回聞くことになるでしょうか。

制約

  • 入力は全て整数である。
  • 1≤A,B,C≤100

入力

入力は以下の形式で標準入力から与えられる。

A B C

出力

高橋くんはお気に入りの音を何回聞くことになるか出力せよ。

入力例 1 Copy

Copy
2 11 4

出力例 1 Copy

Copy
4

高橋くんは 8 円以上持っているのでお気に入りの音を 4 回聞いて満足します。

入力例 2 Copy

Copy
3 9 5

出力例 2 Copy

Copy
3

高橋くんが満足できないこともあります。

入力例 3 Copy

Copy
100 1 10

出力例 3 Copy

Copy
0

atcoder.jp

 

 

 

 

Rubyで解いたので、答えと解説をしていきます。

 

 

 

 

 

 

 

 

まずはA B Cで入力できるようにしていきます。

A,B,C = gets.split.map(&:to_i)

 

次に出力ですね。

入力例 1 Copy

Copy
2 11 4

出力例 1 Copy

Copy
4

高橋くんは 8 円以上持っているのでお気に入りの音を 4 回聞いて満足します。

例１では

1回2円で聞くことができて、4回聞いたら満足します。

2円×4回で8円なので、8円以上あれば満足できます。

11円持っているので4回聞けますね。

 

これは１回の金額×回数の答えよりも、持っている金額が多ければ満足できると言い表すことができます。

 

つまり

if  A * C <= B

    puts   C 

と表現できます。

 

次は１回の金額×回数の答えよりも、持っている金額が少なかった場合に何回聞けるかを考えます。

入力例 2 Copy

Copy
3 9 5

出力例 2 Copy

Copy
3

高橋くんが満足できないこともあります。

 

例２では

1回3円で聞くことができて、5回聞いたら満足します。

3円×5回で15円なので、15円以上あれば満足できます。

しかし、9円しか持っていないので3回しか聞けません。

 

これは、持っている金額➗1回の金額で求めることができます。

 

つまり、

puts B / A

 

組み合わせると

if  A * C  <=  B
   puts C
else
   puts B / A
end

 

これで高橋くんが音楽を聞く回数を求められますね〜

 

わかると楽しいですね！笑

 

少しづつ難しいのもチャレンジしていきます！！

競技プログラミングとは？ やってみよう！

競技プログラミングをやる機会があったんですが、全然できなくて悔しかったので少し勉強していこうかなと思います笑

 

競技プログラミングは問題をプログラミングで解いていくことです。


アルゴリズムを鍛えることができるので、やって損はないかなと思います。

 

調べると「ArCoder」が競技プログラミングのサイトでは有名みたいなので、これを使って勉強していきます！


A問題が一番簡単みたいなのでやってみましたが、個人的にはかなり難しかったです、、

 

今回は下記の問題をRubyで解いてみましたー！言語はなんでも大丈夫です。

 

問題文

高橋君は N 枚の AtCoder せんべいを K 人の AtCoder 参加者になるべく公平に配ることにしました。 N 枚すべてのせんべいを配るとき、せんべいを最も多くもらった人と最も少なくもらった人のもらったせんべいの枚数の差(の絶対値)の最小値を求めてください。

制約

  • 1≤N,K≤100
  • 入力はすべて整数である

入力

入力は以下の形式で標準入力から与えられる。

N K

出力

せんべいを最も多くもらった人と最も少なくもらった人のもらったせんべいの枚数の差(の絶対値)の最小値を出力せよ。

詳しくは下記リンクを見てください。

atcoder.jp

 

ちなみに自分はわからなかったので答えをみてしまいました笑

 

せっかくなのでRubyの答えと解説をしていきます。

 

 

 

 

 

 

まずは N K の入力ができるようにします。

 

n, k = gets.split.map(&:to_i)

これで　2 2　みたいに空白で区切って数字を入力することができるようになりました。

 

次にどうやって出力していくかですね。

出力

せんべいを最も多くもらった人と最も少なくもらった人のもらったせんべいの枚数の差(の絶対値)の最小値を出力せよ。

 

例です。

 

12枚のせんべいと5人だった場合は公平に分けるので

せんべい　　3   3   2  2   2　　 

ひと　　　　人 人 人 人 人

差は1枚ですね。

 

9枚のせんべいと3人だった場合は

せんべい　　3   3   3

ひと　　　　人 人 人

差は0枚です。

 

7枚のせんべいと4人だった場合は

せんべい　　2   2   2   1

ひと　　　　人 人 人 人

差は1枚です。

 

差は２枚以上になることはありません。


何故かというと

 

8枚のせんべいと3人だった場合は

せんべい　　2   2   4   

ひと　　　　人 人 人 

 

これでは差が2枚以上ですが、条件としてなるべく公平に配るので、このパターンは存在しません。

 

以下のようになります。

せんべい　　2   3   3   

ひと　　　　人 人 人 

差は1枚です。

 

つまり、差は0か1です。

 

これを考えると以下のように表現できます。

puts (n % k == 0) ? 0 : 1

 

n枚➗k人の余りが0だったら差は0

逆に余りがでたら差は1

 

なので答えは

n, k = gets.split.map(&:to_i)
puts (n % k == 0) ? 0 : 1

 

他にも答え方はあると思います。

 

やってみて楽しかったので、できるときに問題を解いていきたいですね〜

〜15分チャレンジ〜　AssetsPipelineとは？

15分チャレンジとは15分で、あるお題を調べてブログに書くことです。

なので内容は薄いのでご了承ください、、笑

 


アセットパイプラインとは、JSやCSSのデータを限りなく小さくして連結する。それ以外にも画像などの静的ファイルも最小化してくれる。

ex).js形式のファイルをapplication.jsに.css形式のファイルをapplication.cssにまとめる。

 

連結することでリクエスト数を減らし、ブラウザの読み込みが早くなる。

また、SASSやCofeeScriptを読み込めるようにCSSやJSに変化してくれる。

 

railsではアセットパイプラインの機能がsprockets-rails gemで実装されていて、デフォルトで有効になっている。

sprockets-railsは圧縮する際に下記のgemも使用している。

gem 'sass-rails' //sassファイルをcssに
gem 'uglifier'   //javascript軽量化
gem 'coffee-rails'  //coffeeファイルをjsに

app/assetsディレクトリがアセットの置き場所

rails newで作られるassetsは下記の３つ。

app/assets: 現在のアプリケーション固有のアセット
lib/assets: 開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット

 

application.cssやapplication.jsにどうやってコンパイルするか指示を書く必要がある。

ex)*= require_tree .

 

production環境では自動でコンパイルが行われないので設定する必要がある。

手動で行うこともできる。

 

やってみて

15分で調べて書くのはかなり大変でした笑

けど楽しかったのでアウトプットがてらにやっていこうかなと思います。

 

下記は参考にしたサイトです。

アセットパイプライン - Rails ガイド

アセットパイプライン - Qiita

railsのアセットパイプラインについて解説する - Qiita

CSSのflexboxを使ってfooterを下部に固定しよう！

flexboxは聞いたことがあるでしょうか？

 

最近はfloatよりflexboxを使用して横並びにすることが多いみたいですね〜

 

今回はflexboxを使用して簡単にfooterを下部に固定する方法を紹介します。

f:id:shiki0331:20190302230450p:plain

HTMLとCSS

f:id:shiki0331:20190302231533p:plain

footerを下部に固定

これだけで下部に固定できます！

必要なのはこれだけです！！

body {
　display: flex;
　flex-direction: column;
　min-height: 100vh;
}

footer {
　margin-top: auto;
}

display: flex;　は子要素を横並びにします。

 

body {
　display: flex;
}

display:flex;　のみでは以下のようになります。

f:id:shiki0331:20190302232229p:plain

display: flex;　のみ適応

これを縦並びにするようにしたいので

body {
　display: flex;
　flex-direction: column;
}

 

flex-direction: column;　を追加します。

これで以下のようになります。

f:id:shiki0331:20190302232818p:plain

display: flex;　と　flex-direction: column;　

しかし、これではfooterが下部に固定できずに浮いてしまいます。

これを下部に固定するには

body {
　display: flex;
　flex-direction: column;
　min-height: 100vh;
}

footer {
　margin-top: auto;
}

 bodyにmin-height: 100vh;

footerにmargin-top: auto;

 

上記二つを追加することでfooterを下部に固定することができます。

f:id:shiki0331:20190302233519p:plain

footerを下部に固定 完成！

 

 

margin autoがわからない人は下記のサイトがとてもわかりやすいので参考にしてみてください。

 

coliss.com

ajaxとは？非同期通信とは？

ajaxの前に非同期通信を理解した方がスムーズに学べると思います。

 

なので非同期通信から説明していきます。

 

非同期通信とは簡単に言うと

サーバーからの応答を待たずに処理を行うことです。

 

詳しく説明すると

通常であればホームページを閲覧するときには、Webブラウザからサーバーに情報を要求します。

 

その要求に対してサーバーは応答し、情報をWebブラウザに返します。

 

つまり、非同期通信とはWebブラウザの要求に対してサーバーからの応答がくる前に処理を行うことです。

 

 

次は本題のajaxです。

 

ajaxは

Asynchronous JavaScript XML です。

 

XMLを知らない人は、ここではHTMLに似たものと思っておいてください。

 

ajaxとは簡単に言うと

JavaScriptを用いて非同期通信を行うことです。

 

先ほど非同期通信はWebブラウザの要求に対してサーバーからの応答が〜〜と説明しましたね。

 

そのWebブラウザの部分がJavaScriptに置き換わったと考えるとわかりやすかもしれません。

 

つまり、ajax とは非同期通信でのJavaScriptとサーバーのやり取りです。

 

同期通信と非同期通信では画面上にどのような違いが生じるかというと

 

 

ホームページのリンク先や更新ボタンをクリックすると、一瞬画面が白くなって上のタブにある丸いアイコンがくるくる回りますよね。

 

これは同期通信です。

 

非同期通信ではページが白くならずにアイコンも回りません。

 

ツイッターのフォローボタンとかがそうですね。

 

これが非同期通信です。

 

説明が雑になってしまいましたね、、

 

 

最後まで読んで頂きありがとうございます。

何か間違っている箇所などありましたら、ご指摘して頂けると助かります。

 

 

 

 

 

 

 

JavaScriptの関数とは？

3日程前から「Javascript」を学び始めたのですが、思っていたよりも難しいです。。笑

（Ruby、HTML&CSSしか触ってなかったので、、）

 

まずは知らない単語ばかりで苦労しました。

その中でもよく出てくる『関数』について説明します。

 

関数とは

簡単に言うと、複数のプログラミング処理に名前を付けて一つにまとめるものです。

 

例えば足し算や掛け算などの計算式を何行も書いたとします。

この式を再度使いたいときにもう一回書き直したり、コピーするのはめんどくさいですよね。

 

そういった場面で『関数』を使います。

予め付けておいた名前を呼び出すだけで、まとめていたプログラミング処理を行うことができるのです。

 

どうやって『関数』を書くかというと

 

function(  ) 名前  {

　複数のプログラミング処理

};

＊訂正 (2019/1/27)　指摘して頂きありがとうございます。

 

上記の書き方でも間違いではないのですが、最近ではES6(JavaScriptのバージョン）の「アロー関数」で書かれることが多いです。すみません！

 

const　名前　=　(  ) => {

　複数のプログラミング処理

}

 

 正確にいうと下の部分だけがアロー関数です。

(  ) =>{

}

 

constと名前は、関数を呼び出すときに名前が必要なので、名前を付けるために記載してあります。詳しくはconstを調べてください。

 

こんな感じです！複雑ですよね。しかも様々な書き方があります。。笑

けど書いていく内に慣れていきます！

 

なので暗記しようとしない方が良いです！

 

これだけ覚えましょう！

関数とは複雑で長ったらしいプログラミング処理に名前を付けて、その名前を呼び出すことで簡単に使えるようにする。

 

 

最後まで読んで頂き、ありがとうございます。

間違った箇所などあれば、指摘して頂けると助かります。

DOMとは？

DOMとは「Document Object Model」の略です。

HTMLやXML文書のためのプログラミングインターフェースです。

 

簡単にいうと

プログラミング言語を使用して、HTMLの「h1」や「p」タグにアクセスする仕組みです。

 

アクセスすることでJavaScriptなどの言語を用いて、クラス・属性・テキストなどを直接変更できます。


そうすることで、動きのあるWebサイトを作ることができるのです。

 

 ちなみに、DOMはほぼ全てのブラウザで扱えるようになっているので、特別に何かをする必要はありません。



最後まで読んで頂き、ありがとうございました。


間違っている箇所などありましたら、指摘して頂けると助かります！