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

ますみのブログ

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

【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を覚えよう】Djangoのルーティングの設定をしてみる

Djangoは、PythonのWebアプリケーションフレームワークです。Djangoを使用することで、Webアプリケーションの開発を簡単かつ迅速に行うことができます。さて、わたしの専門分野(?)はPHP、typescript等です。Pythonは基礎文法レベルなので、この機に触ってみようと思ってDjangoに挑戦することにしました本日はDjangoのルーティングについて勉強してみようと思います。とりあえず何か表示するこちらの記事で作成したプロジェクトの主となるフォルダにurls.pyというファイルがありますこのurls.pyというファイルではURLと関数等を結びつける役割をします。まず試しにルートhttp://127.0.0.1:8000にアクセスしたらHello, World!と表示してみます。mypage/urls.pyfrom django.http import HttpResponse # 追加from django.contrib import adminfrom django.urls import pathurlpatterns = [ path('', lambda request: HttpResponse("Hello, world!")), # 追加 path('admin/', admin.site.urls),]無名関数(ラムダ式)を使ってとりあえず画面に文字を表示させてみます。問題なくHello, world!と表示されたらOKです。さて、Djangoではプロジェクトの中にアプリケーションをいくつも持つ構造になっているようです。ドキュメント通りにpollsというアプリケーションを作成してみたいと思います。アプリケーション作成このコマンドでアプリケーションを作成します。python manage.py startapp pollsmanage.pyの部分はDjangoプロジェクトルートのmanage.pyを指定する必要があるため、必要に応じてパスを正確に指定します。こんな感じでpollsが生成されましたもちろんコマンドのpollsの部分は好きに変えて大丈夫です。python manage.py startapp ここが作成するアプリケーション名になるviews.pyを修正先ほど生成したpollsフォルダ内のviews.pyを修正していきますpolls/views.pyfrom django.shortcuts import render# Create your views here.初期状態でこんな感じだと思います。ドキュメント通り以下のコードを追加しますfrom django.http import HttpResponse # 追加from django.shortcuts import render# Create your views here.def index(request): # 追加 return HttpResponse("Hello, world. You're at the polls index.") # 追加この関数ではHello, world. Youre at the polls index.という文字のレスポンスを返します。つまり、あるURLにアクセスしたらこのindexという関数を呼ぶように設定すれば、画面にはHello, world. Youre at the polls index.と表示されるわけです。ではあるURLにアクセスしたらindexという関数を呼ぶという処理を、mypage/urls.pyとpolls/urls.pyに書いていきます〇〇/urls.pyにルーティングを追加どうやらDjangoでは、小さいアプリケーションでのルーティングを設定それを主体のアプリケーションで呼び出しといった流れでルーティングをしていくようです。当記事(ドキュメント通りですが)では、小さいアプリケーションがpolls、主体のアプリケーションがmypageになっています。ドキュメントを見た感じpollsにもurls.pyを作成し、それを主体のmypageのurls.pyで呼び出す必要があるっぽいですまずは小さいアプリケーションのpollsにurls.pyを作成してルーティングを設定します。polls/urls.pyfrom django.urls import pathfrom . import viewsurlpatterns = [ path("", views.index, name="index"),]これを大きいアプリケーションのmypageのurls.pyで呼び出しますmypage/urls.pyfrom django.contrib import adminfrom django.urls import include, pathurlpatterns = [ path("polls/", include("polls.urls")), path('admin/', admin.site.urls),]これでpolls/にアクセスしたらHello, world. Youre at the polls index.と表示されるようになります。今回のまとめDjangoは主となるアプリが小さいアプリをいくつも束ねて管理するフレームワークなのかな?イメージこれは慣れているLaravelやSymfonyにはない概念だったのでびっくりです。大規模なWebアプリケーションを管理するにはめちゃくちゃよさそうな感じがします。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月21日

Read More

未経験エンジニアが本当に勉強しておくべき4つのこと

