<a style="color:#007bff" href="https://yahoo-osaka.connpass.com/event/201930/" target="_blank" rel="noopener noreferrer">MixLeap Live Study ＃64 - 「フロントエンドのテスト効率化」</a> に参加<h2 id="heeeaaa9a75">史 宇華さん「Yahoo! JAPANトップページの E2E テスト導入の話」</h2>ヤフーのトップページの開発を担当される トップページのスマホ版の話 機能確認にはコストがかかる 理由：<ul><li>機能がたくさんある</li><li>多数なユーザ属性がある</li></ul>ってことで、機能確認のコスト削減のためにE2Eテストを導入した！ 課題<ul><li>失敗しやすい（ネットワークの遅延）</li><li>フィードバックが遅い（テストの実行時間が長い）</li><li>コストが高い（導入コスト）</li><li>メンテナンスしにくい（デザイン変更）</li></ul>つまり、陳腐化しがち 陳腐化させないために<ul><li>安定性を高める</li><li>開発チームへの導入をサポート</li></ul>結果、継続できるE2Eテストを実現できるんじゃないかと考察される 質問も多く来ていて、たくさんの視聴者さんの興味を引いてました^^<h2 id="h7b50787f87">三宮 肇さん「アクセシビリティ検証の自動化と、カラーコントラスト問題について」</h2>サービス横断デザインシステムの開発が主務 全社のWebフロントエンド技術の推進もされる サービス横断システム「Riff」というものがある スタイルガイドに則って作られたUIライブラリを提供している。<ul><li>Sketchライブラリ</li><li>Reactライブラリ</li></ul>Riffでアクセシビリティテストを導入している話。 アクセシビリティテストを実施できるOSSの導入<ul><li>@storybook&#x2F;addon-storyshots-puppeteer</li><li>aXe</li><li>acot</li></ul>カラーコントラストテストを行ってる、現状課題が多いらしい。。。 W3Cが定めるアクセシビリティのガイドラインがあり、4.5:1を満たさなければならない<h2 id="h2bb82a9e51">宇城 毅犠さん 「フロントエンド開発初学者が自動テストで試行錯誤した話」</h2>学生の時はWebフロントエンド開発の経験はなかった 0の状態からフロントエンドの技術を身につけていったか そこからテストをどうやって学んできたか スキル習得のためにやったこと<ol><li>入門書を一通りなぞる：「なんとなくわかった」</li><li>ペアプロ：着眼点や考え方を学ぶ</li><li>データフローを理解する（インプットからアウトプットまでのデータの流れを理解する）</li></ol>テスト自動化の話 初めてのユニットテスト 最初はユニットテストの意味がわからなかったが、実際にやってみて<ul><li>ロジックミスを発見できる</li><li>修正箇所があっても動作を担保できる</li></ul>ってことがわかった。 結果、自分の書いたコードの質が向上！ リソースが足りない時もユニットテストを書くべき？ →明確な答えはないが、書くのは厳しそう。 ユニットテストの捉え方<ul><li>コードの質を向上させる一つの手段</li><li>アプリの動作を担保するものではない</li><li>質の高いコードを書くために経験しておきたい</li></ul>テストに対して感じたこと・考えていること<ul><li>ユニットテストは実装と同じタイミングで実装したい</li><li>自動化＝コスト削減とも限らない</li><li>E2Eテストやインテグレーションテストの網羅はとても厳しい</li></ul>ユニットテストの捉え方に共感する視聴者が多くみられたのが印象的でした！<h2 id="h23ce4a7115">パネルトーク</h2>事前に参加者から募ったフロントエンドのテストに関する質問・課題を抜粋してトークテーマにした。<h3 id="h70d0b58800">エンジニアのフロントエンドテストに対する捉え方</h3>社内の雰囲気的にはテストは大事にしてる フロントエンドはユーザが一番先に触るところなので不安な点が多いが、テストがあると安心する 個人的に、t-wadaさんのテストの話は良い コードの質を上がるし、実装の質もアップする気がする<h3 id="h039aee65f5">フロントエンドのテストの価値について</h3>プロダクト開発において、長期的な視点に立った時に、長期的にユーザに価値を提供するって考えたら良いと思う 最初はチーム内で普及してなかったが、ペアプロなどの活動を通してテストの知見を共有するという方法をとったことがある<h3 id="hdfb8101df1">テストを手動でやるか&#x2F;自動化するか問題</h3>自動化のデメリットはコスト、仕様変更とか、確かに存在する 各サービスで絶対に落としてはいけないところはどこだろうって考えてコアなところからテストを自動化していくって判断基準が良いかも テストは投資に近いですよねー 初期コストと運用時にかかるコストがあり、運用時にかかるコストが低い方が良いとは思う。長期的なスパンを考えると良いかも<h3 id="h0fe2cebd43">フロントエンドテストの技術選定</h3>ビジュアルリグレッションテスト（reg-suit）がおすすめ Storybook 自分もむしろ教えて欲しいw playwrightは本当におすすめ！

こんにちは、よしでぶです。
MixLeapの勉強会に参加しましたので報告します！今日のタイトルは『MixLeap Live Study ＃35 - 「フロントエンドのテスト効率化」』です！

MixLeap 勉強会 Study ＃64に参加したぜ

イベント報告

フロントエンド

