Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > Webプログラミング > CODEPREPで勉強しよう その2

CODEPREPで勉強しよう その2

Webプログラミング

その1(CODEPREPとは/学習予定ブック紹介)はこちら
その3(HTML&CSS実践編 前編)はこちら
その4(HTML&CSS実践編 後編)はこちら
その5(JavaScript編 前編)はこちら
その6(JavaScript編 後編)はこちら
その7(Three.js,moment.js,Canvas編)はこちら
その8(React,Vue.js編)はこちら
その9(Rust,GoogleMap,Webカメラ編)はこちら
その10(Ruby,Scala編)はこちら
その11(CODEPREPやってみた感想等)はこちら

CODEPREP勉強中です

CODEPREPで様々な事柄を絶賛勉強中の筆者です。
そして、ある程度勉強したブックが溜まってきたので…ここいらで一度備忘録的な意味を込めた記事を書こうかと。

当初は5ブックずつに区切ってまとめようかと思いましたが…。
ジャンルが混同しそうだなと思ったので、ジャンル毎に区切って記事を書いていこうと思っています。

今回学んだジャンルは「Sass,Bootstrap,Fontawesome」で、具体的には以下のブックを勉強してきました。

  • はじめてのSass
  • Bootstrapのグリッドシステムを理解する
  • Bootstrapで作るWebページ
  • Bootstrapで作る登録フォーム
  • Font Awesome

各ブックの感想など

ここからは各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。

はじめてのSass

今回のブックはCSSの知識が前提となります。

Sassの基本的な記法やSassの便利な機能を一通りおさえられるくらいのボリュームがありました…その分少し長かった気もします。

また、最後に「実際にSassを使ってWebページを自由に整形してみよう」ともあり…今まで習った知識を活用も出来ました。

なお、この様な「今まで培った知識を使って自由にやってみよう」的なコンテンツは、割とどのブックにもあるっぽいです。
(よくPlaygroundと称してこの様な形式になっているものがあります)

このブックだけに言える事ではないですが…。
やはり、CODEPREPさんの学習スタイルは面白いなぁと。実戦形式なので非常に身につきやすく、即力になる感覚を覚えます。
実際に手を動かして勉強するスタイルは、プログラミング言語の学習法としては素晴らしくマッチしていると思います…。

それこそ、学校の授業とか企業さんだったら新人教育とかで利用されるといいのかなぁと思いつつ。
Prograteさんが企業向けの学習コンテンツを用意してるのを見かけたので…既にそういった側面で利用されているのでしょうか…？

それだけに、このCODEPREPさんがもうすぐ無くなってしまうことに悲しみを覚えちゃいます。
(似た様なサービスにPrograteもありますが、提供しているコンテンツ内容が全然違いますしね…)

Bootstrapのグリッドシステムを理解する

Bootstrapの根幹とも言える「グリッドシステム」に関して、かなり集中的に学べたブックでした。

実は私、Bootstrapは以前使ってみたことがあったのですが…。
あの時は「学ぶ」と言うよりも「使う」と言う方に重点を置いていたため、体系的に学ばずリファレンスから使いたいところをつまみ食いしていただけでした。

そんな経緯のある自分にとって、今回の様な体系的な勉強が出来たのは非常に良かったです。
図やちょっとしたMovie(GIFアニメーションかもしれませんが…)で分かりやすい解説も入ってて、理解の助けに非常に役立ちました。

そして、改めてBootstrapの良さに気づきました…。
ただ、Bootstrapの唯一の難点は、Bootstrapを使うとHTML構造に多大な影響が出てしまうことでしょうか。

まぁBootstrapと似たようなものはたーくさんありますけどね。
中にはBootstrapを元にした拡張ツール的なもの(Bootflatとか)もあるっぽいです…これは沼にはまってしまいそうですね。

(ちなみに、個人的に気になってるのはGoogleさんが出してる「MATERIAL DESIGN」です。
中身がどういう風なのかは分かりませんが、GoogleライクなUIが簡単に実装出来るとのことで評判だとか…)

Bootstrapで作るWebページ

今回のブックは、簡単なWebサービスのランディングページUIを作っていきながら学ぶ形式でした。