こんにちは!エンジニアのますみです!私は独学で、未経験からエンジニアになることができました。同じように独学で未経験からエンジニアを目指す方も多いと思います。私が独学時代に感じていたことなのですが、プログラム言語の文法に関する記事や、プログラミングスクールを紹介する記事は世の中にたくさんありました。ですが、現場に出たときに必要になるスキルについて詳しく書いてある記事になかなか出会えませんでした。なんとかエンジニアとして採用していただくことができたのですが、現場ではこれ勉強しておけたらよかったのに...と思ったことがたくさんあって、なかなか役に立てない時期がありました。そこで私が現場で感じた『未経験エンジニアが本当に勉強しておくべきこと』を記事にしていこうと思います!目次 未経験エンジニアが本当に勉強しておくべきこと 完璧にしようとしない 基礎文法はほどほどでいい ライブラリ等は積極的に使って! 一人でもバージョン管理システムを使って!1. 未経験エンジニアが本当に勉強しておくべきこと未経験エンジニアの方が取り組む課題は、大体こんな感じだと思います 基礎文法を覚える Webサイトを作ることを目指している方は既存のサイトの模写コーディングなど システムを作ることを目指している人は、ブログやシンプルなSNS等の簡単なコーディングそして、多くの方が現場を想定した学習ができていません。そういった情報はなかなか手に入りませんから、がむしゃらに課題をこなしていくしかないわけです...2. 完璧にしようとしないこれ、すごく大事!特に基礎文法を覚えていく段階では、『基礎だししっかりやらないと次に進めない!!』と思ってしまいがちですが適当でいいです!基礎文法も実は覚えることが膨大にあって、それらすべてを丸暗記するには膨大な時間がかかりますし、現場でも忘れてしまったら調べればいいんです重要なのは、素早く調べられるように概念をふわっと覚えておくことです!2. 基礎文法はほどほどに例えば、あるサービスに会員登録している人達の中で、年齢が20歳以下の人の情報に絞り込みたいというケースがあったとします。もしこのケースのプログラムを書くための情報収集をしようと検索エンジンで検索をかけても 会員登録20歳以下 検索 情報 絞り込み 20歳以下こんなキーワードで検索してしまっていては解決に時間がかかってしまいますねこの時に、データベース、where、数値、if文、配列などのキーワードさえ覚えていたら、的確な検索ができるわけです。なので、配列を一字一句間違えずに定義できるとか、forやif、switch等の書き方を暗記するといったことには時間をかけなくてもよくてそういった機能があるということが覚えられたらどんどん先に進みましょう!覚えることはまだたくさんありますから!まとめ 基礎文法は一字一句覚えなくていい 調べたりできるようにふわっと概念だけ覚えればOK!3. ライブラリ等は積極的に使って!プログラミング言語にはライブラリ、フレームワークというものが各言語ごとに存在していまして、これらはプログラムを書く工程を減らしてくれたり、便利な機能を簡単に使うことができたりします。学習し始めの頃は体育会系の精神でまだそんなものに頼っていいレベルではない!まずは基礎をしっかり固めてから便利なツールを使おう!という方多いのではないでしょうか?使ってくださいまず現場ではほぼ間違いなくライブラリやフレームワークはガンガン使っていて、よほどのことがなければ自力で0からプログラムを書くという選択はしませんどうしてかというと、自力で0から書いたプログラムはどうしても書いた人の癖などが入ってしまうのですが、複数人でプロジェクトを管理している時は他の人がプログラムを理解できないし、何年後にもし自分がそのプロジェクトを離れて他の人が引き継ぐことになった時に、我流のプログラムは迷惑をかけてしまうことがあるのですライブラリやフレームワークを使うことで、我流のプログラムを書く箇所を減らすことができるので、一緒に働く仲間にとって優しいプログラムが書けるわけです!なので、我流で0からプログラムを書くスキルよりも、ライブラリやフレームワークを使いこなすスキルを身に着けてみてください!まとめ 我流のプログラムは現場ではほぼ使わない ライブラリ、フレームワークを使いこなすスキルのほうが重要!4. 一人でもバージョン管理システムを使って!バージョン管理システムという言葉を初めて聞いた方もいるかと思いますバージョン管理システムは複数人でプロジェクトを作成、管理する際にすごく便利なツールで、ほとんどの会社が開発に使用しています。どんなことができるかというと 誰がいつファイルを編集したかわかる 複数の人が同じ個所を編集してしまった時にはその旨を伝えてくれる 何日前の状態に戻したりといったことが簡単にできる等、もっとたくさん便利な機能はあるのですが、代表的なものはこんな感じです。未経験でプログラム学習中の方は、よほど一人で学習をしていると思いますから、実際のところバージョン管理システムの恩恵はそこまで受けられません。しかしバージョン管理システムを扱うスキルは現場ではほぼ必須になっていますので、是非使ってください!バージョン管理システムで有名なものだとgithub(ぎっとはぶ)というのがあって、これを勉強しておけば大丈夫だと思います!githubの使い方については長くなりすぎるのでまた別の記事に書こうと思います。覚えておいて絶対に損はないので是非使ってみてください!まとめ 一人でチーム開発ごっこをしたほうが良い最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月17日

