猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

休日のひとりごと

最近業務のほうが忙しくて…… (←言い訳や)

そんなわけで休日に仕事とは関係ないことで更新!


てか急に寒くなっておどろき。
先週暑いとか言ってなかったっけな~…笑
キンモクセイの香りもしなくなっちゃったし。


こないだの連休で衣替えしておいてよかったー
洋服の断捨離もしました。
yes メルカリ活用してます yeah👍


でもね、売ってもまた買っちゃうの。
プラマイゼロw
断捨離やないやん。
そこは反省所。
洋服大好きなんです。
好きな洋服を着るとそれだけでうきうきします♪


たぶんねー、お金が消えていくのはそのせいかなー。
イカーあるんですけど、その維持費、
交際費、洋服代、食費。
これでほとんどお金使ってる気がするなー。


たぶんミニマリストになればお金は貯まる、はず!
余計なモノは買わない。
基本買わないようにしているんですが、
どうも貯金ができなくて。
使わないお金と、使ってもいいお金を分けねばならないねー。


そいえば、
最近またお腹の調子がよくないんだよなー。
小さい雷さまが住んでるかんじ。
たまに赤いの見るし。
今年の冬もお家で腹巻き生活かな。


あ、あと!
iPhoneの人!
LINEで「ハロウィン」って打ってみて!
(・∀・)なにか起きるよ♪

【練習】HTMLで簡単なHPを作ってみる

さあ、ドラマが終わり、
ドラマが始まる季節になりました。


今回は、書き方を忘れないように、
簡単なHPを作るためのHTMLに触れ戻りたいと思います!


HPの内容は、「平成最後ドラマ」!
考えてみたら平成最後の秋なんですとっ。おやおや。


気になるドラマ挙げてみたら、14もありました!!
前回より多いかも(笑)
でも秋の夜長には最適だわね。


14個もあるので、HPにしてみたら長くなってしまったので、
できたHPの一部を切り取ってみます!
  ↓↓↓
f:id:msm20-chocolateee:20181009173017p:plain
  ↑↑↑
こんな感じに、とりあえずシンプルに書いてみました。
ちなみに、一番気になるドラマは、
獣になれない私たち』です♪
一番に並ぶくらい気になる二番目のドラマは、
部活、好きじゃなきゃダメですか?』です!


さっ、こちらのソースコードはすべて載せようと思います。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>平成最後の秋ドラマ</title>
</head>

<body>
  <h1>♪気になる秋ドラマ一覧♪</h1>
  <h2>SUITS</h2>
  <p>◎気になる理由◎</p>
  <p>つい昨日初回放送だったけど、よかった!てか出演者豪華すぎません⁇(笑)<br>今田美桜ちゃん目当てでもあります♪超かわいい!</p>
  <h2>僕らは奇跡でできている</h2>
  <p>◎気になる理由◎</p>
  <p>高橋一生さんが主演で(高橋一生さん好きです笑)、なおかつ秋の夜長に相応しいふわっとしたドラマだなと思ったから。<br>予告映像からのイメージだけど(笑)</p>
  <h2>深夜のダメ恋図鑑</h2>
  <p>◎気になる理由◎</p>
  <p>初回はすでに放送されましたが、面白かった!笑 みんな可愛い♪<br>そして俳優の清原翔さん好きなんですが、まさかの役で更に好きになりました!笑 SUITSにも出てるし、すごい!</p>
  <h2>中学聖日記</h2>
  <p>◎気になる理由◎</p>
  <p>有村架純ちゃん目当てでーす(笑)ドラマ自体おもしろいかどうかで見続けるか決めるかな~</p>
  <h2>獣になれない私たち</h2>
  <p>◎気になる理由◎</p>
  <p>あの『逃げ恥』と『アンナチュラル』を書いた脚本家さんのドラマということもあって、しかもガッキー出てるし……!観るでしょ!!</p>
  <h2>黄昏流星群~人生折り返し、恋をした~</h2>
  <p>◎気になる理由◎</p>
  <p>オトナのドラマだけど、内容どんなんか気になる!お試しで初回観る予定!</p>
  <h2>大恋愛~僕を忘れる君と~</h2>
  <p>◎気になる理由◎</p>
  <p>若年性アルツハイマー!?って予告で思ったけど、戸田恵梨香さん好きなので、観る予定!</p>
  <h2>僕とシッポと神楽坂</h2>
  <p>◎気になる理由◎</p>
  <p>いやこれは、相葉ちゃんのためにあるようなドラマでしょうwww<br>相葉ちゃんと動物の組み合わせって最強じゃない?笑</p>
  <h2>忘却のサチコ</h2>
  <p>◎気になる理由◎</p>
  <p>予告も見てないけど、単純に番組表の内容見ただけで面白そうだった(笑)</p>
  <h2>ドロ刑 ‐警視庁捜査三課‐</h2>
  <p>◎気になる理由◎</p>
  <p>どんな展開になるのかなと気になった(笑)</p>
  <h2>今日から俺は‼</h2>
  <p>◎気になる理由◎</p>
  <p>予告で面白い。賀来賢人がこの役やるとか適任でないか?(笑)<br>『スーパーサラリーマン佐江内氏』での池杉くん最高だった!</p>
  <h2>プリティが多すぎる</h2>
  <p>◎気になる理由◎</p>
  <p>プリティ=千葉くん でしょ。内容気になる!</p>
  <h2>部活、好きじゃなきゃダメですか?</h2>
  <p>◎気になる理由◎</p>
  <p>そりゃキンプリの神宮寺、岩橋、髙橋くん出てるからね、観るっしょ!</p>
  <h2>あなたには渡さない</h2>
  <p>◎気になる理由◎</p>
  <p>『探偵が早すぎる』で水野美紀さん好きになりました(笑)今度はどんな役をなさるのか気になります。</p>
