ソースコードの解析で学ぶこと
僕はもともとWeb制作会社に所属したことがない独学Webフリーランサーです。
ただ、Webに関しては素人同然ですが、プログラマーであったのでプログラミングに関してはそれなりの知識を有していました。
僕は地方のフリーランスなので、近い人にWebサイトのコーディングが出来る人があまり居ませんでした。
ひとりで独学で学んでいくしかなく、最初は色んな本を買ったり、検索エンジンに頼ったりして徐々に知識を身に着けていきました。
プログラマーとして新人だったころ、プログラミングに関してそこまで教えて貰ったという事はあまりなく、誰かのソースを見て良い部分を参考にしながら覚えていきました。
幸い優秀なプログラマーの方も周りに多く、こんな書き方があるのかと驚いていた記憶があります。
そんなこともあり、ソースを見て参考にするというのは癖になっていたと思います。
HTMLやCSSに関しては検索エンジンの力を借りたりして覚えていったのですが、JavaScriptを使用した動きの部分に関しては検索エンジンだけではなかなか難しいところもありました。
例えば、「このサイトのこの部分みたいな動きを取り入れたい」とか言われた時は、そのサイトのソースを解析してどんな感じで動いているのかを理解する必要があり色々と戸惑ったのを覚えています。
当時は今のようにブラウザ標準で開発者ツールのようなものはなく、Firebugくらいしかなかったような気がします。
プログラムを組んでいた当時は、C#.netやVB.netでプログラミングしていたので、MicrosoftのVisual Studioという統合開発環境でプログラミングしていました。
なので、デバッグ時はブレイクポイントを貼ってステップ実行して変数の中身を確認したり、どの辺でバグがあるのかを見つけたりしていたのでそういう方法が当たり前になっていました。
Firebugというものの存在もあまり知らなかった当時の僕はJavaScriptでプログラミングをするのに苦戦していました。
そんな中、色んな人のソースを見て覚える事は沢山あったように思います。
なんやかんやそんな感じで今まで騙し騙しコーディングしているような気がします笑
自分は新しくサイトのコーディングをする時は沢山のサイトを見て解析するのですが、その流れを書いてみたいと思います。
1.イケてるサイトを見つける
まずイケてるサイトを見つけるところからです。
国内サイト、海外サイト問わず色んなサイトを見るようにしています。
その時に参考にするのはいわゆるギャラリーサイトです。
日本のサイトギャラリーでよく見るのは
I/O 3000
https://io3000.com/
S5-Style
http://bm.s5-style.com/
straightline bookmark
http://bm.straightline.jp/
.SG_BOOKMARK
http://bookmark.dot-sg.com/
とかです。海外はアワード系のサイトを確認します。
2.開発者ツールを使う
サイトを見つけたら、この部分どうやって動いてるんだろうってのを解析していく作業になります。
これは単にソースを眺めるよりも各ブラウザの開発者ツールを使う方が効率が良いと思います。
開発者ツールであれば、スタイルを消してみたりすることも可能なので、アニメーションしている部分がスタイルの変化でアニメーションしているのであれば元のデフォルトの状態からどのように変化するのかを確認することも可能です。
3.JavaScriptのソース解析
JavaScriptでHTMLを書き換えるようになっている場合、普通にソースを見るだけではわからないのでこれも開発者ツールを使って見るしかないかなと思います。
その部分のクラスとか、IDとかでJavaScriptが操作されていると思われるので、JavaScriptのソースでそのクラスやIDで検索してその部分のソースを解析していきます。
ただ、最近のソースは圧縮されていることも多いので、その場合も開発者ツールを使えば解析は可能です。
開発者ツールばっかり、使い方わからんって人は、圧縮されたJavaScriptのファイルを元に戻してくれるオンラインツールがあるのでそういうので元に戻して、クラスやIDで検索すれば良いと思います。
4.ライブラリ等が使われている場合はそのライブラリを深堀する
JavaScriptのソースを見ていると、jQueryのプラグインを使っていたり、アニメーションのライブラリを使っていたりすると思われる記述があります。
使っているライブラリは大抵それより前で読み込まれているはずなので、それを探して、そのライブラリが何をするライブラリなのかを調べます。
そういうことを繰り返しているとこういう時はあれを使おうとか自分の幅が広がります。
自分もいっぱいサイトを見て、いっぱい学ぶことがあり、それを自分が作るサイトに還元しています。
やりたいことが出来た時に目に見えるのが動きの良いところで、それがモチベーションになると思います。
ソースを解析するというのはソースをパクるということではなく、技術を解析してそれを応用して自分のものにするということです。
使われる技術は年々変化していますが、全部身に付けるのは大変なので必要な時にこんな感じでソースを解析し新しい技術に触れることが重要だと思います。
この記事が気に入ったらサポートをしてみませんか？