<a style="color:#007bff" href="https://beyondjapan.connpass.com/event/201931/" target="_blank" rel="noopener noreferrer">おうち de LT大会 ＃2【ビヨンド勉強会 ＃31】</a>に参加しました。 Zoomのウェビナー機能を使ったイベント。 テーマは「リモートワーク環境を極めた者たち」 リモート環境をとことん突き詰めた猛者たちのLTを聞くことができました。<h2 id="h0ec8372e2c">萬代 陽一さん「妻『あんた最近部屋から出てけーへんようになったなぁ』と言われる仕事部屋ができるまで」</h2><a style="color:#007bff" href="https://twitter.com/chaotic_pg" target="_blank" rel="noopener noreferrer">@chaotic_pg</a> 奥さんに「最近部屋から出なくなったね」 と言われるまでの経緯をLT！ 仕事部屋を紹介<ul><li>椅子：ゲーミングチェアに変更。最初は丸椅子で作業していた（これはキツい…）</li><li>ディスプレイアーム：Amazonで購入。ディスプレイを縦にしたりディスプレイの場所を自由に移動できるので仕事の効率アップ！</li><li>電磁波を吸収してくれるサボテン：「電磁波 サボテン」でAmazonで検索すると出てくるらしいw</li><li>HDMIスイッチャー：5ポートあるものを使用。仕事用・私用のPCが3台あるので便利</li><li>PCスタンド：まさかの自作だそうです！w 高さ、角度、安定性の三拍子揃った最強の逸品</li></ul>これは部屋から出ないですね。<h2 id="hc2475b6ddd">中嶋 道太郎さん「さあ 椅子を捨てよう！ - スタンディングワークの始め方」</h2><a style="color:#007bff" href="https://twitter.com/dora0903" target="_blank" rel="noopener noreferrer">@dora0903</a> イベントの企画・運営、新卒採用、SNS(ヤフー大阪) 7年前から実践してる スタンディングワーク についてご紹介 スタンディングワーク (= 立ちながら仕事をする)を検討している人に対して<ul><li>健康に良い：ダイエットに良い？！</li><li>生産性が上がる：シリコンバレーでは一般的に普及</li></ul>結構歴史が古く、偉人もやってたり。 スダンディングワークを導入する上での3つの壁→解決法<ul><li>環境を用意するのが大変→自作でなんとかする。</li><li>すぐ足が疲れる（20分でしんどくなる）→疲れたら休む</li><li>周囲の視線が気になる→気にしない(草)</li></ul><h2 id="h2bff7a0d7c">mochikoAsTechさん「『状況が落ち着いたら○○しよう』よりも現在を快適にしよう」</h2><a style="color:#007bff" href="https://twitter.com/mochikoAsTech" target="_blank" rel="noopener noreferrer">@mochikoAsTech</a> 『状況が落ち着いたら○○しよう』よりも現在(イマ)を快適にしよう リモート環境を整えようと思っても「でも」がよぎってしまう。。。<ul><li>リモートワークのために良い椅子買いたい。「でも落ち着いたら不要になるし」我慢しようかな。。。</li><li>都心を離れて引っ越ししたい。「でも落ち着いたら会社に出社するし」我慢しようかな。。。</li></ul>「落ち着いたら」ってのは実際「いつ」になるのだろう…？？ 「いまは我慢！」の「いま」は実際は既に1年経ってることになってる。。。 なので「落ち着いたら」ではなく、「今、困ってることを解決する」というマインドになろう！ 今にフォーカスして買ってよかったもの&amp;やってよかったものベスト３を発表！<ul><li>３位：単一指向性のマイクを購入</li><li>２位：PCに一本差せば全部つながるUSB Type-cのハブを購入</li><li>１位：ウォークインクローゼットを会議用の個室にした</li></ul><h2 id="ha6f51fb43b">小田祥平さん「自作PCの中で住むことになった話」</h2><a style="color:#007bff" href="https://twitter.com/MS_odasho" target="_blank" rel="noopener noreferrer">@MS_odasho</a> 自宅で仕事するならPC新調しちゃおうという話。 とにかく浮かせ！浮かせばなんとかなる！（作業スペースが）<ul><li>モニターアーム</li><li>マイク・女優ライトも浮かせる</li></ul>映像がやはり大事ということでカメラを購入。結果３カメ購入w 音声も大事。声色や息遣いとか。ミキサーを購入してエフェクトかける。 おうちをIoT化にしまくった話。パソコンつけてる間ずっと家の電気が七色に光るようになった（制御不能w）<h2 id="h284031f2d0">五島羊祐「家に木を買った話 -篭もりたくなる家の作り方-」</h2><a style="color:#007bff" href="https://twitter.com/gotoh_pg" target="_blank" rel="noopener noreferrer">@gotoh_pg</a> 木と間接照明で篭りたくなるおうちを実現した話！ インテリアグリーンの選び方。こだわりがなければ フェイクグリーン がおすすめ。 思い切って180cmくらいの大きな木を置くと 森っぽくなるのでおすすめ。 間接照明の選び方。光の向きを調整できるタイプはおすすめ。電球の色は暖色がおすすめ。 間接照明を置くことで、雰囲気が全然違う！！（before&#x2F;afterで良さを伝えていただきました） 自宅で木漏れ日を楽しむ。間接照明をフェイクグリーンに当てることで外で見る木漏れ日を再現できる。<h2 id="hb35bbe416d">shibomb 柴原 洋紀さん「映えるための機材、自宅だからできる作業効率向上、そして、堕落もまたヨシ」</h2>シバーンさん。フリーランスでシステムエンジニア、プログラミングティーチャー、YouTuberとマルチに活躍。 <a style="color:#007bff" href="https://www.youtube.com/channel/UC0rU76homEPfh-u871jyl1g" target="_blank" rel="noopener noreferrer">シバーン</a> 映えるための機材。Zoomの映像がめっちゃ綺麗！背景がボケてて顔にピントが合う。 ミーティングとかで良い印象を与えることができる。 カメラとしては一眼レフカメラを使用。 ライトを使って雰囲気を調整。落ち着いた話はブルー系。アツい話をする時は赤系のライトをあてて、映えを表現。 デスク周りの話。デュアルディスプレイは絶対条件。サブディスプレイはウルトラワイドモニター+4Kモニターを使用。 椅子は「骨盤で座る椅子」姿勢良く座らないとしんどくなるらしい。 堕落もまた良し、人をダメにするソファを使ってスダンディングデスクならぬ シッティングデスクスタイル！ 一室に全てが詰まってるお部屋を紹介していただきました！<h2 id="ha214098e44">まとめ</h2>いやぁ、いろんなお話を聞けました。 にしても、皆さん発表が上手すぎました。。。羨ましい…！！ ありがとうございました！ ではでは。

