HTML5の基本を理解しておく<文系エンジニアのプログラミング>
HTMLは、今までネットの情報を元に最低限のキャッチアップのみで使っていたため、体系的にちゃんと勉強してきませんでした。
業務で使うようになったことをきっかけに、今一度ゼロから勉強していこうと思います。
◆HTMLとは
端的にいうとWebページを作成するためのコンピュータ言語。
初めから定義されているタグを利用することで、人間にもコンピュータにも理解出来るドキュメントを構成することがHTMLの役割です。
１つのwebページは必ず１つのHTMLが必須です！
＊タグについて
タグは200種類以上も用意されており、全部の使い方を覚えるのは大変です！
でも実際に使うタグは30〜40種類ほどのはずなので、最低限必要なものだけ押さえておけばOKかと！
◆HTMLの書式を理解しよう
（例）<a href = "http://sbcr.jp">SBのページ</a>
タグ名：a
開始タグ：<a..>
終了タグ：</a>
コンテンツ：SBのページ（*コンテンツががブラウザに表示される）
属性：href = "http://sbcr.jp" (*hrefはリンクさせたい時に指定する属性です)
HTMLタグは開始タグと終了タグで囲み、その中にコンテンツや属性を記載します。
また、開始タグ終了タグで囲ったタグは要素と呼ばれます。
リンクの属性であるhrefはaタグ固有の属性ですが、class、idなどの属性はどんなタグにも利用でき、グローバル属性と呼ばれます。
◆終了タグのない空要素
上記の例で示したaタグのように、多くのタグは開始タグと終了タグがセットで必要です。
しかし、終了タグの必要ない空要素といったものが存在します。
終了タグがないため、テキストなどのコンテンツを持てません。
＊代表的な空要素
meta,link,br,img,input
◆関連
CSSの基本を理解しておく<文系エンジニアのプログラミング> - hoz blog
 |
|
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 新品価格 |
Webサイトの仕組みをまとめてみた<文系エンジニアのプログラミング>
最近、仕事でDelphiを用いたネイティブアプリの開発からWebアプリの開発に変わったため、Webサイトの仕組みについて改めて勉強し直しています。
知識の定着のため、簡単にまとめてみます。
◆Webページのデータはサーバーからダウンロードされる
Webページを構成する要素には、HTMLやCSSを始め、サーバーサイドではJavaScriptやJava、Rubyなどが用いられ、Webサイトは構成されます。
ChromeやIEなどのブラウザは、ユーザーが見たいと思ったページを上記のようなファイルや画像などの各種ファイルが保存されているWebサーバーからダウンロードし表示しています。
このように、Webサーバーに対してサイトを構成するファイルを要求することをリクエストといいます。
また、これに対し、サーバーがファイルを返すことをレスポンスといいます。
＊リクエストに対し、レスポンスを返すファイルが見つからない時・・・
該当のURLファイルが見つからない場合、404というレスポンスコードが返すNotFoundのようなページが表示されます。
◆URLとは
URLはファイルを指し示す住所と名前のようなもの。ブラウザのアドレスバーに表示されています。
URLは世界に一つしか存在しないため、指し示すファイルが重複するようなことは起こりません。
○URLの構成
(例)http://hozu.jp/test/11.html
http スキーム名
hozu.jp ドメイン名
test/11.html パス
スキームとはURLが指し示すデータが何なのかを示すものです。
(Webサイト、メール..etc)
ドメイン名とは、企業や個人がドメイン登録団体にお金を払うことで取得可能です。
これにより、ドメイン名は世界に一つしか存在しないものであることが担保されています。
パスとは、Webサイトのフォルダとファイルの階層構造を示しています。
◆関連
【2017年】このマンガが止まらない【20代半ばの社会人が選ぶ】
1/29、1/30、1/31と熱が出ていて会社を休んでいます。。
その間、家にひきこもっていて暇だったので、マンガボックスというDeNAが運営してるマンガアプリを読みまくっています。
ここで掲載されている無料の週単位で更新されるマンガももちろん面白いです。
しかし、マンガボックスでは、最初の３巻無料！といった感じで初めの数巻だけ無料で読める本がけっこういっぱいあります。
無料のやつだけ読んだらいっかと思い、最初の数巻読んでいると続きが気になる系のめちゃくちゃいいマンガが多く、、、
運営の戦略にまんまと嵌められて続きの巻も買って読みまくってしまいました
・・・笑
続きの巻が気になり、ついつい課金して読みまくってしまったマンガ達をご紹介します！！（随時更新予定）
1.中卒労働者から始める高校生活
 |
◆簡単なあらすじ
工場で働く18歳の片桐真実(かたぎりまこと)は、自分を中卒だと笑い捨てた周囲を見返すべく、高校受験に失敗した妹の真彩(まあや)と共に人種のルツボ“通信制高校"に入学する。
そして入学式当日、見目麗しきお嬢様・逢澤莉央(あいざわりお)と劇的な出会いを果たす。著者の佐々木ミノルさんもまた通信制高校出身のため、経験を元にして書いてあるだけにリアリティがある青春ラブコメ漫画です。人間味のある描写に溢れており、ただのラブコメで終わらない漫画になっています。
◆感想
このタイプの絵のマンガは個人的に抵抗があり、なかなか読む気になれませんでしたが、読んでみてこの世界感にどはまりました。
主人公は、どうせ自分は中卒だから何をやっても世間から中卒扱いされて認められないしどうでもいいや～ってスタンスから、妹と一緒に通信制高校に入学していくうち、どんどん人に心を開いて皆から愛される存在になっていきます。最高です。
 |
