クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

php の検索結果:

Rubyistに、俺はなる!? 6年ぶりのRyby再開計画発動

…バックエンド自体ははPHP(laravel)やJS(Node/Express)で少し経験していたが、新たにRuby(Rails)に取り組むのはオブジェクト指向(カプセル化・継承・ポリモフィズムなど)を身につけたい目的がある。 ※参考:オブジェクト指向プログラミングの3大要素 - Good Concepts in Programming - #初心者 - Qiita オブジェクト指向自体はJavaなどで身につける方法もあるが、自分の今の仕事により身近なWeb系バックエンド環境と…

2023年の振り返りと2024年の目標

…したい。 以前触ったPHPのLaravelを再開する? Ruby on Railsチュートリアルやってみる? RDBやORMの理解を深める セキュリティ周りの理解を深める クラウド構築の理解を深める バックエンドのクラウド環境は以前はHerokuを使っていたが、無料プランがなくなった? 代わりになる環境を検討したい。 コンピューターサイエンスの理解を深める プログラミングが独学であること、フロントエンドしかわからないことにネックを感じている。コンピューターサイエンスの知見に基…

【Firebase】Realtime Databaseにブラウザから直接CRUD操作する

…essのMySQL:phpMyAdmin、AdminerなどのGUIツール MAMPのMySQL:ターミナル、Express JSON Server:ターミナル MongoDB:ターミナル、Express HerokuのPostgreSQL:ターミナル、Express ※参考:Web開発環境についてのまとめ(随時更新) - Qiita ※参考:Node.js / Expressを習得するためにやったことまとめ(随時更新) - Qiita WordPress以外はまずターミナル…

【SQL】ターミナルからHerokuのPostgreSQLに接続する

…HerokuアプリはPHP系とNode.js系。 PHP ※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと Laravel(PHPのフレームワーク) ※参考:LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと Express(Node.jsのフレームワーク) ※参考:【Express】Heroku CLIを使ってNode.js環境をHer…

【Express】HerokuとGitHubを連携して自動デプロイ(環境変数は除外)

…連携を行う。 以前、PHPやLaravel環境でGitHubとHerokuの連携を行った。 ※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと ※参考:LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと 今回はNode環境でやってみる。下記のチュートリアルを参考に進める。 ※参考:GitHub 統合 (Heroku GitHub デプロイ)…

【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする

…Herokuは以前、PHPやLaravelで体験をしている。 PHPの時は黒い画面(ターミナル)に慣れてない頃でSourceTreeを使ってGitHub経由でデプロイした。 ※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと LaravelはHeroku CLIからHerokuに直接デプロイしているが、まだコマンドに慣れてなくて苦戦した覚えがある。 ※参考:LaravelをMAMP環境からHeroku…

【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする

…Lを起動→ブラウザでphpMyAdminを表示(DBの状態の確認用) ターミナルでcdコマンドでフォルダに移動→nodemonでExpress起動nodemon index.js Expressを起動するとブラウザのlocalhost:3000が開く。 「過去の一句」にDB上の一句が一覧表示されてる! Dev-toolsのConsoleパネルを見ると「Read ok!」と表示されてる! NetworkパネルのHeaders情報、GET送信が成功(304)している。 ステータス…

【Express】MySQLのデータをbody-parserでブラウザに返す

…' ); MAMPのphpMyAdminを確認すると、一句「JSや ああJSや JSや」が追加されてる!! ExpressとMySQLの連携 最後にMySQLとExpressを連携する。こちらの記事の手順にて。 ※参考:【Epxress】データベース接続の比較(MySQLとMongoDB) - クモのようにコツコツと MySQLのモジュールをインストール npm install mysql MAMPのMySQLのデータベース設定 // MySQL設定 const connec…

【Express】body-parserでFetch API(およびForm)のPOST送信を受け取る

Expressの続きです。前回はMySQLとMongoDBに接続してみました。今回は「body-parser」を使って以前触れたFetch API(およびForm)のリクエストを受け取りレスポンスを返す動きを作ってみたく思います。それではいきましょう!

【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする

…MySQLのデータをphpMyAdminではなくターミナルからCRUDした。 CRUDはデータベースの基本4操作でデータの追加、取得、更新、削除。SQL文では下記に相当する。 CRUD SQL文 機能 Create INSERT文 データを追加 Read SELECT文 データを取得 Update UPDATE文 データを更新 Delete ETE文 データを削除 ※参考:前回記事 【SQL】ターミナルからMAMPのMySQLにCRUDする - クモのようにコツコツと NoS…

