ナム山

家最高 今年一年でサックスが吹けるようになるか観測中

npm入門 - 記事を読むvol.2(2/100)

習慣化の壁

今年は勉強を頑張りたいと思って書いた記事からしっかり1ヶ月が経ってしまい、早速怠惰を実感している。
この記事は「今年は有用な記事を100本は読んでまとめてみよう」という一連のシリーズにあたる。
習慣ほど強いものはないし、ただの決意ほど無責任なものもなく...。
金曜くらいはこうやって書いていこうかな。(これもまた無責任な決意に終わるのだろう)

落ち込んでいる

評価面談があったのだが思ったよりも成果が出せていなかった。
研究者のようなスタンスで業務に臨んでいたが、数字につながる結果を出さないといけないなと反省した。
来年の今頃はもうちょっと元気でいたい。
というかがっかりされるのってやっぱ悲しいよね。頑張ります。

本題

引き続き斬り込み隊長として頑張ってはいるので、割と各所から質問がくる。
その中でnpmにまつわる質問が多く、基礎の基礎をさらい直すのもいいかもなと思った。
一番易しくてよかった記事はこちら。

qiita.com

JSを起動できる環境の一つであるNode.jsで、まず触れるnpmについて易しく手ほどきしてくださっている。

  • npm init
  • npm install
  • npm run

特に

$ npm i パッケージ名 -S

でpackage.jsonに保存できるのとかコピペ戦士だったので全然把握してなかった。

巨大化していった環境によっては、package同士のバージョン齟齬でbundle installがこけたりする。
そのときにpackage.jsonのバージョンを変更して対応することもあった。

browserifyも非常に良い。以前使うのを諦めていたので試しに今度使ってみたい。

var $ = require("jquery");
基本が大事

何事も出来上がっている環境に飛び込んで出来合いのフレームワークで仕事に参加することがほとんどだ。
コピペや伝聞のフローで仕事をすることが当たり前で、その基礎の部分を自分で勉強することは努力でまかなうしかない。
落ち込んでいる、とは書いたが自分が要領が悪いのはずっと分かっていたことで、知識的な好奇心を優先することは仕事の上では控えるべきだ。
どうしても放っておけないのが分かっているから、これからは割り切って進めることと、自分にあった方法で進めることと
もっとバランスを考えて生きていきたい。

「PATHを通す」って何かまとめる - 記事を読むvol.1(1/100)

新しいことを始める

2021年はしっかりと怠惰な1年を過ごしてしまい、たったの3記事しか書いていなかった。
記事のエディタが変わったのに今気付いたくらいだ。

記事数の推移を見るとお見事すぎる尻すぼみである。
▶ 2021 (3)
▶ 2020 (4)
▶ 2019 (20)
▶ 2018 (10)

2019年は職場環境・実力ともにこのままではいけないと一念発起していた時期だったので頑張っていた方だと思う。
転職を意識したのもその時期だったし。その転職も2020年末なので、はや一年ちょっと経過した。
おかげさまで職場環境も待遇も改善されたし、業務内容も新しいもので充実した生活を送れている。

ところが最近になって任された業務が強敵で、これがなかなか一筋縄ではいかない。
そこへきてこの記事数の怠惰具合、「これは久々に頑張るやつちゃうか?」という流れであった。

前置きが長くなったが、今年はタイトルにもあるように
「世の記事を100記事は読んでちょい強エンジニアを目指そう」
というのを主な目標にしてみようと思う。

ルーティンとかどうなったの

以前は様々な目標を設定して、経過観測することを主に更新していた。
こちらも「やってはいけないNGを決める」とか「大目標に対してクリアできそうな習慣として小目標を日次で作る」とか
形を変えて継続している。
それに関してはまた別の記事にまとめる。
自分は意志が弱いから、書くことでカッコつけたり思い出すきっかけにしたり、
とにかく無理矢理にでも経験を積み上げられるように自分で鞭を打つのだ。

本題

話を戻して、今回は「PATHを通す」ことをなんとなくしか理解していなかったので
世に溢れる良記事を参考にさせてもらうことにする。

というのも「最近になって任された業務」というのが、
別の業務を対応できるよう環境構築からwikiの作成まで行うというもので(責任重大)
読んで字のごとく環境構築をまずクリアせねばならないのである。
環境構築といえば様々なプログラムを使うにあたりPATHを通す機会ばかりだよね、ということでこのテーマにした。

早速だが、一番参考になった記事はこちら
qiita.com
PATH は結局のところ「フォルダのフルパス」の集まり(を格納した設定)でしかない。
・上から順に参照していく仕組み
・プログラム名が被った場合に限り、先にマッチした方が使われる
(つまり先に、「同名で別のプログラム」のパスが通ってしまっていた場合期待した結果は得られない)
・$ where programName でパスが通っているか確認できる
PATHEXT という環境変数(設定の一種)でも同様に拡張子を順にマッチさせて省略可能な仕組みになっている
つまり「アレ起動して」とプログラムフォルダで突然PCにお願いしても「アレって何ですか?」と通常はなってしまう。
PATHが通っていると「アレ(どこそこの何ちゃらってプログラムのこと)起動して」とPCに伝わるので話が早い、ということになる。

