【これからプログラミングを始める方へ!】はじめてのプログラミング言語の選び方! - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
【これからプログラミングを始める方へ!】はじめてのプログラミング言語の選び方!のサムネイル

【これからプログラミングを始める方へ!】はじめてのプログラミング言語の選び方!

2023年04月13日

このエントリーをはてなブックマークに追加

こんにちは!プログラマーのますみです!

今回はこれからプログラミングを始める方が学習するプログラミング言語を選ぶポイントを解説します!

 

この記事を書いた理由

わたしはプログラミングを独学で始めたので、最初はネットで調べて、自分がやりたいことができる言語は何なのかを調べて、やりたいことができる言語を学習しようと思いました。

ですが、情報が多すぎて訳がわからないし、難しい用語も出てくるし、そんなこんなで学習中も『本当にこの言語で合ってたのかな...』と不安になっていました...

この記事を読んだ人が、わたしと同じ悩みを持つ人が少しでも少なくなることを願って書くことにしました!

 

まず、プログラミング言語はたくさん種類があるのでどの言語を学習するか決める必要があります。

わたしが学習する言語を選んだ時に特に不安になったポイントは、

  • 選んだ言語は本当にやりたいことができるのか?

というポイントでした。

だって調べても色んな人が

『これがやりたいならこの言語がおすすめ』

『いや、その言語はダメ、今は〇〇』

『〇〇を〇〇するなら〇〇だけど、〇〇は〇〇だから〇〇する必要があって...』

といった感じで言ってることが人によって違うんだもん...

あ今となっては、プログラミング言語もバージョンアップをするし、言語の流行り廃りもあったり、いろんな要因を考えて言語を選ぶ必要があることがわかってきたので、言いたいことはわかるんだけど...

 

ますみ

こっちはまだ何も知らないんです!!!

 

って感じですよね~

ということで、細かい要因はさておき、以下のポイントで最初に学ぶといい言語をおススメしていこうと思います!

  • 学習を始めやすい言語かどうか?
  • やりたいことができるか?
  • 仕事につながりやすいかどうか?

この記事ではプログラミング初心者の方にわかりやすいように専門用語は使わずに解説していきますので、既にプログラミングに成熟した方が読んだら『ん?』となるかもしれませんが、

あなた達に向けて書いておりませんので...!

といったスタンスでお届けしていきますのでご了承くださいませ...

 

1. 学習を始めやすい言語かどうか?

まず、学習を始めやすい言語かどうか?についてですが、プログラミング初心者がもっとも挫折しやすいポイントで、プログラムを書くまで進められないというのがあります...

もう少し詳しくお話しすると、ほとんどのプログラミング言語がパソコンに『プログラミング言語を書いて、それを実行するソフト』みたいなものをインストールしてセットアップする必要があるんですよね

そのセットアップする作業がすごく難しくて、単純にソフトをインストールして使う...ような感覚ではできないことが殆どなんです。

ざっくりセットアップする手順を紹介すると

 

  • プログラミング言語をセットアップするのをセットアップするソフトをセットアップする
  • プログラミング言語をセットアップするソフトをセットアップするソフトでプログラミング言語をセットアップする

 

ちょっと待ってもうよくわかんない!

といった感じでこの段階で挫折してしまう人が殆どです...

 

ですが、プログラミング言語によっては先ほど書いた手順を踏まなくても、インターネット上でプログラムを書いて実行できる言語が存在するので、わたしはその言語から学習するのが良いと思います!

例えばこれ

JSFiddle

javascriptという言語をインターネット上で実行できます。

左下のJavaScriptうんぬんかんぬんとかいてあるところに

const tax = 0.1;
let price = 1000;
console.log(price + price * tax);

 

と書いて、左上にあるRunボタンをクリックすると、右下のConsole (beta)と書いてあるところをクリックすると、1100とでてきていると思います。

上のプログラムは1,000円の商品に消費税を足して出力するといったコードです

let price = 1000;

