【入門編】初心者文系学生はじめてのHTMLによるWebコーディング

ap025

ここまで記事をご覧いただいているみなさん、本当にありがとうございます。
前回の記事ではHTMLやCSSを使ったホームページ制作を始めるために環境設定を行いましたが、今回のパートではそれらの言語を実際に学んでいきたいと思います。

コーディング学習の目的とその用途を確認

しかし、ある調査によると、コーディングを挫折した人の10割がこの「コーディングを挫折した」という結果も出ていますので、ここからは気合を入れていかなくてはいけません。とは言っても、実は僕、今回のコーディングの学習については挫折せずにやりきる自信があります。
なぜなら、僕は「前回の挫折経験から学んでいるから」です。前回の記事でも書いたように、以前に僕はiPhoneのアプリを制作しようとしたものの1週間で挫折しました。そこを省みるに、前回コーディングの学習を挫折してしまった原因はたった2つ

  1. 学習する目的が曖昧だった。
  2. 学習したスキルが役立つかがわからなかった。

これに尽きます。なので、今回は学習を始める前にまずこの2つを考えてみたいと思います。

1.学習する目的を確認する。

これは簡単ですね、学習する目的は「阿部寛のために阿部寛のホームページをスマホ対応にするため」です。むしろこれ以外の目的でHP制作を学ぶ人なんているんでしょうか?

2.学習したスキルが役立つかを想像する。

目的は阿部寛のためと言えども、実際このスキルの汎用性はかなり高いです。自分でブログを開設することもできるようになりますし、誰かのためにホームページを制作することで収入を得る事も出来ます、そして何より阿部寛の喜ぶ顔を見ることができます。

この2つを念頭に置いた上で実際にコーディングを学んでいきましょう!

お手本動画に沿ってコーディング=「写経」することが重要

では、早速HTMLとCSS、PHPの学習を始めていこうと思います。とは言っても今回は参考書を利用したり、教室に通うわけではなく、ある方法を用いて学習します。それは「写経」です。

「写経」とは、完成しているコードを手本に全く同じコードを自分の手で打ち込むことを指します。

この写経メソッド、一見退屈そうに思える方法ですが、本などから受動的に知識を得るよりも能動的に経験し学習することで効率よくコーディングを学ぶことができます。それに加え、何より実際に手を動かしているので「眠くなりにくく、長い時間集中出来ます」。もちろんこれには個人差があると思いますが、基本的に全校集会の時は体育座りのまま寝ていた僕としてはこの点も大きなメリットだと思います。

写経メソッドを始めるにあたっては手本となる動画が必要ですが、これはYoutubeやdotinstallというサイトに行けばすぐに見つけられます。また、本屋などに行けばコーディングの流れを1から10まで紹介している参考書などもあったりするので、それに沿って書きながら読み進めるのもいいと思います。

〜写経の始め方〜

  1. 1手本にするものを決める。
  2. 2どのコードがどう作用しているか、ページレイアウトを確認しながら写経。
  3. 3写経に次ぐ写経。

ap024
では注意事項もしっかりと頭に入れたところで、早速コーディングを学んでいきましょう!今回僕は「知り合いのYさんがコーディング中の画面を録画した動画(無編集)」を手本として使うことにしました。オススメしたはずのYoutubeでもdotinstallでもないというまさかの展開ですが、やることは一緒なので問題ないです。

ちなみに今回僕はコーディングをするにあたり「Sublime Text3」というソフトを使って書いていきます。オススメです、僕も使います。
ap025
(画面を分割して書くと効率が良いです。)

【学習開始】実際に書いてみる

写経を初めて早10分、いきなり大きな問題に直面しました。

「案の定、何をしているのか全く意味がわからないんです。」

とは言っても「何もわからなくてもただひたすらに手本のコードをなぞる」というのがこの方法のキモですから、わからないというこの状態は全く当然のことなのですが、実際にやってみるとあまりにわからなさすぎてイライラしました。ではここで実際にこの時の僕の頭の中を見てみましょう。
ap027
めちゃめちゃ炎上してる人のTwitterみたいですね。

まだ10分しかやっていませんが心が荒んできた上、借りてた「TRICK」のDVDの返却期限が今日までなので一度休憩したいと思います。
ap028

