プログラミング入門ナビ編集部

「丸写し」が吉！プログラミング習得に役立つ「写経」のすすめ

2021-01-31 By プログラミング入門ナビ編集部

はじめに

映画やドラマに出てくるハッカー等のイメージから、初心者の方はなんとなく「プログラミングする時って、すごい速さでタイプするんだろうな」と思っていらっしゃるかもしれません。

実際にプログラミング言語に慣れてくれば文法が頭に入っているので何も見ずにカタカタと打ち込むことができますが、初心者の場合はそうはいきません。

参考書や教材を何度も見ながらコードを打ち込んで、エラーが出てはまた見直して…という非常に泥臭い作業を通して覚えていくことになります。

この過程こそが重要ではあるのですが、思い描いていたプログラミングの像とあまりにかけはなれていることに絶望し、挫折感を味わう人も多くありません。

そんな挫折を避けるためにぜひおすすめしたいのが「プログラミングの写経」です。

「写経って、あのお寺とかでお経を一文字ずつ書き写すあれ？」と思われた方、まさにそれです！

この記事ではなぜ写経がおすすめなのかの説明や、効果的な実施方法を紹介します。

プログラミング初心者の方の挫折を避ける一助になれば幸いです。

プログラミングにおける写経のメリット

「プログラミングの写経」とは、まさにお経の写経と同じくサンプルコードを一文字ずつ書き写していくことです。

小学生の時に漢字を覚えるためにドリルに漢字を書いたり、英単語帳を作って覚えたりしたと思います。

このように「書き写して覚える」という方法は新しいことを習得する際にとても有効なのですが「もう大人なのだからもっと効率よくやりたい」「基礎を本で叩き込んだ後に自分でオリジナルコードを書いて実践した方がスマートだ」と思われる方も多いようです。

もちろんそれが自分に合っていて問題なく学習が進んでいるのであれば非常に素晴らしく、ぜひその方法を続けていただきたいのですが、中にはなかなかうまくいかずに挫折してしまうケースもあります。

「急がば回れ」のことわざの通り、効率がよくないと感じても結局はかなり効率の良い学習方法といえるのが写経です。

理由を見ていきましょう。

手っ取り早く達成感を味わえる

一番の理由はこれです。動くことが保証されているサンプルコードを書き写して実行するだけなので、比較的さくっと動かすことができます。

プログラミング学習を挫折してしまうパターンで最も多いのが「エラーが多すぎて心が折れる」ことです。

書き写しさえできれば動くのと、もし動かなかったとしてもオリジナルのコードではなくサンプルコードなので、その提供者へ原因を質問することができます。

「なんで動かないんだろう…」と悶々と過ごす時間を短縮し、その分次に挙げる重要な学習に時間を割けるわけです。

これは精神衛生上非常にいい効果があります。

言語に素早く慣れられる

プログラミング言語は多く存在していて、それぞれ文法やお作法が異なります。

やりたいこと（コンピュータに命令を出して思い通りの処理をさせる）は同じなので、基本的なコンセプトや全体感は似ていますがそれでもかっこの書き方や記号（カンマ、ピリオド、コロン等）の意味合い等、細かい部分が違うのです。

写経をすることで全体の雰囲気を素早く掴み取ることができます。

ある言語に熟練した上級プログラマーでも、別の新しい言語を学ぶ時にはまずドキュメント等に記載されているサンプルコードに目を通してこの雰囲気掴みから始めることが多いです。

基本的な文法を理解できる

一文字ずつ書き写すことで、細かい部分にまで意識が回ります。

なぜこの部分でかっこが必要なのか？

さっき書いたところと同じような処理に見えたけどなぜ今回は書き方が違うのか？

ここで書いたコロンにはどんな意味があるのか？

そんなことを考えながら書き、実際にプログラムを動かしてみることでどんな意味があったのかを理解できるのです。

実行するだけでは理解できなくても、疑問に思った部分を後から消してみたり変えてみたりするとまた挙動が変わるので、サンプルコードからの「足し引き」でいろいろなことが学べます。

写経の効果的なやり方

それでは、実際にプログラミングの写経はどのように行うのが効果的なのでしょうか。

必ずプログラムを動かせる環境で行う

お経の写経は紙と筆で行いますが、プログラミングは動かしてからが本番ですので、必ず動かせる実行環境を用意して行いましょう。

写経する→実行する→エラーが出たら確認→再実行

という流れを、プログラムが動くまで行うのが肝要です。

エラーが出たら自力で解決する

エラーが出てもくじけたり投げ出したりせずに自力で解決しましょう。

