プログラミング初心者がiSara(イサラ)を模写コーディングした感想

プログラミングする男性プログラミング
この記事は約6分で読めます。

こんにちは、そら豆です!

progateやドットインストールで学習した後のプログラミング初学者の方は模写コーディングに進む人もいますよね。

模写コーディングの有名な参考サイトの1つにiSaraがあります。

今回はこんな疑問にお答えするために、プログラミング初心者の僕がiSaraの模写コーディングをした感想を記事にしました。

プログラミング初心者
プログラミング初心者

・iSaraって何?

・模写コーディングしようと思ったけどiSaraって難しそう

・iSaraで何ができるようになるの?

iSaraを模写コーディングをすると次のことが学べます。

  • Image Downloaderの使い方
  • 「」(鍵カッコ)の装飾
  • ▼(三角)の装飾
  • bootstrap
  • アコーディオンメニュー
  • スムーススクロール

HTML/CSSを勉強しているプログラミング初学者が模写コーディングするにはいいサイトだと思います。

ただし、iSaraの模写コーディングをするのであれば「bootstrap」を先に勉強しておいた方がいいでしょう。bootstrapの勉強方法は以下で紹介しています。

これからiSaraで模写コーディングをしようとしている方はぜひ、この記事を参考にしてください!

iSara(イサラ)とは

iSara(イサラ)とはWebエンジニア育成講座を提供しているサイトです。

iSaraと検索するとすぐに出てきます。

バンコクで行われているプログラミングスクールのようなものです。

いろいろな独自性があり、プログラミング初心者が想像するような一般的なプログラミングスクールではありません。

詳細はiSaraのサイトで資料請求やお問い合わせ可能なようです。

iSaraのサイトはいくつか条件を守れば、そのまま自分のポートフォリオにすることができます。

学習の中でポートフォリオが作れるというのは魅力的ですね。

ブロガーのマナブさんも関わっているようで、模写コーディングのサンプルサイトを検索するとよく紹介されています。

ページとしては1ページものになります。

iSara(イサラ)の難易度

iSaraの模写コーディングはある程度、HTMLとCSSを学習した方であれば可能です。

ただし、調べながらという条件付きです。

僕はprogateやドットインストールで勉強した後、初めての模写コーディングサイトにiSaraを選ぶにはおすすめしません

なぜなら、かなり難しいと感じて挫折する可能性が高いからです。

最初はもっとボリュームの小さいサイトを2、3個作った後、もしくは書籍などで勉強しながらサンプルサイトを作った後に始めることをおすすめします。

iSaraのサイトは1ページですが、かなりボリュームが大きいです。

ボリュームが大きい分、完成までに時間がかかります。

iSaraの中ではprogateやドットインストールで勉強したコードが頻出し、復習にもなりますし、初見の内容や表現も学習することができます。

しかし、量が多いので時間がかかる上に最初は何度も何度もつまずくのでなかなか思ったように進みません。

特にHTMLを模写するのって割と面倒なんだなーと気づくきっかけになりました。

分からないことにつまずいても自力で調べてコツコツ進めていくのが苦にならない方は問題ありません。

そうでない場合、最初に手を出して挫折する方も多いようですね。作り上げるのに数週間かかったなんて人も見かけました。

最初のうちはなるべくすぐに完成するサイトをいくつか作った方がモチベーションが持続するのではないでしょうか。

また、iSaraではbootstrapが使われています。

bootstrapとは簡単にいうとHTMLやCSSを効率的に使うフレームワークです。

HTMLとCSSだけではなくbootstrapのことも理解していないと検証ツールでコードを参照しても何をやっているのかわかりません。

初学者で検証ツールをあてにして模写コーディングしようとしているのであれば、検証ツールを見ても分からなければお手上げです。

僕は最初、PC版のWebサイトの模写コーディングをしました。

PC版はできたのですが、レスポンシブデザインに対応させようとしてbootstrapでつまずきました。

そもそもレスポンシブデザイン前提で作っていなかったのでかなり手間でした。

横並びはfloatでコツコツ整えていました。あれはさすがに面倒でした。

bootstrapを使用せずにレスポンシブデザインにしたい場合、最初はスマホ版から作成するといいですよ。

スマホ版ができたら後はメディアクエリで横幅に合わせてfloatやflexboxで横並びにしていけばPC版から作るよりも楽に作成できます。

ちなみに2箇所ほどjQueryを使っている部分がありますが2箇所ほどであれば調べれば実装できるレベルです。

ますは簡単なレスポンシブ対応のサイトを模写するかサンプルサイトを作成することをおすすめします。

プログラミング初心者がiSara(イサラ)で学べること

progateやドットインストールのHTML、CSSで学べる内容以外でiSaraで学べることは下記になります。

  • Image Downloaderの使い方
  • 「」(鍵カッコ)の装飾
  • ▼(三角)の装飾
  • bootstrap
  • アコーディオンメニュー
  • スムーススクロール

Image Downloaderは画像一括保存できるChromeの拡張ツールです。

画像をどうやって入手するかは模写コーディングの悩みの1つですよね。

それを解決するのがImage Downloaderです。

Image Downloaderを使えば背景画像以外の画像を一括で入手できます。

「」と▼はサイトの装飾になります。正直使えなくても問題ありません。

bootstrapはこのサイトで学習できますが、他の教材で学習する方がよっぽど効率よく学習できます。

bootstrapを簡単に学習してから取り組むのがいいでしょう。

ドットインストールや書籍、Youtube等で学習することをおすすめします。

僕はYouTubeで勉強しました。こちらの記事を参考にどうぞ。

アコーディオンメニューとスムーススクロールはjQueryになります。

正式な名前が分からなくても特徴を検索すると出てきます。

まとめ

iSaraはprogateやドットインストールで学んだことを復習できるいいサイトです。

作ったサイトはルールを守れば自分のポートフォリオとしても使えます。

しかし、模写コーディングの最初に手を付けるサイトとしては難易度が高くおすすめしません。

個人的な感想としては、HTMLが長すぎて飽きます。

勉強するならこんな順番の方が効率がいいと思います。

  1. HTML/CSSをprogateやドットインストールで勉強する
  2. bootstrapでレスポンシブデザインの勉強をする
  3. 簡単な小さいサイトを模写する
  4. iSaraの模写コーディングをする 

ただし、そこまでiSaraの模写コーディングにこだわる必要はないと思います。

また、iSaraができるとなんでもできるほどスキルが身につくかというとそういうわけでもありません。

模写するとしてもあくまでポートフォリオ作成としての目標にしましょう!

コメント

タイトルとURLをコピーしました