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

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます

【書けるからわかるCSS】:focusでインプットをおしゃれにする方法

こんにちは!エンジニアのますみです!本日は:focusを使ってinputをおしゃれにデザインする方法を解説します!:focusは要素を選択したときに適用されるスタイルを作れるもので、input以外にもtextareaなどにも使えます。使う機会が多いので是非覚えてみてください!この記事では:focusの使い方をサンプル付で解説します。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ :focusの使い方を覚えて自由なデザインを作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル テキストエリアにも使える :focusを実際に書いてみよう 1.HTMLを作成 2.通常時のデザインを決める 3.:focusを使う 4.transitionを指定してアニメーションにするそれではさっそく見ていきましょうサンプル上のインプットをクリックすると青い影がふわっと現れます。:focusはその名の通り対象の要素にフォーカスしている時に適用されるスタイルです。CSS.input{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.input:focus{ box-shadow: 0px 0px 8px #0072c6;}テキストエリアにも使える:focusはテキストエリアにも同じように使うことができます。CSS.textarea{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.textarea:focus{ box-shadow: 0px 0px 8px #0072c6;}:focusを実際に書いてみよう1. HTMLを作成input class="input" type="text"今回はシンプルにinput要素のみでデザインしていきましょう。2. 通常時のデザインを決める.input { width: padding: border: border-radius: outline: box-shadow: } まずはフォーカスしていない時のデザインを作っていきましょう。インプットの横幅を目いっぱい大きくしてpaddingで余白を指定しました。さらにborder-radiusでインプットの角を丸くしています。border-radiusについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいborder: noneで枠線を消しています。これはお好みですが、inputにはデフォルトで枠線が表示されているため、その枠線を消している感じです。代わりにoutlineで枠線を表示しています。borderで指定したほうが自由なデザインを作りやすいのですが、今回はシンプルに作っていくのでいろいろと都合のいいoutlineを使います。borderについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいそして、outlineについて、outlineとborderの違いについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください3. :focusを使う.input { width: padding: border: border-radius: outline: box-shadow: } .input:focus { outline: box-shadow: } .input:focusといった感じでセレクタ:focusというスタイルを作ります。対象の要素にフォーカスするとセレクタ:focus内のスタイルが適用されます。上の例では枠線と影を:focus内に記述しているので、それらがフォーカス時に変化することになりますね。inputはフォーカス時に、デフォルトでoutlineが作成されるので注意今回は:focusでoutlineを上書きしているので問題ありませんが、背景色だけ変えたい等の場合は注意が必要です。inputはデフォルトで黒い枠線が表示されるようになっているので、outlineを消すCSSを書いておく必要があります。.input:focus { background-color: lightblue; outline: none;}4. transitionを指定してアニメーションにする.input { width: padding: border: border-radius: outline: box-shadow: transition: } .input:focus { outline: box-shadow: } 先ほどの状態でも充分いい感じですが、ゆっくりと変化するようにしたければtransitionを指定していきます。今回はtransition: 0.3sとしましたので、0.3秒かけて枠線と影が変化します。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月28日

Read More

CSSで半円を作る方法【書いてわかるCSS】

こんにちは!エンジニアのますみです!本日はCSSで半円を作る方法を解説します。たった4行のスタイルを書くだけでできちゃいます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ CSSで半円を作る方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル 半円を作る手順 1. 辺の長さが2対1の長方形を作る 2. 角を丸くするborder-radiusを追加する 3. border-radiusを調整して半円を作る 覚えておきたい%(パーセント)を使った書き方 %(パーセント)を使うと楕円の半円が作れる 半円の方向を変える 下向きの半円 右向きの半円 左向きの半円それではさっそく見ていきましょうサンプル.circle { width : height : background-color : border-radius : } このような半円を作っていきます。この記事では上向き、下向き、右向き、左向きすべての書き方を解説します。半円を作る手順HTMLはこのようにしてください。div class="circle"/divクラスにcircleを設定した要素を半円にしていきます。1. 辺の長さが2対1の長方形を作る.circle { width : height : background-color : } まずはwidthとheightを調節して、辺の長さが2対1の長方形を作ります。背景色(background-color)はお好みで設定してください。2. 角を丸くするborder-radiusを追加する.circle { width : height : background-color : border-radius : } CSSにborder-radiusを追加します。border-radiusにはpxなどのサイズを指定することができます。これを大きくすると青いボックスの角が丸くなっていきます。試しにborder-radius :10pxと設定してみてください。青いボックスの角が丸くなったのがわかると思います。3. border-radiusを調整して半円を作る.circle { width : height : background-color : border-radius : } border-radiusに4つの数値を設定します。長方形の長辺と同じ長さのサイズを、1つ目、2つ目に指定し、後の値は0を指定してください。border-radius: 長辺の長さ長辺の長さ 0 0border-radiusに指定した4つの数値はborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように左上の角から時計回りで丸くする角が割り振られており、上の例では左上、右上の角を目いっぱい丸くしています。つまり上のエディターでborder-radius: 0 0長辺の長さ長辺の長さこのようにすると右下、左下の角が目いっぱい丸くなり、下向きの半円が作れます。エディターをborder-radius: 0 0 100px 100pxと編集してみると、下向きの半円が作れるはずです。覚えておきたい%(パーセント)を使った書き方.circle { width : height : background-color : border-radius : } 上のように書いても上向きの半円を作れます。border-radiusは/(スラッシュ)で値を区切るとさらに細かく角丸を調整できます。詳しく知りたい方はこちらの記事を読んでみてください。今回は細かくは割愛しますがborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さ /左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように/(スラッシュ)の前後で左上の角から時計回りに丸くする角が割り振られていることは一緒です。/(スラッシュ)の前の丸くしたい角には50%、/(スラッシュ)の後の丸くしたい角には100%を指定すると、半円を作ることができます。%(パーセント)を使うと楕円の半円が作れるpx(ピクセル)を使った場合、2対1の長方形ではない時には、このようにかまぼこ型になります。.circle { width : height : background-color : border-radius : } 上の例では幅を100px、高さを75pxに指定しており、1対2の長方形ではないため半円にはなりません。.circle { width : height : background-color : border-radius : } %(パーセント)を使うとこのように楕円の半円が作れます。必要になったときに使えるように覚えておくか、この記事をブックマークしておきましょう。半円の方向を変える長方形の向き、丸くする角を調整することで様々な向きの半円を作ることができます。下向きの半円.circle { width : height : background-color : border-radius : } 2対1の横長の長方形を作りborder-radius: 0 0 長辺の長さ長辺の長さborder-radiusをこのように設定すると下向きの半円を作ることができます。右向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius: 0 長辺の長さ長辺の長さ0 border-radiusをこのように設定すると右向きの半円を作ることができます。左向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius:長辺の長さ0 0長辺の長さborder-radiusをこのように設定すると左向きの半円を作ることができます。最後まで読んでいただきありがとうございました!今更ですが、角丸の向きってどこを基準にするのが正解なんでしょうね...丸いほう?平らなほう?プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月26日

Read More

【CSS入門】書いて覚えるtransitionの使い方

こんにちは!エンジニアのますみです!本日はCSSでアニメーションを作る際に重要なtransitionについて解説していきます。マウスホバーアニメーションやインプットフォーカス時によく使われます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ transitionの使い方をマスターできる CSSで思い通りのアニメーションが作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 transitionの基本 transitionを細かく設定する アニメーションが開始するまでを遅らせる アニメーションの速度に波をつける #stepsの使い方 アニメーションする属性を指定する さらに自由にアニメーションを作る方法 ,(カンマ)で区切ると複数のアニメーションを同時に指定できる :hoverと通常時で別々のtransitionを書くそれではさっそく見ていきましょうtransitionの基本HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 青いボックスにマウスカーソルを当ててみるとボックスが一回転します。ボックスが一回転するのにかかる時間を指定するのがtransitionです。上の例ではtransitionの値は0.3sとなっています。『s』という単位は『秒(second)』のことなので、0.3秒でボックスが一回転することになります。上のエディターのtransitionを1sにしてみてください。ボックスが回転する速度が遅くなることがわかります。transitionを細かく設定するアニメーションが開始するまでを遅らせるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionに2つ目の数値を指定すると、アニメーションが始まるまでの時間を指定できます。上の例ではtransitionの値は0.3s 1sとなっています。1つ目の数値がボックスが一回転するのにかかる時間、2つ目の数値がアニメーションが始まるまでの時間になります。transition: アニメーションの長さ アニメーションが始まるまでの時間アニメーションの速度に波をつけるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionはアニメーションが最初はゆっくりでだんだん速くなるといったような緩急を設定することができます。上の例では2sとease-in-outを指定しており、ease-in-outが緩急を指定する値になります。緩急を指定する値には次の種類があります。上のエディターを編集してみて変化を確認してみましょう。 ease(デフォルト):ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる linear:等速でアニメーションする ease-in:ゆっくりと始まり、最後に速くなる ease-out:速く始まり、ゆっくりと終わる ease-in-out:ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる step-start:アニメーションの最初の瞬間に即座に変化を加える step-end:アニメーションの最後の瞬間に即座に変化を加える steps(n, start/end):アニメーションをnステップに分割し、startまたはendで即座に変化を加えるstepsの使い方stepsが少しややこしいと思いますので、詳しく解説します。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 簡単に言うとコマ送りのようなアニメーションになります。steps(12,start)の12の部分がコマ数になるので、数値を大きくすると滑らかなアニメーションになります。steps(12,start)のstartの部分は変化するタイミングを指定します。例えばこのようにtransitionを4s steps(4, start);とした場合HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 4秒で360度回転するアニメーションを4コマに分割するので、1秒ごとに90度回転します。startを指定した場合、マウスカーソルがボックスに当たった瞬間から90度回転します。その為、0秒で90度、1秒で180度回転するため、3秒目でアニメーションが完了します。endを指定した場合は、マウスカーソルが当たった瞬間ではなく1秒後からアニメーションがスタートします。steps(4,start)を指定した場合HOVER0秒90度HOVER1秒180度HOVER2秒270度HOVER3秒360度完了!HOVER4秒360度steps(4,end)を指定した場合HOVER0秒0度HOVER1秒90度HOVER2秒180度HOVER3秒270度HOVER4秒360度完了!アニメーションする属性を指定するHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 上のソースコードは、マウスカーソルが当たったらボックスが回転しつつ背景色が変わるアニメーションを指定したものです。例えば回転はアニメーションにしたいけど背景色は瞬時に変えたいといった場合は、transitionにアニメーションにしたい属性を指定することができます。.box { transition: transform 1s;}このようにtransitionにtransformを追加すると、この値はtransformに対する変化のみに適用されます。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 回転だけアニメーションで、背景色の変化はアニメーションしないように指定できました。さらに自由にアニメーションを作る方法このようなアニメーションを作りたいとします。HOVERマウスカーソルを当てると 360度回転する(transformを使う) ボックスが大きくなる(paddingを使う)の順番でアニメーションが実行されます。このようなアニメーションを作る方法を見ていきましょう。,(カンマ)で区切ると複数のアニメーションを同時に指定できるこのように,(カンマ)で区切ると、別のアニメーションの調整を行うことができます。.box { transition: transform 0.5s, padding 0.5s 0.5s; }.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}上の例では、,(カンマ)の前でtransform 0.5sを指定し,(カンマ)の後でpadding 0.5s 0.5sと指定しています。こうすることで transform: roate(360deg)はマウスカーソルが当たった瞬間からスタートし、0.5秒でアニメーション完了 padding: 0.4rem 5remはマウスカーソルが当たってから0.5秒後からスタートし、それから0.5秒でアニメーション完了といった設定ができます。:hover内と通常時で別々のtransitionを書く上の,(カンマ)で区切ってtransformとpaddingのアニメの開始タイミングをずらしただけではこのようになります。HOVER.box { transition: transform 0.5s, padding 0.5s 0.5s; padding: 0.4rem 0.8rem; border: 2px solid #0072c6; background-color: white; cursor: pointer;}.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}マウスカーソルが当たった時のアニメーションはいい感じですが、マウスカーソルが外れたときのアニメーションはどうでしょう。変化を元に戻す順番もtransform(回転) padding(サイズ変更)となってしまうため、おかしなことになってしまっていますね。:hoverにtransitionを指定するとマウスカーソルが当たった時にはそちらが適用されるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transition: transform: padding: } CSSをこのように修正すると、マウスカーソルが当たった時とマウスカーソルが外れたときのアニメーションのタイミングを変えることができます。マウスカーソルが当たった時は.box:hover内のCSSが適用されるためtransform 0.5s, padding 0.5s 0.5sで指定したように、回転サイズ変更の順番でアニメーションが実行されます。マウスカーソルが外れた時は.box内のCSSが適用されるためtransform 0.5s 0.5s, padding 0.5sで指定したように、サイズ変更回転の順番でアニメーションが実行されます。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

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

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

2023年04月16日

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

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

2023年04月14日

Read More

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

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

2023年04月14日

Read More

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

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

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

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

こんにちは!プログラマーのますみです!わたしがプログラミングを学習し始めたころに知っておきたかった、プログラミングの基本的な考え方をお話ししていこうと思います! そもそもプログラム言語ってどうやって動いているの? プログラムを書くときに疑問に思った制限 抽象化というキーワードそもそもプログラム言語ってどうやって動いているの?まず、大前提としてコンピュータは機械語しか理解できません。ご存じの方も多いと思いますが、機械語は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それでは次の投稿もお楽しみに!

2023年04月13日

Read More

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

こんにちは!プログラマーのますみです!今回はこれからプログラミングを始める方が学習するプログラミング言語を選ぶポイントを解説します!この記事を書いた理由わたしはプログラミングを独学で始めたので、最初はネットで調べて、自分がやりたいことができる言語は何なのかを調べて、やりたいことができる言語を学習しようと思いました。ですが、情報が多すぎて訳がわからないし、難しい用語も出てくるし、そんなこんなで学習中も『本当にこの言語で合ってたのかな...』と不安になっていました...この記事を読んだ人が、わたしと同じ悩みを持つ人が少しでも少なくなることを願って書くことにしました!まず、プログラミング言語はたくさん種類があるのでどの言語を学習するか決める必要があります。わたしが学習する言語を選んだ時に特に不安になったポイントは、 選んだ言語は本当にやりたいことができるのか?というポイントでした。だって調べても色んな人が『これがやりたいならこの言語がおすすめ』『いや、その言語はダメ、今は〇〇』『〇〇を〇〇するなら〇〇だけど、〇〇は〇〇だから〇〇する必要があって...』といった感じで言ってることが人によって違うんだもん...あ今となっては、プログラミング言語もバージョンアップをするし、言語の流行り廃りもあったり、いろんな要因を考えて言語を選ぶ必要があることがわかってきたので、言いたいことはわかるんだけど...こっちはまだ何も知らないんです!!!って感じですよね~ということで、細かい要因はさておき、以下のポイントで最初に学ぶといい言語をおススメしていこうと思います! 学習を始めやすい言語かどうか? やりたいことができるか? 仕事につながりやすいかどうか?この記事ではプログラミング初心者の方にわかりやすいように専門用語は使わずに解説していきますので、既にプログラミングに成熟した方が読んだら『ん?』となるかもしれませんが、あなた達に向けて書いておりませんので...!といったスタンスでお届けしていきますのでご了承くださいませ...1. 学習を始めやすい言語かどうか?まず、学習を始めやすい言語かどうか?についてですが、プログラミング初心者がもっとも挫折しやすいポイントで、プログラムを書くまで進められないというのがあります...もう少し詳しくお話しすると、ほとんどのプログラミング言語がパソコンに『プログラミング言語を書いて、それを実行するソフト』みたいなものをインストールしてセットアップする必要があるんですよねそのセットアップする作業がすごく難しくて、単純にソフトをインストールして使う...ような感覚ではできないことが殆どなんです。ざっくりセットアップする手順を紹介すると プログラミング言語をセットアップするのをセットアップするソフトをセットアップする プログラミング言語をセットアップするソフトをセットアップするソフトでプログラミング言語をセットアップするちょっと待ってもうよくわかんない!といった感じでこの段階で挫折してしまう人が殆どです...ですが、プログラミング言語によっては先ほど書いた手順を踏まなくても、インターネット上でプログラムを書いて実行できる言語が存在するので、わたしはその言語から学習するのが良いと思います!例えばこれJSFiddlejavascriptという言語をインターネット上で実行できます。左下の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を勉強して、未経験から採用してもらうことができたので、参考までに!長くなりましたが、わたしが未経験からプログラミングを勉強して会社に採用してもらうことができた経験から、これからプログラミングを始める方に向けたメッセージでした!プログラミングの学習は根気も時間も必要ですが、是非頑張ってみてください!応援してます!では次の記事もお楽しみに~

2023年04月13日

Read More

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

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

2023年04月17日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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