エラー文は「コードの何行目にどんな問題があるか」が英語で出ることが多いですが、英語がわからなくてもそのエラー文をコピー＆ペーストしてWeb検索すればたくさんのヒントが手に入ります。

そのヒントを元に、自分で何がおかしいのか考えたりサンプルコードと何が違うのかを確認しながら解決しましょう。

プログラマーにとってエラー解決能力は非常に重要で、どんなに上達した人でもエラーが出ない日はないといってもいいほどです。

エラーを自力でさくっと解決できるよう、今のうちから鍛えておきましょう。

もちろん、自力でやってもわからない場合は最終的にまわりの人に聞いてみてください。

写経後の「チョイ変」で応用を楽しむ

写経は「書き写すだけ」なのですが意外と一発では実行成功しないことが多いです。

スペースが足りなかったり、書き順を間違えていたり、スペルミスがあったり…

元のサンプルコードと一文字違うだけでも失敗してしまいます。

実行に成功するまではそういった細かい記述に集中して文法を習得していきますが、見事動いた後はぜひ細かい部分をちょっと変更（チョイ変）して挙動がどうなるのか試してみてください。

ただ他人が作ったコードを書き写すだけでは実行の喜びを味わえても自分で書いた気がしなくてつまらなく感じてしまうものです。

ここに自分なりの変更を入れることで初めて「自分のコードが動いた！」という実感が出てくるだけでなく、サンプルコードをベースにいろんなパターンの実行例を体験することでより発展した学びにつながります。

サンプルコードの選び方

写経するサンプルコードの選び方も非常に重要です。

まとめ

プログラミングの写経を初心者の方に強くおすすめする理由と、効果的な実施方法について紹介しました。

簡単にできる割には学習効果が非常に高いですので、ぜひ試してみてくださいね。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Emmetとは？HTMLを素早くコーディングする方法を習得しよう！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

Emmetとは？

Emmet（読み：エメット）は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字＋展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト：Emmet — the essential toolkit for web-developers

VSCodeでの使い方

プログラマーから絶大な人気を得ているテキストエディタであるVSCode（Visual Studio Code）でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ（Sublime TextやAtom等）では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

タグ単体

要素名だけ入力し「展開」（VSCodeではTabキー押下）すると、開始タグと（必要に応じ）終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

<!-- 展開後 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

なお、デフォルトでは言語設定部分（<html lang=”ja”> ）が日本語（”ja”）でなく英語（”en”）となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう｜プログラミング入門ナビ

中級編

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

グルーピング

いくつかの表記の組み合わせを（）で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

プログラミング学習で挫折しない3つの方法

2021-01-31 By プログラミング入門ナビ編集部

はじめに

みなさんはプログラミングの学習を始めるにあたって、どんなことを目標にしていましたか？

きっとプログラミングを習得して何かやり遂げたいことがあったはずです。

ワークライフバランスを改善するために在宅でできる業種に就くこと、ストレスの少ない独立業としてやっていけるスキルを身につけること、他にも様々あるかもしれませんね。

しかしながら、学習が思ったように続けられず挫折してしまいそうになるというお悩みもよく耳にします。

せっかくやりたいことがあってプログラミングを学習しているのに、もったいないですよね。

この記事では、挫折せずにプログラミング学習を続けるためのコツを解説します。

なぜ挫折してしまうのか？

やりたいことが明確でない場合、途中で「何のためにやっているんだろう？」という気持ちになって続かないことは多いです。

「なんとなく流行っているからプログラミングを始めてみた」「趣味の一環でやってみた」といったような場合、余程楽しくのめり込めるような人でないと継続できません。

しかし、冒頭のように具体的な目標や「こうなりたい！」という姿が描けているにも関わらず挫折してしまう方も一定数いらっしゃいます。

これは一体なぜなのでしょうか。

モチベーションが続かない

まず、短期間での動機付けや気力といったところが不足してしまい、十分なやる気が出ないことがあります。

特にプログラミング学習は冒頭の例のように「次の職に就くこと」を目標としている方が多いので、どうしても本業との兼ね合いで気力や体力が不足してしまいがちです。

「今日は残業で疲れたし今から勉強するのはちょっと…」

「この講座をやりきれば次に進めるのはわかっているんだけど、何だかやる気が出ないんだよなぁ」

といった気持ちになったこと、あなたもきっとあるはずです。

時間が取れない

人が普通に生活するための睡眠・食事・入浴にかかる時間と、仕事の業務時間・移動時間を全て合わせるとおおよそ20時間ほどになります。

単純に考えて4時間ほどは学習に充てられるはずですが、とてもそんなに自由時間があるように感じられない方も多いはずです。