こんにちは、よしでぶです。
株式会社ビヨンドが主催のLT会に参加しましたので報告します！テーマは「リモートワーク環境を極めた者たち」です。

おうち de LT大会 ＃2 に参加したよ

<h2 id="h755603a4f3">イントロ</h2><img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/670f4e40d08e4521a5f30104c4bbd4c9/mixleap36_1.png" alt> <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0d71b57047d94e08bfd5715f8e84edef/mixleap36_2.png" alt> 私が現在働いている会社ヤフーでは、2020年の2月から全社員に対して在宅ワークするように呼びかけられました。 そして同年10月から無制限リモートワークの制度が取り入れられました。 <a style="color:#007bff" href="https://about.yahoo.co.jp/pr/release/2020/07/15a/" target="_blank" rel="noopener noreferrer">ヤフー、“無制限リモートワーク”で新しい働き方へ</a> そんな中、私が叶えたかったこととして以下の3点がありました。<ol><li>外で作業する機会も少なくなったし、私用PCをデスクトップPCにしたい</li><li>仕事用のPCはMacBook Proだからサブディスプレイとして良いモニターが欲しい</li><li>在宅ワークが続くので、座りっぱなしでも疲れないようにしたい</li></ol>今回はこれらを叶えるために買った3点をご紹介します。<h2 id="hf98edaf502">買ったもの</h2><h3 id="h1349f7770f">iMac</h3><img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/679f81ababfe4478a96f5acc5469af24/mixleap36_3.png" alt> <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/b1ddbcd89e184732bd06a422fae9b953/mixleap36_4.png" alt> 私用PCとして昨年8月にiMacを購入しました！！ 27インチの大きい方を選択しました。 メモリは後で増設できるということを聞いたので一番小さい8GBを選択し、市販のメモリ32GBを別で購入して 今は40GBメモリとして使っています。 綺麗な5K Retina Displayがめっちゃ良い！！ そしてなんといっても 処理速度がノートPCに比べてめっちゃ速い！ 買って幸せになりました。 <a style="color:#007bff" href="https://www.apple.com/jp/shop/buy-mac/imac/27%E3%82%A4%E3%83%B3%E3%83%81" target="_blank" rel="noopener noreferrer">iMac 27インチ｜Apple</a><h3 id="h75b4c94dd5">Luna Display</h3><img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/c65b3537eba54bdcb59919eae74a1335/mixleap36_5.png" alt> <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/d2c05aece3704fba929c749ae5fd3774/mixleap36_6.png" alt> iMacを買った後の私の机に仕事で使うディスプレイを配置するスペースなんてありませんでした。。。 そこで iMacというでかいディスプレイがあるからこれを使いたい！ ってことで購入したのが Luna Display です。 これでMacBook Proに専用のドングルを装着すると、iMacがMacBook Proのサブディスプレイとして使えるようになります！ すごい贅沢なサブディスプレイが完成しました。 これも買って幸せになりました。 <a style="color:#007bff" href="https://shop.astropad.com/collections/luna-display-mac-and-pc/products/luna-display" target="_blank" rel="noopener noreferrer">Luna Display｜Astropad公式ホームページ</a><h3 id="h24b54e77ac">Style Premium</h3><img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/8aea3992ec8d4a0d882eb3b654f3c456/mixleap36_7.png" alt> <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/5d209fabcb864893a106b7f9674fd34c/mixleap36_8.png" alt> 座りっぱなしは疲れるので良いチェアを買いたい。 最初はそう思ってましたが、こう考えました。 どんなにいくら良いチェアに座ったとしても、ちゃんと姿勢を良くして座らないと長時間座り続けると結局疲れる。 そこで思い立って購入したのが、骨盤矯正をしてくれるクッション Style Premium です！ こちら座るだけで包まれた感覚になり、すごいフィット感を得ることができます。 そしてなんと言っても全然疲れないし腰も痛くならない！！ 椅子はニトリで買った7000円のものですが、高級チェアに座っている気分を味わえます。 本当に買ってよかったです、幸せになりました。 <a style="color:#007bff" href="https://www.mtg.gr.jp/brands/wellness/product/style/style_premium/" target="_blank" rel="noopener noreferrer">Style Premium｜MTG公式ホームページ</a><h2 id="ha214098e44">まとめ</h2> 今回は在宅ワークが続く中で買って幸せになれた品3点をご紹介しました〜！ 他の方の発表もどれも面白かったので皆さんも是非またの機会に参加してみてください！！

こんにちはよしでぶです。今日はMixLeap ＃36 - 「在宅で役立つ買ってよかったもの」に登壇しました！この1年間新型コロナウイルスの影響で在宅ワークが続く中、在宅ワーク環境を快適にするために買ったものを3点ご紹介しています。

MixLeap ＃36 に登壇したぜ

