2017-12-10

【小ネタ】JS 結果の出力方法

f:id:damdom:20171116224409p:plain

はじめに

JavaScript で結果の出力方法を整理しました。
なんてことはない小ネタです。

更新履歴

2017-12-22 document.getElementById('id名').innerHTML について追加 2018-01-17 document.write() とどういうときに使っているかの部分を修正

結果を出力する方法

console.log()

DevTool の Console で表示される

document.getElementById('id名').innerHTML

html 上に用意してある id 属性付きの要素に表示する。ただし for で書き込みだと上書きされる。

document.write()

ブラウザのページ上に表示される。学習時に練習に使うと便利。

例

codepen.io

console.log の出力は「edit on codepen」のリンクに飛んで、console ボタンを押すと表示されます。

どういうときに使っているか

console.log：ページ上で表示させたいものがあるけど意図しない表示になるとき
document.getElementById('id名').innerHTML：HTML 要素を動的に読み書きする
document.write：JS 勉強中の表示出力でブラウザ上にすぐ表示させたい

オブジェクト

console も document も「オブジェクト」という仲間。

console オブジェクト

console - Web API インターフェイス | MDN
「コンソール周りの機能」
console.log は「デバッガの Web コンソールにメッセージを出力する」メソッドという意味

document オブジェクト

document - Web API インターフェイス | MDN
「ドキュメント全体に関わる機能」
document.write は「ドキュメントにテキストを書き込む」メソッド

おわりに

この本に書かれたコードの写経をしています。

徹底マスター JavaScriptの教科書プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)

作者: 磯博
出版社/メーカー: SBクリエイティブ
発売日: 2017/03/18
メディア: 単行本
この商品を含むブログを見る

2017-12-10

ダムの作品作りを始めたきっかけ【ダム Advent Calendar 2017】10日目

ダムAdventCalendar2017

f:id:damdom:20171128210445p:plain

はじめに

この記事はダム Advent Calendar 2017 10日目の記事です。
今日は自分の作品作りのきっかけを書きます。

入院した

突然ですが、肺炎で入院しました。
そのとき私は会社員として働きながら芸術大学の通信部で情報デザインを学ぶ社会人大学生でした。

立て込む課題、課題がなかなか合格せずに再提出続き、仕事は普通にある、眠気がくるのでご飯は食べない、夜中まで作業する……というような生活をしていた結果、年末に3週間入院しました。
課題の提出日というのが月1回となかなかシビアで、3週間休んだだけで年度中の合格に間に合うことができませんでした。

その年のうちに問題なく単位が取り切れていれば次の年に卒業制作に取り掛かれたのですが、取りきれず留年となりました。※通信制なので正確には留年ではないのですが。単に卒業が1年伸びました。

大学をやめようか迷った

この経験でやる気がなくしましたが、入院中に同じ部屋だったおばあちゃんから元気づけてもらったり（なんか本当に良い人だった）、家族の支えもありつつ、「また来年もやろう」という気持ちになりました。家族は若干呆れ気味でしたが。
私は取り切れなかった2単位を取るために1年多く在籍しました。ただ、その1年は卒業制作を成功させるためにきちんと有効活用しなければ！という気持ちになります。

ダムとの出会い

そのあと、高校時代の先輩から「今ダムが流行ってるらしい。行ってみない？」と誘われました。
「はーなるほど。そういう楽しみ方もあるのか。いい制作のネタになるかな」と思っていました。今度こそ卒業する必要があるので、どんなものでも制作テーマとして見ていました。別のものに誘われていたら別のものがテーマだった可能性があります。

そして出かけたその日、偶然、放流を見ることができました。

f:id:damdom:20171209223934j:plain — ホロージェットバルブから勢い良く出る水

ものすごい勢いで出る水、地響きで揺れる地面、この水量を支えてるバルブすごくない？

これがダムにのめり込むきっかけとなりました。詳しくは明日の記事に書きます。

