はてなブックマーク

とあるシステム開発会社 ワイ「カタカタカタカタ・・・ッターーン！」 ワイ「よっしゃ、株式会社HogeFugaさんのWebサイト改修、完了や！」 ワイ「ふー、ほなタスクなくなってもうたわ」 ワイ「ワイ、仕事が早いからなぁ〜」 ワイ「すぐにタスクがなくなってしまうわ」 ワイ「なにか次のお仕事がないか、後輩プログラマー君に聞いてみよか」 ワイ「おーい、後輩くん！」 後輩「なんですか、やめ太郎さん？」 ワイ「お仕事なくなってもうたわ」 後輩「分かりました！」 後輩「すみません、ちょっとだけ待っててください！」 後輩「やめ太郎さんでもできそうなタスク、すぐに探しますね！」 ワイ「おう、ありがとうな！」 ワイ「（・・・ん？）」 ワイ「（やめ太郎さんでもできそうなタスク・・・？）」 ワイ「（なんか、ナチュラルに見下しが発生しとるような・・・？）」 ワイ「（いや、気のせいやな！）」 新タスク発生 後輩「や

自己紹介 現在40歳のフロントエンドエンジニア 高校卒業後、31歳までフリーターだったが、そこからITエンジニアに転職した 「良かったこと」の前に 良かったことだけ並べて「みんなも30代からエンジニア転職しよう！」とそそのかしてもよろしくないと思うので、まずは「悪かったこと」から書いていきます。 悪かったこと そもそも転職活動が困難 エンジニアになろうと思って就職活動をしていたころの私のスペックは以下のとおりです。 31歳 高卒 プログラミング歴、独学で1年（HTML・CSS・JavaScript） エンジニア実務未経験 転職サイトで50社ほど手当たり次第に応募しましたが、そもそも書類選考で落ちまくりました。 「〇〇さんのご活躍を心からお祈りします」というお祈りメールばかり届きました。 あまりに祈られ過ぎて「ワイは神なんか？」という妄想を抱くほどでした。 面接してもらえたのは、たった3社だ

ある日、非エンジニアの同僚から学んだこと 今年の5月に、Qiitaの中の人たちと直接会う機会がありました。 （ポッドキャストの収録） 初対面ということもあり、私はなかなか打ち解けられずにモジモジしていました。 しかし、私の同僚の福太郎（本名）1という男は、超ハイテンションで─── 福太郎「初めましてギュン！」 ───と挨拶し、とにかく相手を褒めて、場を温めてくれました。 そのおかげで、いい感じの雰囲気でポッドキャストの収録が進みました。 （しかも、なんとその日の福太郎は謎の頭痛でメチャクチャ体調が悪かったといいます。） コミュニケーション能力の大切さに気づいた ちょっとした振る舞いの違いで、仕事の進み方がこんなに違うんだなぁ、と感じました。 なんというか「感情の因果応報」のようなものを見せつけられた気持ちになりました。 そして「自分も少しは見習わないとなぁ」と思いました。 でも、ワイのよう

ある日の我が家 ワイ「う〜〜〜〜〜ん・・・」 ワイ「うんうんうん・・・」 ワイ「うん！」 ワイ「分からん！」 娘（8歳）「どうしたの、パパ？」 ワイ「おお、娘ちゃん」 ワイ「あのな・・・」 初めて書くタイプのコード ワイ「実は、個人開発の実装で行き詰まっててな」 娘「ふーん」 娘「どう行き詰まってるの？」 ワイ「ちょっと、今まで書いたことないような処理を書かなあかんくて」 ワイ「どうやって実装していいのかイマイチ分からんくて」 ワイ「ググってみても、あんまり情報も見つからんくて」 ワイ「それで、2時間くらい悩んでたんや」 娘「うんうん」 ワイ「でも、けっきょく実装の方針がぜんぜん思い浮かばへんのや・・・」 娘「そういう時は、まず適当に思いつきで書いてみるといいよ」 ワイ「えっ・・・なんで？」 ワイ「事前に策を練った方がええんちゃう？」 娘「ううん、とりあえず適当に書き始めて、失敗すればいい

今年も盛り上がっている Qiita Engineer Festa！ Qiita Engineer Festa 2023、大いに盛り上がっていますね・・・！ 特に、Organization対抗戦・・・！ いろんな企業さんが、必死になって沢山の記事を書いています。 現在のランキングはこちら Organization対抗戦: 総合いいね賞ランキング ※7月21日 12:35時点のランキングです。 なんと、弊社（株式会社ゆめみ）も2位につけています。 ただ、気になったことが・・・ ワイ「なんか、ワイが記事を書くと・・・」 ワイ「いつも、同僚たちが沢山いいねをくれる・・・」 ワイ「そのおかげで、いつもデイリートレンドに載ることができてる・・・」 ワイ「これって、ちょっとズルくないか？」 ワイ「組織票ってやつとちゃうか・・・？」 調べてみた デイリートレンドの30記事を対象に「同僚からのいいね1が何％

