クモのようにコツコツと

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

php の検索結果:

【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で画…

【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる

…ィレクトリのweb.php)にページ情報を直書きして、いくつかの動的なページを作ってみました〜。完成品はHerokuにデプロイしてます。それではいきましょう! 【目次】 ルーティングファイル(Routesディレクトリのweb.php)からページを読み込む web.phpにページを直書きしてみる web.php内でヒアドキュメントを読み込む ルートパラメータを読み込んでページ上に表示する 任意パラメータを設定(ワードを入れなくても任意のワードが読み込まれる) 複数のパラメータを…

LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

…ーン MAMP環境でPHPファイル作成 MAMP→Sourcetreeにコミット Sourcetree→GitHubにプッシュ GitHub→Herokuにデプロイ このときはいかに黒い画面(コマンド)を使わずにGUIのみでいけるかを追求していた。この方法をとれば、サーバサイド版のCodePenをHerokuでやっていけると思っていた。ところが、同じ手順でLaravelコンテンツをHerokuにデプロイしてみても、画面が表示されない(汗) MAMP環境では表示されているLar…

Laravelの/publicをルートに変更しHello worldする

…の中身 index.phpを開く RouteServiceProvider.phpを開く routes/web.phpを開く /resources/views/welcome.blade.php`を開く 白い画面にHello worldする 下層ページを作ってHello woldする /subpageを表示(Not found) routes/web.phpに下層ページの設定を追記 /resources/views/subpage.blade.php`を作る 最後に ※参考:…

Laravel元年!インストールしてMAMP環境で白い画面出す!!

… LaravelとはPHPフレームワーク。Webアプリ(ブラウザで動くアプリケーション)を作ることができます。WordPressなどのCMSを構築するまでの規模じゃないがPHPやDBを動かすコンテンツを作りたい、という場面が増えてきたため、ぜひ習得したいと思っています。2019年度のマイテーマの一つです。 PHPとPHPフレームワークについてはこちらで書きましたが、この時点ではPHPフレームワーク=CakePHPのイメージしかありませんでした。 ※参考:サーバサイドの中でのW…

【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)

…18年の11月だったのでちょっと間が空きました。まだこの段階では生JSやjQueryでもできるようなことを再現しているだけなので、リアクティブなどのSPAらしい恩恵を体験していません。 今年はJSフレームワーク(まずはVue.js)とPHPフレームワーク(まずはLaravel)をマイテーマにしてるので、また更新ペースをあげていきたく思います。それではまた!! ※参考:Vue.jsの習得のためにやったことまとめ qiita.com *1:口髭という意味らしいです。横回転した口髭

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

…functions.phpに追記しないと有効にならない機能ですがTwenty nineteenでは最初から有効です! まあ今回はページ遷移がないのでこのまま未設定でいきます。 テーマカスタマイズ 次にテーマをカスタマイズしてみましょう。「外観」の「カスタマイズ」を開きます。 サイドバー付きのプレビュー画面になります。要素の所々に鉛筆アイコンが。 クリックするとカスタムできる項目が表示されます。 ロゴ、サイトタイトル、キャッチフレーズを変更。 プレビュー画面に反映されました! …

【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月)

…でしょうか。2位の「php」はサーバサイド。3位の「JavaScript」はフロントエンド。表記のゆれがあり最後の「js」と足すと実はphpとほぼ同じです。 続く「python」「ruby」はサーバサイドで拮抗してます。pythonは機械学習で人気が上がっています。フロントの3番目「css」は意外と少なかったですね。あとCGIでかつてメジャーだった「perl」は今も件数としては多いです。 プログラミング言語 求人件数 html 17,610 php 15,625 javasc…

【indeed】職種別スキル集計:Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア(2019年3月)

… 4 テクノロジー PHP 4 ビジネス コミュニケーション 4 テクノロジー Sass 3 テクノロジー Angular 2 テクノロジー C 2 テクノロジー Git 2 アプリ illustorator 2 テクノロジー JSフレームワーク 2 テクノロジー OSS 2 アプリ Photoshop 2 テクノロジー Python 2 テクノロジー React 2 テクノロジー Redux 2 テクノロジー SQL 2 テクノロジー システム開発 2 テクノロジー 高速化…

Webデザイナーに必要なスキルと代表的な7つのキャリアパス

…やバックエンド言語(PHP、Rubyなど)の知識も身につけると役に立ちます。 ※参考:【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと 未経験からWebデザイナーを目指すには、まずは3スキルの一つ目「アクセス解析」「コーディング」「モックアップ」から入るのがいいでしょう。 他職種からのキャリアチェンジ 未経験からWebデザイナーを目指す以外に、Webデザイナーと関わりの深い他職種からキャリアチェ…

【WordPress】All-in-One WP Migration(全移行)とDeMomentSomTres Export(一部移行)の違い

…wp-config.php内のDB情報を書き換える 移行前サーバのPhpMyAdminでDBのsqlファイルをエクスポート 移行後サーバにWordPressファイル一式をFTPソフトでアップロード 移行後サーバのPhpMyAdminでDBのsqlファイルをインポート Search Replace DBでDB内のURLを新しいURLに置換する あちこち開いていじるため作業が複雑だし、DBやURLに影響するのでなかなか緊張する作業でした。 All-in-One WP Migrat…

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

…。 ※参考:フォームPHPはじめの一歩($_GETと$_POSTの違い) - クモのようにコツコツと 送信ボタンをよりボタンとわかりやすくしたいのでCSSを当ててます。 .yomu { margin: 0 auto; width: 50%; height: 2em; margin: 0 auto; display: block; color: #fff; border: none; background: #666; border-radius: 5px; font-size…

フォームPHPはじめの一歩($_GETと$_POSTの違い)

…データ送信には外部のPHPフォームプログラムを利用していました。今回は、フォームPHPの$_GETと$_POSTを自分で書いて、動きの違いについて検証しました。 【目次】 フォームからサーバにデータを送信 HTMLフォームの基本 htmlファイルのphpファイル化 PHPコードを追記 $GETと$POSTのフォームを送信してみる method="get"のフォームはクエリパラメータに値を渡す $_GETはクエリパラメータを格納する $_GETはあとから打ち替えられる $_PO…