プログラム素人がプログラムを使いこなせるようになるまで。

全くの素人が日々プログラムを学び、それを応用して仕事を探します。独学でどこまでできるかを日記に綴ります。

JavaScriptⅠ 練習 その②

f:id:yuta322:20180922183833j:plain

 

どうもyutaです。。。。( ´・ω・)y─┛~~~oΟ

 

前回は変数についてまで勉強と練習をしました。

長くなりすぎたので途中でやめましたが。。。。。。( ´・ω・)y─┛~~~oΟ

 

前回の内容はこちらから確認できます。

JavaScriptⅠ 練習 その① - プログラム素人がプログラムを使いこなせるようになるまで。

 

おさらい

では変数の定義からおさらいしましょう。変数とは箱のようなもので、いろいろな文字列に変換できる便利な関数です。という感じで私は理解していますが、違うよって方はコメントくれると嬉しいです。。。。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180920170455p:plain

 

 

 

 

次に変数の特徴を生かした変数の更新について勉強しました。

これこそ変数の特徴ともいえる内容ですね。最初に登録してある文字列を変更することで表示する文字列が変更されるという練習内容です。

最初にnameの文字をlet関数をつけてname=OOOと名前を決定します。

次の指示ではそのnameの内容を変更する指示を行いname=▲▲▲とします。ここではlet関数は用いずにname=だけを用いればいいので手間が省けます。。。。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180920170522p:plain

 

定数とは

次に定数という概念が出てきました。変数ではないので変わらない値ということでしょうか。

よくわかりません。

説明文を読み進めていきましょう。。。。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180920170528p:plain

先ほどの変数の練習で使っていた名前を決める時の関数"let"が定数の意味を持つ"const"に変わっただけですね。次のスライドでその役割が表示されています。。。。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170534p:plain

変数のように簡単にコロコロ値を変更することができないそうです。無理に変更しようとするとエラーを吐き出してしまうそうです。何となくですが絶対に変えたくない文字はこれで規定すればいいんでしょうかね。。。。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170539p:plain

とりあえず練習問題を解いてこの章はクリアです。ただ書くだけですからまだまだ楽勝ですね。でも、だんだん難しくなってきそうです。。。。( ´・ω・)y─┛~~~oΟ

 

テンプレートリテラル

 

f:id:yuta322:20180920170543p:plain

 

名前から聞くと???が頭に浮かびますが、メールの文章を書くときに非常に楽になるアレです。。。。( ´・ω・)y─┛~~~oΟ

どんな概念かというと、前述の、変数。定数で勉強した”let”または”const”関数を用いてname中に入れる文字を決めます。その後、${name}と変数、定数で決めたnameを”${}”のかっこの中に入れます。そうするとそこの文字が現れるという仕掛けです。

わからないので、実際にやってみましょう。。。。( ´・ω・)y─┛~~~oΟ

 

 

まずは、変数。定数の関数、”let”または”const”関数を用いてname中に入れる文字を決めます。

次にconsole.log関数を用いて、”こんにちは${name}さん。”と文章を入れるとあら不思議、プログラムを実行させるとこんにちわOOOさんと表示されるではありませんか。

メールなどで決まった定型文を出すときにテンプレートと返信する人の名前を自動転写する機能がありますがこれはこの考えから来てるのではないのでしょうか。。。。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170548p:plain

 

今回の内容はこれで以上です。また、書きます。。。。( ´・ω・)y─┛~~~oΟ

 

 

それではまた。。。。( ´・ω・)y─┛~~~oΟ

 

練習サイト:

JavaScriptⅠ 練習 その①

f:id:yuta322:20180920175942j:plain

 

 

皆さまだいぶお久しぶりです。。。( ´・ω・)y─┛~~~oΟ

 

先月海外旅行に行っていまして、時差ボケでやる気が出ずにブログ更新をさぼっていました。( ´・ω・)y─┛~~~oΟ

 

さて、前回までの内容から確認します。前回の記事を見ていない方は下記からどうぞ。( ´・ω・)y─┛~~~oΟ

 

amateur-programmer.hatenablog.jp

 