昔、上司に言われた言葉 誰だって「できるだけいい仕事をしたい」と考えています。 その人なりに一生懸命コードを書いてプルリクエストを作っています。 あなたが放つ言葉は、周りの人間の心に影響を与えます。 相手のモチベーションを下げることも上げることもできます。 我々は互いに「環境」なんです。 誰かにとっての良い環境であってください。 フィードバックには信頼関係が大事 その上司は、コードレビューをする際に 以下のようなことを心がけているようです。 「ここを直してください」の前に「ここ、よく考えられてますね」を伝える できていない部分だけにフォーカスしない 「一緒に良いものを作っていこう」という気持ちでフィードバックする でも、急にそんなポジティブ人間になれない そこで、ChatGPTの力を借ります。 ネガティブなフィードバックを、ポジティブに言い換える 良いところを見つけて、褒める 冷たい敬語で

クライアントコンポーネントのお話です。 （サーバーコンポーネントは出て来ません） ある日の我が家 娘「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「ハイドって何？」 ワイ「おお、今時の子供はハイドさんのことを知らんのか」 ワイ「L'Arc〜en〜Cielのボーカリストさんやがな」 娘「違う、そっちじゃなくて」 娘「Reactのハイドレーションのほう」 ワイ「ファッ！？」 ワイ「ハイドレーションのことをハイドって呼んでんのかい」 娘「うん」 娘「Next.jsでWebアプリを作っていたら、こんなハイドレーションエラーっていうのが起こっちゃって」 【和訳】 エラー： テキストの内容がサーバーでレンダリングされた HTML と一致しません。 警告： テキストコンテンツが一致しませんでした。サーバー: "6" クライアント "5" ワイ「おお〜」 娘「それで、ハイドレーションって何なのかな？って

使用技術 Vue3 + Nuxt3 Composition API TypeScript ワイ、お問い合わせフォームを作りたい ワイ「Vue の Composition API を使って、お問い合わせフォームを作るで！」 ワイ「フォームのデザインはこんな感じや！」 ワイ「いや〜、我ながらイケてるデザインやな！」 ワイ「ほな、Composition APIを使ってフォームの状態を管理していくで〜」 フォームの状態を管理するには？ ref()またはreactive() ワイ「Composition APIの場合、状態を管理するには」 ワイ「ref()またはreactive()を使うんやったな」 ワイ「この2つは何が違うんやろ？」 ワイ「確か───」 ref() 文字列・数値・真偽値などの、プリミティブな値を保持できる reactive() オブジェクト・配列・Map・Setなどの状態を保持でき

ある日の我が家 娘（7歳）「うぇ〜ん！」 ワイ「ど、どうしたんや！？娘ちゃん」 娘「学校でバカにされたの！」 男子A「お前の父ちゃん、Qiitaに関西弁の変な記事ばっかり書いてやんのw」 男子B「関西型言語なんだってさw」 娘「↑こんな風にからかわれたの・・・」 ワイ「な、なぁにぃ〜〜！？」 ワイ「ちょっとQiitaにクレーム入れてくるわ」 よめ太郎「なんでやねん」 よめ太郎「全てお前のせいやろ」 もうやめて欲しい 娘「パパ、ふざけた関西弁の技術記事を書くの、もうやめてくれない？」 娘「あの、会話形式のやつ」 ワイ「せやな、やめよか・・・」 ワイ「娘ちゃんが悲しむなら、もう書きまへんわ」 娘「そもそも、どうして会話形式で技術記事を書くの？」 娘「普通に書けばいいじゃん」 ワイ「いや、あれしか書けへんのや」 ワイ「文章を書くのが苦手やから」 娘「へ〜、意外」 娘「よくQiitaに会話形式の記

