Laravel: 'cross-env' is not recognized as an internal or external command ... の解消法
LaravelのHomesteadでアセットをコンパイルしたい際、
npm run dev
コマンドを叩きます。
ところが、環境によっては
以下のエラーが出てコンパイルがうまくいかないことがあります。
'cross-env' is not recognized as an internal or external command, operable program or batch file.
このエラーは、cross-envをプロジェクトにではなく、
グローバルでインストールすることで解決するようです。
解決策1: cross-envをグローバルでインストールする
以下のコマンドで、プロジェクトのnode_modulesを削除して、
グローバルでcross-envをインストールします。
rm -r node_modules/ npm install --global cross-env
その後、package.jsonをエディタで開き、"cross-env": "^5.0.1",の記述を削除します。
（^5.0.1の部分は環境によって異なります）
そして、以下のコマンドで依存パッケージを再インストールします。
npm install --no-bin-links
以上の手順を行うことで、
npm run dev
を叩いてコンパイルを行うことができます
解決策2: Laravelのバージョンを上げる
このエラーはWindows10でLaravel5.4を使用している際に起きるようです。
単純にLaravelのバージョンを上げることで解決するという報告もあるようでした。
勉強メモ: オブジェクト指向とコンポーネント指向の違いについて
オブジェクト指向とコンポーネント指向の違いがイマイチわからなかったので、
少し調べてみました。
「GoFのデザインパターンはオブジェクト指向のためのものであって、他のパラダイムでは使えない」という意見を見て、「Unity開発ではデザパタ結構適用できるしオブジェクト指向を使ってるってことで良いんだよな」と思って調べたら「Unityはコンポーネント指向」という記事を見かけて混乱しています！
— KILI (@KiliWare) 2019年2月24日
個人的に一番しっくり来たのは、
こちらの質問記事のMike Dinescuさんの回答でした。
stackoverflow.com
I'm sure that others here will be able to give a better explanation of what component oriented languages are (and if they won't, a thorough search on the internet should) but the way I see it the component oriented paradigm can be viewed as an embodiment of object oriented programming.
That is to say that component oriented programming specializes Object Oriented Programming by strictly enforcing and implementing some OO concepts. Basically the whole idea is to create reusable code - in the form of components - that can be interchanged. So, component oriented programming heavily relies on: polymorphism, encapsulation, late binding, inheritance (through interfaces) and most importantly binary re-usability.
A component is a software package that encapsulates data and functionality - much like an object in OOP - but at a higher level.
以下、簡単に訳してみました。
コンポーネント指向言語が何かということについては、ここの人たちが良い感じの説明をしてくれるでしょう。
（そして、もししてくれなかったとしても、ネットで検索すれば出てくるでしょう）
私は、コンポーネント指向はオブジェクト指向プログラミングの強調版として見ることができると思っています。
つまり、コンポーネント指向プログラミングは
いくつかのオブジェクト指向のコンセプトを厳密に強制し、実践することによって、
オブジェクト指向を専門化させたものだということです。
コンポーネント指向の基本的なアイディアは、再利用可能なコードを交換可能なコンポーネントの形として作ること、それが全てです。
なので、コンポーネント指向プログラミングは、以下のものに強く依存しています。
それは、ポリモーフィズム、カプセル化、遅延バインディング、 （インターフェースを通した）継承、そして最も重要なのはバイナリの形での再利用性です。
コンポーネントはデータや機能をカプセル化したソフトウェアのパッケージです。
それはオブジェクト指向プログラミングでいうところのオブジェクトに近いですが、より高いレベルにあるものです。
バイナリの形での再利用性については、以下の記事がわかりやすいかと思います。
1.2. Component-Oriented Versus Object-Oriented Programming - Programming .NET Components, 2nd Edition [Book]
結局どういうことかというと、
コンポーネント指向はオブジェクト指向の亜種みたいなもので、
焦点を当てている場所がより具体的で高いレベルにある...
という点に、オブジェクト指向との違いがあるのではないかという結論に至りました。
After Effects: GIF動画の書き出し方法
Adobe After Effects(以下AE)で作成した動画を、
GIFアニメーションとして出力する方法です。
AE単体ではGif動画を書きだすことはできないのですが、
AEに付属するAdobe Media Encoder(以下ME)というソフトを使用することで、書き出しが可能となります。
手順
AEからMEを起動
ファイル -> 書き出し -> Adobe Media Encoderキューに追加 を選択します
書き出し設定の変更
ME画面右上にあるキューに追加されている動画の形式を選択します
書き出し設定ウィンドウが表示されるので、
画面右側の書き出し設定内の「形式」と書かれたプルダウンメニュー内を開きます
一番下にあるアニメーションGIFを選択します
アニメーションGIFの書き出し
再生ボタンを押すことで動画のエンコードが開始されます
エンコードが終了したら、出力ファイル名をクリックすると、出力先のフォルダが開かれます
以上の手順を踏むことで、アニメーションGIFを作成することができます！
ようやく綺麗なGIFアニメーションを作成できるようになった pic.twitter.com/Wp1yJMWgB5
— KILI (@KiliWare) February 17, 2019
Laravel: Homesteadで502 Bad Gatewayが頻出する件について
Homesteadで開発中のWebサイトでページ遷移を行ったときに、
何故かランダムな間隔で502 Bad Gatewayが頻出しました。
Homesteadのバージョンが8以上の場合に起きるようです（記事執筆時点）。
| 環境 | バージョン |
|---|---|
| macOS | Mojave 10.14.2 |
| Homestead | 8.0.2 |
解決策1
どうやらPHP7.3で使われているxdebugというツールとnginxの相性が悪いことで起きる現象のようです。
xdebugを無効化することで回避できるようですが、その代償としてxdebugは使用不能になります。
解決策2
xdebugを無効化する以外の方法として、PHPのバージョンを落とす方法があるようです。
PHP7.3から発生するようになった不具合のようなので、
このバージョンにこだわりがなければ、素直にPHPのバージョンを落とすのが良さそうです。
Homestead.yamlのsites:に
php: "7.2"
を書き加えることで、使用するPHPのバージョンを変更できます。
このようになります。
sites:
- map: example.test
to: /home/vagrant/code/public
php: "7.2"参照:
github.com
Thank you godjen99, svpernova09 and mdgrech!!
JavaScript: highlight.js導入時に発生したUncaught SyntaxError: Invalid regular expressionの解消法
highlight.jsは手軽にシンタックスハイライトを行えるオープンソースのライブラリです。
Usageに従い導入作業を行っていたところ、以下のエラーが発生しました。
Uncaught SyntaxError: Invalid regular expression: /([À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*(<[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*(\s*,\s*[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*)*>)?\s+)+[a-zA-Z_]\w*\s*\(/ : Range out of order in character class
調べてみると、どうやら日本向けのGoogle Chromeで
デフォルトの文字コードがShift-JISになっていることで起きる不具合のようでした。
この件に関しては、既にフォーラムにも同様の症状が報告されており、
文字コードにUTF-8を使用する設定に変更することで解消するということでした。
github.com
<meta charset="UTF-8">
というmetaタグを書き足す、もしくは
<script charset="UTF-8">...</scipt>
JavaScript: 波括弧に囲まれた変数の宣言について
とあるJavaScriptで書かれたコードを眺めていて、
const {element} = this;のような、見慣れない書き方があったのでメモ。
これは分割代入といって、ES2015で使えるようになった記法です。
右辺のオブジェクトのプロパティ名を左辺で宣言することにより、
その値を代入することができます。
const human = { name: "田中", age: 20 };
const { name } = human;
console.log(name); // "田中"
// コロンを使用することで、別の変数名で代入もできる
const { age: lifeTime } = human;
console.log(lifeTime) // 20
// 存在しないプロパティ名を指定するとundefinedになる
const { gender } = human;
console.log(gender); // undefined
// 規定値を設定することもできる
const { gender = "不明" } = human;
console.log(gender); // "不明"他にもネストしたオブジェクトや、配列にも分割代入が行えるようです。
詳しくはこちら
developer.mozilla.org