1000の部分を好きな数字に書き換えると、その価格に消費税を足した数字を出力することができます!

 


3v4l.org

こっちはPHPという言語をインターネット上で実行できるサイトです!

$tax = 0.1;
$price = 1000;
echo($price + $price * $tax);

 と書いて、eval();ボタンをクリックすると、1100と出力されます!

まずはこういった簡単にプログラミング言語を書いて実行できるサイトを使って、実際にプログラミング言語を動かしながら覚えていくのがわたしはおススメのやり方です!

 

 つぎはやりたいことができるか?についてです。

 

2. やりたいことができるか?

例えばwebサイトを作りたいのであれば、

 

  • html
  • css
  • javascript

 

の三つの言語を学習してください!

いきなり三つの言語を学習しないといけないのは大変ですが、この言語はインターネット上に情報がたくさんあるので、学習するのが簡単な言語になります!

先ほど紹介したJSFiddleで、html、css、javascriptをすべて書いて実行できるので、是非使ってみてください!

 

そしてwebシステムを作りたいのであれば

  • html
  • css
  • javascript
  • php

を学習してください!

webシステムはwebサイトありきなので、どうしてもhtml、css、javascriptの三つは学習する必要があります。

そして、システムとなるとより複雑な処理をプログラムで行う必要が出てくるのですが、その複雑な処理を行うのに必要な言語がphpです

phpは先ほど紹介した3v4l.orgで簡単に動かしてみることができます!

そもそもwebサイトとwebシステムの違いがわかんないよ

はい、ごもっともです。

この記事で言うwebサイトとwebシステムの違いですが、

  • 何かしらのデータを保存する必要があるかどうか

を基準に使い分けています。

例えばブログを作ろうとしたら、ブログ記事のタイトル、文章などを保存して、それを表示するという流れになりますが、保存、保存したデータのロードphpという言語が必要になってきます。

なので、何かしらのデータを保存するかどうかでphpを学習する必要があるかどうかを判断してみてください!

 

スマホアプリを作りたいという方は、

  • swift、もしくはkotlin

を学習してください!

もしくはと書いたのは、iPhoneのアプリかAndroidのアプリかで言語が変わってくるからです!

iPhoneのアプリを作りたい方はswiftを学習してください!

Androidのアプリを作りたい方はkotlinを学習してください!

どちらのアプリも一気に作れるよ!という言語もあることにはあるんだけど、プログラミング初心者だと挫折ポイントがたくさんあるので、ここでは紹介しません...

 

3. 仕事につながりやすいかどうか

最後に仕事につながりやすいかどうかですが、これは結局そのプログラミング言語を使用している会社が多いかどうかで選ぶのが良いと思います!

ネットで調べていると、年収が高い言語ランキング!とかいろいろあるんだけど、プログラミング未経験の人がその会社にいきなり採用してもらえますか?って話なんですよね...

やっぱり高い年収を払うとなると会社は経験豊富な優秀なプログラマーを雇いたいわけなので、未経験であれば、まずは広く使われている言語から選ぶのが最適解なんですよね...

わたしはphpを勉強して、未経験から採用してもらうことができたので、参考までに!

 

長くなりましたが、わたしが未経験からプログラミングを勉強して会社に採用してもらうことができた経験から、これからプログラミングを始める方に向けたメッセージでした!

プログラミングの学習は根気も時間も必要ですが、是非頑張ってみてください!応援してます!

 

では次の記事もお楽しみに~

よかったらSNSシェアお願いします!

facebookで共有する このエントリーをはてなブックマークに追加
【これからプログラミングを始める方へ!】はじめてのプログラミング言語の選び方!のサムネイル

この記事を書いた人

ますみ

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

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

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

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

ますみ

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

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

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

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

ますみ

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

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

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

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

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


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

おすすめ記事


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

