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

ますみのブログ

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

【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

【CSS入門】px、%、vw、vh、em、remを実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は要素の大きさを指定する単位、px、%、vw、vh、em、remを解説していきます!CSSの基本中の基本です!是非最後まで読んでマスターしてくださいね!この記事を読んでほしい方! CSSを学習してスキルを身に着けたい方 基礎知識をまとめた記事をブックマークしておきたい方 実際にコードを書きながら覚えたい方この記事では実際にCSSを書きながら書き方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 基礎 つまづきやすいポイント pxの使い方 %の使い方 vwの使い方 vwは画面サイズの横幅、vhは画面サイズの縦幅で指定する emの使い方 remの使い方 どの単位を使うべきか 基本的には相対的な単位を使う 絶対的な単位を使うケースそれではさっそく見ていきましょう!基礎px、%、vw、vh、em、remというのは、数値の単位です。日常生活で言う、cmや、mmと同じと思っていただけたら大丈夫です。つまづきやすいポイント絶対的な単位と相対的な単位がある先ほどcmや、mmと同じとお話ししました。例えば、『クローゼットの横幅が2mだから、2m以内の収納ボックスを買わないといけないね』という感じで使っていくわけですが、CSSで使う単位には独特なものがあります。絶対的な単位こちらは日常生活で使う単位と一緒で、そのまま指定したサイズで表示されます。当たり前ですが、横幅1mの収納ボックスを横幅2mのクローゼットに入れても、収納ボックスの大きさは1mのままで変わりませんね。pxが絶対的な単位に当てはまります。相対的な単位CSSの世界では、横幅1mの収納ボックスを横幅2mのクローゼットに入れたら2mになった!みたいなことが起こります。どういうことかというと、CSSではこの収納ボックスは、クローゼットの100%の横幅です!というように、入れ物の大きさを基準にサイズを決める単位がほとんどです。これを踏まえて、px、%、vw、vh、em、remそれぞれの書き方を覚えていくとつまづきづらいと思います。pxの使い方ParentBox.parent { width : } .box { width : } pxは絶対的な単位です。親要素の大きさに関わらず、指定した数値で要素を表示します。上のエディターのparentのwidthを変更してみてください。boxの大きさが変化しないことがわかると思います。%の使い方ParentBox.parent { width : } .box { width : } %は相対的な単位です。親要素の何%の横幅で要素を表示します。上の例ではparentの横幅の50%の横幅で青いボックスを表示しています。エディターでboxのwidthを100%にしてみてください。parentの横幅と同じになることがわかると思います。また、boxに%で横幅を指定した状態でparentの横幅を変更すると、parentの大きさに合わせて青いボックスの大きさも変化していきます。vwの使い方ParentBox.parent { width : } .box { width : } vwは相対的な単位ですが、親要素ではなく画面サイズの横幅の何%で要素を表示します。上の例では30vwと指定しているため、画面サイズサイズの横幅の30%で青いボックスが表示されています。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。vwは画面サイズの横幅、vhは画面サイズの縦幅で指定するParentBox.parent { width : } .box { width : height : } 上の例では、青いボックスの縦横の大きさを、画面サイズの縦幅の10%に指定してあります。例えばwidthを100vw、heightを100vhとすると、画面サイズ目いっぱいに青いボックスを表示することになります。もちろんvhもparentの大きさの影響は受けないため、parentのサイズを変更しても青いボックスの大きさは変わりません。emの使い方ParentBox.parent { width : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくフォントサイズの何倍かで要素を表示します。上の例ではfont-sizeを16pxに指定しており、青いボックスの横幅を10emと指定しているため、16 10pxで青いボックスが表示されます。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。青いボックスにフォントサイズを指定しておらず、.parentにフォントサイズを指定している場合は、.parentのフォントサイズが青いボックスに適用されるため、.parentのフォントサイズ emの数値で要素が表示されます。ParentBox.parent { width : font-size : } .box { width : } remの使い方ParentBox.parent { width : font-size : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくWebサイトの基準のフォントサイズの何倍かで要素を表示します。Webサイトの基準のフォントサイズとは、htmlに設定されているフォントサイズのことを指します。htmlのデフォルトのフォントサイズは16pxとなっていますので、上の例では青いボックスの横幅は16 10pxで表示されます。各要素のフォントサイズの影響を受けないため、parent、boxのフォントサイズ、またはparentの横幅を変更しても、青いボックスの横幅が変わらないことがわかります。どの単位を使うべきかそれぞれの単位がどのような働きをするかを解説していきました。レイアウトに応じて適切な単位を使っていきましょう。単位を選ぶ基準をざっくりと解説していきます。基本的には相対的な単位を使う紹介した単位の中で、絶対的な単位はpxのみでしたが、基本的には相対的な単位で大きさを指定しましょう。相対的な単位を使う理由を解説します。柔軟なレイアウトが実現できるパソコンやスマートフォンによって画面のサイズが違うため、絶対的な単位で横幅を指定した時に画面からはみ出したり、小さすぎたりなどの問題が起こることがあります。相対的な単位を使うことで画面サイズに応じて要素のサイズが自動で変わるため、レイアウト崩れを起こしづらくなります。管理がしやすい絶対的な単位を使うと、一か所の要素のサイズを変更した際に他のレイアウトが崩れ、複数個所修正することになったりします。相対的な単位を使っていると、一か所の要素のサイズを変更すると、その子要素なども連動してサイズが修正されるため、変更箇所が少なくなることが多いです。絶対的な単位を使うケースpxを使ったほうが良い場合もあります。その例をご紹介します。高さを指定する場合パソコンは基本的には横長の画面、スマートフォンでは縦長の画面になっています。要素の高さを相対的な単位で指定した場合、パソコン、スマートフォンでそれぞれ見たときにレイアウトが大幅に変わってしまう場合があります。その為、Webサイトのヘッダーの高さなどを指定する際は、pxを使う選択も考えられます。最後まで読んでいただきありがとうございました!要素の大きさを指定する単位は種類も多く、それぞれ働きが複雑なため、反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

Read More

Javascriptの楽譜描画ライブラリ『VexFlow』を試してみる

この記事は情報をまとめている最中の項目もあります。ご了承ください...五線譜の描画まずは空の五線譜を描画してみましょう。typescriptimport Vex from "vexflow";const { Renderer, Stave } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble"); stave.setContext(context).draw();}scoreRenderer();サンプルのコードはtypescriptでのソースコードになっています。音部記号ト音記号const stave = new Stave(10, 40, 400);stave.addClef("treble")addClefにtrebleを指定します。へ音記号const stave = new Stave(10, 40, 400);stave.addClef("bass")addClefにbassを指定します。ハ音記号const stave = new Stave(10, 40, 400);stave.addClef("alto")addClefにaltoを指定します。タブ譜const stave = new Stave(10, 40, 400);stave.addClef("tab")addClefにtabを指定します。その他音部記号vexflowの音部記号に関するソースコードはこのようになっていました。 return { treble: { code: 'gClef', line: 3, point: 0, }, bass: { code: 'fClef', line: 1, point: 0, }, alto: { code: 'cClef', line: 2, point: 0, }, tenor: { code: 'cClef', line: 1, point: 0, }, percussion: { code: 'restMaxima', line: 2, point: 0, }, soprano: { code: 'cClef', line: 4, point: 0, }, 'mezzo-soprano': { code: 'cClef', line: 3, point: 0, }, 'baritone-c': { code: 'cClef', line: 0, point: 0, }, 'baritone-f': { code: 'fClef', line: 2, point: 0, }, subbass: { code: 'fClef', line: 0, point: 0, }, french: { code: 'gClef', line: 4, point: 0, }, tab: { code: '6stringTabClef', point: 0, }, };addClefにtenor、percussion等の値も指定できるようです。拍子記号const stave = new Stave(10, 40, 400);stave.addTimeSignature("4/4");addTimeSignatureに拍数/音符の形式で値を指定すればOKです音符を描画するtypescriptimport Vex from "vexflow";const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("bass").addTimeSignature("4/4"); stave.setContext(context).draw(); // ↓追加 const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }), ]; const voice = new Voice({ num_beats: 4, beat_value: 4 }); voice.addTickables(notes); new Formatter().joinVoices([voice]).format([voice], 350); voice.draw(context, stave); // ↑追加}scoreRenderer();ソースコード後半のこの部分はバランスよく音符を配置するためのもののようです。const voice = new Voice({ num_beats: 4, beat_value: 4 });voice.addTickables(notes);new Formatter().joinVoices([voice]).format([voice], 350);new Voice({ num_beats: 拍数, beat_value: 音符});という形式になっており、各値は拍子記号と同じ数値を指定してください。ここで指定した長さと、音符全体の長さが合わないと描画できないようです。音符の描画const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),];StaveNoteを使用し、配列で定義していきます。音の高さkeysで音の高さを指定します。音名(小文字)/オクターブという形式の文字列の配列を使用します。臨時記号は別で指定するようなので、c#/4のように指定しても描画されません。ちなみに音部記号を自動で判別してくれないので、音符ごとにclefというキーを追加する必要があります。stave.addClef("bass").addTimeSignature("4/4");//...const notes = [ new StaveNote({ keys: ["c/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["d/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q", clef: "bass" }),];音の長さdurationで音の長さを指定します。qは四分音符です(quarter)。数値でも指定できるようなので、こちらの方が楽そうです。const notes = [ new StaveNote({ keys: ["c/4"], duration: "8" }), // 八分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];連桁は別途指定する必要があります。休符休符はdurationで指定した音の長さの後にrを追加しますconst notes = [ new StaveNote({ keys: ["b/4"], duration: "8r" }), // 八分休符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];休符の位置は音の高さの影響を受けるため、連桁があったりした場合は調整していきます。基本的にはト音記号であればkeysはb/4を指定しておけば綺麗な位置に表示できます。臨時記号ソースコード冒頭にAccidentalを追加しますconst { Renderer, Stave, StaveNote, Voice, Formatter, Accidental } = Vex.Flow;各音符にaddModifier(new Accidental(臨時記号))という形式で指定します。const notes = [ new StaveNote({ keys: ["c#/4"], duration: "4" }).addModifier(new Accidental("#")), // シャープ new StaveNote({ keys: ["c##/4"], duration: "4" }).addModifier(new Accidental("##")), // ダブルシャープ new StaveNote({ keys: ["cb/4"], duration: "4" }).addModifier(new Accidental("b")), // フラット new StaveNote({ keys: ["cbb/4"], duration: "4" }).addModifier(new Accidental("bb")), // ダブル♭];チュートリアルにはkeysにも臨時記号を指定していますが、描画には影響しません。付点import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Accidental } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes = [ dotted( new StaveNote({ keys: ["e##/5"], duration: "8d", }).addModifier(new Accidental("##")) ), new StaveNote({ keys: ["eb/5"], duration: "16", }).addModifier(new Accidental("b")), dotted( new StaveNote({ keys: ["eb/4", "d/5"], duration: "h", }), 0 /* add dot to note at index==0 */ ), dotted( new StaveNote({ keys: ["c/5", "eb/5", "g#/5"], duration: "q", }) .addModifier(new Accidental("b"), 1) .addModifier(new Accidental("#"), 2) ), ]; Formatter.FormatAndDraw(context, stave, notes); function dotted(staveNote, noteIndex = -1) { if (noteIndex 0) { Dot.buildAndAttach([staveNote], { all: true, }); } else { Dot.buildAndAttach([staveNote], { index: noteIndex, }); } return staveNote; }}scoreRenderer();情報まとめ中連桁import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Beam } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes1 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const notes2 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const allNotes = notes1.concat(notes2); const beams = [new Beam(notes1), new Beam(notes2)]; Formatter.FormatAndDraw(context, stave, allNotes); beams.forEach((b) = { b.setContext(context).draw(); });}scoreRenderer();情報まとめ中

2023年05月22日

Read More

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

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

2023年04月15日

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

XserverでLaravelは使える?使えない

こんにちは!エンジニアのますみです!本日はLaravelで作成したアプリケーションがXserverで動かせるかどうか?LaravelをXserverにアップロードする前に確認しておかないといけないポイントを解説します! 今ならお試し10日間無料!XserverでLaravelは動く?結論から言うと、動きます。当サイトはLaravelで作成しており、特に不自由なく動作しています。ですが、アップロードする前に確認しないといけないポイントがある為、見ていきましょう。XserverにLaravelをアップロードする前に確認しておくポイントアップロードする前に、Xserverが対応しているPHPのバージョンと、Laravelのバージョンに互換性があるかを確認しておく必要があります。Laravelは現在最新バージョンが10になっており、Laravel10はPHPのバージョンが8.1以上でないと動きません。現在Xserverが対応しているPHPのバージョンは以下の通りです。 PHP 8.1.x PHP 8.0.x PHP 7.4.x PHP 7.3.x PHP 7.2.x PHP 7.1.x PHP 7.0.x PHP 5.6.x PHP 5.5.x PHP 5.4.x PHP 5.3.3 PHP 5.1.6XserverはPHP8.1にも対応しているので今のところLaravel10も問題なく動作します。ですが、これはブログ執筆時の情報のため、一応XserverのウェブサイトやLaravelのドキュメントの確認はしておきましょう。Laravelをアップロードする時のレンタルサーバー選びのポイントLaravelはデータベースの更新やキャッシュの処理などをコマンドで行います。また、CSS、Javascriptのビルドにnpm、yarnを利用する為、SSHが使えるレンタルサーバーを選びましょう。他にもいくつかポイントのがあります。レンタルサーバー選びのポイント PHPが使える SSHが使える npm、yarnが使える データベースが使える上の条件を満たしていないレンタルサーバーではせっかく作成したLaravelのアプリケーションが動かないことがありますのでしっかり確認してから契約しましょう。当サイトではXserverのスタンダードプランを利用しています。Xserverのプラン一覧プラン料金(月)データベースSSHスタンダード990円~〇〇プレミアム1,980円~〇〇ビジネス3,960円~〇〇 Xserverは先ほどのLaravelをアップロードする時のレンタルサーバー選びのポイントをすべてクリアしているため、Laravelを使うときはおすすめのレンタルサーバーです。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月06日

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はこちらのサイトで簡単に動かしてみることができます!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

超便利な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

【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

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

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

2023年04月16日

Read More

【HTML、CSS】1-1、1-2みたいなネストしたリストの作り方

こんにちは!エンジニアのますみです!本日は1-1、1-2のようなナンバリングを指定するCSSの書き方を解説します。ブログの目次などを見やすくするには欠かせないテクニックです!目次 サンプル 1-1、1-2みたいなネストしたリストの作り方 リストを作る 子リストを少し右に寄せる デフォルトのリストスタイルを非表示にする 疑似要素とcountersを使いナンバリングする ネストしたリストにも同じようにナンバリングの設定をする 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示それではさっそく見ていきましょうサンプル 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素こんな感じのリストを作っていきます。ol要素のようなナンバリングに見えますが、1-1、1-2のようなナンバリングもありますねこれは通常のol要素では作れないため、疑似要素とcounter属性を使っていきます。ちなみに1.1、1.2のようなナンバリングもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素応用するとこんな感じのデザインもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素1-1、1-2みたいなネストしたリストの作り方手順1. リストを作る 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素HTMLdiv class="コンテナ"    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li /ul    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li    /ul/div今回はCSSを書く際にセレクタの付け方が少々複雑になります。その為、わかりやすいように日本語でクラス名を付けましたが、本来は日本語のクラス名はおすすめしません。また、以下のようにHTML要素もネストさせたいところですがナンバリングをつける際にCSSが難解になってしまうため、上記のように書くことにします。HTMLul class="親リスト" style="margin-bottom: 0" li class="親リストのli要素"親リストのli要素/li li class="親リストのli要素"親リストのli要素/li li ul class="子リスト" style="margin-bottom: 0" li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li /ul /li/ulちなみにul、ol要素でなくても今回紹介するナンバリングを表示させることが可能なので、場面に応じでHTML要素を決めてください!手順2. 子リストを少し右に寄せる 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.子リスト { margin-left: 0.8rem;}やりたいレイアウトによってはこの工程は無くても可です。こうすることにより、ネストしているとわかりやすくなります。手順3. デフォルトのリストスタイルを非表示にする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.親リスト { list-style: none; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; // 追加}デフォルトのリスト装飾は使わないため、親リスト、子リストともにlist-style:noneをセットします。手順4. 疑似要素とcountersを使いナンバリングする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul; // 追加}.親リスト { list-style: none;}.親リスト .親リストのli要素::before { counter-increment: ul 1; // 追加 content: counter(ul); // 追加}.子リスト { margin-left: 0.8rem; list-style: none;}コンテナにcounter-reset、親リストのli要素に疑似要素(::before)を追加し、counter-incrementという値を使用しています。そして::beforeのcontentにはcounter(ul)という指定をしています。疑似要素(::before)について詳しく知りたい方はこちらの記事をご覧くださいCSSにはセレクタで指定した要素が出てきた回数を数えて、順番にナンバリングする機能があります(若干語弊があるのですが後ほど詳しく解説します)その為に使う属性がcounter-reset、counter-increment、counterです。counter-resetで名前と初期値を指定、リセットするcounter-reset: 名前 初期値;この時に指定した名前に回数を記憶していきます。初期値は指定しなければ0になります。counter-resetを指定した要素が現れるたびに名前に記憶された回数は初期値にリセットされます。今回は.コンテナを持つ要素は一つだけですが、二つ以上に.コンテナを持つ要素が増えるかもしれません。変更が起こる可能性を考えてcounter-resetはしっかり指定しておきましょう。counter-incrementで回数を更新するcounter-increment: 名前 増加数;counter-incrementを指定した要素が現れるたびに、名前に記憶されている回数を更新します。この時、counter-incrementに指定した増加数分数値が増えていきます。今回は.親リスト .親リストのli要素::beforeに対してcounter-incrementを指定しました。.親リスト .親リストのli要素::before { counter-increment: ul 1;}.親リスト .親リストのli要素::beforeが現れるということはHTML上では.親リスト .親リストのli要素が現れたタイミングなのでul class=親リスト style=margin-bottom: 0 ulをリセット、初期値の0がセットされる li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 li ul class=子リスト style=margin-bottom: 0 li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li /ul /li/ulこういうことですねcounter(名前)で要素を表示content: counter(名前)counter-reset、counter-incrementで使用していた名前に記憶されている数値を表示するときにcounter(名前)とします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li/ul/divもちろん名前を間違えてしまうとおかしなカウントになってしまうので誤字には注意してください。手順5. ネストしたリストにも同じようにナンバリングの設定をする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul; // 追加}.子リスト .子リストのli要素::before { counter-increment: uul 1; // 追加 content: counter(uul); // 追加}子リストにもナンバリングをする設定を追加します。親リストの出現回数を記憶しているulとは別でカウントをしていく必要があるため、別途uulという名前に子リストの出現回数を記憶するようにします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される/ul/div今回はcounter-resetを指定した子リストが二回出現します。そのためuulが記憶している数値はリセットされて、二個目の子リストはまた1,2,3とナンバリングされます。手順6. 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); // 修正}子リストのli要素の::beforeを修正し、親リストの出現回数を記憶しているulを呼び出すことで1-1、1-2というナンバリングが表示できます。子リストのli要素の一つ目が出現したタイミングで、親リストの出現回数を記憶しているulは2になっているため2-1と表示できるわけですねdiv class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(ul) - counter(uul)で表示、2-1が表示される...content: counter(ul) - counter(uul);の-が親リストの出現回数と子リストの出現回数の間に表示される文字なので、お好みの文字を入れることで1.1、1.2、1.3と表示したり1:1、1:2と表示したりできます。あとは余白や色を微調整したら完成! 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}この辺はお好みで!::before要素に背景色や文字色等のスタイルを指定することで自由なデザインが可能です!最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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