今回は特に実践色が強いブックでした。なにせ実際に1つのWebページを作るのですからね。
そうした実践的な使用にも耐えうる、Bootstrapの超便利な機能…特にナビゲーションメニュー周りの機能には驚かされました。
やっぱりBootstrapすごいですな( ﾟдﾟ)ｳﾑ

また、スマホ向けサイトによくある「ハンバーガーメニュー」の実装もブック中にあり、そちらも学べました。
Bootstrapを使うとあれも驚くほど簡単に実装可能です…つよい(つよい)。

今回のブックをマスターすれば簡単なWebサービスのトップページは余裕で作れそうです。

また、今回のブック中にあったTipsで面白いものがあったのでメモを。

Bootstrapのコンポーネントには「jumbotron(ジャンボトロン)」というものがあるのですが、元はソニーが開発・製作していた大型映像表示装置の名称らしく…。

しかし近年においてこの言葉は、「Webページのキーコンセプトを派手に見せるためのコンポーネント」に対して使われるようになってきた…という背景があるらしいです。

初めて聞いた時は「そんなもんかぁ」くらいにしか思いませんでしたが、こうして由来を聞くとなかなか面白いですね。

Bootstrapで作る登録フォーム

Bootstrapの基本コンポーネントを用いた登録フォーム&登録状況一覧(tableタグを使用)を作るブックでした。
また、入力バリデーションをjQueryで作成するレクチャーもありましたため…。
このブックで作成した登録フォームを元にすれば、一般的なWebサービスの登録画面なんかは簡単に作れちゃいそうです。

また、フォーム送信の機構とかその辺りの事は学ばず、あくまで外側のみの側の作成でした。

また、HTML5で追加された新たなタグ、<fieldset>と<legend>タグの存在も知ることができました。
<fieldset>タグはフォームのひとかたまりを表すもので、<legend>タグは<fieldset>の見出しとして使われるものの様です。

具体的には下記の様に利用するとのことです。

<form action="hoge" method="post">
  <fieldset>
    <legend>基本情報</legend>
    <div>
      <label for="name">氏名：</label><input type="text" id="name" name="name" size="20">
    </div>
    <div>
      <label for="mail">メールアドレス：</label><input type="text" id="mail" name="mail" size="40">
    </div>
  </fieldset>
  <fieldset>
    <legend>自由記述欄</legend>
    <textarea rows="3" name="freespace" cols="100%"></textarea> 
  </fieldset> 
  <input type="submit" value="送信"> 
</form>

完成形はこんな感じ(折りたたんでます)
基本情報
自由記述欄

Font Awesome

こちらはタイトルにもなっている「Font awesome」の一通りの使い方をマスターする感じのブックでした。
ちなみに、Font awesomeとはWebページ上で気軽にアイコンが扱えるライブラリの様なものです。

本ブックではVer4.7.0のFont awesomeを使ってありましたが、2018/08/02現在ではVersion5.2まで出ているそうです。

Ver5.2とVer4.7でクラス名の指定方法が若干変わってたりしますが、基本的な使い方は同じですし、5.2は4.7と互換性がある様なので…。
古いバージョンで学習して、その後新しい5.2の知識を補えばあまり問題はなさそうです。

また、本ブックでは提供されているフォントの種類に関する紹介は流石になかったです。
まぁ…使えるフォントの種類がVer4.7では675種類、Ver5.2では3652種類ほどあるらしいのでね…流石に。

ただ、その代わりサブ機能(フォントを大きくしたり、重ね表示したり)に関してのレクチャーがかなり充実してました。

また、今回のブックは特に、自分の興味がそそられるTipsがたくさんあり…。
Tipsに出てきた単語を夢中になって調べていると時間が結構溶けちゃいました…。

いや、時間が溶けるだけならいいのですが…かけた時間に比例して、調べたまとめの量もすんごい事に。
当初はそれもこの記事に載せようと思いましたが、結構なボリュームになっちゃったので…別記事に分けようと思います。

次に挑戦するブック

次からはHTML&CSS実践編のブックに取り組む予定です。
(HTMLとCSS3で作るトグルスイッチとか…)
また、学習した内容のソースコードも貼れそうだったらはっつけていこうと思います(備忘録的な意味も込めて)。

量が結構多いので、いくつか…2つくらいの記事に分けるかもしれません。
ではでは|дﾟ)