• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / Archives for プログラミング入門

プログラミング入門

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

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

プログラミングする僧侶

はじめに

パソコンの前で困っている男性

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

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

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

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

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

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

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

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

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

パソコンの前でガッツポーズをする女性

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

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

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

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

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

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

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

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

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

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

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

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

言語に素早く慣れられる

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

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

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

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

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

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

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

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

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

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

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

写経の効果的なやり方

タイプする手

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サンプルコードの選び方

プログラミングコード

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

おすすめの言語

すでに学びたい言語が決まっている場合を除けば、まずはどんな言語から学習に入ればいいのかな?と悩んでいる方も多いでしょう。

実行環境の構築が容易かつ実行結果を目視で確認しやすい言語、具体的にはHTML やCSS、JavaScriptあたりがおすすめです。

これらはWeb開発のための言語なので、マスターしたらWeb開発に役立てることができるというメリットもあります。

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

その言語の入門書にはサンプルコードがたくさん書いてあります。

実行環境が整っていればそういった書籍を購入するのが良いでしょう。

もしパソコンが手元にあるだけだ…という方は、プログラミング講座の受講がおすすめです。

講座では実行環境の構築から説明があるため初めてでも簡単に導入できます。

また、サンプルコードを実行する際に講師と全く同じ環境で動かすことができるため、やっかいな問題の一つである「実行環境の違いによるエラー」が発生しにくいです。

プログラミングを学ぶにあたり本質でない部分に費やす時間を減らすことができます。

下記の講座はサンプルコードも豊富で、初心者の方に特におすすめです。

新HTML入門|Proglus(プログラス)

CSS入門|Proglus(プログラス)

JavaScript入門|Proglus(プログラス)

まとめ

パソコンを使う僧侶

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

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

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: プログラミング, 写経

ウェブアプリケーションエンジニアになりたい!何を学習するべきか?

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

プログラミングを学習するうえで、何を、どの順番で学習したらよいか、よくご質問をいただくため、記事を書きました。

この記事では、プログラミングを学習して、
ウェブアプリケーションエンジニアになるために必要な技術について説明します。

YouTube動画で学習する

ウェブアプリケーションとは

ざっくりいってしまうと、ユーザーがウェブブラウザで使うアプリケーションのことを指しています。

具体例をあげると、

  • Amazon
  • Uber Eats
  • Yahoo
  • Netflix
  • Wikipedia

などのウェブサイトが、挙げられます。

そして、ウェブアプリケーションを作る技術者のことを、ウェブアプリケーションエンジニアといったりします。

どういった技術を、どの順番で学習するべきか?

ウェブアプリケーションエンジニアになるために、
どういった技術を、どの順番で学習するべきか説明していきます。

ウェブ関係の技術というのは、幅広くて、新しいものがどんどんでてくるので、上げるとキリがないのですが、

ここでは、ITエンジニアを目指して就職活動をするための、ポートフォリオサイトを作るにあたって、まずは、これらを学習してくださいというものを紹介します。

HTML, CSS

はじめに、
HTML、ウェブページの構造を定義する言語を学習します。
あわせて、
CSS、ウェブページのスタイルを指定する言語を学習します。
ウェブページのデザインを定義します。

HTMLだけだと、見た目は考慮されていない文書が表示されるだけなのですが、

CSSを使うと、デザインが適用されたウェブページが作れます。

HTML、CSSは、プログラミング言語ではないのですが、ウェブ関連のプログラミングを行ううえで、必須の基礎知識です。

JavaScript

JavaScriptは、主に、ウェブブラウザ上で動く、プログラミング言語です。

サイトに動きをつけたり、ページをリロードしなくても表示内容を動的に変更できたりします。

ここまでのHTML、 CSS、 JavaScriptは基本的には、学習しないという選択肢はありません。

ほぼ必須スキルといえますし、代わりになるほかのテクノロジを選択するといったことも基本的にはできません。

サーバーサイドのプログラミング言語(Rubyなど) とフレームワーク(Ruby on Railsなど)

次に、サーバーサイドのプログラミング言語、Rubyなど、を学習します。

サーバー側で動くアプリケーションの動作を記述するための言語です。

しかしながら、Rubyといったプログラミング言語だけを使って、ウェブサービスを開発することは、特殊な事例を除いては、あまりなくて、

サーバーサイドのフレームワーク、Ruby on Railsなどと組み合わせて使います。

フレームワークは、アプリケーションを作るときの土台となるもので、
よく使う機能がパッケージされていて、用意された機能を使うことで、素早くアイディアを形にすることができます。

たとえば、ECサイトであれば、合計金額を計算したり、クレジットカード会社と通信して決済を実行する処理などを書きます。

サーバーサイドのプログラミング言語やフレームワークは、選択肢が沢山あるので、これが1つの正解というのはありません。