<h2 id="hd7a786377f">とりあえずググったらすぐ答え出てきた</h2>気になったのでとりあえずググってみた。 <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/286fbaad4b114ff9a96ce1d5a9f3eebb/%E9%87%8D%E8%A4%87.png" alt> 答えはなんと「ちょうふく」でも「じゅうふく」でもどちらでもOKみたいです。 高校数学で「重複組合せ(ちょうふくくみあわせ)」という概念を習った私からすると 「ちょうふく」しかあり得ないだろ！ と思ってたのですが、、 色々なサイトを見ていたら、どうやら 元々は「ちょうふく」と読まれていたみたいです。 それが現代になって「じゅうふく」と読む人が多くなってきたから じゃあ「じゅうふく」でも正解で(・∀・)&#x2F; って軽いノリを感じましたww 言葉って生き物だなぁとつくづく思いました。。。<h2 id="hcbec2bf0d9">終わりに</h2>こんな感じのゆるい投稿も増やして、とりあえず今年は多くの記事を投稿していきたいです。 よかった思ったら各種SNSで共有よろしくお願いしますmm

こんにちは、よしでぶです。みなさん、「重複」の読み方ってご存知ですか？今回は「ちょうふく」「じゅうふく」どちらが正しい日本語なのか調べました。

重複←コレの読み方思ってるのと違う？

小ネタ

<h2 id="hcdd1095a55">繰り返しの数え上げ処理にうってつけ！</h2>突然ですが、プログラミングの三大要素をご存知でしょうか？<ol><li>順次処理</li><li>条件分岐</li><li>反復処理</li></ol>です。 Iteratorパターンはこの反復処理、つまり繰り返し処理にうってつけのデザインパターンになります。 以下は、配列 <code>arr</code> の要素を最初から最後まで出力するプログラム例です。<pre><code>for (int i = 0; i &lt; arr.length; i++) {
 System.out.println(arr[i]);
}</code></pre>ここで注目するのは添字iです。iの数を増やしていくことで、配列の要素をスキャン(走査)していることがわかります。 こういう配列の要素を順番に参照する場面はプログラミングする上で多く出現します。 ここで使われている添字iの働きを抽象化したものがIteratorパターンです。<h2 id="hca8b928613">クラス図</h2>Iteratorパターンのクラス図は以下のようになります。 Aggregateは 集合体 と言う意味で、数え上げたい・スキャンしたいモノに対してiteratorメソッドを使って数え上げをおこないます。 Iteratorインターフェースは、先程の添字iの役割を果たします。Iteratorの役割は主に2つで<ol><li>集合体における次の要素を返す</li><li>集合体において次に数え上げるものが存在するかどうか判断する</li></ol>です。<h2 id="h73c11d078e">実装例</h2>クラスメイトの友達 (<code>friends</code>)の名前をスキャンして出力するプログラムを紹介します。 先程の添字iを使っていないところに注目してください。 ?&gt; 実装例なので動作保証は致しませんのでご了承ください。<pre><code>public interface Aggregate {
 public abstract Iterator iterator();
}

public interface Iterator {
 public abstract boolean hasNext();
 public abstract Object next();
}

public class Classmate implements Aggregate {
 private String[] friends;
 private int last = 0;
 public Classmate(int maxSize) {
 this.friends = new String[maxSize];
 }
 public Toy getFriendAt(int index) {
 return friends[index];
 }
 public void appendFriend(String friends) {
 this.friends[last] = friend;
 last++;
 }
 public int getLength() {
 return last;
 }
 public Iterator iterator() {
 return new ClassmateIterator(this);
 }
}

public class ClassmateIterator implements Iterator {
 private Classmate classmate;
 private int index;
 public ClassmateIterator(Classmate classmate) {
 this.classmate = classmate;
 this.index = 0;
 }
 public boolean hasNext() {
 return index &lt; classmate.getLength();
 }
 public Object next() {
 String friend = classmate.getFriendAt(index);
 index++;
 return friend;
 }
}</code></pre>これを使って先程の添字iを使った数え上げを修正してみます。<pre><code>Classmate classmate = new Classmate(3);
classmate.appendFriend(&quot;Tom&quot;);
classmate.appendFriend(&quot;Alice&quot;);
classmate.appendFriend(&quot;Bob&quot;);
Iterator it = classmate.iterator();
while (it.hasNext()) {
 String friend = (String) it.next();
 System.out.println(friend);
}</code></pre>数え上げの役割だった添字iが無くなって、代わりに変数 <code>it</code> がそれを担っています。 ちなみに、JavaのListインターフェースにはiteratorパターンが実装されているのでここまで自前で作らなくても簡単にIteratorパターンを使うことができます。 参考： <a style="color:#007bff" href="https://docs.oracle.com/javase/jp/7/api/java/util/List.html#iterator&#40;&#41;" target="_blank" rel="noopener noreferrer">https:&#x2F;&#x2F;docs.oracle.com&#x2F;javase&#x2F;jp&#x2F;7&#x2F;api&#x2F;java&#x2F;util&#x2F;List.html#iterator()</a><h2 id="h598587f39e">ポイント</h2><ul><li>数え上げだけに特化している<ul><li>実装がどうであれ、数え上げることが保証されている</li></ul></li><li>Aggregateとiteratorは対になっている<ul><li>Aggregateはiteratorを持っているし、Iteratorはaggregateを持っている</li><li>Aggregateの実装が変われば、Iteratorの実装も変わる</li></ul></li><li>nextは「今の要素を返して、次の位置に進める」と言う意味</li><li>hasNextは「nextメソッドを呼んで良いかどうか」を教えてくれる</li><li>数え上げの仕組みがAggregateの外に置かれている<ul><li>1つのAggregateに対し複数のIteratorを作成可能</li></ul></li></ul><h2 id="hcbec2bf0d9">終わりに</h2>今回はIteratorパターンについて調べてみました。使える場面が多そうなパターンだなと思いました！ではでは。