Read More

人工知能に営業トークを考えてもらう【Chat-GPTプロンプト】

こんにちは!エンジニアのますみです!本日はChat-GPTを使い、営業トークを考えてもらって参考にする方法を解説します!それではさっそく見ていきましょう保険の営業トークを考えてもらうマンションを所有する方に火災保険の営業をするケース以下の命令文をChat-GPTに送信しますあなたは一流の営業マンです。私は保険会社に勤めており、マンションを所有する方に火災保険の営業をしようとしています。あなたの一流の営業マンとしての経験や知識を存分に活かし、営業トークを考えてくださいChat-GPTの回答こんにちは、私はChatGPTと申します。お忙しい中、お時間をいただきありがとうございます。保険には、人生において非常に重要な役割があります。特に、自宅を所有している方にとって、火災保険はとても重要なものです。もしもの時に備え、しっかりと保険に加入しておくことで、大きな安心感を得ることができます。ここで、私たちが提供する火災保険の魅力をお伝えいたします。まず、私たちは顧客の立場に立って、最適な保険商品を提供しています。火災保険には、様々な種類があります。保障内容や保険料、特典などについて、お客様に理解していただけるように、わかりやすく説明させていただきます。お客様に合った最適な商品をご提供することで、お客様にとって必要な保険をより適切なものにすることができます。さらに、私たちは保険加入後も、お客様の安心と安全を守るためのサポートを行っています。保険加入後に不安や疑問が生じた場合には、24時間体制でサポートを行っております。また、火災発生時には、迅速かつ適切な対応を行い、お客様の安全を確保いたします。最後に、私たちは長年にわたって培ってきた信頼と実績があることを自信を持ってお伝えいたします。私たちは、保険業界において多くのお客様から信頼をいただいており、今後もお客様のニーズに合った保険商品の提供に取り組んでまいります。以上、私たちが提供するサービスの一部をご紹介させていただきました。火災保険は、自宅を所有している方にとって非常に重要なものです。しっかりと保険に加入し、いざという時に備えておくことで、お客様の安心と安全を守ることができます。どうぞお気軽にご相談ください。さらにもう少し詳細な情報を付け加えてみましょう。あなたは一流の営業マンです。私は保険会社に勤めており、マンションを所有する方に火災保険の営業をしようとしています。アピールポイントはニーズに合わせて細かく保険内容を設定することができ、保険料を抑えることができます。あなたの一流の営業マンとしての経験や知識を存分に活かし、営業トークを考えてください自社の製品のアピールポイントを付け加えました。Chat-GPTの回答こんにちは、私はChatGPTです。保険には、人生において非常に重要な役割があります。特に、自宅を所有している方にとって、火災保険はとても重要なものです。お客様のニーズに合わせた保険内容の設定について、私たちの取り組みをご説明いたします。私たちはお客様の声に耳を傾け、お客様が求める保険内容を細かく設定することができます。火災保険には、様々な種類があり、保障内容や保険料などによっても選ぶ商品が変わってきます。お客様が必要とする保障内容をお伺いし、その内容に合わせて最適な保険プランをご提案していきます。お客様のニーズに合った保険プランをご提供することで、保険料を抑えることも可能です。さらに、私たちは保険加入後も、お客様のサポートを行っています。火災発生時には、迅速かつ適切な対応を行い、お客様の安全を確保いたします。また、不安や疑問が生じた場合には、24時間体制でサポートを行っております。最後に、私たちは長年にわたって培ってきた信頼と実績があります。私たちは、保険業界において多くのお客様から信頼をいただいており、今後もお客様のニーズに合った保険商品の提供に取り組んでまいります。以上、私たちが提供するサービスの一部をご紹介させていただきました。火災保険は、自宅を所有している方にとって非常に重要なものです。お客様のニーズに合わせた保険プランをご提案し、保険料を抑えることも可能です。どうぞお気軽にご相談ください。こんな感じで火災保険の営業トークを考えてくれました。もちろんそのまま使えるかは別ですが、要点等を捉えるには十分でしょう。生命保険の営業をするケース以下の命令文をChat-GPTに送信しますあなたは一流の営業マンです。私は保険会社に勤めており、生命保険の営業をしようとしていますあなたの一流の営業マンとしての経験や知識を存分に活かし、営業トークを考えてくださいChat-GPTの回答こんにちは、私はChatGPTです。保険には、人生において非常に重要な役割があります。特に、将来の安定や安心を考えるうえで、生命保険はとても重要なものです。私たちは、お客様の人生設計に合わせた生命保険商品を提供し、お客様が安心して暮らせるようサポートいたします。私たちが提供する生命保険商品には、多様な種類があります。例えば、定期保険、終身保険、医療保険、がん保険など、それぞれの商品には異なる特徴やメリットがあります。お客様が抱えるライフステージに合わせて、最適な生命保険商品をご提案していきます。さらに、私たちは保険加入後も、お客様のサポートを行っています。病気やケガなどの際には、迅速かつ適切な対応を行い、お客様の健康をサポートいたします。また、保険金請求時には、スムーズな手続きを行うことで、お客様が安心して保険金を受け取ることができるようにしています。最後に、私たちは長年にわたって培ってきた信頼と実績があります。私たちは、保険業界において多くのお客様から信頼をいただいており、今後もお客様のニーズに合った保険商品の提供に取り組んでまいります。以上、私たちが提供するサービスの一部をご紹介させていただきました。生命保険は、将来の安定や安心を考えるうえで非常に重要なものです。お客様のニーズに合わせた保険プランをご提案し、お客様の人生設計をサポートすることが私たちの使命です。どうぞお気軽にご相談ください。。このように命令文の二行目を書き換えることで、営業トークを考えてほしい商品を指定することができます。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