リモートワーク中ワイ ワイ「あーーー！！！」 ワイ「ストレスが溜まるんじゃ〜〜〜！！！」 ワイ「株式会社ゆめみで働くのは、ストレスが溜まるんじゃ〜〜〜！！！」 娘（7歳）「パパ、どうしたの？」 ワイ「いや、あのな？」 ワイ「パパの会社には、エンジニアが沢山おんねん」 娘「知ってるよ」 娘「社員の大半がエンジニアだもんね」 娘「200人以上いるよね」 ワイ「せやねん」 ワイ「そんで、エンジニアってのは、性格にクセのある奴が多いねん」 娘「へ〜」 娘「それで、何がストレスなの？」 ワイ「あのな？」 ズバズバ物を言うエンジニア ワイ「周囲への配慮をせずに、ズバズバ物を言う奴がおんねん」 ワイ「何人もおんねん」 ワイ「それで、周りの人たちは傷ついてると思うねん」 娘「なるほどね」 ワイ「そういうズバズバな奴らがムカつくねん」 ワイ「けしからんねん」 娘「でも、パパも昔はそんな感じだったよね」 娘「

前回の記事の続編です。 最近の若者、優秀すぎる問題（再び） 小中学生の頃からプログラミングをやっている そもそも地頭が良い そのうえ、いつもプログラミングのことばかり考えている 最近↑こんな若者をよく見かけます。 すごくプログラミングの才能があって、しかもプログラミングに対する強い執着も持っている。 そんな人、やり続けさえすれば必ず成功するに決まっています。 そこまで素質があるなら後はもう、やり続けるだけだと思います。 しかし、立ちはだかる老害 世の中には、私のような40代へっぽこ老害プログラマーが存在します。 私のような老害が属している群れに、とてつもなく優秀な若い個体が、急に現れる・・・ そんなとき、私の脳には本能的にこんな想いが湧き上がってきます。 ワイ「こいつ、優秀すぎやろ・・・！」 ワイ「何してくれてんねん・・・！」 ワイ「相対的にワイの価値が下がるやないけ・・・！」 ワイ「ガキ

最近の若者、優秀すぎる問題 最近、優秀な新卒エンジニアさんが本当に多いです。 毎年どんどんレベルが上がっているように感じます。 それによって会社がパワーアップするのは素晴らしいのですが、逆に懸念事項もあります。 小中学生の頃からプログラミングをやっている 地頭も良い プログラミングに対するモチベーションも高い ↑こんな若者が多過ぎて、先輩よりレベルが高かったりします。 そうすると、タイトルのような問題が起きます。 先輩にネガティブフィードバックしづらい問題 私のような、40歳くらいのヘッポコプログラマーが先輩なのです。 そうすると若者たちにとっては、かなりやりづらいのです。 そこで、この記事では「40歳おじさんエンジニアに対してネガティブフィードバックを上手く伝える方法」を紹介します。 40歳おじさんエンジニアの生態 ドラゴンボールが好き 40歳おじさんエンジニアは全員ドラゴンボールが好き

なかなか退会できないサービスって、嫌ですよね 「何箇所もクリックして、ようやく退会できるサービス」ってユーザー体験よくないですよね。 そういうサイト、たまにあると思います。 ですが今回は、それどころではない「クソの権化」とも言える退会ボタンをTwitter上で見つけました。 そちらをご紹介して行きたいと思います。 どんなボタンか こちらです。 「退会する」ボタンをクリックすると、ボタンが少しずつ割れていき、小さなボタンが中から出てきます。 まるでマトリョーシカです。 そして、何度も何度もクリックさせられた挙句、最終的に退会できたのかイマイチわかりません。 かなり凶悪なUXです。 今回は、このボタンのソースコードを極秘入手1しましたので、以下に記載します。 HTML パカっと割れるようにするために、同じボタンが2つずつあります。 <div class="wrapper"> <div clas

先日、Twitter上でこんなクイズを出題しました。 JavaScriptのクイズです。 クイズの内容 "たかし"を代入したのに"やめ太郎"と出力されました。なぜ？ コードの/* ここに解答を書いてください */の部分を埋めてください。 コード

この記事は「技育祭」というイベントで発表したものです 是非「スライドモード」でご覧ください みなさん、凶悪な関数はお好きですか？ 最近弊社では「ゆめみからの挑戦状」というクイズ企画をTwitter上で行なっています その企画の中で、こんな問題を出したことがあります 「足し算関数に1行追加して、凶悪にしてください」 元となる足し算関数

ある日の我が家 娘「ねぇ、パパ！」 ワイ「おお、なんや？娘ちゃん」 娘「HTMLとCSSでダイアログを作る方法を教えて欲しいの！」 ワイ「おお、ええでぇ」 ワイ「ちょうど今、ワイの個人ブログを作ってるところでな」 ワイ「これからダイアログを作るから、やり方を見せてあげるでぇ」 娘「わ〜い、ありがとう！」 娘「わたし、z-indexがうまく使えなくて困ってたの！」 ワイ「おぉ、パパに任せとき！」 ワイ「パパはz-indexを完全に理解してるからな！」 z-index完全理解ワイ、説明開始 ワイ「今、こんなサイトを作ってるんやけどな？」 ワイ「↑このサイトにダイアログを表示できるようにしたいんや」 「記事の投稿が完了しました。」 ワイ「↑こういうメッセージを表示するためのダイアログや」 娘「なるほどね」 ワイ「ほな、コードを書いていくで」 ワイ「まず、現状のコードは──」 <body> <he