ダムめぐりを始める

「もしかしたら制作テーマにできるかもしれない」と確信できた私はダム撮影のためのカメラを買いました。
なんてことはない、普通のミラーレス一眼です。

f:id:damdom:20171209224152j:plain — Canon EOS M2

後輩や家族に連れて行ってもらいながらダム写真を撮りためていきました。
無事に残りの単位も取り、次の年度には卒業制作を取れることができました。

いざ、卒業制作

一番初めの課題は調べた内容はあらかじめ報告書としてまとめて提出しておき、キャンパスに行って発表をする形になります。ダムをテーマにします、と発表したときには驚かれました。ですがとても面白がってもらえました。卒制担当の先生方は厳しいですが好奇心旺盛な人が多いので、こういうのがいいんじゃないか、ああいうのがいいんじゃないか、など（勝手に）話を広げてくれることもありました。作品は撮りためていた写真があったので写真集の形式になりました。

当時の内容はブログに投稿してあります。

becolomochi.hatenablog.com

展示や手製本について becolomochi.hatenablog.com

卒業、それから

途中、厳しいアドバイスに気持ちが高ぶりすぎて先生の前でガチ泣きする事件もあったのですが、無事卒業できました（笑）

制作物の最終評価のプレゼンでの講評で、あるひとりの先生から今も心に残っている言葉を書けられました。

よくできているけどあなたらしさがないよね。キャラクターを描いたりイベントに参加したり面白いことをたくさんやっていたのだからそういったものを期待していた

そうなんです。私は今までの自分とは違う作品を作りたくてこの作品を作っていました。
学校や仕事とは別で個人活動をしていたことを話してあったので、そのことを先生は言っていました。

「自分らしさってなんだ？」っていうのはずっと引っかかっていますが、今は、自分が好きなもの・無理なくできるものを手段として、伝えたいテーマを人に届けるように心がけています。難しい。

いろいろ作った1年

ダムカレーがぐるぐる回るGIFアニ（笑 becolomochi.hatenablog.com

ダムZINE 1作目
とにかく社会貢献したかったので売り上げの一部を尾瀬保護財団に寄付しました becolomochi.hatenablog.com

ダムZINE 2作目 becolomochi.hatenablog.com

ダムの自作コンテンツまとめページ Damdom - べころもち工房

ZINEの販売はこちら

becolomochi.thebase.in

booth.pm

おわりに

今後も引き続きダムに出かけてよさを伝えられるようにやっていきたいです。

ダム Advent Calendar 2017

adventar.org

2017-12-09

写真を撮ることについて【ダム Advent Calendar 2017】9日目

ダムAdventCalendar2017

f:id:damdom:20171128210445p:plain

はじめに

この記事はダム Advent Calendar 2017 9日目の記事です。
今日はダムを撮るということに焦点を当ててポエムを書きます。

カメラについて

学生時代の先輩から誘われて出かけてからダムに興味を持ち、最初はスマホのカメラで写真を撮っていました。その後ミラーレス一眼を買い、さらにダムへ出かけるようになりました。立派なカメラではなくて、自分の身の丈にあったものです。

ダムを撮るということ

f:id:damdom:20171208232630j:plain

写真を撮るには実際に出かける必要がもちろんあります。外に出かけるのがあまり好きでなかったのですが一気に変わりました。まわりを歩くのはとても楽しいです。ただ、綺麗に撮れないことばかりです。木が邪魔したり、ダムの近くまで行けなかったりですが、でもそれが私には面白い。

ダムを面白さを人に伝えるためにはどうしたらいいかも考えています。試行錯誤しまくりです。

おわりに

ダムへ行くことでその土地や自然をを知ることができます。好きなものを通して知識が深まるのは楽しいです。

ダム Advent Calendar 2017

adventar.org

2017-12-09

技術書の読み方について【しがないラジオ Advent Calendar 2017】9日目

AdventCalendar

はじめに