【SQL】ターミナルからMAMPのMySQLにCRUDする

…集します。MAMPのphpMyAdminは使わずにターミナルから操作してみます。DBの基本操作CRUDにトライ。それではいきましょう! 【目次】 RDBとは MySQLとは データベースの基本操作CRUD MAMPからphpMyAdminを開く ターミナルからMAMPのMySQLに接続 データベースを表示(SHOW DATABASES) データベースを作成(CREATE DATABASE) データベースを選択(USE文) テーブルを作成(CREATE TABLE) Creat…

【JS】Fetch APIでPOST送信してみる(Form送信との比較も)

…。 ※参考:フォームPHPはじめの一歩($_GETと$_POSTの違い) - クモのようにコツコツと bodyに設定するデータはformのinputタグに入力した値にしたい。FormData()メソッドを使うとformのデータを取得することができるようだ。 let form = new FormData(form); newでインスタンスを生成し、引数で紐付けるフォームを指定する。 ※参考:FormData() - Web API | MDN インスタンスについてはこちら。組…

【React】イベント属性を使ってみた(onChangeとonClick)

Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChangeとonClickを使ってみます。それではいきましょう!

ブログの運営方針について(2020年3月版)

…不定期テーマ 前回はPHPフレームワークのLaravelを上げていたが、今は中断している。まず言語をJSに絞って自分のプログラミングのスキルアップに集中したい。 また、バックエンドもNode.jsやExpressで体験できることがわかったので、まずはそちらでバックエンドの理解を深めたい。*2 上記のテーマと無関係にネイティブなJS、CSS、HTMLその他で興味があるもの、理解を深めたいテーマは出てくると思うので、それは随時差し込んでいく。 コードがないライト内容(「思ったこと…

【JS】オブジェクトのプロパティをCSSのように省略した指定ができるのか検証した

JS

ネイティブJSのやってみたシリーズ。前回まではアロー関数について掘り下げました。今回は基本に立ち返り、オブジェクトのプロパティの指定の仕方を掘り下げます。CSSみたいに途中を省略した書き方はできるのか?普段なんとなく使ってるけどフワッとしていた部分を明確にしました。それではいきましょう!

【Node.js】Webサーバを立ててハローワールドを表示する

JS de バックエンド!の続きです。前回、ExpressとJSフレームワーク(React、Vue、Angular)との位置付けについて調べました。今回はNode.jsでWebサーバを立てるというのも体験したく(Expressを事始めようと思ったがその前に!)。それではいきましょう!

ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと

…イドJSということでPHP、Python、Rubyに続く流れでインストール→REPL→ハローワールドしている。が、この時点ではNode.jsで何ができるのかあまり理解できていない。 ※参考:初めてのNode.js:インストール確認、REPL、Hello worldまで - クモのようにコツコツと その後、メタ言語(テンプレートエンジン、AltCSS、AltJS)のコンパイル、Gulpのビルド、Webpackのバンドルなど、フロントエンド開発にNode環境が必要なことがわかって…

【JS】アロー関数の複数の書き方を試してみた

JS

ES6(ES2015)で追加されたアロー関数。従来の関数よりもコンパクトに書けます。IE非対応とはいえ、もう5年も経っているのでそろそろこちらをメインで行きたい!アロー関数には複数の書き方があります。自分的に直感的ではないと感じた書き方もありましたが、人が書いたコードを読むためにも実際に試してみる。あと、イベントリスナと引数の関係についても勉強になった。それでは行きましょう!

REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた

数年前からキーワードとしては知っていた「REST API」。それが何かはいまいち理解できていなかった。調べまくったところフロントエンドとバックエンドの分業の流れがようやく理解できました。「API」と「JSON」への理解も重要でした。それではいきましょう!

【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する

Tone.jsの続きです。前回はようやく三和音(トライトーン)の別のコードを増やしました。今回は四和音(セブンスコードとシックスス)にトライ。それではいきましょう!

Gulpのインストールが5分で出来なかった話(苦戦中)

メタ言語のコンパイル環境を作る!続きです。前回はコンパイル方法を検討しました。Gulpとnpm scriptsが候補となりましたが、まずはGulpから体験してみようぞホトトギス。それではいきましょう!*1 *1:と、ハイテンションで始めたが今回は悪戦苦闘な展開になります…

【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)

