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

ますみのブログ

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

Laravelのmake:migrationでテーブル名を指定して作成する方法

こんにちは!エンジニアのますみです!本日はLaravelのmake:migrationコマンドを実行するときに、テーブル名をあらかじめ指定しておく方法を解説します!覚えておくとちょっと便利!目次 テーブルを新しく作る場合(Schema::create) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできる テーブルをアップデートする場合(Schema::table) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできるそれではさっそく見ていきましょうテーブルを新しく作る場合(Schema::create)コマンドを打ち込んだだけでこのようなusersテーブルを作るひな形が生成されている状態にしていきます。public function up(){ Schema::create('users', function (Blueprint $table) { $table-id(); $table-timestamps(); });}マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるたとえばこのようにコマンドを入力すると自動でテーブル名付きのひな形が生成されますphp artisan make:migration create_usersマイグレーションファイル名がcreate_から始まる場合は自動でテーブル名を読み取り、Laravelがひな形を作ってくれます。ちなみにcreateUsersのようにキャメルケースでファイル名を指定してもひな形が生成されます。php artisan make:migration createUsersパスカルケース(CreateUsers)でもひな形が生成されます。php artisan make:migration CreateUsersケバブケース(create-users)ではひな形は生成されませんでした。php artisan make:migration create-usersこの項目のまとめ createからファイル名が始まることが条件 〇 スネークケース(create_users)ではひな形が生成される 〇 キャメルケース(createUsers)ではひな形が生成される 〇 パスカルケース(CreateUsers)ではひな形が生成される ケバブケース(create-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできる通常このようにコマンドを打つとひな形は生成されませんがphp artisan make:migration usersこのように--create=テーブル名とするとひな形が追加されます。php artisan make:migration users --create=usersこの項目のまとめ --create=テーブル名をコマンドに追加でひな形が生成できるテーブルをアップデートする場合(Schema::table)public function up(){ Schema::table('users', function (Blueprint $table) { // });}テーブルを更新する場合はこのようなひな形を作ります。マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるこちらもマイグレーションファイル名によっては自動でひな形が生成されます。php artisan make:migration add_to_usersこのようにadd_to_から始まるファイル名を指定すると自動でひな形が生成されます。先ほど同様、スネークケース(add_to_)、キャメルケース(addTo)、パスカルケース(AddTo)であればひな形が生成されます。ケバブケース(add-to-)はやはりひな形は生成されません。この項目のまとめ add to からファイル名が始まることが条件 〇 スネークケース(add_to_users)ではひな形が生成される 〇 キャメルケース(addToUsers)ではひな形が生成される 〇 パスカルケース(AddToUsers)ではひな形が生成される ケバブケース(add-to-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできるこのように--table=テーブル名をコマンドに追加することでひな形付きのマイグレーションファイルを生成することができます。php artisan make:migration update_users --table=usersこの項目のまとめ --table=テーブル名をコマンドに追加でひな形が生成できる最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

【CSS入門】書いて覚える『:hover』の使い方

こんにちは!エンジニアのますみです!本日はマウスホバー時に要素の見た目を変化させることができる:hoverの使い方を解説していきます!魅力的なWebサイトを作るには欠かせないテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 :hoverの基本 枠線の色を変えたいときの注意点 transitionを指定してアニメーションにする ホバー時によく使われるアニメーション box-shadowで影をつける transformでボタンそのものを動かすそれではさっそく見ていきましょう!:hoverの基本BUTTON.button { background-color : } .button:hover { background-color : } セレクタ:hoverと書くことで、マウスホバー時のスタイルを指定できます。上の例では、.buttonクラスを持つ要素の背景色が通常時にはwhite、マウスホバー時には#D2ECFFになるように指定されています。#D2ECFFの部分を好きなカラーコードに書き換えてみると、マウスホバー時の背景色が変わることがわかります。例えば#D2ECFFをredに書き換えてみてください。ボタンにマウスカーソルを当てると背景色が赤に変わります。枠線の色を変えたいときの注意点BUTTON.button { background-color : } .button:hover { border : } 上の例のように、マウスホバー時のみ枠線を表示したいときには注意が必要です。ボタンにマウスカーソルを当てると、枠線は表示されますが画面がガタつくことがわかると思います。これは通常時の枠線の太さが0pxになっているため、ホバー時にボタンのサイズが変わってしまうことが原因です。BUTTON.button { background-color : border : } .button:hover { border : } このように通常時には透明な枠線を指定しておくことで、マウスホバー時のガタつきを防ぐことができます。線の太さは通常時、ホバー時どちらも同じ値を指定してください。transitionを指定してアニメーションにするBUTTON.button { background-color : transition : } .button:hover { background-color : } 通常時のクラスにtransition: 秒数とすることで、ホバー時のスタイルに変化するまでにかかる時間を指定できます。エディターのtransition: 0.3sを変更してtransition: 1sとすると、ボタンの色が変化するまでにかかる時間が長くなることがわかります。ホバー時によく使われるアニメーションbox-shadowで影をつけるBUTTON.button { transition : } .button:hover { box-shadow : } マウスホバー時に影をつけるにはbox-shadowを使います。box-shadowはbox-shadow: 影の位置(横) 影の位置(縦) 影のぼかし度 影の色のように書けます。上のエディターで、box-shadowを6px 6px 8px lightblue とすると、ボタンの右下に水色の影をつけることができます。影の位置が0以外、transitionで秒数を指定していると、上のままでは影がボタンの位置から徐々にホバーで指定した位置に影が伸びていきます。あらかじめ通常時に、ホバー後の位置と同じ透明の影を指定しておくことで、影がその場からふわっと現れるアニメーションにできます。BUTTON.button { transition : box-shadow : } .button:hover { box-shadow : } あえて影の位置を動かすエフェクトも面白いと思います。数値を色々変えてみて試してみてください!transformでボタンそのものを動かすBUTTON.button { transition : box-shadow : } .button:hover { box-shadow : transform: } atransformを使用すると、指定した要素を移動したり、形を変えたりすることができます。上の例ではtranslateYという縦方向の位置をずらすプロパティを指定して、ホバー時にボタンが5px上方向に動くようにしています。transformには他にも、要素を拡大するscale、要素を回転させるrotateなどのホバーアニメーションに使いやすいプロパティがたくさんあります。上のエディターのtransformにscale(1.1)を指定すると、ホバー時にボタンが1.1倍になることがわかります。また、エディターのtransformにrotate(360deg)を指定すると、ホバー時にボタンが1回転します。最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

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

【CSS入門】枠線の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線を指定することのできる、border属性の書き方を解説します!この記事では実際にCSSを書きながら枠線の使い方を覚えることができます!この記事はborder属性でできることを一通りまとめました。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ border属性でできることを一通り覚えることができる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容この記事では、下のような黒い部分が編集可能になっていますので、実際にCSSを書きながらborder属性の使い方を覚えることができるようになっています!サンプル.box { border : } 10px solid #ffa500の部分が編集可能です。書き換えることで上のボックスの枠線を調節することができます。目次 基本の枠線 枠線を表示 枠線の太さを指定 枠線の色を指定 枠線を装飾する方法 点線にする 額縁のような枠にする 1 額縁のような枠にする 2 額縁のような枠にする 3 額縁のような枠にする 4 破線にする 二重線にする 角丸にする さらに複雑な枠線を指定する方法① | 辺ごとに指定する 辺ごとに細かく指定するサンプル さらに複雑な枠線を指定する方法②| 属性ごとに指定する 指定する値が一つの場合 指定する値が二つの場合 指定する値が三つの場合 指定する値が四つの場合それではさっそく見ていきましょう!基本の枠線枠線を表示サンプル.box { border : } 上のように書くことで枠線を表示することができます。solidの部分を消してみると枠線が消えることがわかります。枠線の太さを指定サンプル.box { border : } 上のように書くことで枠線の太さを指定することができます。10pxの部分を書き換えてみると、枠線の太さが変わることがわかります。枠線の色を指定サンプル.box { border : } 上のように書くことで枠線の色を指定することができます。#ffa500の部分を好きなカラーコードに書き換えてみると、枠線の色が変わることがわかります。枠線を装飾する方法点線にするサンプル.box { border : } 上のようにsolidと書いてあった部分をdottedにすると、点線の枠線を作ることができます。額縁のような枠にする 1サンプル.box { border : } 上のようにinsetと書くことで、額縁のようなデザインにすることができます。額縁のような枠にする 2サンプル.box { border : } 上のようにoutsetと書くことで、額縁のようなデザインにすることができます。insetと非常に似ていますが、色が濃いところと薄いところが逆になっています。額縁のような枠にする 3サンプル.box { border : } 上のようにgrooveと書くことで、insetよりも複雑なデザインにすることができます。額縁のような枠にする 4サンプル.box { border : } 上のようにridgeと書くことで、insetよりも複雑なデザインにすることができます。grooveと非常に似ていますが、色が濃いところと薄いところが逆になっています。破線にするサンプル.box { border : } 上のようにdashedと書くことで、破線の枠線を作ることができます。二重線にするサンプル.box { border : } 上のようにdoubleと書くことで、破線の枠線を作ることができます。角丸にするサンプル.box { border : border-radius : } 上のようにborder-radius属性を追加することで、角丸の枠線を作ることができます。指定した値が大きくなればなるほど滑らかな角になります。さらに複雑な枠線を指定する方法① | 辺ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}borderという属性のみにプロパティを指定していましたが、辺ごとに指定することもできます。.box { border-top: 2px solid #ffa500; border-right: 2px solid #ffa500; border-bottom: 2px solid #ffa500; border-left: 2px solid #ffa500;}border-topが上辺、border-rightが右辺、border-bottomが下辺、border-leftが左辺です。このように書くことで、細かく値を指定することができます。辺ごとに細かく指定するサンプルサンプル.box { border-top : border-left : border-bottom : border-right : } 各プロパティの値を変えてみると、対応した辺の装飾が変化することがわかります。さらに複雑な枠線を指定する方法②| 属性ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}のようにborder属性にすべてのプロパティを書き込んでいきましたが、下のようにそれぞれの値を別々に書くこともできます。.box { border-width: 2px; border-style: solid; border-color: #ffa500;}上のCSSはborder: 2px solid #ffa500;と書いた時と同じ働きをします。枠線の太さはborder-widthに、枠線のタイプはborder-styleに、枠線の色はborder-colorに書いていきます。行数は増えてしまいますが、こうすることでさらに複雑な枠線を指定することができます。指定する値が一つの場合サンプル.box { border-width : border-style : border-color : } 指定する値が一つの場合はすべての辺に値が適用されます。指定する値が二つの場合サンプル.box { border-width : border-style : border-color : } 二つの値を指定すると、一つ目の値が上下の辺、二つ目の値が左右の辺に適用されます。指定する値が三つの場合サンプル.box { border-width : border-style : border-color : } 三つの値を指定すると、一つ目の値が上辺、二つ目の値が下辺、三つ目の値が左右の辺に適用されます。指定する値が四つの場合サンプル.box { border-width : border-style : border-color : } 四つの値を指定すると、一つ目の値が上辺、二つ目の値が右辺、三つ目の値が下辺、四つ目の値が左辺のように、時計回りに順番に適用されます。本日はborder属性の書き方について解説しました!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

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

【コピペOK!】料理系サイト向けののニッチなCSSボタンサンプル集

こんにちは!エンジニアのますみです!ニッチなボタンサンプルも作ってみたくなりまして、最初に食べ物に関するサイトに使えそうなボタンのサンプル集を作ってみようと思います!サンプルで使用している画像はこちらのサイトのものを使用しています!https://icooon-mono.com/紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. ホバーで湯気が出るアニメーション料理のレシピを扱うサイトで使うことをイメージしてみました!湯気のアニメーションは料理以外にもいろいろ使えます!レシピを見る div class="button" spanレシピを見る/span img src="./画像path" alt="" div class="steam"/div/div.button{ position: relative; display: flex; flex-direction: column; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ font-weight: bold; color: white; text-align: center; margin-bottom: 1rem; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ width: 3rem;}.steam { position: absolute; width: 3rem; height: 2rem; border-radius: 70% 0 33% 40% / 30% 0 54% 55%; background: rgba(255, 255, 255, 0.627); filter: blur(0.3rem); bottom: 3rem; opacity: 0;}.button:hover .steam{ animation: steam 2s ease-out infinite;}@keyframes steam { 0% { transform: translateY(0) scale(1, 1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-3rem) scale(1.2, 1.2); opacity: 0; }}2. 予約ボタンのサンプル来店予約フォームにリンクするボタンのイメージでデザインしました。画像を他のものに差し替えることでいろいろなサイトに使えます!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; margin-right: 0.4rem;}.button span::before{ content: ""; position: absolute; width: 0%; height: 0.1rem; bottom: 0; background-color: white; transition: 0.3s;}.button:hover span::before{ width: 100%;}.button img{ width: 1.2rem; height: 1.2rem; transition: 0.3s;}.button:hover img{ transform: rotate(360deg);}3. 上から料理が降ってくるボタンホバーすると上から料理の画像が降ってくるボタンのサンプルです!アニメーションによる変化が大きいので目に留まりやすくなります!ですが、ホバー時には文字が消えてしまうため、押し間違えてはまずいボタン(支払い確定)のデザインをする際は何のボタンなのか常にわかるようにデザインすることが大事です!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; justify-content: center; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ position: absolute; transform: translateY(-3rem); height: 2rem; transition: 0.3s;}.button:hover img{ transition-delay: 0.3s; transform: translateY(0rem);}最後まで見ていただきありがとうございます!こんなニッチなテーマでサンプルを作ってほしい!等ありましたらTwitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

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

【サンプルあり】コピペOK!丸を使ったボタンのホバーアニメーション

こんにちは!エンジニアのますみです!先日は四角いデザインの背景色が濃いときに使いたいボタンデザインを紹介しましたので、今回は丸をテーマにやってみたいと思います!丸いボタンはアニメーションの選択肢が増えるメリットがあるので、思わず目を引くアニメーションでクリック率を上げることができるのがいいですね!ただ、配置をしっかり考えないとおさまりが悪くなってしまうので、サイト全体のレイアウトに合うように四角いボタンと使い分けてみてください!紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. くるっと回転丸いボタンのメリットは回転させても違和感が少ないところですね!transform: rotate(360deg)として、時計回りに一回転するアニメーションです!BUTTON.button { width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border: 1px solid gray; border-radius: 3rem; background-color: white; color: #ff7473; font-weight: bold; cursor: pointer; transition: 0.6s;}.button:hover { transform: rotate(360deg);}2. ころころ転がる矢印矢印がころころと、下線を引きながら転がっていくアニメーションです!矢印を画像等に置き換えたりして、好みの矢印のデザインにしてもいいですね!BUTTON.button { position: relative; display: flex; align-items: center; color: white; cursor: pointer;}.button span { margin-left: 1.6rem;}.button::before { content: "→"; position: absolute; left: -10%; display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.8rem; color: #ffc952; background-color: white; transition-duration: 1.5s;}.button:hover::before { transition-duration: 1s; transform: rotate(720deg); left: 110%;}.button::after { content: ""; position: absolute; left: 1.6rem; bottom: 0; width: 0; height: 2px; background-color: white; transition-duration: 1s; transition-delay: 0s;}.button:hover::after { width: calc(100% - 1.6rem); transition-delay: 0.1s;}3. 強調したい箇所に使いたい目を引くアニメーションぶわっと広がるように見えるアニメーションです!要素の大きさ自体は変わっていないので、周りの要素に影響を与えないのが◎主張が激しいので使いすぎると目がチカチカしますからほどほどに~BUTTON BUTTON BUTTON.button { width: 6rem; height: 6rem; background-color: white; border-radius: 50%; color: #47b8e0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; font-weight: bold;}.button .inner-1,.button .inner-2 { position: absolute; overflow: hidden; display: flex; justify-content: center; align-items: center; font-weight: bold;}.button .inner-1 { width: 0%; height: 0%; background-color: #47b8e0; border-radius: 50%; color: white; z-index: 10; transition: 0.3s;}.button .inner-2 { width: 0%; height: 0%; background-color: white; border-radius: 50%; color: #47b8e0; z-index: 20; transition-delay: 0.15s; transition-duration: 0.3s;}.button:hover .inner-1,.button:hover .inner-2 { width: 100%; height: 100%;}4. 角から色が変わるエフェクト四角いパターンはこちらの記事で紹介しましたが、今回は丸のバージョンです!円の中心を角に合わせないとおかしなことになってしまうので、アニメーションで円を拡大しながら中央を角に合わせる工夫が必要です!角に丸がちょこっとあるのがかわいくてお気に入りのデザインです!BUTTON.button{ padding: 0.4rem 2rem; color: white; font-weight: bold; border: 1px solid white; position: relative; cursor: pointer; z-index: 1; transition: 0.4s; overflow: hidden;}.button:hover{ color: #34314c;}.button::before{ content: ""; width: 2rem; height: 2rem; left: -1rem; top: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::before{ width: 12rem; height: 12rem; left: -6rem; top: -6rem;}.button::after{ content: ""; width: 2rem; height: 2rem; right: -1rem; bottom: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::after{ width: 12rem; height: 12rem; right: -6rem; bottom: -6rem;}最後まで見ていただきありがとうございます!丸い形のメリットを生かしたアニメーションを考えてみました!CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月19日

Read More

#2わたしが未経験からエンジニアになるまで - 無職とプログラミングとの出会い -

こんにちは!プログラマーのますみです!今回はわたしが未経験からエンジニアになるまでのお話、二回目の記事です。一回目の記事はこちら一回目をもう読んでくださった方、ありがとうございます!こんな私についてのお話ですが、もう少し続きますのでよかったら見ていってあげてください!それでは続きエンタメ業界で仕事をスタート専門学校を卒業した私はエンタメ業界の仕事をスタートしました。厳しい業界ですが、少しずつ周りに認めてもらい、楽しく忙しく、充実した日々を過ごしていました。仕事を始めてから数年、世間を揺るがす出来事が起こります。コロナ禍でほぼ無職に2019年、新型コロナウイルスが猛威をふるい、たくさんの業界が大打撃を受けました。エンタメ業界もコロナ禍で大打撃を受け、わたしは殆どの仕事を失ってしまい、実質無職となってしまいます...細々と仕事はあったので、ギリギリ生きていくことはできましたが、暇だし、これからどうしようかと不安な日々を過ごしていました。そんな頃、世間ではコロナが大流行する裏で、別の大流行も発生していました。空前の『プログラミング始めよう!』ブーム偶然なのか、コロナ禍で在宅ワークという言葉が流行っていたからなのか、世の中のSNSの広告はプログラミングスクールの広告であふれていました。私の目にも当然プログラミングという言葉が飛び込んできて、幼少期にホームページを運用していた記憶がよぎり、またやってみようかな?と独学で勉強をスタートします。実質無職だった私は、エンタメ業界に使っていたエネルギーと時間をプログラミングの学習に存分に費やしました。お金もありませんでしたので、プログラミングスクールには通わず、ほとんどの情報はインターネットで検索して得ていました。唯一お金を使っていたプログラミング学習系のサービスはProgateというサービスでした。何度も挫折しそうになりながらも意地で学習を続けるありがたいことに、プログラムに関する情報は大体インターネットで調べたら出てきました。ですが、専門用語だらけでわかりづらかったり、書いてある情報が古くてエラーが出てきたり、英語の情報しかなかったりして、何度も挫折しかけました...そのころから『もっとわかりやすく情報を発信して、私と同じことで悩む人を減らしたい!』という気持ちが芽生え始めていました。何日も同じエラーに悩まされたりと苦しい日々でしたが、それでも私がプログラミングの学習を続けられた理由があります。この理由は未経験から採用に至った重要なポイントでもあると思います。それは...続く

2023年04月15日

Read More

わたしが未経験からエンジニアになってよかったこと

こんにちは!エンジニアのますみです!私はエンジニアとは全く関係のない仕事をしていましたが、コロナ禍の影響でほぼ無職になったことがあります。それからプログラミングの勉強を0から始め、未経験からエンジニアに採用していただくことができました!エンジニアになってから約2年ほどになりますが、私が『エンジニアになってよかった!』と思ったことをお話ししてみようと思います!読んでくださっている皆様へこの記事では私がエンジニアになって生活にどんな変化があったかお話ししていきます。これからプログラミングの勉強を始めてみようかな...?もうプログラミングの勉強をしているけど、本当に余裕のある生活ができるのかな...?と思っている方は、この記事を読むことで、勉強した先にはどんな未来があるのかイメージしやすくなると思います。私はエンタメ系の業界で仕事をしていましたが、コロナ禍の影響で仕事がほぼ無くなってしまうという経験をしました。自分の時間も欲しいし、安定した仕事がしたい!と思って選んだ仕事がエンジニアでした。今ではエンジニアという選択をして本当によかったと思います!それでは私の生活にどんな変化があったかお話ししていきます。1. エンジニアになる前の生活まずは私がエンジニアになる前は、どんな生活をしていたのかをお話ししていきます。私はエンタメ系の専門学校を卒業してから、そのままエンタメ系の業界で働き始めました。当時は仕事の開始時間、就業時間もばらばらで、一日10時間以上働くこともよくありました。それでも大好きな業界での仕事だったので苦ではありませんでしたが、エンタメの世界は不安定で厳しい業界ですから先の不安はずっと感じていました。それでも私は好きなことを好きなだけやりたい!という人間ですので、不安定な業界でも自分の好きなことができることが魅力で、エンタメ業界での仕事を続けていました。そして、コロナ禍になってしまい、エンタメ業界は多大な影響を受けます。私がやっていた仕事は、エンタメ業界の中でも特に大打撃を受けたジャンルの仕事でしたから、そのままほぼ無職になるという結果を迎えます。無職時代、私は何か手に職をつけようと思い、プログラミングの勉強を始めました。私がエンジニアを目指した理由手に職をつけようと思ったタイミングで、勉強することの選択肢はいろいろありました。私がなぜプログラミングを選んだのかと言うと 安定している リモートワークで自分の時間がしっかりとれる可能性があるからでした。先ほどもお話ししたように、私は好きなことを好きなだけやりたい人間ですので、自分の時間がとれることは最優先事項でした。2. エンジニアになってからの生活必死に勉強をして、自分でWebサイトや簡単なシステムを組めるようになってきた私は、面接をうけて未経験からエンジニアになることができました。私が目指していた生活は、収入が安定している、自分の時間がしっかりとれることです。収入は増え、生活リズムが安定した私はエンジニアになった結果、残業もほぼなく、収入も増やすことができました。エンジニアはスキルがどんどん身についていく職業なので、さらに収入アップも見込める業種です。私は働き出してからまだ2年ほどですが、既に4回ほどお給料を上げていただくことができました。リモートワークで自分の時間が増えたエンジニアになってから、最初は出社して仕事をしていましたが、数か月働いたところでほぼフルリモートで働くことができるようになりました。会社までの往復の時間が無くなり自分の時間が増え、休憩中も家にいるのでスキマ時間を好きなことに使うことができています。といった感じで、私はエンジニアになって収入が増えた既に数回昇給し、やりがいが感じられるリモートワークで自分の時間がとれて好きなことができるこんな感じの生活の変化がありました。3. エンジニアになって大変だったことデメリットも知りたい方もいらっしゃると思うので、私が感じた大変だったこともお伝えしておこうと思います。学習し続けなければいけないプログラミングの学習は、基礎文法を完璧にしたらOK!というわけではありません。デジタル分野の発展スピードはとても速く、世間のニーズもどんどん変わっていくため、エンジニアに求められる技術も変化していきます。そのため学習は採用されてからも続きます。ですが、しっかり頑張れば評価されやすい業種だと思いますし、転職でキャリアアップもしやすい業種ですから、やりがいをもって学習に取り組むことができるのでこの辺は私は特に気になっていません。4. まとめ私がエンジニアになってよかったと思ったことは 収入が増えた 既に数回昇給し、やりがいが感じられる リモートワークで自分の時間がとれて好きなことができるでした。学習することはたくさんあるのでそこは大変なところですが、昇給やキャリアアップが見込める業界ですのでやりがいをもって取り組めています。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月18日

Read More

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

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

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

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

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

2023年04月14日

Read More

#3ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの三回目の記事です!一回目の記事はこちら二回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示前回はデータを保存していくところ、データベースのセットアップをする工程で終わりましたので、その続きからやっていきます!さて、前回はデータベースについての質問をして、このような回答が返ってきましたMySQLサーバーを起動する方法は、オペレーティングシステムによって異なりますが、一般的には以下の手順になります。 MySQLサーバーをインストールするまず、MySQLサーバーをインストールする必要があります。MySQLはオープンソースのため、公式サイトから無料でダウンロードできます。インストール手順はOSによって異なるため、MySQLの公式ドキュメントを参照してください。 MySQLサーバーを起動するMySQLサーバーを起動するには、OSによって異なる方法がありますが、一般的には以下のようになります。 LinuxやmacOSの場合:ターミナルを開いて、以下のコマンドを入力します。sudo systemctl start mysql Windowsの場合:コマンドプロンプトやPowerShellを開いて、以下のコマンドを入力します。net start mysql MySQLサーバーに接続するMySQLサーバーが起動したら、MySQLクライアントを使用してMySQLサーバーに接続することができます。一般的には、以下のコマンドを使用して接続します。mysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。以上の手順でMySQLサーバーを起動し、接続することができます。まずは一番のMySQLサーバーをインストールする からやってみましょう!公式サイトからダウンロードしてねと書いてありますが、検索エンジンは使わない縛りなのでChatGPTに公式サイトを聞いていきます!MySQLの公式サイトを教えてChatGPTの回答MySQLの公式サイトは以下のURLからアクセスできます。https://www.mysql.com/ありがとね、自分で調べろよって思うよね...それではダウンロードしていきたいのですが、MySQLの公式サイトのどこからダウンロードできるのかも聞いちゃいましょうMySQLの公式サイトからどうやってMySQLをダウンロードできますかChatGPTの回答はこちらMySQLをダウンロードする手順は以下の通りです。 MySQLの公式サイト(https://www.mysql.com/)にアクセスします。 ナビゲーションバーの「Downloads」をクリックします。 ダウンロードページが表示されます。ここで、利用したいMySQL製品を選択します。 製品を選択すると、OSやバージョン、エディションなどの情報を選択できます。必要な情報を選択し、「Download」をクリックします。 ダウンロードページに移動し、MySQLのライセンス契約に同意したことを確認します。同意する場合は「Accept License Agreement」にチェックを入れます。 OSに応じたインストーラーをダウンロードします。 ダウンロードが完了したら、インストーラーを実行します。インストーラーに従って、MySQLをインストールします。 以上の手順でMySQLをダウンロードしてインストールすることができます。といった感じで、公式サイトのどこをクリックしてダウンロードすればよいか教えてくれました。ですが、私は今3の利用したいMySQL製品を選ぶ知識が無いので、公式サイトの文字をそのままコピーしてChatGPTに質問を投げてみましょう利用したいMySQLの選び方がわかりません どこをクリックすればいいですか MySQL Enterprise Edition MySQL Enterprise Edition includes the most comprehensive set of advanced features, management tools and technical support for MySQL. Learn More Customer Download Trial Download MySQL Cluster CGE MySQL Cluster is a real-time open source transactional database designed for fast, always-on access to data under high throughput conditions. MySQL Cluster MySQL Cluster Manager Plus, everything in MySQL Enterprise Edition Learn More Customer Download (Select Patches Updates Tab, Product Search) Trial Download MySQL Community (GPL) Downloads ChatGPTの回答はこちらMySQLを選ぶ際のポイントは、利用目的や利用方法、規模、予算などによって異なります。以下のリストから自分の目的に合ったMySQL製品を選んでください。 MySQL Enterprise Edition: 高度な機能とツール、技術サポートを提供する商用製品です。大規模な企業向けの利用に向いています。 MySQL Cluster CGE: リアルタイムなトランザクション処理を高速に行うことができるオープンソースのデータベースです。高い信頼性を求める企業向けに利用されます。 MySQL Community Edition: オープンソースで、無償で利用できるMySQL製品です。小規模のWebアプリケーションや個人的なプロジェクトなどに向いています。 利用目的や規模によって異なるため、ご自身の用途に合った製品を選択してください。詳しくは、MySQLの公式サイトの製品紹介ページ(https://www.mysql.com/products/)を参照してください。なるほどまあ無料のやつにするよねなんせ私はいまプログラミングの知識が皆無なので、価格ですべて決めます。実際今回作りたいものは無料版で充分ですしというわけでMySQL Community (GPL) Downloads をクリックしてみますするとこんなページに飛びました。訳がわからないのでChatGPTに聞いてみますMySQL Community Editionを選びました MySQL Yum Repository MySQL APT Repository MySQL SUSE Repository MySQL Community Server MySQL Cluster MySQL Router MySQL Shell MySQL Operator MySQL NDB Operator MySQL Workbench MySQL Installer for Windows C API (libmysqlclient) Connector/C++ Connector/J Connector/NET Connector/Node.js Connector/ODBC Connector/Python MySQL Native Driver for PHP MySQL Benchmark Tool Time zone description tables Download Archives この画面ではどうすればいいですかこの質問では無料版を選んだことを伝え、あとは先ほどの画像の文字をそのまま書き込んでいますChatGPTの回答はこちらMySQL Community Editionをダウンロードする場合、以下の手順を実行してください。 MySQL Community Serverをクリックします。 ページの一番下にある「Looking for previous GA versions?」というリンクをクリックして、利用したいバージョンを選択します。 ダウンロードしたいパッケージの形式(zip、tar.gz、rpm、deb)を選択します。 OSの種類に応じて、適切なパッケージをダウンロードします。MySQL Community Serverのダウンロードが完了したら、インストール手順に従ってMySQLをインストールしてください。現在Looking for previous GA versions?というボタンはありませんでしたので、その旨を伝えました。申し訳ありません、MySQL Community Editionのダウンロードページが更新されたため、以前の手順が変更されている可能性があります。最新版のMySQL Community Editionをダウンロードする方法は、以下の通りです。 MySQL Community Serverをクリックします。 ページの下部にスクロールして、Generally Available (GA) Releasesという項目を見つけます。 GAリリースの下にある「Select Version」をクリックして、利用したいバージョンを選択します。 Select Operating Systemで自分のOSを選択します。 Downloadボタンをクリックして、MySQL Community Serverをダウンロードします。以上の手順でMySQL Community Serverをダウンロードできます。こんなに他力本願な質問攻めをしておきながら 謝らせてしまった...良心が痛んできます...ChatGPTの回答ではGenerally Available (GA) Releasesという項目を見つけてくださいと書いてありますが、この項目もありませんでした。ChatGPTの知識は少し古いらしいので、現在のMySQLの公式サイトの状態は知らないわけですね...ということで、検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わないとしたのでこの条件ではChatGPTの回答のみでブログを作ることはできないという結果でした。最終的にはMySQLのセットアップの段階でストップしてしまいましたね。ただこれだけでは味気ないので、MySQLのセットアップは済んでいるものとして、続きをChatGPTの回答のみで書いてみようと思います!それでは続きは次回の記事で!お楽しみに~

2023年04月16日

Read More

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

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

2023年04月14日

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

#4ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの三回目の記事です!一回目の記事はこちら二回目の記事はこちら三回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示実は前回の記事で、ChatGPTの知っているMySQLのセットアップに関する情報が古く、この条件ではブログを完成することはできないという結果になっているのですが、せっかくなのでMySQLのセットアップは済んでいるものとして続きをやっていこうと思います!二回目の記事で、phpという言語で書かれたプログラムをChatGPTに書いてもらっていたので、それを作成していきたいと思います。まずはnew_post.phpを作っていきますそしてbackend.phpを作っていきますbackend.phpの続きindex.phpとpost.phpも作ってねと回答でいわれていたので作っていきましょうindex.phppost.phpという感じで四つのファイルを作っていくわけですが、プログラミングの知識が皆無な私だったらパソコンのどこにこれらのファイルを置いておくでしょうか...答えはデスクトップにどん!ですさて、4つのファイルをすべて作りました。早速作ったファイルを実行していきたいのですが、プログラミングの知識が皆無だったらphpファイルの実行のやり方がわからないはずなのでChatGPTに聞いてみましょうphpはどうやって実行するのですか?回答PHPは、サーバーサイドのスクリプト言語であり、ウェブサイトの開発に広く使用されています。PHPスクリプトを実行するには、次の手順に従うことが一般的です。 PHPのインストール:まず、PHPをサポートするWebサーバーにPHPをインストールする必要があります。一般的に、Apache、Nginx、IISなどのWebサーバーが使用されます。 PHPスクリプトの作成:次に、PHPスクリプトを作成します。お好みのテキストエディタを使用して、.php拡張子を付けた新しいファイルを作成し、PHPコードを書き込みます。 Webサーバーの設定:Webサーバーを構成して、PHPスクリプトを実行するように設定する必要があります。これには、Webサーバーの設定ファイル(httpd.confなど)の変更が必要な場合があります。 PHPスクリプトの実行:Webサーバーを起動し、WebブラウザでPHPスクリプトにアクセスすることで、PHPスクリプトを実行できます。たとえば、ローカルホストでPHPを実行する場合は、Webブラウザでhttp://localhost/yourscript.phpと入力することができます。 以上が一般的なPHPスクリプトの実行手順です。ただし、環境やプロジェクトによっては、さまざまな方法でPHPを実行することができます。ざっくり回答を要約すると、phpは必要なものをいろいろインストールしてセットアップしないと動かせないので、それらのセットアップをしてくださいねと言っています。MySQLのセットアップでこの検証は失敗してしまっているので、今回はうまくいってほしいところ...さっきの回答に続けて、この質問を送信しましたPHPのインストールのやり方を教えてください回答PHPのインストール方法は、使用しているオペレーティングシステムによって異なりますが、一般的な手順を以下に示します。Windowsの場合: PHPの公式サイト(https://windows.php.net/download/)から、使用しているWindowsに合わせたPHPのバージョンをダウンロードします。 ダウンロードしたファイルを解凍し、任意の場所に配置します。たとえば、C:\phpに配置することができます。 PHPを使用するWebサーバー(Apache、IISなど)をインストールして構成します。PHPをApacheに統合する場合は、PHPのインストールフォルダ内にあるphp.iniファイルをApacheの設定ファイルに追加する必要があります。 インストールが正常に完了したかどうかを確認するために、コマンドラインでphp -vを実行して、PHPのバージョンが表示されることを確認します。macOSの場合: Homebrewを使用してPHPをインストールすることができます。ターミナルで次のコマンドを実行します。 Copy code brew install php PHPが正常にインストールされたかどうかを確認するために、ターミナルでphp -vを実行して、PHPのバージョンが表示されることを確認します。Linuxの場合: システムのパッケージマネージャーを使用して、PHPをインストールすることができます。たとえば、Ubuntuの場合は、次のコマンドを実行します。 sqlCopy code sudo apt-get update sudo apt-get install php PHPが正常にインストールされたかどうかを確認するために、ターミナルでphp -vを実行して、PHPのバージョンが表示されることを確認します。これらは一般的な手順であり、環境によって異なる場合があります。また、Webサーバーに統合する必要がある場合は、Webサーバーの設定ファイルの変更が必要になる場合があります。使用しているOSによって インストールのやり方が変わってくるのですが、各OSでのphpのインストール方法を教えてくれました。私はwindowsを使っているので、一番最初のWindowsの場合で試してみましょう。それでは今回はこれくらいで、続きは次回やってみたいと思います!ではまた~次回の投稿もお楽しみに~

2023年04月17日

Read More

【コピペOK!サンプル有!】クリックしたくなる!ブログ記事のホバーアニメーション

こんにちは!エンジニアのますみです!このサイトのブログ記事一覧ページで、記事のサムネイルにマウスカーソルが当たった時にアニメーションをつけたいなと思いまして、どんな風にしようかな~と考えています!せっかくなのでよく使うブログ記事のホバーアニメーションを4つ紹介してみようかと思います!この記事のCSSはコピペして使っていただいて大丈夫ですので、気に入ったデザインのものがあれば是非使ってみてください!twitterなどで『使いました!』とコメントいただけると励みになりますので、是非おねがいします~htmlはこんなレイアウトになっています!cardの横幅は制作しているサイトに合わせてCSSを追加してみてください!div class="card" div class="image-container" img src="http://via.placeholder.com/320x180" / /div div class="text-container" p #1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 - /p span 2023年04月13日 /span /div/div1. サムネイル画像をズームして画像だけちょっと暗くする定番のブログサムネイルのホバーアニメーションです!周りの要素に影響を与えずに、かつ目を引くアニメーションなのでとても使い勝手がいいです!文字のコンテナごと明度を変えてしまうと、全体的に暗い印象になってしまうので画像にのみエフェクトをかけるのがポイントです!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card {position: relative;background-color: white;border-radius: 0.5rem;overflow: hidden;cursor: pointer;}.card .image-container {width: 320px;height: 180px;overflow: hidden;}.card .image-container img {transition: 0.3s;}.card .text-container {padding: 0.4rem;}.card .text-container p {margin: 0 0 0.4rem 0;}.card .text-container span {color: gray;}.card:hover img {transform: scale(1.1);filter: brightness(0.9);}2.サムネイル画像をズームして全体的に明るくするこちらもよく見るデザインですね!こちらは明るくするエフェクトを使っているので、全体にエフェクトを適用しても違和感が少ないです!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s;}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .image-container img { transition: 0.3s;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { filter: brightness(1.1);}.card:hover img { transform: scale(1.1);}3. ちょっとだけ浮くアニメーション配置のやり方によっては、周りの要素に重なってしまうなどの影響が出てしまうので注意が必要ですが、要素自体が移動するアニメーションは特に目を引くので効果的です!#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s;}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { transform: translateY(-0.3rem);}4. ふわっと影をつけるアニメーションボタンのホバーアニメーションでよく使われる手法ですが、ブログ記事にも使われることがあります!立体感をつけるアニメーションですので、3のデザインと組み合わせて使っても◎#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -2023年04月13日 .card { position: relative; background-color: white; border-radius: 0.5rem; overflow: hidden; cursor: pointer; transition: 0.3s; /* box-shadow: 0 0 0.8rem gray; */}.card .image-container { width: 320px; height: 180px; overflow: hidden;}.card .text-container { padding: 0.4rem;}.card .text-container p { margin: 0 0 0.4rem 0;}.card .text-container span { color: gray;}.card:hover { box-shadow: 0 0 0.8rem gray;}このサイトにはどのアニメーションがぴったりかな~アイデアがあったらSNSにコメントください!それでは次の投稿もお楽しみに!

2023年04月18日

Read More

【サンプルあり】コピペOK!背景色が濃い時に使いたくなるボタンデザイン

こんにちは!プログラマーのますみです!最近はもっぱらシステムの処理部分を書いていることが多くて、久しぶりにCSSを書きたくなったのでやります!!背景色が濃い時に使いたくなるボタンというテーマで、HTMLとCSSだけで使えるように作ってみました!HTMLはbuttonというクラスを持った要素が一つあれば完結するように作りました!div class="button"お好みのテキストdiv/あとコピペで使っていただいて大丈夫です!紹介するボタンの中にお気に入りのものがありましたら是非使ってください!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. 立体感のあるボタンホバー時のアニメーションは、不意にマウスが通った時でも意識がボタンに行くようにイメージしてデザインしました。図形どうしがぴたっと重なり合う瞬間って『はっ!』としません?何かこの現象って名前がついているんでしょうか?それとも私だけ?BUTTON.button { position: relative; box-sizing: border-box; cursor: pointer; color: white; border: 1px solid white; background-color: rgba(0, 0, 0, 0); padding: 0.5rem 2rem; transition: 0.3s; transform: translate(0rem, 0rem);}.button::before { content: "BUTTON"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0); background-color: rgba(0, 0, 0, 0); border: 1px solid white; transition: 0.3s; transform: translate(0.3rem, -0.3rem);}.button:hover { background-color: rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 0); transform: translate(0.3rem, -0.3rem);}.button:hover::before { background-color: white; color: gray; transform: translate(-0.3rem, 0.3rem);}2. 背景色がスッと変わるよ!シンプルで王道なパターンです!BUTTON.button { position: relative; z-index: 1; box-sizing: border-box; padding: 0.5rem 2rem; border: 1px solid white; background-color: transparent; color: white; cursor: pointer; transition: 0.3s;}.button:hover { color: lightcoral;}.button::after { box-sizing: border-box; content: ""; position: absolute; z-index: -1; width: 0%; height: 100%; top: 0; right: 0; border: 0px solid white; transition: 0.3s;}.button:hover::after { width: 100%; border: 1px solid white; background-color: white;}3. 角から色が変わるエフェクト対になっている角から白の四角形がだんだん大きくなっているだけですが、ぱっとみ不思議な動きに見えます!BUTTON.button { position: relative; box-sizing: border-box; z-index: 1; cursor: pointer; color: white; border: 1px solid white; background-color: rgba(0, 0, 0, 0); padding: 0.5rem 2rem; transition: 0.3s;}.button:hover { color: lightseagreen;}.button::before { content: ""; position: absolute; z-index: -1; box-sizing: border-box; width: 0; height: 0; bottom: 0; left: 0; background-color: white; transition: 0.3s;}.button:hover::before { width: 100%; height: 100%; background-color: white;}.button::after { content: ""; position: absolute; z-index: -1; box-sizing: border-box; width: 0; height: 0; top: 0; right: 0; background-color: white; transition: 0.3s;}.button:hover::after { width: 100%; height: 100%; background-color: white;}4. 吸い込まれるようなボタン枠線が太くなっていくように見えるアニメーションのボタンです!実際はborderを太くしていくとボタンのサイズ自体が変わってしまったりして管理が大変なので、緑の背景色の要素をいっぱいに表示しておいてだんだん小さくしていくといったことをしています!BUTTON.button { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; z-index: 1; padding: 0.5rem 2rem; border: 1px solid transparent; background-color: white; color: white; cursor: pointer; transition: 0.3s;}.button:hover { border: 1px solid white; color: rgb(109, 237, 109);}.button::after { content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; background-color: rgb(109, 237, 109); transition: 0.3s;}.button:hover::after { width: 0%; height: 0%;}最後まで見ていただきありがとうございます!なるべくシンプルな見た目で、使いやすいデザインのボタンを作ってみました!CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月17日

Read More

#1ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!最近世間を騒がせているChatGPT、私もよく使っているのですが、本当にすごい...膨大な知識量を持つ人工知能で、大体の質問に的確に答えてくれます。例えば私の地元、愛知県の観光名所について聞いてみると...愛知県には数多くの魅力的な観光名所があります。その中でも代表的なものをいくつかご紹介します。 名古屋城:愛知県の中心部に位置する歴史的なお城で、天守閣からは名古屋市内を一望できます。 熱田神宮:縁結びの神様として有名な神社で、毎年6月には熱田神宮例大祭が開催されます。 トヨタ博物館:自動車メーカーのトヨタが運営する博物館で、トヨタの歴史や技術を学べます。 リニア・鉄道館:世界初の商用リニアモーターカー「リニア中央新幹線」の開発を担当するJR東海が運営する博物館です。 大須観音:日本三大不動明王のひとつで、多くの人々から信仰を集める寺院です。また、周辺には個性的な商店街が広がっています。 尾張旭市レゴランド・ジャパン:レゴブロックをテーマにした日本初のテーマパークで、子どもから大人まで楽しめる施設です。 三河湾沿岸国定公園:三河湾の海岸線を中心に広がる国定公園で、美しい自然と海岸の景観を楽しむことができます。 以上が愛知県の代表的な観光名所の一部です。他にも多くの魅力的なスポットがありますので、是非訪れてみてください。ん?ちょっとまって?レゴランド・ジャパンは全然尾張旭市じゃないよ!??ChatGPTすごいよ!って紹介したかったのにいきなり間違えないでおくれよ...という感じで、時々間違えてしまうかわいいChatGPTさんは、特にプログラミングに関しての知識が豊富と言われておりまして、昨今では誰でもプログラムが書けるようになるからプログラマーの仕事がなくなると騒がれていますねこの問題については、私はまだ全然先の話かな~と思っています。理由は ChatGPTから的確な回答をもらうには的確な質問をする必要がある 的確な質問をするにはプログラミングの知識がいる 結局プログラミングの勉強しないといけないからです!ChatGPTの出現によって、プログラミングの学習がしやすくなって敷居が低くなったのも事実だと思いますが、かといってChatGPTに的確な質問ができるまでプログラミングの学習が続けられる人が増えるかというとう~ん...って感じです笑なんですが、あくまでここまでは私が頭の中で思っていることなので、実際にプログラムの知識皆無な人がシステムを作れるのか検証してみようと思います!とはいえプログラムの知識皆無な人を連れてくるのも大変なので、下記の条件で私がChatGPTを使ってシステムを作ってみようと思います!条件 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わないこれでもシステムが作れるのかやってみたいと思います!作るものはシンプルにブログを作ってみようと思います。あんまり複雑なものを作ると時間がかかって本業に支障がでちゃうからね... ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示ができたら完成!としましょう!じゃあ最初の質問!私はプログラムの知識皆無なので、この言語でこのライブラリ使ってブログ作りたい!とか書けませんから、とりあえずブログ作ってとだけ質問してみましたブログを始めるのは素晴らしいアイデアです!ブログは自分のアイデアや趣味、経験、知識を共有し、世界中の人々とつながる手段です。以下はブログを始めるための基本的なステップです。 目的を明確にする:自分がブログで伝えたいこと、ターゲットとする読者層、ブログのスタイルやトーンなど、目的を明確にすることが重要です。 ブログのテーマを選ぶ:自分が熱中していることや専門知識があること、あるいは読者にとって興味深いことをテーマにすると良いでしょう。 ブログのプラットフォームを選ぶ:無料のプラットフォームとしては、WordPressやBlogger、Tumblrなどがあります。有料のものとしては、SquarespaceやWixなどがあります。 ドメイン名を選ぶ:自分のブログに独自のドメイン名をつけると、読者にとってもブログの信頼性が高まります。 コンテンツを作成する:ブログの中心となるのは、記事や写真、動画などのコンテンツです。自分のアイデアや興味に基づいて、常に新鮮で魅力的なコンテンツを提供するように心がけましょう。 ソーシャルメディアで宣伝する:ブログを始めたら、ソーシャルメディア(Twitter、Facebook、Instagramなど)で自分の記事を宣伝することで、読者を増やすことができます。 以上が、ブログを始めるための基本的なステップです。自分のアイデアや興味を元に、自分らしいブログを作り上げていってください!まあそうなるよねブログ作って だけだと質問の意味が広すぎて的確な答えを得られませんでした。知識皆無でもプログラミングという単語はみんな知っていると思うので、質問をブログをプログラミングして作ってに変えてみますブログをプログラミングして作るには、いくつかのステップが必要です。以下は一般的なステップです。 要件の定義:最初に、ブログに必要な機能と要件を決定します。たとえば、記事を表示するページ、記事を投稿するページ、コメント機能、ユーザー登録機能などが含まれます。 デザインの決定:次に、ブログのデザインを決定します。これには、レイアウト、色、フォント、画像、ロゴなどが含まれます。 フロントエンドの開発:HTML、CSS、JavaScriptを使って、ブログのフロントエンドを作成します。これには、画面上に表示される要素を配置し、スタイルを設定することが含まれます。 バックエンドの開発:サーバーサイドのプログラミング言語を使用して、ブログのバックエンドを作成します。これには、データベースとの連携、フォームの処理、ユーザー認証などが含まれます。 データベースの設計:データベースを設計し、必要なテーブルやフィールドを作成します。ブログの記事、ユーザー情報、コメントなどのデータを保存するために使用されます。 テスト:ブログの機能が正しく動作することを確認するために、テストを実施します。これには、ユニットテスト、統合テスト、システムテストなどが含まれます。 デプロイ:最後に、ブログを公開するために、Webサーバーにデプロイします。これには、ドメイン名の取得、サーバーの設定、SSL証明書の取得などが含まれます。 以上が、ブログをプログラミングして作るための一般的なステップです。プログラミング言語としては、PHP、Ruby、Python、Node.jsなどが一般的に使用されます。また、フレームワークとしては、WordPress、Django、Ruby on Rails、Expressなどが使用されることがあります。結構いいんじゃない?フレームワークにWordPressが入っているのがちょっと疑問ではあるけど、なかなか的確な手順を教えてくれちゃった...この手順を順番に質問攻めしていけば本当にブログが作れてしまうんじゃないか...それでは続きと行きたいのですが、だいぶ長くなってしまったので次の投稿にしようと思います!次回はさっきのChatGPTの回答の 要件の定義からやっていきます!それでは次の投稿もお楽しみに~

2023年04月14日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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