こんにちは、よしでぶです。
今回はデザインパターンの1つであるIteratorパターンについて調べたのでまとめます。
数え上げに特化したデザインパターンであるIteratorパターンはプログラミングする上で良く出てくる場面が出てくる印象でした。

Iteratorパターン - デザインパターン

デザインパターン

<a style="color:#007bff" href="https://yahoo-osaka.connpass.com/event/198493/" target="_blank" rel="noopener noreferrer">MixLeap Live LT #35 - LT会「教えて！みんなのSNSの使い方」</a> に参加 コメンテーターにヤフーの公式ツイッターを運営されてる方が参加していた<ul><li><a style="color:#007bff" href="https://twitter.com/Yahoo_weather" target="_blank" rel="noopener noreferrer">ヤフー天気公式アカウント</a></li><li><a style="color:#007bff" href="https://twitter.com/yahoo_osaka_jp" target="_blank" rel="noopener noreferrer">ヤフー大阪公式アカウント</a></li></ul><h2 id="h5e4b94c7ab">オープニングLT「Yahoo!天気・災害Twitter運用について」</h2><a style="color:#007bff" href="https://twitter.com/Yahoo_weather" target="_blank" rel="noopener noreferrer">ヤフー天気公式アカウント</a> 2011 4月からTwitterを運営 天気をわかりやすく伝えることを第一に考えている。 フォロワーさんに信頼してもらう。災害時に情報をしっかり受け取ってもらうために平常時から定期投稿 中の人は朝5時起き。。 毎日朝に投稿してたけど、寝坊してしまった。。 botだと思ってた、中に人がいた！と反応 投稿がbotだと思われていたww あの寝坊がなかったら今のような投稿はなかった（名言） ミスった時は気軽に指摘してもらうように信頼を築いている 人間味ある行動で中の人が分かるという流れが　あたたかい　と聴衆のコメント 「災害発生時は、ずっと張り付いているのですか？」と質問→災害時は複数人で交代制で運用してる 「災害時は中の人も一緒に闘っている感じ、ありがたい」と聴衆のコメント フォロワーと同じ目線で話すように心がけている<h2 id="h2b7aab1bc0">オープニングLT「ヤフー大阪Twitter運用について」</h2><a style="color:#007bff" href="https://twitter.com/yahoo_osaka_jp" target="_blank" rel="noopener noreferrer">ヤフー大阪公式アカウント</a> ヤフー大阪の説明 富国生命 2012年〜 グランフロント大阪 2017年〜 ヤフー大阪アカウントは2017年10月〜スタート ヤフー＋ヤフー大阪のファンをふやすことを影の目標<ul><li>お知らせ系：ニュース、大阪のイベント情報</li><li>イベント情報：MixLeapの宣伝とか</li><li>オフィス（周辺）の様子：ランチ、スポット、ヤフー社員のペット情報</li></ul>今までのインプレッション数が多いツイートをランキング形式で発表 第一位は綺麗な青空のやつ：ヤフー天気にRTされたのが原因と考察。公式アカウント同士でRTしあうとインプレッション数が伸びが良いらしい。<h2 id="hbd03b13706">田村さん 「Twitterでデータを可視化しまくった話」</h2><a style="color:#007bff" href="https://twitter.com/tamu_data" target="_blank" rel="noopener noreferrer">田村 健 &#x2F; データ可視化人間</a> ヤフーでデータソリューション事業を業務されている。 ヤフーでたまったデータを利活用する仕事。 最初、マーケティングの人から「田村さん！インフルエンサーになってください！」と突然言われるw 田村さんがやったこと： ヤフーのデータを使っていっぱい可視化する 反響の多かった可視化best3<ul><li>3位：関西エリアの通勤圏map 370RT</li><li>2位：鉄道網の変遷マップ 4600RT</li><li>1位：ラーメンチェーン店Map 6500RT</li></ul>やってよかったこと<ul><li>触ったことのない新しい可視化ツールについて触る機会が増え学びが多かった</li><li>自分が開発してるサービスのドックフーディングになった</li><li>データ好きな人と繋がれた</li></ul>「可視化するテーマの選び方がすごく面白い。全部タムラさんが考えてツイートしてるのですか？」とコメント →Twitterはみなさんスマホで見てるので、わかりやすくとっつきやすいのをテーマにしてる<h2 id="hddaacf82fd">サワノミク「悠久の思いをSNSに載せて」</h2><a style="color:#007bff" href="https://twitter.com/art_tsumugu" target="_blank" rel="noopener noreferrer">紡ぐ Japan Art &amp; Culture</a> <a style="color:#007bff" href="https://tsumugu.yomiuri.co.jp/" target="_blank" rel="noopener noreferrer">japan art &amp; culture</a>：日本文化、日本技術、伝統芸能について紹介するポータルサイト SNSで目指してること<ul><li>日本文化への入り口になる</li><li>現場取材をしている記者からの発信（現場の記者が発信している）</li><li>読者とのコミュニケーション</li></ul>中継ツイート（国宝の運び出し）をしてる 「面白い！」「がんばれ！」とのコメントをもらう 障壁画を運び出しも好評 普段みなさんが見ないことを共有するだけでなく、現場の人の思いというのを伝えることを心がけている<h2 id="h05b0609fc4">MJうさちゃん「明日から出来る！現役公式中のTwitter&quot;つぶやき&quot;テクニック」</h2><a style="color:#007bff" href="https://twitter.com/otakumatch" target="_blank" rel="noopener noreferrer">おたくま経済新聞</a> 運用の重要ポイントを紹介<ol><li>カレンダーはチェックしておく→身近なネタでも注目されるチャンスあり！</li><li>流行には敏感に→脈絡のない単語がトレンドになるものもtwitter</li><li>チェックすべきは「インプレッション」と「エンゲージメント」→いいねはブックマークがわり</li><li>絡めそうなネタだけ反応すればOK→Twitterだけが全てじゃない。割り切りも重要</li></ol>「記念日タグ」を織り交ぜた挨拶投稿を行う トレンドワードを利用しての過去記事紹介。トレンド活用は格好のPRチャンス！ 個人アカウントでも効果あり 「卵かけご飯の完成」のトレンドに、&quot;便乗&quot;して行った ハッシュタグはSEO的にも良い 「トレンド情報はどのあたりから入手されてますか？」→ヤフーリアルタイム検索、Twitterのトレンド 「食べ物はやっぱヒキがいいんですかね」とコメント。→人間の3大欲求。食品は動画がおすすめ。<h2 id="hcb16afcb18">ようかん「高校生エンジニアからみる高校生のLINEの使い方」</h2><a style="color:#007bff" href="https://twitter.com/inoue2002" target="_blank" rel="noopener noreferrer">ようかん &#x2F; Yosuke Inoue</a> 高校生エンジニア 聴衆を圧倒するプレゼン。 <code>#mixleap</code> で投稿した内容がニコ動のコメントのように画面を横切る演出。 とりあえず圧巻のプレゼン。楽しそうに開発されてるのが聞いてるだけでわかる。 LINEアプリを作ってる。<ul><li>LINEで同級生と情報共有：ファイル共有とか</li><li>LINEで勉強時間共有：友達同士で共有してモチベーションアップ</li><li>LINEで部活動相談：コロナ禍でオフラインでの勧誘が難しくなったので作った。LINEのオープンチャットへの誘導。</li><li>LINEでライブ配信スイッチャー：OBSの画面切り替えをLINEでやる</li><li>LINEでYahooAPI使いまくってみた</li></ul>bot開発はいつから？ →高校2年生から LINEを使った開発は独学ですか？学校の授業であるとか…？レベル高くてビックリです →LINEのイベントに参加して覚えていった

