弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 英語での適切な命名は、コードの可読性や保守性を向上させるために重要です。適切な命名規則を守ることがコードの理解や共有において不可欠です。 英語での命名規則を学び、適切な命名を行うことで、コードの読みやすさや保守性を向上させ、チーム全体でのコードの理解を促進する手助けとなります。 この記事では、日本人エンジニアが英語での命名規則を理解し、適切な命名を行うための指針を提供します。 命名フローチャート 変数 関数 クラス 1. 変数 1-1. boolean 1-1-1. 存在するかどうかのフラグ 名詞 + exists

はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S

これは何 新人プログラマ応援イベントの参加記事です。 gitにはreflogというコマンドがあります。このコマンドを学んでおくとやらかしちゃった時も大体なんとかなるので記事にします。 git reflogってなに？ git reflogとは、Gitで操作履歴を見ることができるコマンドです。 例えば branch1にチェックアウト branch1でbranch1.txtを作成し、コミットを作る masterにチェックアウト をすると、以下のようなreflogになります。 $ git reflog 4a4125a (HEAD -> master) HEAD@{0}: checkout: moving from branch1 to master 826a9dc (branch1) HEAD@{1}: commit: Create branch1.txt 4a4125a (HEAD -> mas

質問に関することで悩む若手エンジニアは多い 「ちゃんと調べてから質問した？」 「今日の進捗は？ない？ずっと同じ場所で悩んでいたの？？」 「わからないところあったらすぐ質問してね？」 「すみません。どうして欲しいのかわからないです」 他にもいろいろあると思いますが、 上記の様なことを言われているうちに質問することへの心理的障壁が上がってしまい、 質問する行為自体が悩みの種になってしまうことも多いです。 自身のキャリアのキャリア初期に「こうするとうまくいった」・「こうしておけばよかった」 また、エンジニアキャリアをスタートしたばかりの人をサポートする様になって「こうすればうまくいくんじゃない？」と アドバイスする機会もあったので、今回は質問という話題に絞って、残しておきたい。 カテゴリ分けするともっと見やすくなるかもしれないが、思いついたエピソードや事柄を羅列する形にしたいと思います。 稚拙な

Qiitaで期間限定開催中の、「エンジニアによるマネジメント」に関する記事を投稿するイベントへの参加記事です。 マネジメントを始めて悩んだこと 約1年前、アシスタントマネージャーという役職をいただき、エンジニアリングマネージャー（以下、EM）としての業務を開始しました。EMになると1on1やメンバーの目標設定、チームづくり、チームの代表として事業部リーダーズミーティングへの参加などの新しい業務をしながら、それまでのプレイヤーとしての業務も行い、目の前の業務をこなすのにいっぱいいっぱいでした。 そんな中で常に「自分がマネージャーとしてきちんとできているのかが分からない」という不安を持っていました。また、どんなスキルをつけて、どうなれたら正解なのかというイメージが見つからず悩んでいました。 ある時、先輩との1on1で、「（メンバーとの1on1やメンバーの育成を）どうしてそれをやるのか」と問われ

これらのスキルを、私の経験を交えながら、効果を説明していきます。 1. Paraphrasing（言い換え） To support a speaker when thinking out loud and allow them to review their contribution. 発言者が言葉に詰まっていたり、考えながら発言しているときに、ファシリテーターが言い換えるテクニックです。 あなたが言っているのは、○○ということですか？ ここまでの話は、○○という理解であっていますか？ 言い換えをすることにより、発言者は自分の意見を客観視して意見を深めたり訂正したりできます。また、参加者全員に現時点の情報を整理して展開する役割もあります。 2. Mirroring（ミラーリング） To (re)establish your neutrality as a facilitator. 発言者の

atoms を atoms であり続けさせるための工夫は以前記事に書いたので参考にしてみてください。 AtomicDesign の atom より小さな世界の扉を開く 軸の転換 粒度軸重視から概念軸重視へ 以下は簡単なブログサービスで作成するであろうコンポーネントを5つの方法で分類した例です。 粒度軸で分類しても、概念軸の分類をしないとキレイな構造にはならない 概念軸で分類すると、粒度軸で分類しなくてもかなりキレイな構造になる 概念軸と粒度軸で分類すると、非常にバランスの取れた構造になる 概念軸と関心で分類すると、スケールに強くなる 5 概念軸と関心と粒度軸で分類すると、スケールに強く、関心をまとめつつ粒度の恩恵も得られる 5 なぜ粒度軸より概念軸なのか 粒度軸の中で概念軸の分類を行う 概念軸の中で粒度軸の分類を行う この2つの一番大きな違いは、関心のまとまりです。 DDD の基本でもある

Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と

React x TypeScript の鬼門のひとつに「props に記述する EventCallback の適切な書き方が分からない」というものがあります。さて、このコンポーネントの type Props どう型定義するべきでしょうか？ const View: React.FC<Props> = props => ( <form onSubmit={props.onSubmit}> <input type="text" onClick={props.onClick} onChange={props.onChange} onKeyPress={props.onkeypress} onBlur={props.onBlur} onFocus={props.onFocus} /> <div onClick={props.onClickDiv} /> </form> ) type Props =

New!!（2024.1.11） 本記事の内容をよりブラッシュアップし、さらに使いやすくなった「ふりかえりカタログ（コミュニティ版）」をリリースしています。 今後はそちらをご利用ください。 ふりかえりカタログ（コミュニティ版） はじめに あなたのふりかえりを拡張するふりかえりカタログを公開いたします！ ふりかえりカタログは、ふりかえりの手法（現在）71個とその特徴を網羅したカタログです。下記画像はイメージです。 pdfはBoothで無料DLできます。 DLはコチラ => ふりかえりカタログ（Booth版） スライドはSpeakerDeckから参照できます。 DLはコチラ => ふりかえりカタログ（SpeakerDeck版） ふりかえりカタログとは ふりかえりの様々な手法をまとめたカタログです。 ふりかえりの各手法を「手法名」「手法を使う場面」「手法のイメージ」「出典」「進め方」「いいところ

ブルベースの堀内です。 エンジニアチームのマネージャーを担当しております。 ブルベース株式会社は2020年3月に人材事業、受託開発事業、自社サービスの新規開発・運用保守を担う会社として発足しました。発足に伴いエンジニアの評価制度を考える機会をいただいたものの、非常に頭を悩ませました。通常業務をこなしつつ、評価制度を検討したため、半年もの時間がかかりました。 皆様の参考になればと思い、どのような思いで検討したかを述べさせていただきます。 エンジニア評価制度の必要性と方向性 エンジニアの評価制度を策定するにあたり、なぜ必要なのかを改めて考えてみることにしました。評価制度に従って、役職や給与が決定することは当然のことです。ただ、それだけではありません。この評価制度は「会社がどのようなエンジニアになって欲しいか」というメッセージと考えるようにしました。 現在、所属するエンジニアのみで誰がどのランク

数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S

初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例

システム開発にドキュメントは欠かせません。ドキュメントが得意になれば活躍の幅が大いに広がりますよね。 この記事では、まず冒頭でドキュメントの作成に求められると思うことを整理した上で、そのスキル獲得に役立つと思われる記事や書籍を集めてみました。もちろん他にもあると思うので、もしお薦めのものがあれば是非コメントで教えて下さい 更新履歴 ・2021/04/16：文章術系にリンクを追加しました。 ・2020/11/28：文章術系にリンクを追加しました。 ・2020/07/24：文章術系にリンクを追加しました。 ・2020/05/24：文章術系にリンクを追加しました。 ・2020/05/14：スライドデザイン系にリンクを追加しました。 ・2020/04/29：スライドデザイン系にリンクを追加しました。 ・2020/04/17：文章術系にリンクを追加しました。 ・2020/04/12：関連するTwit

はじめに 「心理的安全性」とは、「対人リスクを取っても問題ないという信念がチームで共有されている状態」であるとか、「自分のキャリアやステータス、セルフイメージにネガティブな影響を与える恐れのなく、自分を表現し働くことができること」というような定義がなされています。 心理的安全性という言葉はともすれば、ただ快適で居心地のよい職場という意味にも聞こえます。そのため、ぬるま湯で緊張感のない関係性のことを「心理的安全性が高い」と言うのではないかと考えても不思議はありません。 そのため、友人関係のようにプライベートの時間を長く共有する関係になることが、心理的安全性が高いのだろうと考え、飲み会やバーベキュー、慰安旅行などを企画してみたりとプライベートでも遊ぶ機会を増やそうと考える人もいるでしょう。 いわゆる「アットホームな会社です」とアルバイトの求人記事に書かれているような状態です。こういった求人内容

ランサーズのプロダクト開発は、主に上記の4つの役割で開発が進みます。 上記とは別に、プロダクトオーナーやビジネスオーナーも存在しますが、企画が意思決定してからは殆どの場合、登場しません。 本題：リスケ地獄から抜け出すプロジェクトマネジメント手法 プロジェクト開始からリリースまでを大きく3つに分けて紹介します。 企画フェーズ: 目標設定・要件の確立、ステークホルダーとの合意 設計・計画フェーズ: タスクの規模見積り 開発フェーズ: 進行中の運用（メンテナンス） ※ リリース後の改善などはこちらでは扱いません。 企画フェーズ: 目標設定・要件の確立、ステークホルダーとの合意 目標と要件 企業において、開発するということは、何らか課題解決が前提として必ずあります。 課題解決されたということを示すものが目標です。（目標の更に上に目的が存在します） 目標の抽象度が大きい場合は、目標の要素として、満た

本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ

概要 そろそろ年度末だし、新年度からプロジェクトリーダーとしてやっていく人もいるかと思うので、プロジェクトリーダーはどういうことをしないといけないかと、心得的なものを投稿しようと思います。今業界全体的にリーダー不足になってるんで、プロジェクトリーダーという役割について興味持ってくれる人が増えると嬉しいです。 ※ここでのプロジェクトとはシステム開発等IT関連のプロジェクトを指すものとします。 軽く自己紹介 2013年頃から7年くらいプロジェクトリーダーとして請負業務などの仕事をしてきました。最近はプロジェクトマネージャーも兼ねてやっていたり、うまくいっていないプロジェクトにコンサルとして入って立て直すというようなこともしています。 レジュメ https://www.resume.id/branch まずは結論から プロジェクトリーダーの使命 「担当するプロジェクトを成功へと導く」 「プロジェ

＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指

はじめに 株式会社デジサク がお送りするプログラミング記事、 今回は要件定義・システム設計について扱っていこうと思います。 プログラミングを勉強していて、こんな事を感じた経験はないでしょうか。 「勉強してもプロダクトが作れない」 「そもそも開発ってどうやるの？」 「要件定義ってなに？」 その悩みを解決するために、まずは開発の全体感を理解しましょう。 下図『ソフトウェア開発プロセス』をご覧ください いつも勉強しているプログラミングは 『実装』 の部分に該当します。 つまり、プログラミングの実力を発揮する前に４つも壁が存在するのです。 そのため、本記事では実装（プログラミング）を開始する前に必要となる、 『企画～設計』 について順を追って説明して行きます。 特に、エンジニアが理解しておくべき 『要件定義』『設計』 にフォーカスします。 なお、開発全体において実装（プログラミング）に使用する時間