※この記事はスライドモードでご覧ください 自己紹介 氏名 無職 やめ太郎（本名） 所属 株式会社ゆめみ 役職 フロントエンドエンジニア Qiitaでよく関西弁の会話形式の記事を書いています 〇歳娘「パパ、〇〇ってなぁに？」シリーズ など この発表も、会話形式でおこないます 登場人物 ワイ（やめ太郎） フロントエンドエンジニア ふわせぐ君 後輩のエンジニア 一人芝居 「技術記事って、別に書かなくてもよくないすか？」 ある日、株式会社ゆめみにて ワイ「なぁ、ふわせぐ君」 ふわせぐ「はい、なんすか？」 ワイ「技術記事を書くことって、とっても意味のあることやと思わへん？」 ふわせぐ「そうすか？」 ふわせぐ「そんなに意味あるんすか？」 ワイ「いや、あるがな」 ワイ「プログラミングについて、自分が学んだことを」 ワイ「人に読んでもらうための文章としてまとめあげることになるやん？」 ワイ「そうすると、そ

先日、Twitter上でこんなクイズを出題しました ↓こちらです。 この記事では、クイズの正解発表をして行きます。 クイズの内容 クイズの内容は以下です。 【JSクイズ】 /* ここに回答を書いてください */ の部分を埋めてくださいやで！ const array1 = [1, 2, 3, 4, 5, 6] const array2 = array1./* ここに解答を書いてください */ console.log(array2) // -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6] 要は、 [1, 2, 3, 4, 5, 6]という配列から [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]という配列を生成するには どうすればいいのか？ という問題です。 もう少し要約すると、 array1という配列の

今回使った技術 Vue3 Nuxt3（ベータ版） TypeScript ある日の我が家 娘「ねぇ、パパ！」 娘「Vue3の、Composition APIの使い方を教えて！」 ワイ「おお、ええで〜」 ワイ「ほな、試しにこんな感じのページを作っていくで！」 娘「わー、数をカウントできるページなんだ！」 娘「便利そう〜！」 娘「しかも、2倍の数も確認できるんだね！」 ワイ「げへへ、照れるでぇ」 ワイ「ほな、さっそく作っていくで〜」 カウンターを作っていく ワイ「まずは、カウンターの数値が今いくつなのか」 ワイ「その状態管理をせなあかんから」

※Qiitaのおかげ（？）で転職できた話です。 【22歳】工場勤務ワイ ワイ「毎日毎日、接着剤で部品をくっつけるのしんどいな・・・」 ワイ「ワイ、作業が遅すぎて先輩に嫌われてるし・・・」 ワイ「転職したいな・・・」 ワイ「プログラマーってカッコええな・・・」 ワイ「よっしゃ、C言語ってやつの本を買って、勉強してみよか・・・！」 C言語の勉強開始 ワイ「さっそく本を読んでいくで」 ワイ「変数・・・関数・・・なるほどな」 ワイ「オモロイやんけ」 翌日 ワイ「よっしゃ、黒い画面（コマンドプロンプト）で動く、足し算プログラムができたで！」 一週間後 ワイ「・・・来る日も来る日も、黒い画面ばっかりや！」 ワイ「いつになったら、デスクトップアプリみたいなのを作れるようになんねん！」 結果 一週間で挫折しました。 【23歳】無職ワイ ワイ「工場がなくなって、無職になってもうたわ」 ワイ「ほな、職業訓練校

とある休日 ワイ「あー、今日はヒマやな〜」 ワイ「ヒマやから、メールチェックでもしよか」 ワイ「パソコンでメールを受信して・・・っと」 ワイ「わ〜、また迷惑メールたくさん来とるわ〜」 娘「パパ、迷惑メールって何？」 ワイ「そのまんまや」 ワイ「迷惑なメールことや」 娘「迷惑な・・・メール・・・」 娘「・・・あっ！」 娘「もしかして、パパみたいな男の人のこと！？」 ワイ「そうそう、もう存在そのものが迷惑な男性やから・・・コラッ！」 ワイ「誰が迷惑maleやねん」 娘「そんなことよりパパ」 ワイ「なんや、娘ちゃん」 ここから本題 娘「この前、私が日記を書くための個人ブログのサイトを作ったんだけどね」 娘「Next.jsを使って、SPAとして作ったの」 ワイ「ほうほう、シングルページアプリケーションやな」 娘「うん、それでね」 娘「CSRしてたところを、SGするように変えたら」 娘「サイトにアク

