未経験からプログラマーへの道 2 HTML/CSS/JavaScript

  • 当ブログには広告が含まれることがあります。
雑記

(前回からの続きです)

文明の利器、iPad+ApplePencilの組み合わせという魔法のノート作成手段を手に入れた僕は、もう一度ProgateさんのHTML/CSSレッスンから、1からの復習をしていきました。

二週目ということで内容がかなりすんなり入ってきます。そして、1から学習内容をノートにまとめていくことでより理解が深まる上に、DOCTYPE HTMLの書き方などこの時点では暗記が難しいこともノートに残しておけて、手軽に見返して学習になるのでノート作戦は大成功でした。

以前の勉強で進めた箇所までノートにまとめ続けて、少しは理解できるようになっていた自分に自信を持ち、さらに学習を進めてProgateで行うことができるレッスン内容の8割ほどまで終了したところで、プログラミングの基礎としてはここまでで十分だろうとProgateを卒業しました。

実際はもうちょっと学習したかったけれど、Progateは1ヶ月単位の有料契約なので終了です。…およそ1,000円で1ヶ月あれだけの量を勉強できるProgateはプログラミング初心者の学習にかなりオススメです。実際のパソコンで動作を確認しながら勉強できたり、何より手を動かすことが経験になりますからね。(ステマじゃないです笑)

学習を一旦終えて僕が行ったことは、HTML・CSS・JavaScriptを使っての、

  1. 自分で試すためのAtomでのウェブサイト制作と、
  2. Monacaでのハイブリッドアプリ制作です。

実は学習後、最初からアプリ制作をしようと、MacBookをわざわざアップデートしてダウンロードしたXcodeアプリケーションでプログラミング言語「Swift」を使ってのiosアプリ制作を試みましたが、秒で諦めました。
Progateでレッスンできる内容だけでは全然知識が足らず、しかも全編英語っぽいのでまだ手を出せるレベルではないかなと思いましたね。

ならばと、練習がてらウェブサイトの制作をするため、まずはテキストエディタAtomをダウンロードしてそれにHTMLとCSSを書き込んでいきました。Windowsのメモ帳アプリケーションに書き込んでいくよりかは、なんらかのテキストエディタを用いたほうがいいでしょう。
Atomは無料でダウンロードできて世界中で使われているテキストエディタなので、良いと思いました。

<header>・<footer>・<div>タグでサイトの枠組みを作っていき、数々のCSSプロパティを使うことによって制作していきましたが、やはり自分で1からサイトの見た目を作っていくのは難しく、なぜCSSプロパティをこう書いたらこうなるのかというのをきちんと理解していないと予期せぬ挙動を見せるので大変です。

またこの時点ではdivタグによるグループの作り方しか知らなかったので、もしかしたら本来のコーティングとは違う書き方をしてしまっているかもしれませんが、それっぽい見た目のサイトを作ることになんとか成功?しました。

さらにjQueryを使ったアコーディオン機能、モーダルウィンドウ、クリックでhide・showする機能、マウスポインタを乗せると変化する機能など、Progateで学んだ内容を自分で再現することができたので満足できました。

プログラミングを学習し始めてからここまででおよそ1ヶ月半。かなりしょぼいなりになんとなくウェブサイトを作成できたことに感動。

でもサイトはできたけど、アプリを作ってみたいんだな〜と思って調べていたら、HTML・CSS・JavaScriptを使ってハイブリッドアプリ(Androidとios両方で動かすことができるアプリ)を制作できるサービスMonacaの存在を知って、これならアプリ制作できるかも?とそのサービスの利用を開始しました。

(次回に続く)

コメント