【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
javascript入門
よく読まれています

【javascript入門】オブジェクトを使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptでオブジェクトを使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながらオブジェクトの使い方を覚えてみてくださいね!オブジェクトってなに?オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、javsacriptの場合は、以下のようにオブジェクトを定義することができます!const product = {    name : "トマト",    price : 150}例ではトマトという商品の情報をproductという変数に定義しています。このようにまとまった情報を一つの変数で管理できるため、さまざまな処理が書きやすいメリットがあります!オブジェクトを使った処理を書いてみよう!それではオブジェクトを使った処理の例を書いてみますね!const product = {    name : "トマト",    price : 150}console.log("商品名は" + product.name + "です");console.log("価格は" + product.price + "です");こんな感じで、オブジェクトに格納された値を使うには、オブジェクト名前.オブジェクトの中身の名前という感じで、.(ドット)で区切って値を取り出すことができます!オブジェクトはこのように二階層、三階層というようにも定義できるのですがconst product = {    name : "トマト",    price : 150,    shop : {        name : "八百屋"    }}この場合はproduct.shop.nameというように、productの中のshopの中のnameといった感じで指定していけば大丈夫です!そして、オブジェクトは配列に格納することもできます。const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];javascriptの配列についての記事はこちらを是非読んでみてください!それではまず、商品の情報を順番に表示してみましょう!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];products.map((product) = {    console.log("商品名は" + product.name + "です");    console.log("価格は" + product.price + "です");});これを実行してみると商品名はトマトです価格は150です商品名はにんじんです価格は120ですと表示できたと思います!それではこれを、商品名のリストと合計価格を表示するようにしてみましょう!少し複雑になりますが、こんな感じです!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];let productList = "";let totalPrice = 0;products.map((product) = {    productList += product.name + "\n";    totalPrice += product.price;});console.log("商品リスト\n" + productList);console.log("合計価格\n" + totalPrice + "円");javascriptでは、+=と書くと対象の変数の値に追加するという書き方ができます。これを実行してみると商品リストトマトにんじん 合計価格270円と表示されたと思います。こんな感じで、オブジェクトを使うことでデータをひとまとめに管理し、わかりやすいコードを書くことができます!今回はjavascriptでのオブジェクトの使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

【javascript入門】オブジェクトを使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptでオブジェクトを使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながらオブジェクトの使い方を覚えてみてくださいね!オブジェクトってなに?オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、javsacriptの場合は、以下のようにオブジェクトを定義することができます!const product = {    name : "トマト",    price : 150}例ではトマトという商品の情報をproductという変数に定義しています。このようにまとまった情報を一つの変数で管理できるため、さまざまな処理が書きやすいメリットがあります!オブジェクトを使った処理を書いてみよう!それではオブジェクトを使った処理の例を書いてみますね!const product = {    name : "トマト",    price : 150}console.log("商品名は" + product.name + "です");console.log("価格は" + product.price + "です");こんな感じで、オブジェクトに格納された値を使うには、オブジェクト名前.オブジェクトの中身の名前という感じで、.(ドット)で区切って値を取り出すことができます!オブジェクトはこのように二階層、三階層というようにも定義できるのですがconst product = {    name : "トマト",    price : 150,    shop : {        name : "八百屋"    }}この場合はproduct.shop.nameというように、productの中のshopの中のnameといった感じで指定していけば大丈夫です!そして、オブジェクトは配列に格納することもできます。const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];javascriptの配列についての記事はこちらを是非読んでみてください!それではまず、商品の情報を順番に表示してみましょう!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];products.map((product) = {    console.log("商品名は" + product.name + "です");    console.log("価格は" + product.price + "です");});これを実行してみると商品名はトマトです価格は150です商品名はにんじんです価格は120ですと表示できたと思います!それではこれを、商品名のリストと合計価格を表示するようにしてみましょう!少し複雑になりますが、こんな感じです!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];let productList = "";let totalPrice = 0;products.map((product) = {    productList += product.name + "\n";    totalPrice += product.price;});console.log("商品リスト\n" + productList);console.log("合計価格\n" + totalPrice + "円");javascriptでは、+=と書くと対象の変数の値に追加するという書き方ができます。これを実行してみると商品リストトマトにんじん 合計価格270円と表示されたと思います。こんな感じで、オブジェクトを使うことでデータをひとまとめに管理し、わかりやすいコードを書くことができます!今回はjavascriptでのオブジェクトの使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