こんにちは、よしでぶです。MixLeapのLT会に参加しましたので報告します！今日のタイトルは『MixLeap Live LT #35 - 「教えて！みんなのSNSの使い方」』ですー

MixLeap LT会 ＃35に参加したぜ

<h2 id="hae16271de9">Markdownって何？</h2>Wikipediaの説明を引用します。 <blockquote>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。</blockquote>Markdownは一種のテキスト形式です。 ブログの多くはこのMarkdownで書かれることが多いです。 <a style="color:#007bff" href="https://qiita.com/" target="_blank" rel="noopener noreferrer">Qiita</a>や<a style="color:#007bff" href="https://zenn.dev/" target="_blank" rel="noopener noreferrer">Zenn</a>の記事も元はMarkdownで書かれていて、その記事を解析してhtmlを生成しています。 この解析のことを Parse といいます。<h3 id="he84ad63f6a">Markdown例</h3>Markdownはこんな感じで書きます。<pre><code># これは見出し1です
見出し1は大きい文字サイズになる

## これは見出し2です
見出し2はそこそこ大きい文字サイズ

- リスト1
- リスト2
- リスト3</code></pre><h3 id="h2e3d646bed">Parse結果</h3>Parse結果はこんな感じ。 ただのテキストファイルだったモノがhtmlに変換されるのはブログを書く上でとても楽です。<h2 id="he03561ab50">Markdown Parserライブラリ比較</h2>今回はNode.jsのMarkdown Parser ライブラリを3つ調べたので紹介します。<h3 id="hca8eb9260f">markdown-to-jsx</h3><a style="color:#007bff" href="https://www.npmjs.com/package/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a> は MarkdownをReactのコンポーネントに変換してくれるライブラリです。 ダウンロード数も多く、2020年12月現在も活発にメンテナンスされているライブラリです。 Parse結果を直接 renderできるのが特徴で直感的に使えます。 2020年12月現在、yotteqはmarkdown-to-jsxを使っています。 拡張性も高く、Markdownではなく 直接jsx形式でコンポーネントを書けたりもします。<h3 id="he22e5208a4">markdown-it</h3><a style="color:#007bff" href="https://www.npmjs.com/package/markdown-it" target="_blank" rel="noopener noreferrer">markdown-it</a> も大変人気なライブラリの一つです。 こちらもダウンロード数が多く、2020年12月現在も活発にメンテナンスされているライブラリです。 markdown-itは最近話題の技術共有サイト Zenn のMarkdown Parserに使われているようです。 <a style="color:#007bff" href="https://zenn.dev/catnose99/articles/zenn-dev-stack" target="_blank" rel="noopener noreferrer">Zennを支える技術とサービス構成｜Zenn</a> こちらも拡張性が高く、さまざまなプラグインが揃っているそうです。<h3 id="h920525ca92">remark</h3><a style="color:#007bff" href="https://www.npmjs.com/package/remark" target="_blank" rel="noopener noreferrer">remark</a> は私がこの中で 一番注目しているライブラリです。 公式のGitHubのページでは <blockquote>remark is the world’s most popular Markdown parser!</blockquote>と言ってるほどです！ 実際、画像のようにmarkdown-to-jsx、markdown-it、remarkの中だと一番トレンドがあるライブラリのようです(<a style="color:#007bff" href="https://www.npmtrends.com/markdown-it-vs-markdown-to-jsx-vs-remark" target="_blank" rel="noopener noreferrer">参考</a>) また、Next.jsを作ってる会社の<a style="color:#007bff" href="https://github.com/remarkjs/remark#sponsor" target="_blank" rel="noopener noreferrer">Vercelがスポンサーとして付いている</a>ことからも、 Next.jsとremarkの相性はこれからもっと良くなってくるのかなと勝手に想像しています。 <a style="color:#007bff" href="https://github.com/leerob/nextjs-prism-markdown" target="_blank" rel="noopener noreferrer">Next.jsの公式サンプルコード</a>にも remarkが使われているのでこれは期待大ですね！！<h2 id="ha214098e44">まとめ</h2>Node.jsのMarkdown Parserライブラリを3つ紹介しました。<ul><li>markdown-to-jsx: yotteqで使ってるライブラリ</li><li>markdown-it: Zennで使われているライブラリ</li><li>remark: Next.jsとの相性が良さそうなライブラリ</li></ul>Next.jsとの相性やプラグインの豊富さやトレンドを鑑みて yotteqはmarkdown-to-jsxからremarkに乗り換えを検討しています。 また使ってみた感想を紹介できればと思います。 ではでは。 ご指摘、ご意見などがあれば <a style="color:#007bff" href="https://forms.gle/ZgLqjX1o7XDy8NHj7" target="_blank" rel="noopener noreferrer">お問い合わせページ</a> からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