価値観は人それぞれ違ってあたりまえなので、皆さんが自由に選択して使えばよいです。

しかしながら、何を使ったらよいかわからない方には、
Ruby とRuby on Railsをおすすめしています。

トレンドが目まぐるしく変わる、IT業界において、10年以上に渡って広く使われている技術で、安心して使えるからです。

民泊予約サイトのAirBnB(エアービーアンドビー)や、ソースコード管理サービスGitHub(ギットハブ)、 クラウドファンディングのKickstarter(キックスターター)など、有名スタートアップ企業が使っています。

日本でいうと、日本最大の料理レシピサービスであるクックパッドや、特にベンチャー企業、スタートアップ企業で採用されることも多いです。

私も普段から業務に使ってビジネスをしているので、安心しておすすめができます。

SQL

関連して、SQLも学んだ方が良いです。

SQLは、データベースを操作するための言語です。
ECサイトを例に取ると、データベースには、顧客情報や商品情報、注文情報などが保存されています。

SQLを使って、データベースのデータを、追加、編集、削除します。

ウェブサービスは、ほぼ100%のケースで何かしらのデータベースを使っているので、SQLは知っておいたほうが良いです。

Git

Gitは、ソースコードを管理するためのソフトウェアです。

書いたプログラムのバージョン管理します。
特にチームで開発する場合は、ほぼGitが使われますので、基本を抑えて置く必要があります。

これらの基本が学習できたら、企業に実力を示すための、ポートフォリオを作り、就職活動することをおすすめしています。

余力がある方向けの学習項目

余力があれば、サーバー 関係の技術、AWS、GCP、herokuなど。
CSSフレームワークのBootstrap、
JavaScriptのライブラリ、フレームワーク。たとえばVue.jsやNuxt.jsを学習するのも良いです。

おわりに

ウェブアプリケーションエンジニアになりたいと持ったときに、何を学習するべきか?説明しました。
プログラミング関連の学習には終わりがないので、
ポートフォリオサイトをサクッと作って、早くIT企業に就職して、お金をもないながら、実務で学ぶことをおすすめしています。

実務をやりだすと、学習しているときよりも断然成長スピードが早いです。
ぜひ、今スグプログラミング学習をはじめてください

番組の説明欄に、動画で学ぶプログラミングサービス プログラスのURLを載せておきますので、ぜひチェックしてみてください。無料から始められます。

今日も皆さん、ありがとうございます!

>> 今すぐProglus(プログラス)でプログラミング学習をはじめる

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: プログラミング入門

TypeScriptとは?JavaScriptとの違いは?人気の理由を徹底解説!

2020-11-30 By プログラミング入門ナビ編集部

議論するエンジニアたち

はじめに

ITエンジニア

TypeScriptというプログラミング言語をご存知でしょうか?

JavaScriptと名前が似ているからその仲間かな?と思った方、あながち間違っていません。

この記事では、使いやすいと人気上昇中のTypeScriptについて詳しく解説します。

TypeScriptとは

TypeScriptは2012年にMicrosoft社によって開発されたオープンソースのプログラミング言語です。

2017年にはGoogleの社内標準言語として採用されたことから注目を集めています。

いったいどんな言語なのでしょうか?

JavaScriptの進化版

TypeScriptは下記の理由からJavaScriptの進化版のプログラミング言語といわれています。

  • Alternative JavaScript(AltJS)である
  • JavaScriptのスーパーセットである

まず「Alternative JavaScript」についてですがこれは「JavaScriptの代替言語」という意味です。

JavaScriptは汎用性が高く世界中で普及している言語ではありますが、多少ややこしいところや使いにくいところがあります。

それをカバーするために「記述を別の言語で行った後に全く同じ挙動をするJavaScriptプログラムに変換して使用しよう」という動きがあるのです。

その「別の言語」の一つがTypeScriptで、後ほど取り上げますがJavaScriptと比較し記述しやすくなっています。

なお、AltJSはTypeScriptだけではありません。

他にもRubyのように記述できるCoffeeScriptや、Googleが大規模Webアプリのために開発したDart等があります。

また、TypeScriptはJavaScriptのスーパーセットです。

これは簡単にいうと「全てのJavaScriptの文法はTypeScriptでも使用可能」ということなので、既存のJavaScriptプログラムはTypeScriptプログラムとして実行できます。

こういった点が、TypeScriptはJavaScriptの進化版であるといわれる所以です。

GitHub人気急上昇言語の一つ

GitHub人気上昇言語ランキング

GitHubが年次で発表する世界の開発状況に関するレポート「The State of the Octoverse」では、人気急上昇のプログラミング言語を紹介しています。

ここでTypeScriptは5位に入っており、人気の高さが見て取れますね。