帰宅直後は家の用事等やることが多くて自由時間が細切れになっている場合や、起床直後に時間を取ってみたものの頭が働きだすまでに時間がかかったり、就寝前は眠気が襲ってくる、といったケースもありますね。

環境要因

例えば子育て中のパパ・ママは子どもが横にいる状態ではとても学習に集中できませんよね。

一人暮らしであっても、特に都心に住んでいる方などでは家がそんなに広くなくすぐ横にベッドがあったり、デスクとチェアが揃っておらず地べたでパソコン作業をせざるを得なかったり…といった理由ですぐにゴロゴロしてしまうといったこともあるでしょう。

他にも様々な環境的な要因で集中を削がれることも学習が捗らない原因の一つのようです。

モチベーションを保つには

では、これらの要因に対処して挫折を防ぐにはどうすればよいのでしょうか。

まず、モチベーションを高く保つには下記のポイントを押さえるのがおすすめです。

短期的で客観的なゴールを作る

1年以上かかるような長期目標を掲げてしまうと、なかなか自分自身の力でモチベーションを保つのが難しいことがわかっています。

これに対処するには、数ヶ月単位で達成できかつ客観的な目標を作るのが良いでしょう。

挫折せずに続けられている人は、資格の取得や競技プログラミングなどをこのために活用していることが多いです。

人への報告を習慣化する

自分一人でやみくもに頑張っていると挫折しやすいです。

プログラミング講座を受講している方は、学習したら講師への報告を習慣化するのもいいかもしれません。

独学の場合は友達や家族に報告するのでもいいですし、同じ目標に向かう人を匿名マッチングし応援し合うアプリもあるので、こういったものを活用するのもいいですね。

時間を確保するための工夫

「朝活」という言葉が流行っていたり「早起きは三文の得」ということわざがあったりするので、朝早く起きて学習時間を確保しようとする方が多いようです。

これでうまくいくケースも確かにあるのですが、挫折につながることも少なくはありません。

元々朝が苦手な方に不向きなのはもちろん、そうでなくとも普段の生活ペースを崩すわけですから、最初はうまくいっているように見えても徐々にストレスが溜まってきてしまいます。

一番重要なのは、自分の日々の生活を見つめてどこがベストに集中しやすい時間帯なのかを見定めることです。

もしもテレビをみたり読書をしたりするのに当てていた時間があれば、そこが狙い目でしょう。

もちろんある程度の娯楽は必要なので、初めからごっそりと学習時間に変えてしまうとストレスを感じて挫折しやすくなってしまいます。

例えば2時間、娯楽の時間があったならば半分の1時間はプログラミング学習をやってから娯楽時間を開始する、といったように徐々に慣れていくと良いでしょう。

ちょっとした環境チェンジ

子育てや家の状況など、環境によるものが学習阻害の原因となっているならば、なかなかそこを改善するのは難しいと思ってしまうかもしれません。

でも諦めるのは尚早です。

例えば1日2時間を学習に充てると決めたのならば、その時だけカフェに行ったり子どもを預けるかシッターを呼ぶなどすれば、環境を変えることができます。

今は個人で契約できるシェアオフィスも充実してきているので、そういったところに行ってみるのも良いかもしれません。

当然多少のお金がかかるため、その投資を回収するためにもより集中しようという気力がわいてくる効果も期待できますね。

まとめ

プログラミング学習で挫折しないための方法を紹介しました。

せっかく心に決めた目標があるのに、挫折してしまうのは非常にもったいないですよね。

なるべく無理のないレベルで始めて、徐々にギアアップしていきましょう！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

プログラミング入門ナビ編集部

はじめに

プログラミングにおける写経のメリット

手っ取り早く達成感を味わえる

言語に素早く慣れられる

基本的な文法を理解できる

写経の効果的なやり方

必ずプログラムを動かせる環境で行う

エラーが出たら自力で解決する

写経後の「チョイ変」で応用を楽しむ

サンプルコードの選び方

おすすめの言語

おすすめのコード入手方法

まとめ

動画で学ぶプログラミング入門

はじめに

Emmetとは？

VSCodeでの使い方

主な記述方法

初級編

タグ単体

入れ子構造

兄弟構造

繰り返し

HTML雛形

中級編

idを付加

クラスを付加

テキストを指定

属性を指定

上級編

グルーピング

連番をつけて展開

兄弟要素のテキストを指定

まとめ

動画で学ぶプログラミング入門

はじめに

なぜ挫折してしまうのか？

モチベーションが続かない

時間が取れない

環境要因

モチベーションを保つには

短期的で客観的なゴールを作る

人への報告を習慣化する

時間を確保するための工夫

ちょっとした環境チェンジ

まとめ

動画で学ぶプログラミング入門