※実話を基にしたフィクションです。 IT系コールセンター勤務時代ワイ 電話機「プルルルル・・・」 ワイ「おっ、お客様からお電話や！」 ワイ「簡単なお問い合わせだとええな・・・」 ワイ「ガチャッ（受話器を取る音）」 ワイ「お電話ありがとうございます！」 ワイ「インターネットプロバイダNEMUMIでございます」 お客様「あ、あの、ネムミさんですか？」 ワイ「はい、NEMUMIのやめ太郎と申します」 ワイ「本日はどういったお問い合わせでしょうか」 お客様「わしはネムミさんのサービスを使っとってな」 お客様「インターネットとメールのサービスを契約しとるんじゃが」 お客様「メールアドレスをもう一つ追加で欲しいんじゃ」 ワイ「かしこまりました」 ワイ「インターネット上から追加のお申し込みができますので」 ワイ「弊社のホームページにアクセスしていただけますでしょうか」 お客様「ほいほい」 お客様「パソコ

※Reactを使っている前提です。 ※タグっていうか要素やね。 リモートワーク中ワイ ワイ「さてと、今日もお仕事開始や」 ワイ「Webサイトを作っていくで」 ワイ「ほな、デザインデータを見ながらコーディングしていこか」 ワイ「どれどれ」 デザインデータ ワイ「↑どうやら、この番号付きリストが」 ワイ「色んなページで登場するみたいやな」 ワイ「ほな、使いまわせるようにコンポーネント化しておこか」 コンポーネントを作る ワイ「HTMLのタグとしては」 <ol> <li> <p>〇〇する。</p> </li> <li> <p>△△する。</p> </li> <li> <p>□□する。</p> <p>その際、■■に注意すること。</p> </li> </ol> ワイ「↑こんな感じのマークアップになりそうや」 ワイ「せやから」 ワイ「olタグにデザインを反映させたOrderedListコンポーネント

window.confirm()みたいなカスタムフックを作るお話です。 今回の使用技術 言語 TypeScript フレームワーク Next.js（ React.js 製 ） とある休日 娘「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「ユーザーさんのタイミングでPromiseをresolve()することはできないの？」 ワイ「プロミス・・・？」 ワイ「なんや、借金の話かいな」 ワイ「娘ちゃんも、大人みたいなことを考えるようになったなぁ」 ワイ「もう小学一年生やもんな」 ワイ「それで、なんやっけ？」 娘「だから、ユーザーさんのタイミングでPromiseをresolve()することはできないの？」 ワイ「プロミス・・・つまり消費者金融で借りたお金を」 ワイ「借りたユーザー側のタイミングでresolve・・・つまり解決したい訳やな」 ワイ「その場合、リボ払いがオススメや」 ワイ「お金がない月

とある休日 娘「パパ」 ワイ「なんや？娘ちゃん」 娘「あのね、お友達が」 娘「TypeScriptの便利な型を忘れちゃったの」 ワイ「そうなんや」 ワイ「便利な型を忘れてもうて、どうなってんねんそれ」 ワイ「ほな、ワイも一緒に考えてあげるから、その型の特徴を教えてみてよ」 娘「ええとね、例えば」

※前にいた会社での実話を元にしています（細かい部分は変えています） ※「こうはなったらアカン」という反面教師として読んでくださいやで… 初出社ワイ ワイ「HTMLコーダーの無職やめ太郎です！」 ワイ「今日からよろしくお願いしますやで！」 社長「おう、よろしくな」 社長「ほな早速・・・PHPでバックエンドの開発を頼むわ、一人で」 ワイ「ファッ！？」 ワイ「でもワイ、バックエンドの経験ないですよ・・・？」 ワイ「ちょっとはPHPできますけど・・・」 社長「ﾁｮｯﾄﾃﾞｷﾙ？」 社長「ほな大丈夫やないか」 ワイ「いや、ちゃいます」 ワイ「初心者レベルってことですがな」 社長「ほな大丈夫とちゃうか」 ワイ「そうですわ」 ワイ「いわゆる完全に理解したレベルってことですわ」 社長「完全に！？」 社長「ほな大丈夫やないか」 ワイ「なんでそうなりますねん」 ワイ「とにかく、一人バックエンドは無理ですって・

とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは