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

ますみのブログ

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

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

未経験エンジニアが本当に勉強しておくべき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

#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!背景色が濃い時に使いたくなるボタンデザイン

こんにちは!プログラマーのますみです!最近はもっぱらシステムの処理部分を書いていることが多くて、久しぶりに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

【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

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

こんにちは!プログラマーのますみです!今回はわたしが未経験からエンジニアになるまでのお話、三回目の記事です。一回目の記事はこちら二回目の記事はこちらこれまでの記事をもう読んでくださった方、ありがとうございます!今回がわたしが未経験からエンジニアになるまでのお話、最終章になります。最後まで読んでいただけたら嬉しいです!私がプログラミングの学習を続けられた理由プログラミングを独学で勉強するのはなかなか厳しい道のりでした。Googleで調べても、専門用語を知らないから欲しい情報が見つからないし、一つのエラーを解決するのに何日もかかってしまったり...そんな状態で私がプログラミングの学習を続けることができた理由は自分で作りたいものを作っていたからでしたこれが後々、プログラマーの採用試験を受けた際にも活かされました。好きなものを作っていたから続けられたプログラミングの用語や、書き方をひたすら覚えるといった学習方法では私は絶対に学習を続けられなかったと思います。私は元々好きだったエンタメ系の業界で、役に立ちそうなものをわからないなりに作りながら学習していました。もちろん実際に使えるようなものは作れませんでしたが、好きなものを作っていたのでワクワクしながら学習することができました。めちゃくちゃなプログラムだったと思いますが、私はプログラマーになる前の時点でいくつかの完成した作品を作ることができました。そして、私はいよいよプログラマーの採用試験を受けることになります。webシステム開発の会社の面接を受けに行くことにいろいろなサイトでプログラマー未経験可の会社を探しましたが、なかなか条件に合う会社は見つかりませんでした。大抵の会社は実務経験何年以上といった条件があり、面接にこぎつけるまでも至難の業でした。そんな中ようやくプログラマー未経験可の会社を見つけ、面接を受けに行くことができました。私はめちゃくちゃなプログラムながらも、完成した作品をもっていたので、パソコンを面接に持っていき、面接官に『こんなものを作りました!』とアピールすることができました。後々社長に聞いた話では、未経験の人を採用するときは、面接に向けてちゃんと下準備で学習をしてきたか、これから学習する意欲があるかどうかを見ていたそうです。そして、わからないなりにも作品を作っていたことが決め手になり、なんと当日に採用が決まり、未経験からのエンジニアデビューをすることができたのでした。私のプログラミング学習方法私はある程度、基礎の文法を覚えたら作ってみたいものを作る作業に取り掛かりました。作るものを自分で決めるのは難しいことかもしれませんが、日々過ごしていく中でアンテナを張っておけば、何か見つけることができるかもしれませんし、既にあるアプリやウェブサイトに、『こんな機能があったらいいのに...』と思ったものを作ってみるのもいいかもしれません。そして、作りたいものを作っているうちに必要な知識がでてくるので、それを都度調べていく流れで学習をしていきました。こんなやり方では知識に偏りが出てしまうと思われそうですが、意外と基本的なことはまんべんなく学習できますし、プログラミングの知識をまんべんなく学習するのはやめた方がいいです(あまりにも覚えることが膨大過ぎるので...)もしもプログラミングの学習に行き詰ってしまったら是非試してみてください!おしまい最後まで読んでいただきありがとうございました!このブログを通じてプログラミングの学習を始めた方、未経験からの採用を目指す方に少しでも勇気を与えられたらいいなと思います!本音を言うとエンタメ業界にまた戻るのが夢ですが、それまでは皆さんにとって有益な情報を発信出来たらと思います!それでは次の記事もお楽しみに!

2023年04月16日

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

【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

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

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

2023年04月15日

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

未経験からエンジニアになった私が、採用後に『勉強しておけばよかった...』と後悔したこと

こんにちは!エンジニアのますみです!私は独学で未経験からエンジニアになることができたのですが、エンジニアに採用していただいてから『勉強しておけばよかった...』と思ったことをいくつかお話ししていこうと思います!一人で学習しているとなかなか気づけないポイントだと思いますので、プログラミングを学習している方は是非参考にして、ご自身の学習に役立ててみてください!一人で勉強していると、チームで開発するための知識が身につかなかった一番大きいのはこれですね...少し具体的にお話しすると、会社で開発をするときはよっぽど複数人で一つのプロジェクトを作っていくんですよねそしてプロジェクトに関わっているエンジニアはそれぞれ別の機能を制作していく感じになるんです例えばTwitterのようなSNSを作っているとしたら Aさんはレイアウトを作って! Bさんは投稿を保存する処理を作って! ますみさんはユーザー登録機能を作って!みたいな感じで、それぞれ作業を進めていきますこの時に発生するとマズい問題はいくつかありますが、まず同じファイルを編集してしまうことが発生しかねませんもしも私が『ユーザー登録機能を作る』を担当なのに、気まぐれで『このレイアウトのほうがお洒落だから編集しちゃお』とやってしまうと、本来レイアウトを担当していたAさんの編集したファイルと私の編集したファイルの変更がバッティングして...大変なことになりますこの例は極端ですが、起こりうるパターンとしてはファイルを役割ごとにしっかり分けられていないことが原因で、変更がバッティングしてしまうことがありますどういうことかと言うと、例えばレイアウトを担う部分と処理を担う部分がごちゃごちゃになっていたり、一つのファイル内で全然関係ない複数の処理をおこなっている場合などです一人で勉強している時はやってしまいがちなのですが、これでは変更がバッティングしてしまう可能性が高くなってしまうんです...なので、一人で制作物を作っている時も、ファイルごとに役割をしっかり分けて作っていく習慣をつけていくのが大切だと思います!簡単なところで言うと、もし今htmlにスタイルもjavascriptもごちゃごちゃにしてしまっているのであれば、まずはそれらをhtml、css、javascriptと分けることから始めてみてください!次のステップは、それらがそれぞれどんな役割を担っているのかを意識する感じですね!例えば HTML 骨組み CSS レイアウト、装飾 Javascript 処理という風にざっくりわけられますねそしてそれらが干渉しないように意識しながら制作をしてみてください!ん?HTMLファイルの中でこの処理してるの気持ち悪いな...と思えるようになってきたらレベルアップです!ということで、私が『勉強しておけばよかった...』と後悔したことの一つをお話ししました!もっと掘り下げてお話ししたいことがたくさんあるので、シリーズにしようかな...こんなことについて話してほしい!等ありましたら、Twitterのコメントで教えてください!それでは次の投稿もお楽しみに!

2023年04月15日

Read More

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

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの二回目の記事です!一回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示それでは前回の続きの 要件の定義からやっていきます!一回目の記事の冒頭で ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示ができたら完成ということに決めたので、要件の定義はこれで充分!なのでブログ記事投稿ブログ記事の一覧を表示ブログ記事を表示ができるブログをプログラミングして作りたいと質問してみます!ChatGPTの回答はソースコードを書いてくれた...回答文が非常に長いので要約すると データベースの設計をする 記事の投稿フォームを作成 記事をデータベースに保存するための処理を作成 記事一覧ページを作成 記事詳細ページを作成をしてね、ということで、それぞれのページのソースコードを書いてくれました。データベースというのはデータを保存しておくところなんですが、保存するには下準備が必要でして、ChatGPTはその下準備をするためのソースコードを書いてくれましたCREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) );これをSQL文と呼んだりします後の部分は見た目とデータを保存する、ロードする部分が書かれていますね記事の投稿フォームはこんな感じ、sqlとphpで書いていく感じかな※ここにはブログの見た目のプログラムが書いてあったのですが、保存できない形式の文字だったので載せられませんでした...すごい...だけど...私は今プログラミングの知識が皆無ですからSQL文を書かれてもどうすればいいのかわからないのだなのでSQL文をどうすればいいのか質問してみましょう。CREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) );これはどうすればいいんですか?我ながら頭の悪そうな質問文ですねChatGPTの回答はこうですこれはMySQLのクエリ文で、postsテーブルを作成するためのものです。このクエリを実行するには、MySQLサーバーに接続してから、クエリを実行する必要があります。 MySQLサーバーに接続するMySQLサーバーに接続するには、以下のコマンドを実行します。cssCopy codemysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。 データベースを作成する以下のコマンドを実行して、新しいデータベースを作成します。phpCopy codeCREATE DATABASE データベース名; データベース名には、作成するデータベースの名前を指定します。 データベースを選択する以下のコマンドを実行して、作成したデータベースを選択します。phpCopy codeUSE データベース名; テーブルを作成する最後に、以下のクエリを実行して、postsテーブルを作成します。sqlCopy codeCREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ); これで、postsテーブルが作成されます。優しいよね...こんな雑な質問でも親身になって答えてくれるChatGPT...こんな検証に突き合わせてしまってごめんね...これには何が書かれているかといいますと、さっき少しだけお話ししたデータベースにはいろいろ種類があるのですが、その中の一種のMySQLというデータベースにまず接続して、回答の手順でプログラムを実行していくといいよ!ということが書いてあります。ところがMySQLは簡単に使えるものではなく、パソコンにインストールして面倒なセットアップを終わらせないと使えません。私は今プログラミングの知識が皆無ですし、パソコンもなんのセットアップが済んでいない想定で検証をしているので、MySQLのセットアップのやり方も教えてもらわないといけませんねですが、無知な私はMySQLにセットアップがいることすら知りません。なのでこんな質問にしてみましたMySQLサーバーってなんですか?先ほどの回答の中で、一番最初に目につく知らない用語はMySQLサーバーなので、自然にこの質問をすることになるんではないでしょうか回答はこちらMySQLサーバーは、データベースを管理するためのソフトウェアです。MySQLは、オープンソースのリレーショナルデータベース管理システムであり、多くのWebアプリケーションやサーバーサイドのアプリケーションで使用されています。MySQLサーバーは、MySQLクライアントからのリクエストを受け付け、データベースの操作を行います。MySQLクライアントは、コマンドラインツールやGUIツール、プログラムなどからアクセスできます。MySQLサーバーは、データベースの作成や削除、テーブルの作成や削除、レコードの挿入や更新、クエリの実行などの様々な操作を行うことができます。また、MySQLサーバーは、多数のユーザーやアクセス制御の設定なども行うことができます。なるほど、MySQLサーバーについて丁寧に教えてくれました。ですがこれでは肝心のブログ作成は進みませんので質問を少し変えてみますMySQLサーバーはどうやって起動しますか?ChatGPTの回答はこちら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サーバーをインストールするをやってみましょうそれでは今回はこの辺で!次回の記事もお楽しみに!