前回は、JavaScriptだけではなく、ほかのプログラミングもじっくり練習できるウェブサイトProgate | プログラミングの入門なら基礎から学べるProgate[プロゲート]上での登録方法を紹介しました。

 

さて今回は実際に練習を始めていくところから始めます。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170418p:plain

マイページにログインします。JavaScriptは3つのコースから成り立っているので初心者である僕はJavaScriptⅠから始めます。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170427p:plain

まずはJavaScriptのバージョンの説明です。今現在使われているバージョンはES6といわれるものですが、業界によっては一世代前のES5を使用しているところもあるそうです。ES6とあるので最初はES1(1997年)から始まり現在に至るようです。

同一の言語でも旧式、新型と別れるとは思いもよりませんでした。まるでWindows OSなどと同じですね。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170434p:plain

それでは実際に講義に入っていきます。

最初は指定された文字列を表示するという簡単な内容です。

Hello Worldこれは初めてプログラミングが開発されたときに一番最初にシステム上で表示させた言葉だそうです。ですので、大体のプログラム言語教育ではこれを最初に表示させるとか。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170440p:plain

JavaScriptでは文字を表示させる際にconsole.logという関数を用いて表示させます。この際に色々とルールがあり、表示させたい文字は()と”ダブルまたは’シングルクオーテーションで囲み、文章の末尾には;セミコロンが必要になるそうです。何故それが必要なのかは考えずにとりあえず進めていきます。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170445p:plain

目標の課題をクリアしました!とはいってもHelloWorldを表示させるだけですが。。。

このウェブサイトでは問題をクリアすると経験値がもらえます。それによってレベルが上がっていきます。問題を解くときに自力で回答(説明スライドに戻ってもOK)すると経験値が100%もらえますが、回答を見てそれを書き写して正解すると経験値が50%しかもらえません。( ´・ω・)y─┛~~~oΟ

 

 

f:id:yuta322:20180920170448p:plain

次に四則演算についてです。画像にあるような記号(関数)を用いて四則演算を行います。この関数ですが、エクセルをしている人であれば見覚えがあると思います。まったくもって同じ関数を使ってるので覚えやすいです。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170455p:plain

次のページに進みました。

難しい言葉が出ましたね。変数。漢字から見るからに数が変わるもののイメージですが

なんか違う感じがします。。。変数とは箱。。。?謎です。

 

次のページで詳細に説明しているのでそこを確認しましょう。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170501p:plain

写真の内容でわかりましたでしょうか?私はいまいち理解できませんでした。( ´・ω・)y─┛~~~oΟ

何となくですが、買い物サイトの右上とかにある『ようこそゲスト様』がログインすると『ようこそOO様』にかわる点も同じロジックでしょうか。この感じではログイン前の変数は”ゲスト”という文字が変数に登録されていましたが、ログイン後はその変数が書き換えられ”OO”とそのアカウントに登録している人の名前に書き変わる。

という感じでしょうか。( ´・ω・)y─┛~~~oΟ

 

変数があればその部分は書き換えが不要でその後ろで働く情報だけを書き換えるから入力文字数が少なくなる。。。?

 

よくわかりません。( ´・ω・)y─┛~~~oΟ

 

次に行きましょう。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170507p:plain

応用編ですね。このように変数+固定文字、変数+四則演算で計算できる用です。

以下に変数を使用することのまとめが書いてあります。やはり繰り返し処理に使いやすかったり、変更に対応しやすいというメリットがあるそうです。( ´・ω・)y─┛~~~oΟ

 

f:id:yuta322:20180920170512p:plain

 

 

長くなってしまったので今回はこれでいったん終了します。( ´・ω・)y─┛~~~oΟ

 

それではまた。( ´・ω・)y─┛~~~oΟ

 

 

 

 

初めてのJavaScript勉強。

こんにちはyutaです。

お久しぶりです。

 

前回の記事でどこのWebサイトを用いて勉強するか選定しました。( ´・ω・)y─┛~~~oΟ

 

参照:前回記事・Java scriptを勉強するためのサイト探し。

amateur-programmer.hatenablog.jp

 

この記事から使うサイトをProgate | プログラミングの入門なら基礎から学べるProgate[プロゲート]に決めました。

まずはHPにアクセスします。

会員登録をクリック。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153127p:plain

 