【書けるからわかるCSS】deg、rad、turnとは?

こんにちは!エンジニアのますみです!本日はCSSの数値の単位deg、rad、turnについて解説します!聞きなれない単位ですね...何に使うのでしょうか?deg、rad、turnは回転の角度の単位deg、rad、turnはすべて回転の角度を表す単位です。transformのrotate等で使うことができます。それぞれ数値の意味合いが変わってくるので見ていきましょう。degの使い方BOX.box { transform : } degは最も簡単で、1degは円周の360分の1です。普段使う角度の単位と同じですね。数値を増やすと時計回りに要素が回転します。マイナスの値を指定すると反時計回りに回転します。radの使い方BOX.box { transform : } radはラジアンのことです。3.14が180度(180deg)、6.28が360度(360deg)です。動きが難しいのでサンプルは元の角度にオレンジの線、現在の角度に青い線を引きました。turnの使い方BOX.box { transform : } turnはさらに直感的で、1で一周といった意味になります。つまり半回転させたい場合は0.5turnとすればよいというわけですね最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

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

日程調整のビジネスメールを人工知能に作ってもらって楽をする【Chat-GPTプロンプト】

こんにちは!エンジニアのますみです!本日は日程調整のメール文章を『Chat-GPT』に考えてもらう方法を解説します。目次 日程調整メールのポイントは結構多い 人工知能に日程調整メールを作ってもらう 打ち合わせの日程調整メール セミナーの開催日の日程調整 社内ズームミーティングの日程調整メールそれではさっそく見ていきましょう日程調整メールのポイントは結構多い日程調整はビジネスの世界では非常に重要な作業になります。メールで日程調整をする時の重要なポイントは以下のようになります。タイトルはメールの目的が明確にわかるようにする日程調整が目的のメールだとわかるようなタイトルをつけることで、相手にとっても返信しやすくなります。具体的には、「来週の商談日程調整について」といった具体的なタイトルを付けることが重要です。相手が誰からのメールか一目でわかるように名乗る自身の会社名、部署、名前などを含めて相手が一目でわかるようにします。提案する日程は複数用意し、柔軟に対応する相手のスケジュールに合わせて日程を提案する際には、複数の候補を用意しておくことが重要です。結びメールの締めくくりのあいさつ文を含めます。基本的なポイントだけでもこれだけあります。さて、このような日程調整メールがもし自動でできたらどれだけいいことでしょう。Chat-GPTに必要な情報を送信すればいい感じの日程調整メールを作ることができます。人工知能に日程調整メールを作ってもらう人工知能『Chat-GPT』に必要な情報を与え、日程調整メールを作ってもらいましょう。【何の日程調整か】の日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は【返信期限】です以下の候補日を本文に含めてください候補日:【候補日】このようなテンプレートを使って人工知能に情報を与えていきますChat-GPTは命令文を学習に使うことがありますので、機密情報は送らないようにしましょう打ち合わせの日程調整メール例えば打ち合わせの日程調整メールを作ってもらう場合打ち合わせの日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00このような文章を人工知能(Chat-GPT)に送信します。Chat-GPTの回答件名: 打ち合わせ日程調整について拝啓 [相手の名前様]私は[自分の名前]と申します。この度は、打ち合わせの日程調整についてご連絡差し上げます。以下の日程について、ご都合いかがでしょうか。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっておりますので、お手数ですが早めのご返信をお願いいたします。6月10日(金)12:00~13:006月11日(土)12:00~13:006月13日(月)12:00~13:00また、上記の日程についてご都合が合わない場合は、別の日程をご提案いただけますと幸いです。ご多忙のところ恐れ入りますが、ご返信をお待ちしております。敬具[自分の名前]こんな感じで件名と本文を回答してくれます。もちろんこのままでは使えませんが、部分的に修正すれば充分使えるメール内容になっています。セミナーの開催日の日程調整セミナーの開催日の日程調整メールを作ってくださいメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00Chat-GPTの回答 件名: セミナー開催日程のご案内 拝啓 [相手の名前様] 私は[自分の名前]と申します。この度は、[セミナー名]の開催日程についてご案内申し上げます。以下の日程について、セミナーの開催を予定しております。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっておりますので、お手数ですが早めのご返信をお願いいたします。6月10日(金)12:00~13:006月11日(土)12:00~13:006月13日(月)12:00~13:00セミナーの開催時間は各日程ともに12時から1時までを予定しております。また、会場は[会場名・住所]となります。なお、ご都合が合わない場合は、別の日程についてご提案いただけますと幸いです。なお、ご参加いただく方には別途ご案内をお送りいたします。ご多忙のところ恐れ入りますが、ご返信をお待ちしております。敬具[自分の名前]セミナーの開催日の日程調整メールを作ってくださいと人工知能に文章を送信すると、関連する文章もセミナーの開催日に修正してくれます。また、会場等の情報を含めることで更に使いやすい回答をしてくれるでしょう社内ズームミーティングの日程調整メールミーティングの日程調整メールを作ってくださいメールは社内に送りますミーティングはZOOMで行いますメールの本文は、自身の名乗り、本文、結びの構成にしてください返信期限は5月30日です以下の候補日を本文に含めてください候補日:6月10日12:00~13:00 6月11日12:00~13:00 6月13日12:00~13:00先ほどより詳細に、人工知能に送信する文章を作った場合はどうでしょうChat-GPTの回答件名: 【社内ミーティング】ZOOMミーティング日程調整のお願い拝啓 [社内の方々]いつもお世話になっております。[自分の名前]です。この度は、社内で開催するZOOMミーティングの日程調整についてご協力をお願いいたします。以下の日程について、ミーティングを予定しております。いずれかご都合のよい日程をお知らせいただけますと幸いです。返信期限は5月30日となっております。【候補日】・6月10日(木)12:00〜13:00・6月11日(金)12:00〜13:00・6月13日(日)12:00〜13:00会議のテーマやアジェンダについては、別途お知らせいたします。また、ZOOMのアクセス方法についても改めてご案内いたしますので、今しばらくお待ちください。何かご不明な点やご質問がございましたら、お気軽にご連絡ください。ご協力をいただけますよう、よろしくお願い申し上げます。敬具[自分の名前]社内メールであること、ZOOMで行うことを人工知能に伝えたため、出力された日程調整メールには社内に向けたZOOMミーティングの日程調整メールの文章になっています。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

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

【コピペ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

【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代プログラマーです!

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

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

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