超便利なJavascriptの配列処理まとめ【初心者向け】

こんにちは!エンジニアのますみです!本日は超便利なJavascriptの配列処理について書いていきます。Javascriptの配列にはすごく簡単にやりたい処理ができるような書き方がたくさんあるんです!目次 map | 全ての値に対して処理を行う filter | 条件に合うものを抽出する find | 条件に一致する一つの値を見つける every | 配列の中身がすべて条件に当てはまるか reduce | 配列の値の合計などを求める まとめそれでは早速超便利なJavascriptの配列処理を見ていきましょう!map | 全ての値に対して処理を行うconst prices = [100, 200, 300];const taxIncludePrices = prices.map(p = p * 1.1);console.log(taxIncludePrices);配列の中身すべてに処理を行う際はmapを使うことができます。配列名.map(配列の値 =処理)と書くことができます。上の例では、価格をまとめた配列の値すべての消費税込み価格を計算し、taxIncludePricesに定義しています。もっと複雑な処理を行いたい場合はconst prices = [100, 200, 300];const taxIncludePrices = prices.map(p = { // 複雑な処理 return p * 1.1;});console.log(taxIncludePrices);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがtaxIncludePricesに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst prices = [100, 200, 300];const taxIncludePrices = prices.map((p, i) = { console.log(i + 1 + "個目の価格を処理しています。") return p * 1.1;});console.log(taxIncludePrices);このように配列名.map((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値すべてに共通した処理を行いたいときはmap関数を使うとよいです。filter | 条件に合うものを抽出するconst ages = [19, 29, 13, 44];const minors = ages.filter(a = a 20);console.log(minors);配列から条件に当てはまる値のみに絞り込みをする際にはfilterを使うことができます。配列名.filter(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列の中から、未成年のみをminorsに定義しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minors = ages.filter(a = { // 複雑な処理 return a 20;});console.log(minors);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがminorsに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minors = ages.filter((a, i) = { if(i !== 0){ return a 20; };});console.log(minors);このように配列名.filter((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、filter関数を使うとよいです。find | 条件に一致する一つの値を見つけるconst ages = [19, 29, 13, 44];const minor = ages.find(a = a === 19);console.log(minor);配列から条件に一致する値を見つけるにはfindを使うことができます。配列名.find(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列の中から、19のみをminorに定義しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minor = ages.find(a = { // 複雑な処理 return a === 19;});console.log(minor);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがminorに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minor = ages.find((a, i) = { if(i !== 0){ return a 19; };});console.log(minor);このように配列名.find((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、find関数を使うとよいです。every | 配列の中身がすべて条件に当てはまるかconst ages = [19, 29, 13, 44];const isMinor = ages.every(a = a 20);console.log(isMinor); // false配列の値がすべて条件に一致するかを検証するにはeveryを使うことができます。配列名.every(配列の値 = 条件)と書くことができます。上の例では、年齢をまとめた配列が、すべて未成年かどうかを検証しています。もっと複雑な処理を行いたい場合はconst ages = [19, 29, 13, 44];const minor = ages.every(a = { // 複雑な処理 return a 20;});console.log(minor);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないと強制的にfalseがminorに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst ages = [19, 29, 13, 44];const minor = ages.find((a, i) = { if(i !== 0){ return a 19; };});console.log(minor);このように配列名.every((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値から絞り込みを行いたいときは、find関数を使うとよいです。reduce | 配列の値の合計などを求めるconst prices = [100, 200, 300];const total = prices.reduce((sum, p) = sum + p);console.log(total);配列の中身すべての合計などを求めるはreduceを使うことができます。配列名.map((合計を格納しておく変数, 配列の値)= 処理)と書くことができます。上の例では、価格をすべて合計した値をtotalに定義しています。もっと複雑な処理を行いたい場合はconst prices = [100, 200, 300];const total = prices.reduce((sum, p) = { // 複雑な処理 return sum + p;});console.log(total);このように{}で処理を囲うことで、数行にわたる処理を書くことができます。この書き方をする際は、returnを使わないとundefinedがsumに代入されてしまうため、注意してください。さらに、今配列の何番目の要素かを示すインデックスを使いたい場合にはconst prices = [100, 200, 300];const total = prices.reduce((sum, p, i) = { console.log(i + "個目の値を処理しています。"); // 複雑な処理 return sum + p;});console.log(total);このように配列名.reduce((配列の値,インデックス) = 処理)と書くことができます。このように配列内の値の合計などを求めるときにはreduce関数を使うとよいです。まとめ今回は超便利なJavascriptの配列処理についてお話ししました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月20日

Read More

スキルアップできるJavascript変数の知識【初心者向け】

こんにちは!エンジニアのますみです!本日は誰も教えてくれないスキルアップできるJavascript変数の知識についてお話していきます。私がプログラミング初心者の頃に知りたかったことを書いていきます!テーマ プログラミング初心者の方が、現場で使える知識を学べる内容。 ネット上だけではなかなか教えてもらえない本当に大切なポイントがわかる内容まず、学習する言語にJavascriptを選んだあなた、素晴らしいです!JavascriptはWebサイトの目に見えるデザイン面、裏側で動いているシステムにも活用できる万能な言語ですので、学習することで就職、転職の際に広い選択肢を持つことができます!目次 変数名はしっかり考えて決める やってはいけない例1,変数名を無意味な名前にしてしまう やってはいけない例2,変数名が具体的でない むやみに再代入しない 変数名と関係のない値を代入してしまう 再代入によって後から値が使えなくなってしまう 本当に変数にする必要ある? 変数を再代入することに疑問を持つ 変数にするべきケース スキルアップするための変数の考え方 まとめそれではさっそく、私がプログラミング初心者の頃に知りたかったスキルアップできるJavascript変数の知識を見ていきましょう!変数名はしっかり考えて決める変数は値を格納しておける箱のようなもので、定義しておけば後から値をとりだして使うことができます。let price = 1000;console.log(price); // 1000と出力できるこのとき、変数名は自分で考えて決めるのですが、適当に決めていませんか?やってはいけない例 1、変数名を無意味な名前にしてしまう悪い例let a = 100;let b = "トマト";let c = 5;この例のダメなポイントは、変数名から何の値が中に入っているか想像できないところです。変数名は中身が容易に想像できる名前を付けてあげましょう。修正後let price = 100;let name = "トマト";let count = 5;こうすることで、変数の中に何が入っているのか簡単に想像できるようになりましたね!やってはいけない例 2、変数名が具体的でない悪い例let price_1 = 150;let price_2 = 100;let price_3 = 120;この例では、価格が入っていることがわかる変数名ですが、何の価格なのかがわかりません。具体的な変数名を付けて、なるべくナンバリングすることは避けましょう。修正後let tomatoPrice = 150;let bananaPrice = 100;let applePrice = 120;また、そもそもこのような定義のやり方でいいのか、この変数は何に使うためなのかを考えて、配列やオブジェクトを適切に使うのも大切です。むやみに再代入しない変数は値を書き換えることができますが、むやみに再代入を行うと読みづらいコードを書いてしまう原因になります。変数名と関係のない値を代入してしまう悪い例let price = 100;price = "トマト";この例では、せっかくわかりやすくpriceという名前で価格を入れておく変数を作ったのに、後から価格でない値を入れてしまっています。修正後let price = 100;let name = "トマト";このようにむやみに再代入せずに、値の役割ごとに変数を定義していきましょう。再代入によって後から値が使えなくなってしまう悪い例let price = 100;price = 100 * 1.1;この例では消費税の計算をしてpriceに再代入しています。一見やってもよさそうですが、後から税抜き価格を使いたいタイミングがでてくるかもしれません。priceの値は既に上書きされてしまっているので、税抜き価格を取得するには消費税率を使って計算をしなければいけません。let price = 100;price = 100 * 1.1; // 税込み価格price = price / 1.1; // 税抜き価格このようなコードの書き方は、ミスを引き起こしやすく、するべきではありません。修正後let price = 100;let priceIncludeTax = price * 1.1;このように書くことで、後から税抜き価格を使いたくなったタイミングでも、priceIncludeTaxを呼び出せば税抜き価格を使うことができます。本当に変数にする必要ある?Javascriptには変数と定数という概念があり、変数は上書き可能、定数は上書きができないという性質があります。let price = 100; // 変数、上書き可能const tax = 1.1; // 定数、上書きできない変数を再代入することに疑問をもつ実は現場では変数を使うことはまれで、ほとんど定数でプログラムを書きます。書いているプログラムに変数が出てきたら、処理のやり方が不適切なケースの方が多いです。変数にするべきケース例えば、数値の配列をループして、中身の値からインデックスを引いた値の合計が欲しい場合には変数を使うことができます。例がめちゃくちゃですみません...それくらいに変数を使う機会は少ないんです...const numbers = [10, 15, 20]; // 定数を使うlet sum = 0; // 変数を使うnumbers.map((num, index) = { sum += num - index;});console.log(sum);仮に単純に合計を求めたいだけであれば、Javascriptにはreduceというメゾッドがあり、それを使えばいいようになっています。const numbers = [10, 15, 20];const total = numbers.reduce(function(sum, num){ return sum + num;}, 0);console.log(total);スキルアップするための変数の考え方変数を使う際の注意するポイントを書いていきましたが、共通して大切な考え方は 誰が見てもわかるように 何年後の自分が見てもわかるように上記のポイントを意識することです!現場では複数人で一つのプログラムを書いたり、何年も後にプログラムを修正したりする機会があります。その為、 この書き方だとこんなミスが起こりそうだな... 他の人が見たときにわかりやすいかな...といったことを考えながら書いていくことが大切です。まとめ 変数名は中身が何か誰でもわかるようにしっかり考える むやみに再代入せず、その値の意味をもつ変数をそのつど作ることをまず考える そもそも定数を使ったほうがいいケースがほとんどということで、プログラミング初心者の方向けにスキルアップできるJavascript変数の知識について書いてみました。質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月19日

Read More

【javascript入門】関数を使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptで関数を使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!関数ってなに?関数は複数の処理をまとめて実行するためのブロックです。同じ処理を何度も実行する必要がある場合や、大規模なプログラムを管理するために役立ちます!javascriptで関数を使う方法javascriptではこのように書くことで関数を定義できます!function example(){// ここに処理を書く}例の関数は、example() と書くことで処理を使いまわすことができます!function example(){ console.log(処理2);}console.log(処理1);example();console.log(処理3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この例ではいまいち感じがつかみづらいと思うので、引数、戻り値という概念も覚えていきましょう!引数ってなに?関数は値を受け取って、その値に対して処理を行うことができます。function example(count){ console.log(処理 + count);}先ほどの関数をこのように書き換えて、関数を呼び出すときにexample(1)というようにかっこの中に値を書くことで、関数に値を処理してもらうことができます。function example(count){ console.log(処理 + count);}example(1);example(2);example(3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この時に関数が受け取る値を引数(ひきすう)と言いますfunction example(count これを引数という){ console.log(処理 + count);}戻り値ってなに?関数はreturn 値と書くことで、関数を呼び出した箇所に値を返すことができますfunction example(count){ return count + 1;}この例では受け取ったcountに1を足してreturnで値を返しています。function example(count){ return count + 1;}console.log(example(1));console.log(example(2));console.log(example(3));これを実行すると234と出力されたと思います!この時に関数が返す値を戻り値(もどりち)と言いますfunction example(count){ return count + 1 戻り値;}関数を使うメリット関数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!使うメリットは変数と似ていますね!例えばこのようなソースコードがあったとしますlet price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);この例ではオブジェクトという書き方を使っています。オブジェクトについて知りたい方はこちらの記事をご覧ください!例のソースコードを実行すると1000円2000円150円と出力されたと思います。例えば『価格yenという書き方に変えよう』という変更点があったときに、上記のソースコードだと3か所を修正することになります。let price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);これがもしも数百行にわたる規模のソースコードだった時には変更点が何十か所と出てきてしまい、大変だし人為的ミスも起こりやすくなっていまいます...そこで関数を使った書き方をしておくとfunction formatPrice(price){ return price + 円;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));変更点はこの一か所で済みますfunction formatPrice(price){ return price + 円;}このように書き換えることでfunction formatPrice(price){ return price + yen;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));一か所の変更点ですべての出力を修正することができました!今回はjavascriptでの関数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月15日

Read More

【javascript入門】配列を使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptで配列を使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながら変数の使い方を覚えてみてくださいね!配列ってなに?変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!javascriptで配列を使う方法配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、javsacriptの場合は、以下のように配列を定義することができます!const prices = [ 1000, 1200, 2000, 500 ];これは4種類の商品の価格を一つの配列に定義した例ですね、この配列を使ってどんな処理ができるのかを紹介していきます!配列を使うメリット配列をうまく使うことで、複数のデータに一括で処理を行うことに強いプログラムを書くことができます!例えば、上記のpricesという配列に定義した価格をすべて表示してみましょう!配列内の値すべてに処理を実行するには、javascriptのmapという機能を使っていきます。prices.map((price) = {    // ここに処理を書く!});ではすべての価格を表示してみましょう!const prices = [ 1000, 1200, 2000, 500 ];prices.map((price) = {    console.log(price);});こうすると、配列に格納されている価格を順番に表示することができます!これだけでは味気ないので、価格の後に円と表示してみましょう! const prices = [ 1000, 1200, 2000, 500 ];prices.map((price) = {    console.log(price + "円");});これで1000円という形式で価格を表示することができました!さらに消費税を含めた価格を表示するようにしてみましょう! const prices = [ 1000, 1200, 2000, 500 ];prices.map((price) = {    console.log(price * 1.1 + "円");});こんな感じで、配列を使うことでプログラミング言語に備わっている便利な機能を使える上、変更に強い良いソースコードが書けるようになります!今回はjavascriptでの配列の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月13日

Read More

【プログラミング入門】最初に覚えておきたいプログラミング用語!

こんにちは!プログラマーのますみです!プログラミングを学習したての頃は、調べることがとにかく多い...欲しい答えにたどり着くには的確な検索キーワードを打ち込むべきですが、的確なキーワードすら知らずにわたしはとても苦労した覚えがあります...この記事を読めば学習がはかどる!そんな内容になるように頑張って書いていきます!この記事を書いた理由わたしがプログラミング言語を学習したての頃、わからないことを検索しようとしてもなんと検索したらよいのかわからずに時間がかかってしまうことがよくありました...調べものをするときに役立つ用語をまとめたサイトがあったらいいのに...と思っていたので、プログラミングを学習したての方がわたしと同じことで困らないためにこの記事を書きました!今回取り上げていきたい用語はほぼすべてのプログラミング言語に共通する用語なので、どの言語を学習していても役に立つ内容にしていきますので是非最後まで読んでみてください! 変数 定数 配列 オブジェクト最初に覚えておきたい用語①『変数』変数とは、データを格納するための箱のようなものです! プログラムの中で値を格納したり、計算したりするために使用されます。 変数には、値を代入することができ、その値は後で変更することができます。 変数は、その名前を用いてプログラム中で参照されます。例えば、javsacriptの場合は、以下のように変数を定義することができます!let price = 1000;こうしておくことで、プログラムのあちこちでprice呼び出して、priceに設定した値を使って計算したり、表示したりすることができます!変数を使うメリットは、人為的ミスを減らす、変更があった時に楽という点ですね!例えば変数を使わない場合console.log("商品の価格は" + 1000 + "円です");console.log("商品は二つで" + 1000 * 2 + "円です");と書くことになりますね大規模なプログラムを書く場合、これが何百行、何千行になったりするのですが、そうすると どこかで1000という数字を書き間違えてしまったり、『やっぱり1000じゃなくて1200で!』となった時に何千行のプログラムから1000という数字を見つけ出し、書き直すということをしなくてはいけません...変数を使って書いておけば、最初に定義したlet price = 1000;の部分さえ合っていればよいので、人為的ミスを減らすことができるし変更があってもこの一行だけ書き直せばいいわけですということで、使いまわす値、変更する可能性がある値は変数に格納しておくと便利!というわけですね!最初に覚えておきたい用語②『定数』定数とは、書き方は変数と似ていますが、変更することのできない値をいいます!例えば、javsacriptの場合は、以下のように定数を定義することができます!const PI = 3.14;この例では円周率をPIという定数に格納しています。円周率はプログラムの途中で別の値に変更することは考えにくいため、変更できないように定義して人為的ミスを減らすことができます!最初に覚えておきたい用語③『配列』配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、javsacriptの場合は、以下のように配列を定義することができます!const prices = [ 1000, 1200, 1500, 500 ];上記の例では商品の価格を配列に定義しました。さらに学習をしていくと、配列はプログラム言語ごとにさまざまな処理を行うことができることがわかってくると思います。例えばjavascriptの配列処理の機能で、上記のpricesの合計を計算してみるとconst prices = [ 1000, 1200, 1500, 500 ];let total = result.reduce(function(sum, e){  return sum + e;}, 0);という感じで価格の合計を計算することができます!最初に覚えておきたい用語④『オブジェクト』オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、javascriptの場合は、以下のようにオブジェクトを定義することができます!const product = {    name : "トマト",    price : 150};野菜って高いよね~...現場で扱うデータは、例のように複数の情報をひとまとめで扱うことが多いのでオブジェクトの扱いには慣れておくことが必須ですね!今回は最初に覚えておきたいプログラミング用語を紹介しました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月13日

Read More

【javascript入門】変数を使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptで変数を使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!見出し1変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!javascriptで変数を使う方法javascriptではこのように書くことで変数を定義できます!let price = 1000;こうしておくことで、priceに格納した値を使いまわして計算や表示等の処理を行うことができます!例えば消費税を計算して表示するのであればlet price = 1000;console.log(price * 1.1);と書くと、消費税込みの価格を表示することができます。さらに二つ分の価格を表示したい場合はlet price = 1000;console.log(price * 1.1 * 2);とすると、二つ分の消費税込みの価格を表示することができます。さらにコードをわかりやすく書いてみましょう!まず消費税率をtaxに定義します!消費税計算済みの価格を別の変数includeTaxに定義して、合計価格はtotalPriceに定義してみましょう!let price = 1000;let tax = 1.1;let includeTax = price * tax;let totalPrice = includeTax * 2;console.log(totalPrice);このように、計算した値をそのまま変数に定義することもできます!また、文字を変数に定義することもできます!let prefix = "この商品の価格は";let suffix = "円です";javascriptのコード内で文字を使うときは、(ダブルクオーテーション)か、(シングルクオーテーション)で囲みましょう!文字は足し算を使って結合することが可能なのでlet price = 1000;let prefix = "この商品の価格は";let suffix = "円です";let includeTax = price * 1.1;let totalPrice = includeTax * 2;console.log(prefix + totalPrice + suffix);と書くと、この商品の価格は2200円ですと表示することができます!変数を使うメリット変数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!もしpriceを変数を使わずに書いた場合console.log("この商品の価格は" + 1100 + "円です");こんな感じになりますね!ぱっと見行数が減ってすっきり見えてよさげですね!ですが実際のシステムでは一つの価格の商品しか扱わないのは考えづらいので、いろんな商品の価格を表示する必要があったりしますするとこんな感じになりますconsole.log("この商品の価格は" + 1100 + "円です");console.log("この商品の価格は" + 2200 + "円です");console.log("この商品の価格は" + 1650 + "円です");console.log("この商品の価格は" + 880 + "円です");console.log("この商品の価格は" + 1100 + "円です");console.log("この商品の価格は" + 1320 + "円です");さて、もしこれで消費税率が変わったらどうしましょう...6箇所すべての価格を変更する必要がありますね...さらに『この商品の価格は1000円ですからこの商品の価格は1000円です!という書き方に変えよう!』となったときにはさらに6箇所変更をしないといけないわけです...console.log(この商品の価格は + 1100 + 円です!);console.log(この商品の価格は + 2200 + 円です!);console.log(この商品の価格は + 1650 + 円です!);console.log(この商品の価格は + 880 + 円です!);console.log(この商品の価格は + 1100 + 円です!);console.log(この商品の価格は + 1320 + 円です!);めんどくさいし、もしこれが100行もあればどこかで書き間違えてしまいそうですね...これを変数を使って書いておけばlet tax = 1.1;let prefix = "この商品の価格は";let suffix = "円です";この二か所だけ変更すれば済みますlet tax = 1.1;let prefix = この商品の価格は;let suffix = 円です!;こんな感じで、もし変更があった時に管理しやすいように考えて変数を定義してくことが大切なポイントになります!今回はjavascriptでの変数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月13日

Read More

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!