こんにちは、よしでぶです。
今日はMarkdownのParserのライブラリについて調べたのでいくつか紹介します。
そもそもMarkdownって何？Parserって何？ってところから軽く触れたいと思います。

Markdown Parserについて調べてみた

markdown

yotteq

Node.js

<h2 id="h46ad14cc5d">digコマンド</h2> とりあえず <code>man</code>コマンドで<code>dig</code>の説明を調べてみます。 <pre><code>$ man dig

NAME
 dig - DNS lookup utility

SYNOPSIS
 dig [@server] [-b address] [-c class] [-f filename] [-k filename] [-m] [-p port#] [-q name] [-t type] [-v] [-x addr] [-y [hmac:]name:key] [-4] [-6] [name] [type] [class] [queryopt...]

 dig [-h]

 dig [global-queryopt...] [query...]

DESCRIPTION
 dig (domain information groper) is a flexible tool for interrogating DNS name servers. It performs DNS lookups and displays the answers that are returned from the name server(s) that were queried. Most DNS administrators use dig to troubleshoot DNS problems because of its flexibility, ease of use and clarity of output.
 Other lookup tools tend to have less functionality than dig.

 Although dig is normally used with command-line arguments, it also has a batch mode of operation for reading lookup requests from a file. A brief summary of its command-line arguments and options is printed when the -h option is given. Unlike earlier versions, the BIND 9 implementation of dig allows multiple lookups to
 be issued from the command line.

 Unless it is told to query a specific name server, dig will try each of the servers listed in &#x2F;etc&#x2F;resolv.conf. If no usable server addresses are found, dig will send the query to the local host.

 When no command line arguments or options are given, dig will perform an NS query for &quot;.&quot; (the root).

 It is possible to set per-user defaults for dig via ${HOME}&#x2F;.digrc. This file is read and any options in it are applied before the command line arguments.

 The IN and CH class names overlap with the IN and CH top level domain names. Either use the -t and -c options to specify the type and class, use the -q the specify the domain name, or use &quot;IN.&quot; and &quot;CH.&quot; when looking up these top level domains.</code></pre> なるほど。 <code>dig</code>コマンドは Domain Information Groper の略でDNSネームサーバを照会するための柔軟なツールです。 DNSの検索をして照会されたネームサーバーから返された回答を表示してくれます。 <h2 id="h1a44409e96">nslookupコマンド</h2>続いて<code>man</code>コマンドで <code>nslookup</code>の説明を調べてみます。 <pre><code>$ man lslookup

NAME
 nslookup - query Internet name servers interactively

SYNOPSIS
 nslookup [-option] [name | -] [server]

DESCRIPTION
 Nslookup is a program to query Internet domain name servers. Nslookup has two modes: interactive and non-interactive. Interactive mode allows the user to query name servers for information about various hosts and domains or to print a list of hosts in a domain. Non-interactive mode is used to print just the name and
 requested information for a host or domain.</code></pre> <code>nslookup</code> コマンドはインターネットのドメインネームサーバーを照会するプログラムです、とあります。 ん？<code>dig</code>コマンドと何が違うの。。？ <h2 id="h04374c17f2">digとnslookupの違い</h2> どうやら これら2つのコマンドに特に違いがないみたいです。 <code>dig</code>コマンドの説明 にはこう書いてありました。 <blockquote>Other lookup tools tend to have less functionality than dig.</blockquote> 他のDNS照会ツールは `dig` コマンドより機能が少ない。言い換えると `dig` コマンドは他のツールよりリッチな機能がついているようです。 それ以外ではできることは基本的に同じということがわかりました！ <h2 id="hcd47fad4c8">実行例</h2> 試しにアマゾンのドメイン(www.amazon.co.jp)に対してDNS情報を調べてみます。 <h2 id="h46ad14cc5d">digコマンド</h2> <pre><code>$ dig www.amazon.co.jp

; &lt;&lt;&gt;&gt; DiG 9.10.6 &lt;&lt;&gt;&gt; www.amazon.co.jp
;; global options: +cmd
;; Got answer:
;; -&gt;&gt;HEADER&lt;&lt;- opcode: QUERY, status: NOERROR, id: 30698
;; flags: qr rd ra; QUERY: 1, ANSWER: 3, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.amazon.co.jp.		IN	A

;; ANSWER SECTION:
www.amazon.co.jp.	1086	IN	CNAME	tp.4d5ad1d2b-frontier.amazon.co.jp.
tp.4d5ad1d2b-frontier.amazon.co.jp. 55 IN CNAME	dtioykqj1u8de.cloudfront.net.
dtioykqj1u8de.cloudfront.net. 59 IN	A	13.249.158.55

;; Query time: 67 msec
;; SERVER: 192.168.86.1#53(192.168.86.1)
;; WHEN: Sun Dec 13 23:02:11 JST 2020
;; MSG SIZE rcvd: 139</code></pre> <code>QUESTION SECTION</code> が調査対象のドメイン (www.amazon.co.jp)です。 <code>ANSWER SECTION</code> がDNSサーバーからの返答になります。 これによると、 www.amazon.co.jpは複数の CNAMEを経て、最終的にIPアドレス(23.10.0.210)にたどり着いていることがわかります。 CNAMEはドメインからドメインに転送するレコードで、 長いドメインや、人が理解しづらいハッシュ化されたドメインを隠蔽するため に使われたりします。 IPアドレスにたどり着く途中に AWSのCDNサービスである Amazon CloudFront を介していることもわかりますね(dtioykqj1u8de.cloudfront.net) <h2 id="h1a44409e96">nslookupコマンド</h2> <pre><code>$ nslookup www.amazon.co.jp

Server:		192.168.86.1
Address:	192.168.86.1#53

Non-authoritative answer:
www.amazon.co.jp	canonical name = tp.4d5ad1d2b-frontier.amazon.co.jp.
tp.4d5ad1d2b-frontier.amazon.co.jp	canonical name = dtioykqj1u8de.cloudfront.net.
Name:	dtioykqj1u8de.cloudfront.net
Address: 13.249.158.55</code></pre> <code>dig</code>コマンドに比べて`nslookup`コマンドは出力結果がシンプルですね。 リッチさで言うと <code>dig</code> コマンドに軍配が上がるようです。 <h2 id="ha214098e44">まとめ</h2> <ul><li><code>dig</code>コマンドも<code>nslookup</code>コマンドもDNSサーバーから情報を取得し表示してくれる</li><li><code>dig</code>コマンドの方が出力結果がリッチ</li></ul> ということがわかりました。 今回紹介した事以外にも、これらのコマンドには色んなオプションがあるみたいなので調べてみて便利そうなものがあれば紹介したいと思います。 ではでは。 ご指摘、ご意見などがあれば <a href="https://forms.gle/ZgLqjX1o7XDy8NHj7" target="_blank" rel="noopener noreferrer">お問い合わせページ</a> からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

こんにちは、よしでぶです。
DNSの情報を確認するコマンドにdigとnslookupがありますがその違いをご存知でしょうか？
その違いについて調べてみたので紹介したいと思います。

digとnslookupの違いって知ってる？👨‍💻

Linux

<h2 id="hcac1df8f1a">yotteqとは？</h2> yotteq(ヨテック)は私よしでぶが、web系の話や日常話をざっくばらんに発信する個人メディア&amp;ブログです。 デザインは最近私がハマっている ニューモーフィズム 基調で作りました。 <img src="https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/5ba53e4a422446819825531d88c7930b/main_ogp.png" alt> <h2 id="h2bb2604fbe">なんで作った？</h2> よしでぶがyotteqを作った経緯について <h3 id="hc611b9f5fe">開発経験を増やしたかった</h3> yotteqのバックエンド側はAWSを使用しています。 これまでAWSを使用したことがなかったのでAWSを使って何か開発・デプロイしてみたいという願望をかつてから持っていました。 <h3 id="h3937fc8cbc">自分の好きなデザイン・機能を追加したかった</h3> 個人のテックブログとして、Qiita、はてなブログ、noteというサービスを利用する方法もあるかと思います。 私もはてなブログのページを持って情報を発信していました。 しかし、 自分の好きなデザイン・機能の拡張が難しい と感じていました。 なので今回自作でブログを作ろうと考えました！ <h2 id="h02b6232a5d">ざっと開発スケジュール</h2> 構想からデザイン・実装までリリースまでに約3ヶ月かかりました。 休日や隙間時間に作業して、ようやく最低限の機能が完成したと思ったのでこのタイミングでリリースします。 <ol><li>9月~ デザインモック：こちらはSketchを使ってデザインしました</li><li>9月中旬~ バックエンドの構築：CMSのシステムはヘッドレスCMSでOSSのstrapiを使ってAWSで稼働させています。</li><li>10月~ フロントエンドの構築：画面はNext.jsで開発しました。</li><li>11月~ デザイン、バック、フロントの微修正の繰り返し：デザインが気に入らなかったら修正の繰り返し。一番時間がかかる作業でした。。</li><li>~12月5日：Google Analyticsやその他の設定</li></ol> この辺の話は別途できれば良いなと思っています。 <h2 id="hcbec2bf0d9">終わりに</h2> 今回はよしでぶが開発したyotteqについてご紹介しました！こんな感じでゆるく投稿を続けていきたいです。 また、いろんな微修正や機能を追加できたら良いなと思っています。 ではでは。 ご指摘、ご意見などがあれば <a href="https://yoshidev-media-images.s3.ap-northeast-1.amazonaws.com/main_ogp_16d89af3fe.png" target="_blank" rel="noopener noreferrer">お問い合わせページ</a> からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

こんにちは、よしでぶです。
構想から約3ヶ月。ようやく個人メディア yotteq(ヨテック)をリリースすることができました！
今回はyotteqについて紹介します。