2023年04月15日

Read More

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

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

2023年04月15日

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

#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -

こんにちは!プログラマーのますみです!何回かにわけて、わたしについてと、わたしが未経験からエンジニアになるまでにやったことについてお話していこうと思います!このブログを見てくださっている方々の中にはわたしが何者なのか気になっている人もいらっしゃるかと思います(いるのかな?)何回かにわけて、わたしについてと、わたしが未経験からエンジニアになるまでにやったことについてお話していこうと思います!拙い文章ですが、よかったら見ていってあげてください🙇♀️プログラミングに出会うまで小さい頃のわたしは、ピアノを弾くのと絵を描くのが好きな子供でした。当時の将来の夢は漫画家になることそんな感じの子供でしたから、プログラミングとは無縁...という訳ではなく、小さなきっかけは過ごした環境にあったんだなと思います。父の影響でパソコンが身近にある環境だった父はカメラが趣味で、よく写真を撮ってもらっていました。父には、インターネット上で知り合ったカメラ愛好家仲間がいて、時々オフ会に出掛けたりするほどの熱の入れようでした。カメラ愛好家仲間の間で、撮った写真をインターネット上にアップして見てもらうという文化があったようで、父も自分のサイトを立ち上げ、撮った写真を公開して運用していました。そんな父がいる環境にいたわたしは、父に教えてもらいながら自分の絵を公開するホームページを作って運用していました。しっかりプログラムを書くことはしていませんでしたが、パソコンとインターネットが身近にある環境で過ごしておりました。吹奏楽部に入部して学生時代を過ごす漫画家になりたい!という幼少期の夢も忘れかけていたころ、友達に誘われて吹奏楽部に入部することになりました。それから小学生、中学生と音楽に触れながら学生時代を過ごします。顧問の先生が熱心な方だったので、学校内のイベントやコンクールはもちろん、地域のイベントや県外の演奏会、テーマパークで演奏したり、たくさんのステージに立つことができました。そんな音楽に囲まれた学生時代を過ごしているうちに、エンタメ業界に惹かれていきます。エンタメ系の専門学校に進学詳しくは伏せますが、わたしは高校卒業後はエンタメ系の専門学校に進みました。専門学生時代は勉強に学校のイベントに、とても忙しかったですが、大好きな業界の勉強だったので本当に楽しい日々でした。厳しい業界ですが、在学中から少しずつ仕事をもらうことができ、卒業後はそのままエンタメ業界に進みます。このまま順調にいくかと思いきや、思わぬ悲劇が起こりました...続く

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

【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で配列を使う方法配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、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

#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

【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

【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

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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