プログラミング入門ナビ

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

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

プログラミング入門

最初に学ぶプログラミング言語はRubyとJavaScriptが長い目で見てもおすすめ！その理由も解説！

By

はじめに

プログラミングする若者

いざプログラミングを始めてみよう！と思っても、いろんな言語があってどれを選んだらいいのか迷ってしまいますよね。

受講生の方から講師への質問としても多くいただいていますので、お悩みの方は多いようです。

この記事では、講師がおすすめする「はじめてのプログラミング言語」を2つ、理由とともにご紹介します！

プログラミング学習を始めようとしている方は是非参考にしてください。

プログラミング学習を始めるなら言語選びが重要！

プログラミングはパソコンさえあれば始められるのでハードルは低く、身に付けたいスキルとして年々人気が上昇しています。

しかし、実は「最初にどの言語から入るか？」がとても重要で、これを失敗するとうまく続かず挫折してしまう方も少なくありません。

せっかく始めるのならば、長く続けてスキルをちゃんとものにしたいですよね。

もちろん、最初からやりたいことや開発してみたいものがあって目的がはっきりとしている場合はそれに沿って必要な言語を学ぶのが一番です。

逆に、なんとなくエンジニアを目指してみたい・プログラミングをしてみたいという状況であれば、最初に学ぶプログラミング言語は次の2つの観点で選ぶと良いでしょう。

簡単に始められるかどうか

いいね！と笑う女性

プログラミング言語もいくつかの種類に分類され、中には実際に動かせるようになるまでのステップ（環境構築からサンプルプログラムの実行まで）が複雑なものもあります。

この最初のステップは短ければ短いほど良いです。

「自分でコーディングしてプログラムを動かせた！」という感動を味わえるまでの余計なつまずきやエラーが少ない方が楽しさを感じやすいので、挫折もしにくくなります。

もちろん、本格的なエンジニアを目指すのであれば環境構築やエラーの解消も後々身に付けなければならないスキルです。

しかし、これらはある程度プログラムがどうやって動くのか、どうしてエラーが起きるかなど、簡単なコーディングができるようになってからの方が習得しやすいでしょう。

使用シーンの多さ

オフィスで働くカジュアルな人々

せっかく言語を学んでも、マイナーすぎて使用できるシーンや案件が少ないと宝の持ち腐れになってしまいます。

マイナーだからこそその言語が取り扱えれば現場で重宝されやすいのでは？という考えもありますし、実際そのようなケースもあります。ただし、それは基本的なプログラミングスキルや実務経験が土台にあっての話です。

まずは広く使われている言語を習得し、使用機会を増やしてスキルを身に付けるのが近道でしょう。

おすすめの言語(1) Ruby

Ruby言語公式ページTOP

Rubyは日本人のまつもとゆきひろ氏が開発したスクリプト言語です。スクリプト言語というのは、書いてすぐそのまま実行できる言語、と捉えてください。

対義にコンパイラ言語というものがあり、そちらは書いた後にコンピュータが理解できる機械語に変換するコンパイルという作業が必要で、初心者の方はここでつまずきやすいです。

Rubyをはじめてのプログラミング言語としておすすめする理由は次の通りです。

日本語のドキュメントが充実

日本人が開発した言語とあって、日本語のドキュメントや書籍が充実しています。また、日本人のユーザーが多いのでオンラインの質問サイトでの質疑応答も盛んに行われているようです。

疑問やエラーが発生しても、解決の糸口を探すのに困ることはないでしょう。

記述量が少なくて済む

Rubyは非常にシンプルな言語で、記述量が少なくなるように設計されています。

これは自分がコーディングする時にも書く量が少なく済んで楽ですし、他の人が書いたコードを参考にする時も何をしようとしているのかやどんな目的で描かれているのかがひと目でわかりやすいです。

これは初心者にとって非常に大きなメリットとなります。

強力なフレームワーク

Rubyでの開発にはRuby on Railsというフレームワーク がよく使用されます。フレームワークというのは、簡単に言うと開発のスピードアップをお助けする便利な機能の集まりです。

これを使用すれば記述コード量をさらに減らしたり、難しい機能を簡単に実装したりすることが可能です。できることの範囲が広がるのでプログラミングの楽しさを存分に味わうことができますね。

おすすめの言語(2) JavaScript

コーディング画面

もう1つ、おすすめしたいのはJavaScriptです。こちらも1つ目にご紹介したRubyと同じくスクリプト言語で、書いてすぐ実行できるので入り込みやすいです。

JavaScriptをはじめてのプログラミング言語としておすすめする理由は次の通りです。

圧倒的な利用シーンの多さ

JavaScriptは主にWebサイトで使用される言語ですが、ある調査によれば、実に世界の95%以上のWebサイトでJavaScriptが採用されています。

また、用途としてもWebアプリやスマホアプリ・ゲームなど多岐にわたり、Webサイトに限定されません。

そのため「Webエンジニアの必修言語」とも呼ばれるほどです。Webエンジニアを目指すかどうかまだ決めていなくても、先述の通り用途はWebだけではないので習得しておけば何にでも応用できるでしょう。

教材が充実

利用シーンが多いということは、それだけこの言語を習得している人・習得しようとする人が多いということです。

優れた教材や書籍が多く存在し、また世界中に先輩ユーザーがいるのでインターネット上に多くのサンプルプログラムや解説が公開されています。