</body>

</html>

これでだいたい、見出しやらなにやらが把握できた気がします^^
ようやく、普通に日本語の文章を読むように、
このくらいのHTMLならすらすら理解できるようになりました。
はい、IT未経験かつ文系の身です。笑

そんな暗算、セールの何%引きとかの計算もできない女子だけど、
毎日のようにIT関連のことに触れていたら、
少しずつですが、目が慣れていきます!


も少しHPっぽくしたいと思います!


にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村

にほんブログ村 IT技術ブログ 女性プログラマー・女性SEへ
にほんブログ村

3連休半ばの出来事

10月でまた溶ける日が来るとは。。。
暑すぎじゃあありませぬか。夏やん(+o+)


今日ドラッグストアで買い物してたら
日焼け止め売り場に40代くらいのお父さん?男性がいて、
めっちゃ日焼け止め塗りたくってた。笑
そしてそのまま買い物せず出ていったという……
え?って思いました。

いやいや。気持ちは分からなくはないけど、
それは無しじゃないか?
いい大人が。
これからもろ、海行きますみたいな格好してたけど、
それはダメでしょ。
お試しくらいならいいけど、
思いっきり塗ってたからねwww
さすがにちょっと引いたわ。


あんな大人にはなりたくないです。苦笑



そしてガソリンが高~~~い!
なんとかしてくれ~~(*´Д`)

for文であそんでみた for-ofをもう少し掘り下げる

先日、カレーをネタにしてfor-of文を作ってみた。

for-of文は配列のオブジェクトを扱っているから、
key valueとかないんですね。


ちょっと面白そうだな(どんな挙動をするのか知りたかった)と思ったので、以下のようなことをやってみました!
カレーのプログラムがこちら。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>for-ofの練習2</title>
</head>

<body>
  <script>
    var curry_index = [
      'potato',
      'carrot',
      'onion',
      'chicken or pork or beef or vegetable?',
    ]
    for (var ingredient of curry_index) {
      console.log(ingredient[0]);
    }
  </script>
</body>

</html>

これのコンソールがどうなってるのかと見てみると……
f:id:msm20-chocolateee:20181005154211p:plain

pcoc!!!! ㅋㅋㅋ



どうしてこの文字たちが出たのかというと、
プログラムのココ。
f:id:msm20-chocolateee:20181005154631p:plain

ingredient[0] と書いています。
これは、書き換えると、変数[0] になります。


私の学習上、プログラムでは事前に指定等していなかったら
0(ゼロ)から数を数えます。



配列の中身の「potato」の文字列を例にとりましょう。
通常、この文字数を数えると6になります。


しかし!


プログラムの場合はこのようになります。
f:id:msm20-chocolateee:20181005160009p:plain
見にくいかな~笑

0から数えるので、文字数は変わりませんが、
各文字につく数字は変わります。


今回は、ingredientの0番目を指定しましたので、
結果がそれぞれの文字列の一番はじめの文字が取れるようになっています。


「potato」だったら、「p」です。

「carrot」だと「c
「onion」だと「o
「chicken or pork or beef or vegetable?」だと「c


プログラムは上から(順に)処理されていくので、
つなげると、「pcoc」になるというわけ。



なるほど。
あれですな、挙動は面白かったけど、
配列には指定しないほうがいいのかな?(笑)


for文であそんでみた for-inをもう少し掘り下げる

先日の記事でfor-in文を扱いました。


その時は何も考えずにセリフ出しちゃいましたけど、
よく考えたら、
あれっていわゆるkey : valueですよね⁇


ちょっと書き換えてしまったけど、
も一度プログラムをおさらい。
key : valueを確認する画像。
f:id:msm20-chocolateee:20181004155147p:plain

おそらくこういうことなんですよね~

そして書き方を以下のようにしてみた。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>for-inの練習2</title>
</head>

<body>
  <script>
    // ossanzu_loveがオブジェクト
    var ossanzu_love = {
      o: '俺のために',
      k: 'ケンカすんの',
      y: 'やめてくださあああああい!'
    }
    // ossanzu_loveからharutanに取り出す
    for (var harutan in ossanzu_love) {
      // harutanに値を取り出す
      console.log(harutan);
    }
  </script>
</body>

</html>

変数harutanに取り出してみると、
コンソールにはこんな感じで出てくる。

f:id:msm20-chocolateee:20181004165733p:plain

上記のプログラムの書き方だとkeyのみ取り出したみたいですね。
ちゃんと書き方に沿って書かないと、出したいモノが出ないんですね。。

でもこないだみたいに書くと、セリフ(value=値)が出る。
f:id:msm20-chocolateee:20181004171602p:plain

これは書き換えると、このようになるだろうか。
コメントはそのままなので無視してください
f:id:msm20-chocolateee:20181004173202p:plain

こうしたらvalue部分が出てくるから不思議ですなー
おそらくキモは、「[]」この角括弧だな!
これを規定の書き方に従って書けば、値が取り出せるというわけだ。


うーーん、深いで。('_')



p.s. 筆者的tweet
そいや10月入りましたね。すっかりですね。
薄手の長袖を出す時期になりましたね。
個人的なあれですが、こないだの猛烈なTyphoon
お家の屋根が吹っ飛びましたww
現在は、応急処置でブルーシートで覆っておりますw
事件か!
ああ…また台風が来てるやないの。
なんできれいに曲がって来るかなーw
でもね、このくらいの気温の季節、好きです。
お互い風邪引かないように気をつけましょうね。



にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村

にほんブログ村 IT技術ブログ 女性プログラマー・女性SEへ
にほんブログ村