こんにちは!プログラマーのますみです!プログラミングを学習したての頃は、調べることがとにかく多い...欲しい答えにたどり着くには的確な検索キーワードを打ち込むべきですが、的確なキーワードすら知らずにわたしはとても苦労した覚えがあります...この記事を読めば学習がはかどる!そんな内容になるように頑張って書いていきます!この記事を書いた理由わたしがプログラミング言語を学習したての頃、わからないことを検索しようとしてもなんと検索したらよいのかわからずに時間がかかってしまうことがよくありました...調べものをするときに役立つ用語をまとめたサイトがあったらいいのに...と思っていたので、プログラミングを学習したての方がわたしと同じことで困らないためにこの記事を書きました!今回取り上げていきたい用語はほぼすべてのプログラミング言語に共通する用語なので、どの言語を学習していても役に立つ内容にしていきますので是非最後まで読んでみてください! 変数 定数 配列 オブジェクト最初に覚えておきたい用語①『変数』変数とは、データを格納するための箱のようなものです! プログラムの中で値を格納したり、計算したりするために使用されます。 変数には、値を代入することができ、その値は後で変更することができます。 変数は、その名前を用いてプログラム中で参照されます。例えば、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それでは次の投稿もお楽しみに!

Read More

【プログラミング入門】まず知っておきたいプログラミングの考え方

こんにちは!プログラマーのますみです!わたしがプログラミングを学習し始めたころに知っておきたかった、プログラミングの基本的な考え方をお話ししていこうと思います! そもそもプログラム言語ってどうやって動いているの? プログラムを書くときに疑問に思った制限 抽象化というキーワードそもそもプログラム言語ってどうやって動いているの?まず、大前提としてコンピュータは機械語しか理解できません。ご存じの方も多いと思いますが、機械語は0と1のみの文字で表すものですね!例えば1を機械語で表すと00000001と書く必要があります長い!それはさておき、つまりコンピュータはプログラミング言語を理解できません!じゃあどうやってプログラミング言語がコンピュータで動くかというとプログラミング言語を機械語に変換してプログラムを動かしているんです。この変換する作業をコンパイルと言います!そして、コンピュータがプログラミング言語を理解できるようにするには人間が設定をしてあげる必要があります。この設定する作業を環境構築と言います!ということでコンパイルプログラミング言語を機械語に変換する環境構築コンピュータがプログラミング言語を理解できるように設定するの二つの用語、とっても重要なので是非覚えてください!プログラムを書くときに疑問に思った制限プログラミング言語の制限について、もう少しかみ砕いて言うと、例えば変数、定数という概念があるのですが、変数は後から変更可能、定数は後から変更できないという制約があったりしますもう少し学習を進めていくと、こんな感じで制約があることがものすごくたくさんわかってくると思います。なんで?ってわたしは思いましただって変更可能なほうが便利そうじゃん!ってプログラミング言語を学習したての方は同じことを思った人も多いと思いますこの制約がある理由なんですがプログラミングは何でもできるしどんな書き方でもできてしまう故に恐ろしいことが起こるからなんです...これには バグ 複数人でプログラムを書くといったキーワードが絡んでくるんですが、まずバグについては制約をつけることでバグを減らすことができるからなんですよねバグの原因はほぼ100%、プログラムを書いた人のミスなのですが、これを上書きしてはいけないという制約をつけておけば人為的ミスを減らすことができるんです!例えばconst tax = 0.1;let price = 1000;console.log(price + price * tax);price = 1200;console.log(price + price * tax);これはjavascriptのソースコードで、priceに消費税を足して表示して、priceを上書きしてまた消費税を足して表示するものですねtax(消費税率)は定数、priceは変数になっています。priceは別の商品の価格に置き換えることがあるかもしれませんが、tax(消費税率)はどうでしょう?よっぽどtax(消費税率)は変更する必要がないはずですねそういったものは定数にしてしまって上書きできないようにした方が人為的ミスを減らすことができる!という理由から上書きできないという制約をつけたりします複数人でプログラムを書く時に制約があるメリットは、もう少し深く学習していくとこのフォルダ内にはこういうプログラムしか書いちゃダメとか、そういった制約に出会うことになると思います。これは複数人で同じプログラムを書く時に、共通したルールがあるとみんながわかりやすいし管理しやすい!というメリットがあるからですね!この制約はプログラミング言語(初心者向けなのでこう書きましたが、厳密には主にフレームワークといったものに制約があります...)、会社独自のルールがあったりしますね!抽象化というキーワード調べものをしていると時々抽象化というキーワードがでてきますソースコードを抽象化してどうたらこーたらみたいな感じで抽象という言葉は日常会話では『だいたい』みたいなニュアンスで使われることが多くないですか?わたしはその意味でとらえていたので『ソースコードをだいたいにしてどうたらこーたら』ってなに?って思っていました...そこでちゃんと調べてみると、抽象って言葉には物事の共通点を抜き出すといった意味があるらしく、なるほど!と思いました!つまりプログラミングでよく使われる抽象化というのをざっくり言えば同じ処理をしている部分をうまいこと使いまわせるようにプログラムを書こう!といった言い回しなんですね!ということで、わたしがプログラミングを学習し始めたころに知っておきたかったプログラミングの基本的な考え方をお話ししました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

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での変数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