この記事はしがないラジオ Advent Calendar 2017 9日目の記事です。
しがないラジオとは、「SIerのSEからWeb系エンジニアに転職したんだが楽しくて仕方がないラジオ」略して「しがないラジオ」とのことです。

あなたは誰

べこと申します。DTPオペレータとして印刷物のデザインをしてからWebの世界にやってきたコーダー兼デザイナーです。HTML/CSS が好きですが、今はフロントエンドエンジニアを目指していて、どこから始めたらいいか迷いつつVue.jsのSPA解説本を作って技術書典3にサークル参加したりもしました。JSでもっと色々できるようになりたくて勉強中です。
趣味周りだと、ゆるキャラと巨大建造物：ダムが好きです。

しがないラジオを知ったきっかけとちょっとした感想

分報仲間から教えてもらいました。ゲストとして出演されている、はくどーさん、てぃーびーさん、湊川さん、石丸さんと同じmiiraさんチームに入っています。圧倒的にすごい人ばかり！メンタルが豆腐な私は分報仲間に何度も助けてもらっていて、直接アドバイスをもらったりもありますが、テキストの向こうで他の人が頑張ってるのが見えるだけでだいぶやる気が違ってくるなと感じています。

話がずれました。タイトルの「楽しくて仕方がない」は私も異業種から Web 系に来たのでめっちゃ共感できます…！ラジオは通勤中のお供として聴いていて、車通勤なので運転しながら大笑いすることもしばしばです。今日は枠が空いていたのでせっかくならと登録しました。

本題：技術書の読み方について

ep.28 楽しい『新訳版・テスト駆動開発』の読み方のフィードバックテーマ「あなたの技術書の読み方」について書きます。

ラジオの中でも話されていた t_wada さんのツイートは知っていて全く同じやり方でしばらく試してみてました（過去形w

技術書の「写経」の方法。 1.ローカルで使える SCM を用意 2.「ほんたった」などで対象の本を固定 3.ひたすらサンプルコードを写して実行 4.実行するたびにコミット(コミットログにページ番号を含める) 5.疑問点があったらコミットログや本に書き込む 6.章ごとにタグを打つ
— Takuto Wada (@t_wada) 2010年2月12日

このツイートを読んで即「ほんたった」をAmazonで買った
本ではなく10.5インチの iPad Pro を無理矢理ぶっ刺して Kindle アプリで見ている
iPad の質量で壊れそうだけど気をつければ大丈夫
そもそも iPad 専用のスタンドを買うべきだったのでは…
色々バタバタしていてしばらく中断してしまったのでまた再開します

読んでいた本

以下の2冊です。

徹底マスター JavaScriptの教科書プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)

作者: 磯博
出版社/メーカー: SBクリエイティブ
発売日: 2017/03/18
メディア: 単行本
この商品を含むブログを見る

↑硬派？な JS の本

スッキリわかる SQL 入門ドリル215問付き! (スッキリシリーズ)

作者: 中山清喬,飯田理恵子
出版社/メーカー: インプレス
発売日: 2013/04/19
メディア: 単行本（ソフトカバー）
この商品を含むブログ (5件) を見る

↑フロントエンド関係ないですがちょっと必要があって学んでました。
これは Git で写経を管理ではなく SQL が動くサービスで試してみてました。

写経の結果

実際ちょっとわかるようになって実務で役立つように。
両方とも途中です。振り返ってみると効果がきちんとあったので再開します。頑張る。

Kindle 便利

物理本ではなくデジタル化を強いられまして……。収納場所がない我が家では本が床上に積み上がったりしていて買い足すのはそろそろまずいと思い始めたためです。Kindle の買い方は Amazon のアプリから検索結果に出た本のサンプルを片っ端からダウンロードし、ざっと一通り読んでから良さそうなのを選んでいます。リアル本屋なら立ち読みで時間がかかるし疲れるところなんですが、画面の中で済ませられるのが楽だなと感じています。