…ードを書く。なんだかPHPに似ている書式! ※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと こちらの記事にEJSの基本的な書式が網羅されていた! ※参考:テンプレートエンジンEJSで使える便利な構文まとめ - Qiita 上記のFizzBuzzコードをEJSで書いてみるとこうなる。 <% var h1Title = 'EJSでフィズバズる'; %> <% var count = 30; %> <section> <h1 class="red">…

【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

…ーティングについてはPHPのフレームワークLaravelに出てきた概念。「○○.html」という静的なファイルを物理的に用意せず、動的にページを生成する。 ※参考:【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる - クモのようにコツコツと Nuxt.jsのメリット 次にNuxt.jeのメリット。上記のVue.jsの弱点を拡張するプログラムがいくつか出ているが、それらを一つ一つインストールするのは手間が多いため、全部そ…

【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く

p5.jsの続きです。前回まではドットインストールのコードを紐解きました。今回からは「Generative Design with p5.js」のコードを見ていきたく。最初は「色」編です。それではいきましょう!

【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

…ンクルードタグ <?php get_header(); ?> これを貼った場所にヘッダー(header.php)がインクルードされて表示される。 ※参考:ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと header.phpにはhead要素の閉じタグに下記のコードを書く。 <!--header.php--> <?php wp_head(); ?> </head> ※参考:ざっくりWordPress:PHP書式とテンプレートタグの…

AWSを理解するために調べたこと(Webサイトホスティング編)

…ySQL (DB)、PHP(サーバサイド言語)の略。 ※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - クモのようにコツコツと サーバレスとはFirebaseとか。今回のスライドでは扱っていないがAWSにも「Lambda(ラムダ)」というのがあるようだ。サーバが無い(レス)ということではなくサーバの管理が不要というニュアンス。 ※参考:サーバーレスとは? 簡単な事例をまじえてわかりやすく解説! – キュービストブログ インフラ要素(p11)…

WordPressのCSSやJSをテーマのphpファイルをいじらずにダッシュボードだけでカスタマイズする方法

…スタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。自作テーマどころか子テーマを作るのも面倒だ!という方は是非こちらの方法をお試しください。 【目次】 Twenty Nineteenはクセが強い! これまでのカスタマイズ(自作テーマ、子テーマ) 自作テーマ 子テーマ 外観>カスタマイズの「追加CSS」でCSSをカスタマイズ 外観>ウィジェットの「カスタムHTML」でJSをカスタマイズ 保存ができない場合の推奨プラグイン「Simple Custom…

webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮)

…ップのように中心に位置しているとは言い切れないことも知ったので、これから一つ一つの機能や位置付けを実際に手を動かして実感しながら理解していきたく思います。 ※参考:Web開発環境の記事まとめ qiita.com *1:さらにサーバサイドまで視野を広げるとCMS、ECサイト、会員サイトなどを作るためのサーバサイド言語(PHP、Rubyなど)、フレームワーク(Laravel、Ruby on Railsなど)、DB(SQL)、ローカル環境(Dockerなど)の知識が必要になってくる

ラテラルシンキングとロジカルシンキングを使って右脳も左脳もフル稼動しよう!

右脳を使う「ラテラルシンキング 」と左脳を使う「ロジカルシンキング」が対な関係で面白い!右脳型の方も左脳型の方も二つの思考法を車の両輪のように活用して、脳をフル稼動させましょう♪(ちなみに私は典型的な左脳型人間ですw)。なお、今回は二つの思考法を知る手がかりとなるキーワードをとにかく拾いまくりました。深掘りにご活用ください。それではいきましょう!

【Laravel】MVCのコントローラ(C)ことはじめ(3年B組金八先生を表示する!)

…ィレクトリのweb.php)にページを直書きしてみる - クモのようにコツコツと MVCとは何か MVCとは何か。Mはモデル(Model)、Vはビュー(View)、C(Controller)はコントローラ。習得中の書籍「Laravel入門」によれば… モデル(Model):データ処理全般を担当。DBにアクセスする処理全般 ビュー(View):画面表示を担当。表示に使うテンプレートに相当 コントローラ(Controller):全体の制御。必要に応じてMでデータを取得したりVで画…