ウェブエンジニア
プログラミングスクールを実際に試してレポートしています。
プログラミングあれこれ– category –
-
Laravelのwithメソッドのリファレンスが無い😂ヘルパ関数？PHP？
Laravelを学習中です。 ところでLaravelをやってるとwith()メソッドがやたら出てくる。 しかも何故かリファレンス見つからないのよ。探し方悪いのかな？ 普通HTMLリファレンス、Javaリファレンス、JavaScriptリファレンス色々あるでしょ。クラス名、メソッ... -
ubuntuにあるファイルをWindowsのVSCodeで開く
WindowsにWSL2＋Ubuntu20.04をインストールした。 ubuntuに入ってるファイルをWindows側のVSCodeで開けないかなと思ってやってみました。 私の環境は Windows10 WSL2 Ubuntu20.04 WindowsにVisual Sudio Codeをインストール https://code.visualstudio.com... -
WSL2とubuntuのファイルはWindowsのどこにあるのか？
Windows10にWSL2とubuntu20.04をインストールしました。 ubuntuの中でファイルを開いたり画像を見ようと思ったときに、Windows側のエディタとかで開いた方が楽じゃね？と思いまして。 じゃぁWSL2のubuntuのファイルはWindowsのどこにあるかなと思って調べ... -
Windows10+Docker+WSL2+ubuntuでLaravelをインストール＆プロジェクト生成
侍エンジニア塾に入ってた時に、講師のすすめでPHP Laravelの環境を構築してたものの、ついぞ構築できないまま終わってしまった悔しさがあります。 そこで改めて（いまは侍エンジニア塾生じゃないけど）Laravelのインストールのリベンジをしたいと思いまし... -
JavaScriptで簡単な検索ツールを作った
JavaScriptで検索ツールを作ってみよう JavaScriptで簡単な検索ツールを作ってみようと思い立ちました。 どういうものかというと、複数の商品やサービスがある中から特定の条件にマッチするものを抽出して表示させる。ECサイトなんかによくあるツールです... -
簡易チャットボット無料ダウンロード（プログラミングで作った）
プログラミングの勉強をしながらチャットボットを作ったので公開します。こんなのでも使ってみたい方はダウンロードしてください。（いないか‥いないよね‥） 2023年3月15日 ChatGPT APIを使う様にVer2化しました。 ブログに入れれば他者のサイトと差別化... -
JavaScriptとcssで読み込む画像の「相対パス」「絶対パス」
JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む こういう階層構造のケース sample.html jsファイルの読み込みは絶対パスでも相対パスでも構わない。Wordpressのような全ての記事（全ての階層にあるhtmlファイル）から同じjsファイルを読... -
JavaScript Forループの中で要素を消すには？配列の後ろから消す
Forループの中で配列の要素を消そうとするとおかしくなる。 以下のjavascriptは、array1で定義した配列のうち、iphoneで始まる要素を削除しています。 なのでandroid-1と、android-2だけが配列に残って欲しいところですが結果は 結果 android-1,iphone-2,a... -
JavaScriptでクッキーを保存したときに空白スペースが自動で入るので消す方法
クッキーに保存する方法と、クッキーを取り出す方法のおさらい クッキーに値を保存するには以下のように、window.documentオブジェクトのcookieプロパティに代入すると習った。 document.cookie = キー=値; 例えば、 こんな感じ。 これで キーが「hoge1」... -
JavaScript クラス名で取得した要素をループ中にremoveするとおかしくなる
備忘録、調査、試したこと、解決策をメモ。（スマートな正解かどうかは不明） クラス名で取得した要素のclassをループ中にremoveするとおかしくなる HTMLでこのように記述して、 JavaScriptはこのように記述。 1行目でclass名enemyで要素を取ってきている... -
JavaScriptでCanvasの上に描画した表示を数秒後に消すsetTimeout
5秒で消えちゃうので先に画面をお見せします。 See the Pen canvas-img-repeat by pghappy (@pghappy) on CodePen. ここから解説。 Canvas上に文字を表示して、5秒後にその文字を消す（ように見せるために再描画する）ということをやります。 まずHTML側で... -
JavaScriptでCanvas内にdrawImageした画像をrepeatする
まず結論から。以下のコードで画像の繰り返しが出きた。 HTML側はcanvasを用意してid=bgの画像を非表示で1個用意。 JavaScript側は以下のようにした。drawImageを使ってない。。 全体像はこちら。 See the Pen img-click-event-test5 by pghappy (@pghappy... -
JavaScriptでCanvas内でdrawImageした画像を押したときのイベントを発生させる
なぜかcanvasに画像を描画してそれをaddEventListnerしてもイベントが取れないので色々試したときの備忘録。 画像タグにonclick属性でメソッドを設定する方法はOK HTML側で画像を用意して、onclick属性にpushed()というメソッドを入れておく。 JavaScript... -
JavaScriptでコード内でイベントを発生させる方法
ブラウザ上でユーザーが何も操作をすることなく、イベントを発生させたい場合の話。 コード内で自分で作ったイベントを発生させる方法の備忘録。 JavaScriptでコード内でイベントを発生させる方法1 先にコードを書いておく。 HTMLは HTML側には「押して」... -
JavaScriptでtableの作成・td値の取得・行追加・クリック行取得
JavaScriptで何もないところにtableを動的に作成する createElement(tagName)とすることでtagNameで指定されたHTML要素を作成することができる。 tableを作成したい場合はcreateElement("table")とやればよい。 HTMLのtableを構成するのは、table、thead（... -
JavaScriptの配列と連想配列の扱い方（宣言・要素・追加・削除）
こちらも自分用の備忘録としてまとめたものです。 JavaScriptの基本的な配列の宣言方法 JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。 JavaScriptで配列の要素にアクセスする方法 fruits[3]とか... -
JavaScriptのCanvasとrotate()関数を使って動く時計を描画してみる
まずHTML側は とした。ページ読込時にinit関数を呼び出して、そこでキャンバスの設定を行う予定。キャンバスのサイズは250x250の黄色。 init関数は以下のように。 グローバル変数でctxと、intervalID を宣言。 translate(125,125)関数によって、座標軸を右... -
JavaScriptのCanvasのsave()とrestore()関数の使い方
キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 １．塗りつぶしの色と、座標系を保存して、 ２．塗りつぶしの色と、座標系を移動して、 ３．塗りつぶしの色と、座標系... -
JavaScriptのCanvasのtranslate()関数の使い方と意味
この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。 ★例えば 描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなことになってしまう。・・・① ... -
JavaScriptでサイコロ転がし – Canvasに画像（DrawImage）をランダム表示
スタート ストップ ソースコードは以下のようになった。 まずはHTML側。 スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。 canvasを囲うようにdivのwrapperをつけてcanvasのサイズを調整。dic...