◆簡単なあらすじ
毎日おバカな友達と悪ノリして、くだらないことで笑う。
そんな、そこそこの幸せで満足だと思っていた主人公のトビオ。
OBの先輩は、金払いが良く遊ぶのもちょっとしたトラブルも、全部マネーパワーで解決してくれる強い味方。
何一つ不満がないはずの日常だけど、いつも不穏な空気の中で学校生活を送っているのは、道路を挟んで向かいにある不良高校の存在があるからだ。
「あいつら死んでくれないかなぁ。」
些細なことからトラブルは大きくなっていき、いつの間にか取り返しのつかないレベルまで発展してまう。。。
◆感想
高校のときが人生で一番楽しかった私も、楽しかった高校時代を思い出させてもらいました。
どこにでもいるような高校生が、仲間内でバカなことをしたりしてそこそこ楽しく過ごしていたら、いきなり非現実的なことに発展していきます。
一巻だけ読めばもうとまらないハズ・・・！！
3.復讐教室
 |
◆簡単なあらすじ
クラスで酷いイジメに遭っていた中学3年生の藤沢彩菜は、ある決意をした…。「クラスメイト全員に、私と同じ“地獄”の苦しみを味わわせてやる────」見え隠れするイジメの首謀者。黒幕は親友なのか、それとも……全員狩るまで終わらない──28人のクラスメイトへの命がけの復讐が始まった!
◆感想
こいつあんまり悪くないやろ・・ってクラスメイトまど問答無用で復讐するところが面白いです！笑
7巻で簡潔なので読み切りやすくてよかったです！
JavaScriptの関数とは<JavaScript勉強中>
繰り返し利用するコードは関数として１か所にまとめて定義しておくことで、
使いまわしましょう！
◆関数とは・・
与えられた入力に対して何らかの処理を行い、その結果を返す仕組みを関数といいます。
開発者が独自で定義した関数のことをユーザー定義関数といいます。
◆関数の定義の仕方は４つ！
ユーザー定義関数を定義する方法は、以下の４つがあります。
・function命令で定義
・Functionコンストラクター経由での定義
・関数リテラルで定義
・アロー関数で定義
function命令で定義することが個人的には多いです。
せっかくなので全部確認していきましょう！
・function命令で定義
○構文
function 関数名(引数, ..) {
処理；
return 戻り値；
}
引数：関数の挙動を決めるためのパラメーター。
呼び出し元で値を指定します。
戻り値：関数で処理した結果を呼び出し元に返す際の値です。
returnで値を返します。戻り値が必要ない場合には省略可能です！
では実際に使ってみます！
・Functionコンストラクター経由での定義
続いてはコンストラクター経由での定義方法を見ていきましょう！
JavaScriptでは組みこみオブジェクトとしてFuctionオブジェクトが用意されています。
このオブジェクトのコンストラクターを利用することでも関数を定義可能です。
○構文
var 変数名 = new Function(引数, ..., 関数の本体);
配列を独自ルールで並び替え！sortメソッド<JavaScript勉強中>
sortメソッドを利用することで、配列を独自のルールで並び替えることが可能です。
sortメソッドの並び替えは、デフォルトでは配列を文字列として辞書順に並び替えます。
独自のルールで並び替えたい場合、以下のような関数をユーザーが定義します。
・引数は２つ
・第一引数が第二引数より小さい場合は負数、大きい場合は整数を返す
この説明ではあまりピンとこないですね。
実際に使ってみましょう！！
◆例◆
・デフォルトでsort
・独自関数で数値としてsort
独自関数を利用した２つ目の例について説明します。
関数の中では引数x・yを数値として双方の差を取ることが一般的な使い方だそう。
これによって、双方の大小を判断し、sortされた値が反映された配列が返ります。
配列の他の便利メソッド
forEach
JavaScript:配列を順に操作するforEachメソッド - hoz blog
map
配列を加工するmapメソッド<JavaScript勉強中> - hoz blog
◆参考書籍◆
 |
|
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 新品価格 |
配列に値の存在有無を確認するsomeメソッド<JavaScript勉強中>
someメソッドを利用することで、指定した値が配列ないの要素の値に存在するか
調べることが可能です。
◆使い方◆
array.some(callback関数, [,that])
＊array:配列
＊callback関数：個々の要素を加工するための関数
＊that:関数callbackの中でthisが示すオブジェクト
someメソッドは戻り値としてboolean(true/false)を返します。
では、試しに使ってみます¡¡
例１では６の倍数が存在するか、例２では３の倍数が存在するか
％で除算した値が０であることで計算しています。
配列ないに該当するものが１つでもあればtrueが返ります。
◆例◆
配列の他の便利メソッド
forEach
JavaScript:配列を順に操作するforEachメソッド - hoz blog
map
配列を加工するmapメソッド<JavaScript勉強中> - hoz blog
◆参考書籍◆
|
|
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 新品価格 |
配列を加工するmapメソッド<JavaScript勉強中>
今回は配列の便利メソッド、mapメソッドを利用してみます。
配列に対して指定された関数で加工したい時に利用します。
◆使い方◆
array.map(callback関数, [,that])
＊array:配列
＊callback関数：個々の要素を加工するための関数
＊that:関数callbackの中でthisが示すオブジェクト
配列の便利メソッドforEachでは、配列を順に処理することができますが、戻り値は不要です。
値を順に表示したい場合に便利です。
これに対して、mapメソッドは戻り値が必要です。配列を加工して利用したい際に有用です。
◆利用例◆
配列の他の便利メソッド
forEach
JavaScript:配列を順に操作するforEachメソッド - hoz blog
some
配列に値の存在有無を確認するsomeメソッド<JavaScript勉強中> - hoz blog
◆参考書籍◆
|
|
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 新品価格 |