Read More

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

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

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での配列の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

Read More

人気記事


簡単に管理画面を作れるlaravel-adminのセットアップ方法を解説

こんにちは!エンジニアのますみです!本日はlaravel-adminのセットアップのやり方を解説します!laravel-adminとは PHPフレームワーク『Laravel』用の管理画面用ライブラリ 管理人用テーブル、管理画面のレイアウト、CRUDが一瞬で作れる リレーションにも対応した便利なフォームが既に準備されているlaravel-adminの公式ドキュメントはこちら目次 インストール コマンドで管理人のアカウントを作成する Modelから管理画面を作成する 管理画面にログインしてルーティングの設定を完了するインストールcomposerを使ってインストールしますcomposer require encore/laravel-admin:1.*インストールが完了したら以下のコマンドを実行しますphp artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"configディレクトリ内にadmin.phpが作成されます。admin.phpを編集して管理画面に関する様々な設定を行うことができます。その後、以下のコマンドを実行してセットアップを完了しますphp artisan admin:installこのコマンドを実行するとapp/Adminapp/Admin/Controllers/HomeController.php app/Admin/Controllers/AuthController.php app/Admin/Controllers/ExampleController.phpapp/Admin/bootstrap.phpapp/Admin/routes.phpが作成されます。特に編集することが多いのはapp/Admin/routes.phpです。このファイルを編集してテーブルごとのルーティングを定義します。app/Admin/Controllers/ExampleController.phpはサンプルとして作成されるだけなので消してしまっても良いです。コマンドで管理人のアカウントを作成する以下のコマンドを実行すると管理人アカウントを作成できます。php artisan admin:create順番にユーザーネーム、パスワード、名前を聞かれるので入力していきます。 Please enter a username to login: ますみ Please enter a password to login: Please enter a name to display: ますみこのように表示されたら完了です。User [ますみ] created successfully.http://localhost:8000/adminにアクセスして、先ほど設定したusernameとpasswordを入力してログインできます。管理画面ダッシュボードはこんな感じです。Modelから管理画面を作成するlarave-adminはadmin:makeコマンドを使用して管理画面を作成できます。php artisan admin:make 作成するコントローラー名 --model=モデルのパス例えばこのようなモデルがあったなら?phpnamespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;use Illuminate\Database\Eloquent\Model;class Blog extends Model{ use HasFactory; protected $fillable = [ 'title', 'text' ];}こんな感じでBlogモデルの管理画面を作成できます。php artisan admin:make BlogController --model=App\\Models\\Bloglaravel-adminは自動でテーブルのカラムを読み込み管理画面を設定してくれますが、マイグレーションを行う前に上記のコマンドを実行してしまうと、空のコントローラーが作成されてしまいます。ターミナルには親切にapp/Admin/routes.phpにこのコードを追加してねと表示されると思います。INFO App\Admin\Controllers\BlogController [C:\Users\mashmy\laravel-admin\app/Admin/Controllers/BlogController.php] created successfully.Add the following route to app/Admin/routes.php: $router-resource('blogs', BlogController::class);app/Admin/routes.phpに上記のソースコードを追加しないと、作成したBlog用管理画面にアクセスできません。app/Admin/routes.php?phpuse Illuminate\Routing\Router;Admin::routes();Route::group([ 'prefix' = config('admin.route.prefix'), 'namespace' = config('admin.route.namespace'), 'middleware' = config('admin.route.middleware'), 'as' = config('admin.route.prefix') . '.',], function (Router $router) { $router-get('/', 'HomeController@index')-name('home'); $router-resource('blogs', BlogController::class);});このようにルーティングの設定をします。コントローラーを作成するたびにapp/Admin/routes.phpを編集してルーティングの設定を行っていきます。作成されたコントローラーはこんな感じで、カラムを自動で読み込みセットアップしてくれています。?phpnamespace App\Admin\Controllers;use App\Models\Blog;use Encore\Admin\Controllers\AdminController;use Encore\Admin\Form;use Encore\Admin\Grid;use Encore\Admin\Show;class BlogController extends AdminController{ /** * Title for current resource. * * @var string */ protected $title = 'Blog'; /** * Make a grid builder. * * @return Grid */ protected function grid() { $grid = new Grid(new Blog()); $grid-column('id', __('Id')); $grid-column('title', __('Title')); $grid-column('text', __('Text')); $grid-column('created_at', __('Created at')); $grid-column('updated_at', __('Updated at')); return $grid; } /** * Make a show builder. * * @param mixed $id * @return Show */ protected function detail($id) { $show = new Show(Blog::findOrFail($id)); $show-field('id', __('Id')); $show-field('title', __('Title')); $show-field('text', __('Text')); $show-field('created_at', __('Created at')); $show-field('updated_at', __('Updated at')); return $show; } /** * Make a form builder. * * @return Form */ protected function form() { $form = new Form(new Blog()); $form-text('title', __('Title')); $form-textarea('text', __('Text')); return $form; }}このままではブログの管理画面にはアクセスできません。管理画面から作成した管理ページを表示するための設定を行う必要があります。管理画面にログインしてルーティングの設定を完了する管理画面にログインしたら画面左側のメニューからMenuをクリックします。表示された画面で先ほどコマンドで作成したBlog用管理画面へのルーティングを設定します。Parentはメニューのどこに表示するかを指定できます。ROOTにした場合は左側のメニューバーにそのまま表示されます。この状態で例えばAdminを設定すると、メニューバーのAdmin内のリストに追加されます。Titleは好きな名前で大丈夫ですが、URLはテーブル名を指定する必要があります。今回はParentにROOTを指定したので、メニューバーにアイコンが追加されました。作成されたアイコンをクリックまたはマウスカーソルを当てると、指定したタイトルのボタンが表示されます。今回はTitleはブログと指定したのでブログと表示されます。ボタンをクリックするとブログ用の管理画面にアクセスできました。右上のNewボタンをクリックすると編集画面にアクセスできます。編集画面は既にTitleとText用のフォームが自動で設定されています。素晴らしい...データを保存する処理も自動でやってくれているので、このまま編集してSubmitをクリックすれば入力したデータがデータベースに保存できます。おしまいこんな感じで簡単に管理画面のセットアップができました!Laravelの管理画面用ライブラリの中では有名なものだと思っているのですが、意外と記事が無かったので解説記事を書いてみました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