はい、戻ってきました。
全く意味がわからないという状況は何1つ変わっていませんが、引き続きやっていこうと思います。
ap029

あ、なんかだんだんわかってきたかもしれない。
idとかclassっていうのはユニット名みたいなもので、<p></p>っていうのは文章を書くときにつけるものなんだな…
PHP?という質問については相変わらず返答に困るけど
ap030
(こんな感じなんだろうな)

はじめの10分は地獄のようでしたが、わからないなりに自分の頭の中で「idっていうのはもしかしたらこういう意味なんじゃないだろうか?」とか「<p></p>には文字しか入れないのか?」という具合に仮説を立てながら写経することで、30分もするうちにそれがだんだんと検証されていきます。この過程はかなり爽快感がありますし、何より自分の頭が良くなったような気がするのでモチベーションも上がります。この楽しさはこの方法ならではですね。
ap031

何これ、超楽しいんですけどヤバい!!!

失礼しました、あまりに楽しくて2000年代のギャルみたいになってしまいました。写経が1時間を経過してくると、これまでの段階で自分の中に生まれた、たくさんの仮説が加速度的に立証されていきます。この感覚はパズルとか数独を解いているような楽しさに近いです。
さらに、今度はその仮説に基づき「手本の動画が次にどんなコードを書くのか」の予測が立てられるようになってきます。予想が当たればテンションが上がり、外れてもその間違いを元に自分の中の仮説を書き換えることで最終的には正解にたどり着いてテンションが上がる。これはまさに
ap032
ここまで来てしまったら後はもう楽しくて仕方がないです。僕はこの写経パートを合計5時間くらい、3〜4日に分けて行っていたのですが、最後の方には「ごめ〜〜ん!今日写経しなきゃだから先に帰るね〜!」とか言って飲み会の途中で家に帰るまでになっていました。(写経の意味は説明し忘れました。)

学習終了

これにて写経メソッドによるコーディングの学習は終了しました。基本的に「楽しい」しか言ってなかったような気がしますが、誇張ではなく、単純にこの方法が僕に合っていたのはとても大きいと思います。もちろん、この合ってる合ってないは結果論なので、みなさんにも食わず嫌いせずにぜひ一度試してほしいです。

では最後に、僕が写経メソッドを行う上で気がついた「もっと学習効率を上げる方法」をいくつかまとめて書いていきます。

  1. わからない部分は自分の中で仮説を立てる。使用頻度が低く、仮説の検証が難しいコードは調べる前に自分で書いてみる。
  2. それでもわからなければ調べる。その上で一度自分で書いてみる。
  3. 気分転換出来るものを用意する。

特に(3)は重要ですね、この場合に用意するものとしてオススメなのは「お菓子」や「猫の動画」、もしくは「少林サッカーのDVD」です。そういった、変にモチベーションを上げ下げしない人畜無害なエンターテイメントの方が気持ちをフラットに戻せます。

次回は実際に今回学んだ知識を元に今回手本にしたホームページを自分の手で作ってみたいと思います。それでは、僕は今からTRICKのDVDを返却に行くついでに次回の学習に向けて少林サッカーのDVDを借りに行きますので、この辺りで失礼します。

また次回お会いしましょう。

彼が受けた無料コーディングセミナーに参加希望の学生はコチラ

Fラン文系学生がSNSで就活したら5社から内定が出た
Fラン若大将が2週間でプログラミングを覚えた話
【実践編】デザインデータを元にphpでWordpressプログラミング
【スマホサイト制作】実際に阿部寛のホームページをスマホサイト化してみる
【スクール不要】自分のブログをレスポンシブデザインで作ってみる

関連記事

ピックアップ記事

  1. pixta_15480195_m
    就活生に見られる2つのパターン 2017卒就活生のデータにおいて、2016年8月1日時点で「内…
  2. %ef%bc%93%ef%bc%91
    就活でもっとも緊張する場面といえば面接ではないでしょうか。直前まで答えを練習したり情報を頭に詰め込ん…
  3. %ef%bc%91%ef%bc%98
    就職活動に必要なことや準備することはたくさんありますが、しっかり揃えたいのは応募書類です。中でも履歴…
最短内定・就活プロフェッショナル
ページ上部へ戻る