こんにちは！たくみです。
現在、プログラミングの勉強を始めて10日間が経ちました。
これまでの期間で勉強した内容は、
・Progateの初級～上級を1周、初級～中級をもう1周。
・1週間かけてiSaraの模写を(ほぼ)終了。
です。
(Progateに関してはこちらをご覧ください⇓)
そして、iSaraについて知らない方のためにご紹介すると⇓
初心者から技術を底上げするために、半ばスパルタでiSara模写に取り組みました。
大変でしたが、実力はかなり身に付いたと思ます。
今回は、iSaraの模写を取り組んで得た知識と学んだ感想について、ご紹介していきます。
・プログラミング初心者
iSaraの模写に関して
レベルは高め
そもそも模写とは、既存のサイトを真似して一から同じように作り上げることです。
使用されている画像を集めて、背景色や字体を調べて、0の状態から取りかかります。
iSaraの場合は、内容が多いうえに各段階ごとに使用されている技術が異なるため、模写の難易度は高いと言われています。
そのため、初心者にはやや難しい内容となっています。
模写の経験がない方は、いきなりiSaraの模写をするのではなく、先により簡単なサイトから練習することをおすすめします。
最初は動画を観ながら
私の場合は、いなフリという特別な環境でプログラミングを勉強しているため、初心者ながらProgateを終えた段階でiSaraに移ることができました。
(いなフリに関してはこちらでご紹介しています⇓)
iSaraは模写をするためのサイトとしては有名なので、「iSara 模写」で調べると模写のやり方を(途中までですが)説明している動画があります。
そのため、まずはこの動画で模写の進め方を勉強しながら進めていきました。
(Progateで学んだ内容を基に、iSara模写のやり方について説明されているのでこれを観ていました。)
この動画も模写のすべてを網羅しているわけではないですが、基本的な構成の仕方などは学べました。
１日２～3セクションずつ
このiSaraのページですが、私は内容を全部で12個に分類しました。
そうして、1日に2～3セクションずつ、毎日5時間かけて進めて行っていました、
動画による説明が無かったセクションは、いなフリの講師に聞いたり、下の方に行くほど自分でネットで調べて進めています。
上から下までコピー＆ペーストで進めていければもっと早く終わったでしょう。しかし、iSaraのサイトの場合、各セクションごとで使われている技術が異なります。
Progateを終えたばかりの私の知識では、追い付かない箇所ばかりでした。
3日でProgateのHTML&CSS2週して、周りから「すごい」と言われて調子に乗ったままiSaraの模写に突入。
壊滅的に分からない笑
プログラマーの人が、何でデュアル画面にするか理由が分かった笑
動画観ながら、少しずつ真似していきます！#駆け出しエンジニア#iSara— たくみ@いなフリ合宿inいすみ (@Takumi01262) April 4, 2020
そのため、一つ一つ調べながら進めていき、大体が出来たら次に行く。
そうやって進めていました。
大事なのは、進めること
この模写で大事な点は、分からなくても進めることです。
先ほども書きましたが、iSaraの模写は初心者にはかなりレベルが高い内容になっています。
そのため、各セクションで調べながら進めていきますが、ここで細部にこだわるのは止めておきましょう。
「ここはもうちょっと間隔が空いている。」「ここは字体が違う。」など、模写していて気になる部分は残ると思います。
しかし、その内容にこだわってそのセクションだけに時間を使ってしまっては、キリが無くなり途中で挫折してしまうかもしれません。
まずは大枠を作って、「大体合っているから次に行く。」これくらいの感覚で進めることがおすすめです。
次々と進めていくうちに、実力が付いてきます。そうして、分からなかった部分が分かるようになり、より完成度は高まっていくでしょう。
iSaraの模写をするメリット
さて、iSaraの模写をした感想をこれまでは書いてきました。
そもそも、なぜプログラミングを勉強している人はiSaraの模写をする人が多いのでしょうか。
それには、ちゃんとするメリットがあるからです。これからはそのメリットについてお伝えしていきます。
メリット①模写した内容がそのまま実績になる
iSara模写の良い点は、模写した内容をそのままポートフォリオ(自分の実績)に出来ることです。
通常の既存サイトの場合、著作権の都合上、自分の実績として使用することは厳しいです。
しかし、iSaraの場合は、公式に(条件付きで)許可されています。
せっかく多くの方が https://t.co/41tkKy1Ku7 のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。
要は、「ご自身の制作実績として公開してOK」です。※ただし注意点があるので、添付画像をごらんください pic.twitter.com/kxamsjGTHK— ケースケ🇹🇭バンコク (@Keisukexlife) December 1, 2018
プログラミング初心者が仕事をクラウドソーシングなどで取ろうとする際、実績があるかどうかが重要になってきます。
iSaraの場合、勉強しながら実績作りにも繋がっているので、非常にありがたいです。
メリット②知識量が増える
単純に、プログラミングに関する知識量が増えるのもメリットです。
前述した通り、iSaraの模写は各セクションごとに新たな知識を学べます。
同じCSSでも、【「」を作る技術】【三角形▲を作る技術】【画像を丸くする技術】【背景画像の位置を調整する技術】……など、多岐にわたります。
今までの知識が活用されてできる部分もありますが、「これ、どうやるんだろう？」という部分が多かったです。
しかし、これが全部できるようになれば、ページを作れたという自信と実績、確かなスキルアップにつながります。
メリット③忍耐力が身に付く
やり始めれば分かりますが、iSaraは量が多いんです(笑)
進めても進めても、一つのセクションに時間がかかり、修正して、また修正。こんな調子なので、「まだこんなにある…」と思うでしょう。
「ちょっとのズレくらい」良いだろうとも、何度も思います(笑)
しかし、これを毎日少しずつでも進めて調整して行けば、かなりの忍耐力が身に付いたと感じています。
忍耐力は、膨大なコードを見るプログラマーには必要なスキルではないでしょうか。
まとめ
私の場合、周りに教えてくれる人がたくさんいたので、プログラミングを初めて4日目にはiSaraの模写に取りかかることができました。
これは、初心者ではかなり速い方ではないかと思います。
この環境下でなければ、プログラミングの知識も、進行具合も、模写に取りかかるのも大分遅れていたに違いありません。
これからはこの実績を武器に、対応できる案件から少しずつはじめ、仕事を取ってお金を稼げるように努力していきます！
コメント