困った時にすぐ解決方法があるというのは初心者がプログラミングを学ぶにあたって欠かせない条件です。

楽しく学びやすい

他の言語の多くは、入門時に書けるサンプルコードはせいぜい文字を出力したり、計算結果を表示するくらいのことしかできないので、中には物足りなく感じる方もいらっしゃいます。

対照的に、JavaScriptは視覚的に動きのあるプログラムを作ってWebブラウザ上で挙動を確認しながら学ぶことができるので飽きが来にくく、その楽しさにすっかりハマってしまうことも多いようです。

楽しく学べるのもJavaScriptの魅力の1つです。

まとめ

楽しそうなプログラマ

初心者の方がまずは楽しくプログラミングの世界に入るためにおすすめのプログラミング言語を紹介しました。

RubyもJavaScriptも利用シーンが多いので、エンジニアになってからのことを考えても非常におすすめの言語です。

この2つはProglusでも初心者の方から非常に人気のコースですので、ぜひ一度チェックしてみてください！

RB01-新・Ruby入門

WE09-JavaScript入門

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

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

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

今すぐ詳細を確認する

CSSのclearプロパティとは？そもそも必要ないのでは？疑問を徹底解説！

By

はじめに

CSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。

これに関連したプロパティの一つに、clearがあります。

フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。

ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。

フロートレイアウトとは

まず、フロートレイアウトについておさらいしていきましょう。

CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。

フロートレイアウトをしないとき

理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。まず、下記のようなHTMLファイルを作成します。

[test.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>float test</title>
        <link rel="stylesheet" href="css/no-float.css">
    </head>
    <body>
        <h1>フロートの練習</h1>
        <div id="wrap">
            <div id="box1">BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト</div>
            <div id="box2">BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト</div>
            <div id="box3">BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト</div>
        </div>
    </body>
</html>

次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。

[no-float.css]

/* no-float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
}
#box3 {
    background-color: blue;
    color:  white;
}

HTMLファイルをブラウザで見ると下記のようになり、上からbox1・box2・box3の順でレイアウトされます。

フロートの練習（フロートレイアウトをしない場合）

フロートレイアウトをするとき

それでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。

[float-noclear.css]

/* float-noclear.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
}

box1ではfloat: leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float-noclear.css">

下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。

フロートレイアウトの練習（フロートレイアウト、clearなしの場合）

clearプロパティとは

floatプロパティの関連プロパティとして、clearがあります。

通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。

  • clear: left　左寄せされた要素に対する回り込みを解除する
  • clear: right　右寄せされた要素に対する回り込みを解除する
  • clear: both　左寄せまたは右寄せされた全ての要素に対する回り込みを解除する
  • clear: none　回り込みを解除しない（デフォルト値）

clearしてもしなくても同じに見える？

clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。

[float.css]

/* float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
    clear:  both;
}

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float.css">

box1とbox2の高さが同じ場合

ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。

[float.cssを指定した場合の表示]

フロートの練習（clearを指定したがbox1とbox2の高さが同じとき）

box1の方がbox2より高い場合

しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。

clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。

[float.cssを指定した場合の表示]

フロートの練習（clearなし、box1がbox2より高いとき）

[float-noclear.cssを指定した場合の表示]

フロートの練習（clearなし、box1がbox2より高いとき）

このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。

このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。

clearの設定は必要

打ち合わせしている手元

上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。

また、余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。

回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。

まとめ

エレガントなビジネスウーマン

フロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。

clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは？と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。

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

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

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

今すぐ詳細を確認する

オブジェクトの繰り返し描画 v-for – Vue.js入門

By

この記事では、Vue.jsで、オブジェクトの繰り返しを v-forディレクティブで行う方法について学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

実現したいこと。

オブジェクトから、値を取り出して、てリスト表示。

Taro
Yamada
28

オブジェクトのkeyとvalueを、リスト表示。
Taro : firstName
Yamada : lastName
28 : age

v-for 構文

＜要素名 v-for=”バリュー in オブジェクト”＞
{{ 表示したいバリュー }}
＜/要素名＞

または、

＜要素名 v-for=”(バリュー, キー) in オブジェクト”＞
{{ 表示したいキー or バリュー }}
＜/要素名＞

構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。

実装

空のテンプレートをマウントしてある、状態からはじめます。

まず、表示に使うユーザーオブジェクトを用意します。

オブジェクト何か、初心者向けにざっくり説明すると、
オブジェクトとは、様々な特性（言い換えると、プロパティ）をもったもの
です。

例えばの事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。

次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。

var app = new Vue({
  el: '#app',
  data: {
    user: {
      firstName: 'Taro',
      lastName: 'Yamada',
      age: 28
    }
  }
})

次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。

オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。

    • {{ value }}

 

 

このように、objecetのvalueが表示されました。

Taro
Yamada
28

v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。

このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。

このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。

次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。

つぎの様に記述してください。

  • {{ key}} : {{ value }}

 

とします。

オブジェクトから、価を一つづつとりだして、　keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。

これで、keyとvalueを画面に表示することができました。

ちなみに、この変数名は、任意につけられるので、

  • {{ k }} : {{ v }}

 

としても、同じ結果が得られます。

userの部分は、データプロパティで、指定した名前と揃えてください。

Vue.jsのv-forについて動画で学習する

おわりに

このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。¥2,600 4.2 (3698 ratings)122 lectures, 5 hours

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

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

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

今すぐ詳細を確認する