エンジニアの成長のためには単語のコピペをやめたほうがいいんじゃないかという思い付き

コピペは決して悪じゃない エンジニアはとにかくコピペをするべきである、って新卒で入ったウェブ制作会社で言われたのは、もう6年も前。 少しややこしい言い方をしたが、ロジックも含めてコピペをするわけじゃなくて、単語とかをコピペしろ、っていう意味で言われた。 確かに、デバック中にスペルの抜けで動いてないことを知った時、エンジニアは皆、般若のような顔になる。 つまりとても理にかなっている。 理にかなっているので、実践してきた。 例えば、event 時に実行する関数は、 対象の要素.addEventListener(種類, function() { // 処理を記述 }, false); というコードをクリップボードに保存して使う。 これならスペルミスも生まれないし、時短にもなる。 が、がしかし、である。 かっこいいエンジニアになりたい 最近、まあ、6年近くウェブに携わってきたので、後輩に教えることが多くなってきた。 「わかりません」と呼ばれ、後輩の机に移動する。 「あー、これね、こんなの簡単よ」ってどや顔し、いざパソコンと向き合った時、わかる、わかるのだが、スペルがわからない。 「ごめんだけど、アドイベントリスナーってググってくれない?」 「え、あどいべんとりすなー?」って後輩に聞き返される。 なんて、恥ずかしい思いはしたくない。 そう思うならコピペを辞めるのも手じゃなかろうか。 私はコピペを辞めました。 以来、だれのパソコンでもすらすらと日本語を書くように、というと言い過ぎだが、コードを書けるようになった。 前述したが、コピペは全く悪じゃない。 コピペエンジニアと言われている人たちがいるが、あれはロジックを理解せずに使っているエンジニアで、スペルミスを防ぐためにコピペをしているのはコピペエンジニアではない。 ただ後輩の前でかっこつけたいのであれば、なるべく手を動かし書くべきだと思う。 結果、たまに般若のような顔を後輩に見られることになるかもしれないが。

投稿日 · 2021-12-21 · 更新日 · 2024-06-07 · 1 分 · nove-b

javascriptでimportするときに { 中括弧 } をつける時とつかない時があって釈然としない

defaultの有無 export default で書き出した値は、中括弧なしでimport できる。 export で書き出した値は、中括弧ありでimport する。 そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。 とのこと。 参考:ES2015のモジュール機能(import/export) 実際に動かしてみた 上記の参考とまんまだが、実際に動かしてみた。 export default "uchida hyakken"; export const firstNaMe = "hyakken"; export const lastName = "uchida"; import name, { firstNaMe, lastName } from "./export"; console.log("name", name); // name uchida hyakken console.log("firstNaMe", firstNaMe); // firstNaMe hyakken console.log("lastName", lastName); // lastName uchida 下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。 うん、動かすことで理解が深まった。 export / import を使いこなすことで、ファイル管理を楽にしていこう。

投稿日 · 2021-12-18 · 更新日 · 2024-06-07 · 1 分 · nove-b

react を適当に触って確かめてみる。

前回、reactのファイルを検分したので、今回は、適当に触ってみる。 それじゃ、適当に触ってみる App.js編 まず、前回インストール時の時から依存ファイルをクリーニングした。 結果、非常にわかりやすくなった。 ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること…くらい? import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 上記コードで保存すると、 のように表示される。 ここまでは特別に難しくない。 App.css 編 次に、App.js の先頭に書かれている、 import './App.css'; を見ていく。 こちらも特別難しいことはない。 普通にcssを読みこんでいるだけなので、 color: white; → color: red; にすればテストの色が変更される、 この画像通りに。 特別難しいことはないが、 @media (prefers-reduced-motion: no-preference) {} font-size: calc(10px + 2vmin); とか個人的に知らない使い方があったので、勉強になる気がする。 てか、人のコードを見るのは勉強になる。 参考:意外と知らない?メディアクエリを使ってみよう。 参考:【CSS】vw、vh、vmin、vmaxとは?基本的な使い方 index.js 編 最後に、前述した App....

投稿日 · 2021-12-16 · 更新日 · 2024-06-07 · 1 分 · nove-b

インストールしたreact のファイルを検分する

前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。 react app のファイル構成 最初にインストールした時点で存在しているフォルダは下記一覧。 |--node_modules | |--(抜粋) |--public | |--favicon.ico | |--index.html | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css | |--App.js | |--App.test.js | |--index.css | |--index.js | |--logo.svg | |--reportWebVitals.js | |--setupTests.js |--.gitignore |--package.json |--README.md |--yarn.lock node_modulesの中身は多すぎるので、抜粋した。 どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。 必要フォルダ構成 |--node_modules // 必要 | |--(抜粋) |--public | |--favicon.ico | |--index.html // 必要 | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css // 必要 | |--App....

投稿日 · 2021-12-15 · 更新日 · 2024-06-07 · 1 分 · nove-b

フォルダをツリー構成で綺麗に表示したい。vsCodeでtree コマンドがなくても表示できる

treeコマンド treeコマンドとは、フォルダ構成とかを綺麗に表示してくれるもの。 実際に吐き出されるソースの見本は下記記事を参照。 インストールしたreact のファイルを検分する 使い方は簡単で、コマンドを開き、 cd 表示したいフォルダ tree で、きれいに表示される。 ちなみに、ファイル名まで表示したい場合は、 tree /f で、実行する。 bash: tree: command not found Windowsのコマンドなので(?)、vsCode 上で実行すると bash: tree: command not found というエラーができる。 そういう時はコマンドに行けばいいのだが、どうしてもvsCodeでやりたい時は下記コマンドで実行可能となる。 pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/| /g' 参考:Windowsファイルツリー構造の表示とテキスト保存 参考:tree コマンドが無い環境で tree コマンドを実現

投稿日 · 2021-12-15 · 更新日 · 2024-06-07 · 1 分 · nove-b