わかってしまうと単純ではあるが、GUIに慣れきった人間からすると
CLIで逐一制御していくことそのもの、さらに各操作の意味を理解していくと納得することが多い。
初めてターミナル経由で画像の圧縮をしたときに感動したのを思い出した。
(考えてみればCLIからGUIに進化したのだからCLIで制御可能なのは当たり前なのだが…)
試しに $ open /System/Volumes/Data/Applications/nnnnn.app とかやると実際にアプリが起動する
自分が普段アイコンをクリックして立ち上げているのも裏ではこんな処理が走っているのだなと。

bxsliderで3個表示のリストを作る、スライドの数に応じてオプションを変える

bxsliderで全幅じゃないスライドを作るときのメモ。
いつも忘れてしまうので備忘録。
slideWidth、minSlides、maxSlides、moveSlidesが揃わないとちゃんと動かない。

こちら参考にさせてもらいました。
bxSliderの使い方と「オプション」によるカスタマイズ

あとはinfiniteLoopがtrueの場合、一枚の時でもスワイプできてしまうためCMSなどの時は枚数に応じて処理を変えたい時がある。

その場合はこのようにして処理を分ける

var defaultSetting = {
	infiniteLoop: true,
};
var slider = $('.bxslider').bxSlider(defaultSetting);
if(slider.getSlideCount() < 2) {//要素が1つだけだった場合
	defaultSetting['infiniteLoop'] = false;
}
slider.reloadSlider();

解説:
まずオプションはdefaultSettingオブジェクトで持たせる
次にスライダー自身を宣言して引数にオプションを持たせてデフォルト指定しておく。
その上で、宣言した関数からgetSlideCountメソッドを使って条件判定
trueの場合はオブジェクトにアクセスして内容を書き換える
最後にreloadSliderメソッドで書き換えた(もしくはそのままの)slider関数を走らせる

とはいえ最近はめっきりslickかswiperばかり使っている。
特にレスポンシブのオプションが記述しやすい。

Worpdress・PHPで文字抽出する(記事詳細の文字列の丸め)

PHPで文字数省略(文字列の丸め)したい時に使うmb_sbstr

mb_substr(
    string $string,
    int $start,
    ?int $length = null,
    ?string $encoding = null
): string

抜き出すのにWordpressの関数を使わずいつも
>|php|echo mb_sbstr($test, 0 10, 'UTF-8');||
とかで使ってる。
mb_sbstr自体はドキュメント見るとsbstrのマルチバイト(mb)対応で処理を行えるもので、これに'…'とかを繋げて文字数両略とか普段対応している。
今回規定文字数以下のケースが目立つため、ちゃんと規定文字量以上だった時にだけ三点リーダー出るようにしてほしいとのことでmb-strimwidthを仕様することにした。
sbstr自体は本来文字列を返すのが仕事のため、ちゃんとトリム機能がついているこちらを使うのがまあ正しいよねと勉強になった。
php7以降とかなら負のスタートもいけるので便利。

参考
https://www.php.net/manual/ja/function.substr.php
https://www.php.net/manual/ja/function.mb-substr.php
https://www.php.net/manual/ja/function.mb-strimwidth.php

Nodeのバージョンを変更したいがインストール可能な一覧にない(nodenv)

普段は

$ nodenv install --list

でお目当てのバージョンがあれば

$ nodenv install {versionNum}

でいける。

今回はなかったので調べたところ、node-buildをアップデートすれば良いとわかった。
しかしhomebrewを入れていないので、参照したコードだとエラーが出てしまった

$ brew upgrade nodenv node-build

→エラー nodenv not installed
nodenv入れてるけどなあと思い、とりあえず「node-build アップデート」で調べると
node-buildのディレクトリで $ git pullすれば良いのがわかった
ということで

$ cd {nodenvのroot}/plugins/node-build && git pull

で無事

$ nodenv install --list

したときに目当てのバージョンが出てきた
インストールした後は、該当プロジェクトにcdしてから

$ nodenv local {versionNum}

でことなきを得た

参考
Node.jsのバージョンを自動で切り替えられるnodenvが超便利 - Qiita
https://joppot.info/2018/11/07/4226
Node.jsのバージョンを自動で切り替えられるnodenvが超便利 - Qiita

(GULP) browser-syncでUnhandled 'error' eventが出る

同じく古い環境のGULPをinstallしなおして起動した時に起きたエラーについて。

The following tasks did not complete: default, watch
Did you forget to signal async completion?

と出てうまく起動しない。

GULPが3系から4系になったせいで、記述が悪さをしているのかと思ったが、どうにもその後に続く

throw er; // Unhandled 'error' event

こちらが原因のようだった。
よく見れば'Did you forget to signal async completion?'
すなわち「非同期完了を通知するのを忘れましたか?」

そこまで来れば以下の記事を参考に、
https://gist.github.com/kcpjunky/7963541
ポートが干渉していたせいだと当たりをつけた。
gulpfile.jsの、browser-syncの設定箇所から、指定しているポート番号を差し替えたら無事解決した。

GULPでSyntaxErrorが出て立ち上がらなかった

久しぶりに古い開発環境で修正作業があった。
npm installした後にnpx gulpコマンドで立ち上げようとするとgulp-autoprefixerでエラーが出て中断してしまった。

(async () => {
       ^
SyntaxError: Unexpected token (

つまり' ( 'てなんぞや、とのエラー。
原因は「nodeのバージョンが古い」、または「当時とpackageのバージョンが違っている」らしい。
とのことで、一旦アンインストールして、古いバージョンの物をインストールした。
npm uninstall -D gulp-autoprefixer
npm install -D gulp-autoprefixer@6.1.0

これで解決。

こちら参考にさせていただきました。
ありがとうございます。
coding-memo.work