アカウントの作成。このWebサイトでは連携ログインができるから情報入力なしですぐに始められます。適当に好きなやつを選んでください。

もちろんメールアドレスのみでアカウントを作成できます。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153137p:plain

 

あっという間にログインできました。

早速学ぼうではHTMLなどについて記載されていますが、私の目当てはJavaScriptなので、下のサービスからサービス一覧をクリック。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153119p:plain

 

クリックすると色々な開発言語が選べます。おそらくここのサイトで主要なプログラミング言語は網羅しているのではないでしょうか。

JavaScriptの習得が終わったらほかの言語にも挑戦してみようと思います。

とりあえず今回はJavaScriptの項目をクリックします。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153123p:plain

 

クリックすると、レベル分けされて出てくるので、レベルⅠを選んで、レッスンを始めるをクリックします。

JavaScriptにはES6と旧式のES5があるらしいので学習する際には自分のお目的に合ったバージョンを選んで学習してください。私は最新版のES6を用いて学習します。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153108p:plain

 

さて、ようやくJavaScriptを学習する準備が整いました。( ´・ω・)y─┛~~~oΟ

f:id:yuta322:20180802153112p:plain

 

次回は、このステージをクリアした内容から始めていこうと思います。( ´・ω・)y─┛~~~oΟ

 

それではまた。( ´・ω・)y─┛~~~oΟ

 

 

 

 

 

 

 

 

 

 

Java scriptを勉強するためのサイト探し。

こんにちはyutaです。( ´・ω・)y─┛~~~oΟ

 

 

f:id:yuta322:20180724193217j:plain

 

まずは、勉強を始めるにあたってどのウェブサイトを使うかを考えます。( ´・ω・)y─┛~~~oΟ

 

今は無料である程度学習できるWebサイトがたくさんあるので便利ですね。( ´・ω・)y─┛~~~oΟ

 

Java Script 勉強 無料”と検索すると色々なサイトをまとめて紹介してくれるサイトが出てきます。( ´・ω・)y─┛~~~oΟ

 

初心者~中上級者まで!JavaScriptが学べる学習サイト12選


paiza.hatenablog.com

 

今回はこの中からいくつか選んで試していきたいと思います。

 

1.ドットインストール

https://dotinstall.com/lessons/basic_javascript_v2

2-3分の動画をみながら学習していくスタイルの学習サイトになります。こちらを見ているとJava Script以外にもたくさんの言語について動画で学べる感じです。初級クラスは無料で、中級、上級クラスは有料となるようです。

 

2.Progete

prog-8.com

こちらは、ゲーム感覚でプログラムを勉強できるサイトです。試してみた感覚だと私はこれが一番よさそうな感じでした。

最初に簡単なプログラムを書いていき次第にレベルアップしていくようにできています。問題を解くと経験値がもらえるので、楽しみながらできます。

答えを見ると経験値が半減してしまうので、自力で頑張るように仕向けられています。

また、Web上ですべて完結できるので、PCにエディターなどを導入しなくて済むので気軽に始められます。

 

3.JEEK スクール

 

jeek.jp

こちらもProgateと同じように、Web上のみで学べるWebサイトとまとめサイトには記載されていましたが、私が試したときはどこから始めていいのかわからず、諦めました。

どなたか、進め方わかる方いましたら教えてください。。。( ´・ω・)y─┛~~~oΟ

 

 

 

4.漫画でわかるJavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座

読んで字のごとく漫画で勉強していくタイプのサイトになります。

プログラムとは何かから始まって、関数、変数、条件分岐などの初歩的な部分が学べるようです。

ただ、こちらは自分で開発環境を準備(とはいってもJavaScriptはメモ帳さえ準備すればいいのですが、それすら面倒くさい。。。)しないといけないので、今回は見送ります。

寝る前の読書代わりにいいかもしれません。( ´・ω・)y─┛~~~oΟ

 

 

 

5.Codecademy

www.codecademy.com

 

こちらも、JEEK,Progateと同じ系譜になるのですが、英語、スペイン語などの言語のみで日本語がありません。英語が得意、英語の勉強もしたいという方にはおすすめですが、英語の勉強をしながらプログラムの勉強をすると非常に進みが遅くなります(筆者の経験より)。ですので、あまりお勧めはしません。

