• 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(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

SQLとは?エンジニアに必須の知識を初心者にもわかりやすく説明!

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

検索

はじめに

ラップトップを持つエンジニア

SQL(読み:エスキューエル)という言葉を聞いたことがあるでしょうか。

聞いたことはあるが何か知らない、または何となくデータベースを操作するための言語だとは知っているけれど、いまいち理解できていない…

この記事では、そんな方々へ向けてSQLとは何なのか?どういった使い方をするのか?を詳しく説明します。

SQLはエンジニアの必須知識ですので、ぜひこの記事を読んでしっかりと理解を深め、他の人にも教えてあげられるようになることを目指してください。

SQLとは?

SQLは1970年代にIBM社によって開発されたSEQUEL(読み:シークェル)という言語を原型とするデータベース操作言語です。

読み方は「エスキューエル」が一般的ですが、上記の理由から「シークェル」と読まれることもあります。

そもそもデータベースとは?

書類のファイル

ここで、データベースというのは、検索や貯蓄が簡単に高速にできるように整理されたデータの集まりのことです。

例えば、紙の名刺帳を想像してください。

面倒くさがりの人は特にルールを決めずにもらった名刺を適当にファイリングするでしょう。

かたや、まめな人ならば五十音順にインデックスをつけてファイリングしていき、後から名前で探したり新たに追加したりするのが簡単にできるようにしていますね。

広義ではこの後者の名刺帳もデータベースと呼べます。データベースと聞いてピンとこない方はこれをイメージしながら考えていくと概念を掴みやすいです。

もちろん、プログラミングの世界でのデータベースは紙ではなく電子的な情報の集まりを指します。

「名刺帳」という名の電子的なデータベースを作った時、新たにもらった名刺データを追加したり、登録済みの名刺データを検索したりするには、データベースに対して追加・検索等の操作が必要ですね。

この操作をするための言語がSQLなのです。なお、SQLはリレーショナルデータベースという種別のデータベースを管理するシステム(RDBMS)でのみ使用されます。

参考:RDBMSとNoSQLの違い

ここでまた聞き慣れない言葉(RDBMS)が出てきました。

データベース管理システムは大まかに2種類:RDBMSとNoSQLに分けられ、SQLは前者のRDBMSでのみ使用されます。

ここからはRDBMSとNoSQLの違いについて簡単に説明しますので、とりあえずSQLについて先に知りたい方はこの項を読み飛ばしていただいても問題ありません。

RDBMS(Relational DataBase Management System)は、リレーショナルデータベースを管理するためのシステムのことです。

リレーショナルデータベースとは、関連性を持った複雑なデータ群を指します。

例えば先ほどの名刺帳の例ならば、個々の名刺にはその人の氏名だけでなく、会社名・所属・連絡先等が書かれていますね。

そこに載っていない情報、例えば「この会社って資本金はいくらくらいなのかな?」と疑問が沸いたとしましょう。

この時、別の「企業情報」というファイル(リレーショナルデータベースの世界ではテーブルと呼びます)に会社名ごとに創立年・社員数・資本金等のデータが揃っていれば、名刺に書いてある「会社名」をもとに辿って資本金を確認することができますね。

このように、複数のデータ群が関連性を持った形で整理されていて膨大で複雑なデータを管理できるようになっているのがリレーショナルデータベースです。

データが複雑である分、操作も複雑になるためSQLを用いて行う必要があります。

他方のNoSQL(読み:ノーエスキューエル)は、SQLを用いずにデータベースを管理するシステムの総称です。

NoSQLはRDBMSと比較しデータ構造が単純なため、操作に特別な言語が必要ありません。

例えば先ほどの名刺帳の例のように、取引先の個々の担当者情報や企業情報等を網羅的に管理しようとすればRDBMSを使わざるを得ませんが、そうではなく取引先1社につき1人の営業担当がいて、それが誰であるかのみ管理できればいいとしましょう。

この場合は名刺帳や企業情報ではなく、「取引先会社名-営業担当者氏名」という情報が1対1で紐づくデータ群さえあればいいことになります。

このように単純な構造を持つのがNoSQLであり、繰り返しになりますがSQLでの操作が必要ないのがRDBMSとの大きな違いです。

SQLの基本的な使い方

検索

ここからは具体的にSQLがどう使われるのか見ていきましょう。

データベース用語

まずは覚えるべき用語を確認しておきましょう。

リレーショナルデータベースでは、データは表計算ソフト(Excel等)のように表の構造をしています。

例えば名刺帳の例なら下記の通りです。

氏名 会社名 所属 住所 電話番号 メールアドレス
山田 太郎 (株)○○商店 営業課 東京都新宿区… 033-209-XXXX yamada@XXX.com
鈴木 二郎 △△製作所(株) 調達課 大阪府東大阪市… 064-309-YYYY jiro-s@YYY.co.jp
佐藤 三郎 □□工業(株) 企画課 神奈川県川崎市… 044-200-ZZZZ info@ZZZ.co.jp

このそれぞれの項目について、データベースの世界では下記の用語で呼びます。

  • テーブル:表そのものを指す。
  • レコード:各行のこと。この例では名刺1枚のが情報が1レコードで表される。
  • カラム:各列のこと。列ごとにデータの形式が定義される。(メールアドレスは@を含む英数字の文字列、等)
  • フィールド:レコードの中の1項目のこと。(例:山田太郎のレコードの「所属」フィールドは「営業課」)
  • フィールド名:そのフィールドの先頭列の名称を指す(氏名・会社名・所属・…)

SQLの文法種別

SQLの文法は大きく下記の三種類があります。

  • データ定義言語:データベースオブジェクト(テーブルなど)の新規作成や削除を行う
  • データ操作言語:テーブルへのデータ追加・更新・削除・検索を行う
  • データ制御言語:データベースへのアクセス権限やトランザクション(※)管理

※トランザクション:データベースの整合性を保つために、ばらばらに実行すべきでない複数の処理をまとめて一括処理すること

以下、順番に具体例を見ていきましょう。

データ定義言語

データ本体であるテーブルや、データベースを利用するユーザ等のデータを定義するための文です。

CREATE(作成)やDROP(削除)、ALTER(定義変更)等があります。

下記はテーブルを新規作成する例です。

CREATE TABLE meibo {
  name varchar(20),
  tel int,
  email varchar(50)
}

データ操作言語

テーブルに対するデータ操作を行うための文です。

テーブルにデータを挿入するINSERT、更新するUPDATE、削除するDELETE、検索するSELECT等があります。

下記はテーブルから条件に合うレコードを検索する例です。

SELECT * FROM meibo WHERE name = 'Yamada';

データ制御言語

データベース全体に関わる処理を制御するための文です。

ユーザーに特定の作業権限を与えるGRANT、権限を剥奪するREVOKE、トランザクションを開始するBEGIN、トランザクションを確定するCOMMIT等があります。

下記はTABLE1というテーブルに対しINSERTとSELECTを実行する権限をUSER1に与える例です。

GRANT INSERT, SELECT ON table1 TO user1;

まとめ

データベースエンジニア

SQLについて、データベースの定義や用語を含めた解説および具体的な使用例の説明を行いました。

あいまいだった部分の理解が少しでも明確になれば幸いです。

さらに理解を深めたい方は、下記の講座も参考にしてみてください。

プログラミング初心者のみならず、データベースを活用したマーケティング等を見据えたビジネスマンの方にもご好評をいただいている講座なので、大変おすすめです!

SQL入門|データベースを操作する言語SQLを短期間で身につけビジネスの現場で活用しよう

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

px, em, rem, vw, vh, % の違いとは? font-sizeの指定の仕方について解説!

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

この記事では、CSSでfont-sizeプロパティを用いてフォントサイズを指定する方法について説明します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!」のサポート記事です

font-sizeプロパティとは

CSSでは、font-sizeプロパティを用いることでフォントのサイズを調整することが出来ます。

以下はaタグに対して50pxの文字サイズを指定する例です。

a {
  font-size: 50px;
}

フォントサイズ指定の単位

font-sizeでは、様々な単位を用いてフォントサイズを指定することができます。

pxを用いる方法

ピクセル数で指定する方法です。ピクセルとはコンピューター上で画像を扱う際の最小単位を指します。

ブラウザの表示領域の大きさも縦×横のピクセル数で表されるので、フォントサイズをピクセル値で指定することで、環境によらず同じ大きさでフォントを表示することが可能です。

pタグで表示する文字サイズを20ピクセルに指定したい場合は、20pxと指定します。

p {
   font-size: 20px;
} 

%を用いる方法

親要素の大きさの相対的な割合で指定する方法です。

例えば以下の場合は、divタグの子セレクタであるpタグには、20pxの50%で、10pxがフォントサイズとして適用されることになります。

div {
  font-size:20px;
} 
div > p {
  font-size:50%;
}

emを用いる方法

親要素のフォントサイズを基準に指定する方法です。%と似ていますが、emの場合は親要素のフォントサイズを基準として、その割合で指定します。すなわち100%が1emになり、50%が0.5emに相当します。

例えば以下の場合は、pタグには、divタグのフォントサイズの半分である10pxが適用されます。

div {
  font-size:20px;
}
div > p {
  font-size:0.5em;
}

%やemについては、親要素のフォントサイズを基準としているため、親要素のフォントサイズが変われば子要素のフォントサイズも合わせて変化する、という点に注意してください。

remを用いる方法

root要素、すなわちブラウザにデフォルトで設定されているフォントサイズを基準に指定する方法です。

ブラウザのデフォルトのフォントサイズは16pxであることが多いです。emと同様、root要素のフォントサイズを1として、0.5remなどと割合で指定します。

すなわち以下の場合では、ブラウザのデフォルトのフォントサイズが16pxの時、pタグの文字は8pxの大きさで表示されることになります。

p { 
   font-size: 0.5rem;
} 

vw, vhを用いる方法

ビューポートの大きさを100として指定する方法です。

ビューポートとは「表示領域」のことで、パソコンやタブレット、スマートフォンなどディスプレイの大きさの異なる端末で開いた場合でも、統一的にフォントの大きさを決めることが出来ます。

ですので、vwやvhはレスポンシブ対応に適したフォントサイズの単位であると言えます。

以下の場合では、pタグに対して10vwの大きさを指定しています。

p {
   font-size: 10vw;
}

よって以下のように5つの文字を横に並べた場合、幅は合計で50vwとなり、表示領域の半分の大きさを閉めることになります。

まとめ

この記事ではフォントサイズの5種類の単位の指定の仕方について解説しました。

フォントサイズを指定する際は、どのようなレイアウトを実現したいかに応じて、適切に単位を使い分けてみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 6
  • Go to page 7
  • Go to page 8
  • Go to page 9
  • Go to page 10
  • Interim pages omitted …
  • Go to page 23
  • Go to Next Page »

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【05/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

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

アーカイブ

  • 2025年5月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 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 © 2025 · programmingnavi.com ・About・プライバシーポリシー