文字が一文字ずつ現れるアニメーションの作り方【HTML、CSS】

こんにちは!エンジニアのますみです!本日はCSSで作れる文字が一文字ずつ表れるアニメーションの作り方とサンプルを紹介します!目次 一文字ずつペラペラ現れるアニメーション 文字が下からスライドして現れる 文字が上からふわっと降ってくる 一文字ずつ横からスライドして現れるそれではさっそく見ていきましょう一文字ずつペラペラ現れるアニメーションS a m p l e T e x t再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: text-animation 0.8s forwards; transform: rotateY(90deg);}@keyframes text-animation { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); }}@keyframesはCSSでアニメーションを定義できるプロパティです。transformと:hoverや:focus等の疑似クラスの組み合わせでもアニメーションは作成可能ですが、@keyframesは より複雑なアニメーションが作れる マウスホバーやフォーカス等の操作に関係なくアニメーションをスタートできるといったメリットがあります。Sample Textという文字を一文字ずつspanで区切り、文字ごとにアニメーションをスタートするタイミングを変えることで順番に文字が現れるアニメーションを作ることができます。文字が下からスライドして現れる再生HTMLdiv class="container" span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(3rem);}@keyframes text-animation { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); }}基本的な部分は先ほどと同様、@keyframesとanimation-delayによるアニメーション開始時間の調整で作ることができます。親要素にoverflow : hiddenを指定して、文字が下の方にいる時に表示されないようにします。文字が上からふわっと降ってくる再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(-1rem); opacity: 0;}@keyframes text-animation { 0% { opacity: 0; transform: translateY(-1rem); } 100% { opacity: 1; transform: translateY(0rem); }}こちらのサンプルでは透明度を調整するopacityも追加しました。他のアニメーションにもopacityを追加するとふわっと現れるアニメーションになります。お好みでカスタマイズしてみてください。一文字ずつ横からスライドして現れる再生HTMLdiv span class='text'span style="animation-delay: 0s"S/span/span span class='text'span style="animation-delay: 0.2s"a/span/span span class='text'span style="animation-delay: 0.4s"m/span/span span class='text'span style="animation-delay: 0.6s"p/span/span span class='text'span style="animation-delay: 0.8s"l/span/span span class='text'span style="animation-delay: 1s"e/span/span span class='text'span style="animation-delay: 1.2s" /span/span span class='text'span style="animation-delay: 1.4s"T/span/span span class='text'span style="animation-delay: 1.6s"e/span/span span class='text'span style="animation-delay: 1.8s"x/span/span span class='text'span style="animation-delay: 2s"t/span/span/divCSS.text-container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; overflow: hidden;}.text span{ display: block; animation: llfsdij1-text-animation 0.8s forwards; transform: translateX(-2rem);}@keyframes text-animation { 0% { opacity: 0; transform: translateX(-1rem); } 100% { opacity: 1; transform: translateX(0rem); }}一文字ずつ横スライドして現れるように見せるには、HTMLも修正する必要があります。テキストをさらに一階層深い要素にし、テキストの親要素にoverflow : hiddenを指定してテキストが横から現れて見えるようにする必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

