【実践編】デザインデータを元にphpでWordPressプログラミング

2017-10-20 16_02_00-1020_01_納品用:【実践編】デザインデータを元にphpでWordpressプログラミング - Google ドキュメント

お久しぶりです、杉下です。前回の記事では、写経という方法を用いてコーディングを学んでいきましたが。今回はより実践的な「書き起こし法」を使って学習して行きたいとおもます。

書き起こし法で学習

書き起こし法とは

書き起こし法とは、前回写経したホームページを何も見ずに再び1からコーディングすることである。

この学習方法が魅力的なのはズバリ「沼にハマりにくい」ことです。
これから作っていくページは前回作ったものと全く同じなので、もしわからないところがあっても前回作ったファイルを参考にすることでスムーズに解決できるはずです。僕のような粘り弱い人間にはもってこいですね。

さらに前回の記事を書いた後、近所のツタヤで「少林サッカー」のDVDも借りてきましたので、沼にハマりそうになったら答えを見る。心が折れそうになったら少林サッカーを観る。という攻守ともに最強となった僕はさながら「大谷翔平」の様です。

さて、小気味良い1ボケをかましたところで、張り切っていきましょう。

目次へ 人事から直接フィードバックをもらおう!

学習開始

学習を始めてから10分が経過すると、早くも自分の脳内にある変化が起きていることに気がつきました。
「デザインを構造的に捉えられる」ようになったのです。どういうことかというと

2017-10-20 16_01_43-1020_01_納品用:【実践編】デザインデータを元にphpでWordpressプログラミング - Google ドキュメント
2

つい一週間前までど素人だった僕からすれば、とても大きな躍進です。これまでの学習の成果を感じます。もちろん、写経での学習も2周しかしていないので登場頻度が低いコードや、暗記が難しいコードについては解答を見ながら書いていました。
しかし、それらのコードがどう作用するのかがわかるという点ではこれも成長と言えます。

2017-10-20 16_01_54-1020_01_納品用:【実践編】デザインデータを元にphpでWordpressプログラミング - Google ドキュメント

目次へ

制作終了

え!?もう終わり!?と思われました?そうなんです、もう終わってしまいました。

写経の段階では合計で5時間ほどかかったページの制作も今回の書き起こしではたったの2時間で完成させることが出来ました。自分でも驚きです。

2017-10-20 16_02_00-1020_01_納品用:【実践編】デザインデータを元にphpでWordpressプログラミング - Google ドキュメント

(完成したページ)

あまりにもあっさりと出来てしまい、制作の過程で書くことが無くなってしまいました。
途中、何度かわからない部分に出くわすこともありましたが、書き起こし方ならではの「解答のファイルを参考にする」ことで、ドツボにハマらずに済みました。

では最後に、今回の【入門編】と【実践編】の振り返りとして。
今回僕がコーディングを学習する過程で学んだこと「2つ」をまとめて、今回の記事のシメにしたいと思います。

目次へ

今回の学習を通じて学んだこと

(1)アウトプットまでが学習だと言うこと

今回の学習では【入門編】をインプット【実践編】をアウトプットの機会として学習し、それぞれ5時間:2時間という時間配分で行いました。そしてそこで感じたことがこの「アウトプットの大切さ」です。その理由は1つ。

アウトプットすることで初めて「自分の知識」になるからです。

インプットはただ「情報を得た」だけにすぎません。
その得た情報をアウトプットしない事は言ってみればペーパードライバーみたいなものです。例えたまま話を進めますが「運転」という技術は免許を取得しただけでは完成しませんよね。
なぜならそれは座学や実技、試験と言ったインプットの上に「経験」というアウトプットが重なることで初めて自分の知識になるからです。
もしインプットだけで運転の技術が完成するのであれば初心者マークなんて必要ありませんよね。

今回のコーディングの学習においても、やはり同じ事が言えます。僕は【入門編】にて写経を用いコーディングのインプットを行いましたが、やはりアウトプットを通じ経験をする過程で気付いた事がたくさんありました。代表的なものを3つあげると以下になります。

(1)実は理解していない部分がわかる

これは想像にたやすいと思いますが。実際に書いてみるとインプットの時点で理解が不十分だったり誤解していた部分はなんらか形で表層化します。
特にコンピューター言語はノリでは動かないので間違っていればそれに正直に反応します。

(2)間違える事で理解を正す事が出来る。

(1)の時点で間違いに気がつけば当然それを解決しなくてはいけませんので、必然的にその過程で正しい理解にたどり着く事が出来ます。

一見、はじめからインプットの時点で正しく理解すれば良いだけの話に思えますが、実はそうではなく、一度間違いをおかす事で「何が正しいか」と同時に「何が間違っていたか」を知る事が出来るので、より理解が深まります。

(3)手の抜きどころがわかる。

先ほど上の項目で僕は「登場頻度が低いコードや、暗記が難しいコードについては解答を見ながら書いていました」と書きましたが、すべてコードを書き終わった後で「暗記する必要は全く無い」事がわかりました。

なぜならそういったコードはググってコピペすればいいからです。
大切なのは「要点」をつかむ事です。

ここでいう要点とは「コードがどう作用するか」であり、「コードを暗記しているか」ではありません。コードがどう作用しているか、そしてどう検索すればそのコードをすぐに見つける事ができるのか。そういった要点にたどり着き、上手に手を抜く事で作業を効率的に行うにはアウトプットする事が一番の近道であるように思います。

(2)少林サッカーは名作

感じますでしょうか??流れが変わったことを
今回の学習では心が折れそうになった時用にあらかじめ少林サッカーのDVDを用意し学習に臨みましたが、そこから言える事はやはり少林サッカーは名作であるという事です。

中学生が考えたようなサッカー×カンフーというアイデア。そしてそれを映像に落とし込む技術が生んだ「アイデアと技術の闇鍋」みたいなこの映画は観客を絶妙にリラックスさせてくれます。

さらに、見た目は闇鍋であるにもかかわらず、脚本や映像といった下味の部分がしっかりしているため、ただ見た目の「インスタ映え」を意識しただけでは無い料理のような頼もしさも備えているのです。
一点だけ惜しい所をあげるとすれば阿部寛が出ていない点ですが、少林サッカー、星3つです。

目次へ

次回予告

さて、過去二回の記事に渡り【入門編】【実践編】と称してコーディングの学習を行ってきましたが、今回で学習パートは終了です。

そして次回からいよいよこの企画の主眼である「阿部寛のホームページをスマホ対応に」(問題が発生した理由)させていきます。長そうに見えて短い道のりでしたが、ようやくここまでたどり着きました。どんなホームページが完成するのか今から楽しみで仕方ありませんね、是非ご期待ください!

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

関連記事

ピックアップ記事

  1. pexels-photo-296282
    最近、ベンチャー企業へ就職を考えている就活生は多くなってきております。 しかし、ベンチャー企業へど…
  2. 01d542488c30a8493ac354bdbb8b0067_m
    大学生活も3年生になると、周りは皆就活を始めて、焦り始める方も多いのではないでしょうか。 いざ、就…
  3. 9_26_2_16545022
    就活生に見られる2つのパターン 2017卒就活生のデータにおいて、2016年8月1日時点で「内…
最短内定・就活プロフェッショナル
ページ上部へ戻る