フリーランスエンジニアの13ヶ月目を振り返る(2020/4月)
はじめに 1ヶ月前にエンジニア歴1年を振り返って以下のような記事を書きました。 https://terrblog.com/entry/2020/03/19/005431 振り返りをすると、自分にとって成果につながる行動がなんだったのか、客観的に見れてとても恩恵を受けられました。 コロナの影響などでフリーランスとしての立ち回りなども重要になってくると思うので、月単位で振り返りなどを行うべきだと思い。この4月の振り返りをしおうと思いました。 そんな背景で書いています。 振り返り トピックややった事などを箇条書きでまとめていきます。 4月からエンジニアのシェアハウスに住み始めた 4月から新宿のシェアハウスに住みました。毎日、3人のエンジニアと共有リビングで作業しているので、作業の集中度合いや効率は上がっています。 日常的に案件や技術的な話が飛び交う環境はフリーランスで仕事をやっている身ではとても良いと感じています。 ただ仕事自体は3月からフルリモートで仕事を行なっていて、コロナの影響で外出もしていないので、新宿に住んでいるという地理的な恩恵は全く受けられていないです。 macbook pro 13インチを買った 8メモリのmacbookでホットリロードが落ちていることに悩まされてきましたが、遂にmacbook pro 13インチを買いました！！ …
vue.jsで開閉式のメニューを作る
はじめに 久々のVue.jsですが、今回は開閉式のメニューをコンポーネントで作っていきたいと思います。下記の感じのクリックすると開いたり、閉じたりする感じのコンポーネントですね。 アコーディオンって呼ばれ方をする場合もあります。 実装パート HTML部分 以下のようなソースコードになります。数字を振ってあるので、順番に解説していきます。 ①@clickイベント @clickはv-onの省略形です。v-onで見えている部分をクリックするとtoggleというイベントが発火するようにしています。toggleの処理はscriptの部分で書きます。 ②transitionを指定 transitionでイベント時の動き方を指定しています。transitionでは動きに対して、そのフェイズ毎に状態を指定することができます。 今回は以下の4パターンで指定しています。具体的な状態はscriptにて記載しています。 ③v-showにて表示・非表示切り替え v-showで”show”状態なら括った要素を表示できるようにしています。showがtrueかfalseかは@clickイベントのtoggleにて切り替えられるようにしています。 script部分 ①showの初期値 showの初期値はfalseで指定指定して、閉じています。 ②toggleイベント toggleイベントの処理に、showの切り替えを入れています。これにより、クリックする度に表示・非表示が切り替わります。 …
ヘッダーナビでホバー時のアニメーションを実装する(center)
はじめに ちょうど最近やっているLPで、下記の様なヘッダーナブを作っていました。右側の部分をクリックすると、該当の部分までスクロールする系のナブですね。 動きは、右のメニューにホバー時(マウスが当たった時)に下線が真ん中からヌルッと出てくるパターンです。 実装パート 実装の手順を見ていきます。ソースコードはGitHubのリンクを貼るので、そちらで確認できます。 レイアウトを書き出す 実際にHTMLをコーディングする前に、全体的なレイアウトを把握してあると良いです。 今回ですとこんな感じですね。 レイアウトの組み方が分からない人はこちらの記事に詳しく書いてあるので参考にして下さい。 HTMLを積む HTMLはシンプルですね。レイアウトでくんだ入れ子構造をそのまま反映させてあげます。 cssを当てていく まずは全体像です。 そこそこ量がありますね！ポイントになりそうな::afterや:hoverの部分を解説していきます。 a::after a:hover::after これにて実装完了！！ まとめ …
:focus擬似クラスとは
はじめに :focus擬似クラス。input:focus{ …..}みたいな使われ方をしていますね。 今日は:focus擬似クラスについて簡単に解説していきます。 :focus擬似クラスとは そのクラスにユーザーがフォーカスした際のスタイルを指定できます。フォームなどのインプットタグなどで、入力時だけ背景が変わる場合などが:focus擬似クラスの恩恵を受けている例です。 使用例：入力フォーム こんな感じのよくある入力フォームですね。ここで、入力を始めた時に、その要素の色が変わる様にしていきましょう。 サンプルコード github:https://github.com/gunners6518/blog/tree/master/focus …
wordpressのデバッグモードを使いこなす
デバッグモードとは デバッグモードをオンにする事で、警告やエラー文を吐き出してくれます。 phpでいうvar_dumpやJavaScriptでいうconsole.log()の様な役割ですね！ 実際にwordpressに支障が出ている時の開発には必須になってきます。 デバッグモードの使い方 wp-config.phpを編集します。 サーバーから弄っても良いですし、手元に落としてきて編集しても良いです。 コードとしては下記の部分を見ます。 開発者へ: WordPress デバッグモード * * この値を true にすると、開発中に注意 (notice) を表示します。 …
JavaScriptでライブラリを使わずにトーストを実装する
はじめに デザインコーディングの延長で、JavaScriptでトーストの実装を行う機会がありました。toast.jsなどのライブラリを使った方法もあったのですが、どれも柔軟性に欠け、思い通りに要素をいじれなかったので、ピュアなJavaScriptを使い実装しました。 完成物 ボタンを押すと緑色のトーストが出てきます。「登録完了」とかで使われるやつです。 ソースコード github:https://github.com/gunners6518/blog/tree/master/toast 解説 html部分 headタグの中身はいらないので、bodyタグの中だけ。 そんなに難しいコードではないですね。id=”toast”で括っている部分がトーストとして表示させたい要素。初期状態では非表示にしています。buttonには直接styleを打ち込んでいますが、これは真似しなくて良いです！笑 JavaScript部分 まず1,2行目に出てくる”document.querySelector(“セレクタ名”);”。これはセレクタ名に一致する要素を1つ取得してきてくれます。 似ているものに”document.querySelectorAll(“セレクタ名”);”はセレクタ名に一致する要素を全て取ってくれます。 今回は#toastを持つ要素をtoast。.buttonを持つ要素をbuttonとJavaScript内で定義しています。 次の”button.addEventListener(“click”, () => {処理})”では、先ほど定義したbuttonがクリックされた時に{処理}を行うというスクリプトです。 …
Inputタグのplaceholder、disabledの装飾
自分用の備忘録。 フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。 特に装飾していない状態だとInputタグは以下の様になります。 「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。 また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。 以下の画像の様な状態を目指します。 やり方 scssのみ記入します。 この様に擬似要素とすると、Inputタグ内のdisabledやplaceholderにcssが当たります。 以上。 …
業務で使うなら知っていて欲しいHTMLの歴史
はじめに プログラミングを始めると1番最初に出会うだろう言語がHTMLです。 多くの人は半年もプログラミングに携われば、基本的なHTMLダグを覚えて使えるようになると思います しかし、業務でHTMLを使うコーダーやフロントエンドエンジニアは、タグの理解だけでは不十分だと思っています。 本記事では、HTMLを業務で使うなら知っておきたい基礎知識を自分なりにまとめました。主にコーダー、フロントエンドエンジニアとして歴が浅い人を対象に書きましたので、参考になれば幸いです。 またこの記事は分かりやすさという点を重視しているため、細かい技術的な齟齬があるかもしれません。 その際はコメント等で指摘していただけると幸いです。 HTMLの歴史 今皆さんが当たり前のように使っているHTMLはHTML5に区分されます。 HTML4までの概要 今でこそ、HTMLはwebサイトを作成するための言語として認識されていますが、そもそもの役割は文書を書き出すためだけのものでした。 HTML4の段階では「HTMLは文書構造を、CSSはその体制を整えるもの」とされています。 つまりHTML4までには文書用のタグしか用意されていなかった！！！！ という事です。 HTML5の登場 HTML5はwebサイト制作を前提としているため、より使いやすくなりました。 HTML5はwebサイト制作用のタグの追加 webサイト制作を前提としているため、それに即した新しいHTMLタグが出てきました。 …
vue-cliをインストールしようとしたら「gyp: No Xcode or CLT version detected!」というエラーが出て困った件
要約 ・vue-cliでローカルにvue環境を作ろうとした・npm install -g @vue/cliで「gyp: No Xcode or CLT version detected!」というエラーが出た・xcodeの再インストールで解決した Vue-cliでローカルにvue環境を作ろうとする 以前のqiitaにも書きましたが、チームとしてコーディング規約が無い！という事で現状もあって、コーディング規約を作る事になりました。 手元で試せる環境が必要になり下記の記事を見てvue-cliをインストールしていきます。 しかし、npm install -g @vue/cliを叩いた時点でエラーの嵐が、、、 …