Laravelのページネーションを自分でデザインする

こんにちは!エンジニアのますみです!本日はLaravelのページネーションを自分でデザイン、カスタマイズする方法を解説します!目次 まずは普通に表示 Viewテンプレートを変更する アプリ全体のページネーション用Viewテンプレートを変更する 自作のページネーション用Viewテンプレートを編集する テンプレートを自分でデザインする際に重要なプロパティ一覧 $paginator-hasPages() $paginator-onFirstPage() $paginator-currentPage() $paginator-lastPage() $paginator-perPage() $paginator-total() $paginator-count() $paginator-firstItem() $paginator-lastItem() $paginator-hasMorePages() $paginator-nextPageUrl() $paginator-previousPageUrl() デフォルトのテンプレートをアレンジして使うまずは普通に表示div {{ $collection-paginate(24)-links() }}/divLaravelはデフォルトでtailwindcssのテンプレートを使用しています。とりあえず表示させたいのであればCDNをヘッダーに追加して確認してみてください。https://tailwindcss.com/head script src="https://cdn.tailwindcss.com"/script/headこんな感じで表示されたらOKです。Viewテンプレートを変更するlinks()のかっこの中にViewテンプレートのパスを指定します。resources/views/components/paginate.blade.phpにテンプレートを作成した場合はcomponents.paginateをかっこの中に書きます。div {{ $collection-paginate(24)-links('components.paginate') }}/divこれでページネーションのテンプレートが指定したbladeファイルに置き換わります。アプリ全体のページネーション用Viewテンプレートを変更する上の書き方は、bladeファイルごとにページネーション用Viewテンプレートを指定できます。もしページごとにページネーションのテンプレートを変える必要がなく、統一してもよいのであれば、app/Providers/AppServicePrivider.phpを編集してアプリ全体のページネーション用Viewテンプレートを変更しておきましょう。app/Providers/AppServicePrivider.php?phpnamespace App\Providers;use Illuminate\Pagination\Paginator; // 追加use Illuminate\Support\ServiceProvider;class AppServiceProvider extends ServiceProvider{ /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Paginator::defaultView('components.paginate'); // 追加 }}自作のページネーション用Viewテンプレートを編集するViewテンプレートには、ページ送りに関する情報が$paginaterに格納されて送られます。blade上で@dump($paginator)とするとプロパティを見ることができます。テンプレートを自分でデザインする際に重要なプロパティを解説します。テンプレートを自分でデザインする際に重要なプロパティ一覧$paginator-hasPages()コレクションの要素数がpaginate(数値)の数値以上あり、ページ送りをする必要があるかをbooleanで返します。基本的には1ページ目にすべてのデータを表示できたらページネーションボタンを表示する必要はないため、ページネーションボタンを表示するかどうかを判定するのに使えます。使用例@if ($paginator-hasPages()) {{-- ここにページネーションボタンを作成 --}}@endif$paginator-onFirstPage()現在のページが最初のページかどうかをbooleanで返します。最初のページにいる場合は、前のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if ($paginator-onFirstPage()) span戻る/span@else a href="{{ $paginator-previousPageUrl() }}"戻る/a@endif$paginator-currentPage()現在のページの番号を返します。使用例span{{ $paginator-currentPage() }}ページ目/span$paginator-lastPage()最後のページの番号を返します。使用例span{{$paginator-lastPage()}}ページ中{{ $paginator-currentPage() }}ページ目です/span$paginator-perPage()1ページあたりの表示件数を返します。使用例span{{$paginator-perPage()}}件ずつ表示/span$paginator-total()コレクションの総数を返します。使用例span全{{$paginator-total()}}件/span$paginator-count()現在のページに表示される要素数を返します。使用例span{{$paginator-count()}}件表示/span$paginator-firstItem()現在のページの最初の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-lastItem()現在のページの最後の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-hasMorePages()現在のページが最後のページではない場合、つまり次のページがある場合にtrueを返します。最後のページにいる場合は、次のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if($paginator-hasMorePage()) ​a href="{{ $paginator-nextPageUrl() }}"次へ/a@endif$paginator-nextPageUrl()次のページのURLを返します。使用例​a href="{{ $paginator-nextPageUrl() }}"次へ/a$paginator-previousPageUrl()前のページのURLを返します。使用例 a href="{{ $paginator-previousPageUrl() }}"戻る/aデフォルトのテンプレートをアレンジして使うphp artisan vendor:publish --tag=laravel-paginationこのコマンドを実行すると、resources/views/vendor/pagination/にLaravelのデフォルトのテンプレートが作成されます。resources/views/vendor/pagination/ default.blade.php simple-default.blade.php bootstrap-5.blade.php simple-bootstrap-5.blade.php bootstrap-4.blade.php simple-bootstrap-4.blade.php tailwind.blade.php simple-tailwind.blade.php semantic-ui.blade.php bulma.blade.php生成されたテンプレートは、既にページ数に応じたボタンの無効化判定などがされており、これを元にアレンジして使うのもおすすめです。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More