ですが、内容は非常に充実しているので基本的な内容をほかのウェブサイトで勉強してこちらに戻ってくるのもいいかもしれません。( ´・ω・)y─┛~~~oΟ

 

 

さて、今回はJavaScriptを学べるサイトを紹介していきました。

色々ありますが、全くの初心者からしたらどれがいいか全くわかりません。

とりあえず、よさそうだったProgeteを使用します。( ´・ω・)y─┛~~~oΟ

prog-8.com

私の脳みそがどこまでついていけるかわかりませんが、こちらで学習して基礎的な能力を身に着けていこうと思います。

 

次回からはこのサイトで学習していき、学習内容を記載していこうと考えています。

 

それではまた( ´・ω・)y─┛~~~oΟ

 

 

 

 

勉強を始める前の開発言語を決めます。

自己紹介と到達目標

f:id:yuta322:20180722191945j:plain

 

初めまして。( ´・ω・)y─┛~~~oΟ

私、フリーターをしています。yutaと申します。

前に、プログラムと全く縁のない仕事をしていました。

これから、未経験の私がどこまでプログラミングを学習し、応用できるか、読者の皆様と一緒に成長を共有できればと思います。

 

私の目標は、プログラミングの習得、フリーランスでの報酬を発生させる。

ここを終着点としようと思います。

 

 

 

プログラミング言語とは

そもそも私はプログラミングド素人なので、どのようなプログラミング言語があるかわかりません。

そこで、インターネットでざっと調べました。

個々のサイトに詳しく乗っています。

tech-camp.in

 

このサイトによると、プログラミング言語にはスクリプト言語コンパイラ言語の二種類があるそうです。

スクリプト語は記入した構文をすぐに機械語に変換しその場で実行させることができるそうです。例として、Python,JavaScript,Ruby,PHPなどが挙げられます。

 

コンパイラ言語とは一度記載した構文をコンパイル(機械語に変換?)して実行させるというものらしいです。例として、C,C++,C#,Javaなどが挙げられます。

 

コンパイラ言語の方が実行時の作動速度が速いという特徴があるそうです。( ´・ω・)y─┛~~~oΟ

 

この時点で、すでに半分も理解できてません。( ´・ω・)y─┛~~~oΟ

 

使用する言語の選定

次に私の目標は、プログラムを書いて自己満足するだけではダメでそれでお金を生まないといけません。

ですので、最も需要の高い言語を選ぼうと思います。

先ほどのサイトから探してみました。

 

1.python

人口知能などに採用されている言語だそうです。話題のインスタグラムやユーチューブもこの言語で書かれていて、将来性の高い言語だそうです。

活躍分野としてはIoT、AI、機械学習など多岐にわたり、今後これらの市場が拡大していくので、今から始めても損がない言語のように感じました。

 

ちなみに、業界平均年収は600万円だそうです。

 

2.Java script

最も普遍的ともいわれるのがこの言語。(らしいです)

Webアプリの開発や、ウェブページの構築の上で重要になってくる言語だそうです。

こちらも現状多くの企業が使用しているWeb上のサイトを構築するのに必要ですから、くいっぱぐれはなさそうです。

また、開発環境もブラウザ上で完結できるらしく、PCの性能にあまり影響がなさそうで、いい感じです。

ちなみに業界平均年収は555万円だそうです。

 

3.rubby

日本人が作った開発言語で、”楽しさ”を目指して開発された言語だそうです。

日本人が書いた 言語のため、資料に多くの日本語があるため、勉強がしやすい点が魅力的です。ただ、日本では有名なだけで、国外での需要があるかと考えたときに微妙な感じがします。

 

 

4.Swift

この開発言語は何となく知っていました。IOSアプリを作成するために必要な開発言語です。

日本でもIOSバイスのシェアが莫大なため必ず、需要はありそうですが、MACを持ち合わせていないので今回は断念。

 

以上の4つのうち、基本中の基本で、開発環境も優しいJave scriptを勉強しようと考えました。

 

次回は、学習サイトの選定です。

 

それではまた。( ´・ω・)y─┛~~~oΟ