先ほど他のAltJSとして先述したDartが1位なのは、iOSアプリ・Andoridアプリの両方を同じ環境で開発できるプラットフォームであるFlutterで使用できるため注目を集めているのが理由でしょう。

Rust・Kotlinといった言語も上位に入っていますが、これらはTypeScriptと同様に、後述する「静的型付け」が可能なので人気が上がっているのではないかと分析されています。

JavaScriptとの違い

コードを比較する開発者たち

TypeScriptがJavaScriptの進化版であることは説明しましたが、どういった点が異なるのでしょうか。

静的型付けができる

プログラミング言語にはデータの型(整数・文字列・ブーリアン等)について、プログラマーがあらかじめ明示的に決める「静的型付け」のパターンと、実行時に自動的に決められる「動的型付け」のパターンがあります。

JavaScriptはもともと動的型付けで、プログラミングの際にデータ型を気にせず気軽に記述できるのですが、変数に想定と違うデータ型が代入されてエラーが起こる可能性がありそれは実行時になるまでわかりません。

TypeScriptでは動的型付けだけでなく静的型付けもオプションとして選択可能です。

もし最初に定義したデータ型と異なる値が代入される箇所があればコンパイル時にエラーとして検出されるため、意図しないエラーを低減させることができます。

クラスを作成できる

JavaScriptはオブジェクト指向のプログラミング言語です。簡単にいうと、ソースコードの中で同じような動作をする部分をひとかたまり(オブジェクト)としてまとめておき、後から簡単に使い回すことができる仕組みがあります。

「クラス」はオブジェクトの設計書であり、どんなデータを持ってどんな操作ができるのかを記述したものです。

オブジェクト指向のプログラミング言語のほとんどはクラスを作成できるようになっているのですが、JavaScriptは2015年に発表された新標準(ECMAScript 2015)より前ではクラスを使えませんでした。

また、新標準でクラスを使えるようになったとはいえ、まだ一部のブラウザや一部バージョンによってはこの新標準への対応が行われておらず、正しく動作するとは限りません。

そのため旧仕様のJavaScriptはまだ一般的に使用されており、ここでクラスを作ろうとすると関数などを活用して無理やり記述する必要があったのですが、TypeScriptではクラスを作成することができます。

nullやundefinedのチェック可能

JavaScriptプログラムを実行時に、参照した値がnullやundefinedでエラーになったことはありませんか?

これは最もよくある実行時エラーの一つですよね。

TypeScriptではこういったエラーを最小化するため、コンパイル時にnullやundefinedの可能性がある変数をチェックすることが可能です。

このような仕組みは「null safe」や「null安全」と呼ばれ、事前にエラーを減らすための方法として注目を集めています。

TypeScriptの利点

議論するエンジニアたち

JavaScriptとの違いをふまえて、TypeScriptの利点についても見ていきましょう。

大人数で開発してもエラーを抑えられる

データ型の間違い検知やnull・undefinedチェックができるので、実行してみるまでわからなかったようなエラーを事前に撲滅できます。

また、大人数で開発している場合に、自分は文字列しか入らないと想定して書いた部分に対して別の開発者が数値を入れてしまうことがあるかもしれません。

動的型付けは規模の小さいコードを少人数で書く時はスピーディーで手軽なのが利点ですが、大人数になればなるほどこのように想定しないエラーやバグの原因となりやすいです。

また、エラーが発生してしまった後も何が原因なのか突き止めにくくなります。

TypeScriptのように静的型付けやnull安全が担保されていればそのリスクも減りますね。

先述の人気急上昇言語でも静的型付け言語が上位に入っていたのはそういった背景に基づいているといえるでしょう。

コードが読みやすい

クラスを記述できるので、クラスが作れないなか無理にオブジェクト指向を実現していたJavaScriptと比較し読みやすいコードが書けるのが利点です。

また、データ型も明示的に記述するため、どんな型が入る想定で書いているのかが伝えやすく、読む側としても読み取りやすくなります。

nullやundefinedチェックがあるため宣言しっぱなしの変数も減り「これ何のための変数なんだろう?」といった疑問も少なくなるでしょう。

まとめ

いいね!と微笑む開発者たち

人気急上昇中のTypeScriptについて、JavaScriptと比較しながらその特徴やメリットを紹介しました。

JavaScriptを学習したことのある方は学んでみてはいかがでしょうか。

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, TypeScript

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Interim pages omitted …
  • Go to page 27
  • Go to Next Page »

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • MySQL 5.7 for Windowsのアンインストール方法
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

最近の投稿

  • 【03/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」
  • フレームワークとは?開発効率UPに役立つ理由を知っておこう!
  • WordPressとは?どんなことができるの?初心者にもわかりやすく解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー