v-ifで条件分岐をしよう!(Vue入門③例題付き) (18)
エンジニアリングライフ

初心者がチーム開発で周りに迷惑かけない為のプルリクエストまでのチェックリスト

こちら、qiitaに記事を書いたので、参照ください。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

Vue.jsのフィルターでデータを加工する

はじめに こんにちは、てりー(@teriteriteriri) Vue .jsでプログラムを書いていくと、「小文字は全て大文字に変換したい!!」や「金額を税込み表示にしたい!」などの様にテキスト系の変換処理を一律で行いたい場面に遭遇すると思います。 そんな時に活躍するのがフィルタ機能です。今回はVue.jsのフィルタ機能について解説していきます。 フィルターとは フィルタとは「小文字は全て大文字に変換したい!!」や「金額を税込み表示にしたい!」などの様なテキスト系の変換処理に特化した機能です フィルターの使い方 基本的な流れ グローバル・ローカルのどちらかで定義する 適応させたい場面で呼び出す 登録方法 グローバル登録 グローバル登録とはプロジェクト全体に対して定義するやり方です。フィルターの役割を考えるとグローバル登録する場面も多くあると思います。 グローバル登録では全体に効かせたいので、main.jsに記載します。 ローカル登録 ローカル登録では、定義したコンポーネント内のみにて呼び出し可能な登録になります。各コンポーネントのスクリプト部分にて定義します。 呼び出し方 …

Read More
qiita
エンジニアリングライフ

Qiitaでの投稿がバズる様になったので、考察する

最近、qiitaでの投稿でLGTM(いいね)が良く付く様になったので、それに関して考察します。 背景 今回Qiitaでの投稿がバズっている思った経緯としては、1ヶ月前に初めてqiitaでの投稿がデイリートレンド入りをしてから、3記事連続でデイリー/ウィークリートレンド入りを果たし、週間のユーザーランキングにも乗る様になったからです。 マイページ:https://qiita.com/terry_6518 一時的な波に乗っているだけの可能性もありあすが、体感としては今後も高い確率で「LGTM100越えの記事」は書けそうだなーと思っています。 記事はどの様にバズるのか qiitaに書いた記事がどの様にバズって行ったの流れをまとめていきます。LGTM1000を超える様な記事は流れそのものが違うかもしれません! 1. 12~24時間の間にLGTMが最低10個ほど付く いきなりですが、ここがバズるかどうか1番の難所です! こちらの記事によると、LGTMの分布は偏っていてLGTM10を超える記事は全体の上位20%に当たっています。 https://qiita.com/mtitg/items/25e3d0d75429dcfeb199#%E3%81%84%E3%81%84%E3%81%AD%E6%95%B0%E3%81%AE%E5%88%86%E5%B8%83 qiitaでのフォロワーやtwitterでのフォロワーなどが増えてくると、記事を書いた時の最初の露出を増やせるので、LGTMが短期間で10を超える可能性がグッと上がります。 qiitaの結果にだけコミットすると最初は「技術的に良い記事」よりも「身近な人の参考になる記事」をピンポイントで書いた方が得策だと思います。 2. デイリーのLGTM数集計記事に載る ちょうどLGTMが10を超えた辺りから、デイリーでのLGTM数の集計記事に載れます。 こういうのですね。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (19)
HTML・CSS

HTML,CSSでのwebサイト制作の手順とポイント

こちらの記事はqiitaにて書かせていただきましたので、こちらをご覧下さい! 内容は「html、cssを文法的に学んだ人が実際にweb制作を作る際に意識して欲しい事」を手順に沿って説明しています。 …

Read More

Firebase Hostingを使うとフロントエンドの案件がスムーズにやり取り出来る気がする!(仮説)

今回の記事は仮説です!次の案件で実際にhosthingサービスを試してみて結果をまとめたいと思います。 背景 職場の先輩とは話している時に 「フロント周りの案件の途中経過ってクライアントにどう報告してる??」 って話になり、いろいろ話が進む中でHostingサービスを使う方法を試してみたくなりました。 その考えに至るまでの流れと、仮説をまとめています。 今までの仕事の進め方 例えば、デザインを貰っていてHPを作ってくれ。みたいな仕事の場合です。 最初にスケジュールを引いて、その節目節目のタイミングで直接クライアントとミーティングを実施していました。 その際に開発に携わらない人には自分のパソコン(ローカル開発環境)で動く物を見せながら、進捗の報告を行うスタイルをとっています。 自分のパソコンでしか環境構築はしていない事が多く、それをクライアント側に求めるのも酷だと思っているからです。 課題点 ・自分のパソコンでしか動く物を見せられない→githubの知見がないと、具体的な部分の進捗は画面共有かスクショを送るぐらいでしか遠隔では確認できない ・ミーティングをしないと進捗を共有できない→リアルでお互いの時間を取ってしまう。 webホスティングサービスで解決できるのではないか?? webホスティングサービスとは? 簡単に言うと「世の中に公開するためのあれこれをやってくれるサービスです」。 こwebホスティングサービスを使う事で、とりあえず世の中に公開出来る状態を作れます! …

Read More
qw4.jpg
エンジニアリングライフ

プログラミング1年目を振り返る

はじめに 2020年の3月をもってプログラミングの学習を始めてちょうど1年になります。元々プログラミングに興味があったわけでは無いので、軽く嗜んで終わるかと思ったら1年で完全なるマイジョブになりました!笑 という事で今回はど素人からの1年間を振り返っていきます。 2019年3月 急にHP制作を知り合いから受けてしまう 知り合いの社長に急に「HP作ってお願い!」と言われたのがきっかけでwordpressでHPを作り始めました。形だけあれば良いみたいな感じだったので、コードは書かずにwordpressのテンプレートに沿って文言や配置を弄っただけの仕事です。値段も「10万で良いよね〜」みたいな感じで適当に決られていました笑制作期間は2週間ほどで特に問題なく納品できました。 コードを書く事に興味を持ち、progateをやる 案件を1つこなした事で、今まで割と選ばれし人がやっている種目だと思っていたプログラミングに急に興味を持ち始めまググって情報を集めまくりました。 そんな中で「progate」で実際にコードを書く練習を始めていきます。 有料課金して「HTML」「CSS」「 Javascrip」「PHP」「Git」のコースあたりは1通りやりました。レベル100になった辺りでprogateのゲームっぽさに飽きてきて、実際にHPを作りたいと感じ始めます。 1週間ほどprogateに傾倒していました。 技術書に沿ってレスポンシブ対応のサイトを作る progateでコードを書く事に慣れた事もあって、HTML、CSSを駆使してサイトを作りたいと思いました。本屋で物色していると分かりやすそうな技術書を見つけたので、それに沿ってレスポンシブ対応のHP制作を学びました。 1ヶ月でとりあえず、技術書の内容を丸々を模写って周りに「俺がこのサイト俺が作ったんだぜ~~~~!!」って自慢する程度にはなりました。応用は効きません。 2019年4月 恩師に出会う 「てりーがプログラミングを始めたらしい」と聞きつけた知り合いに「4月から勉強会を始めるから来ないか」と誘われます。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-modelで様々な入力フォームを作る

はじめに 前回はv-modelの修飾子を見ていきました。今回は複数行やチェックボックス、ラジオボタンなどのパターンを見ていきます。 複数行の入力フォーム inputでは実現できなかった複数行のフォームはtextareaを使う事で実現可能です。 また、textareaで入力した値の改行まで反映させたい場合は、クリックイベントなどを使って処理を書いてあげる必要があります。参考:https://segateway.com/archives/360#toc3 サンプルコード チェックボックス チェックボックス1つ型はboolean型! チェックボックス1つのパターンだとv-modelで出力される値boolean型(trueかfalse)になります。 複数のチェックボックスは配列として! 複数のチェックボックスを作った場合は、配列の値として入力値が表示されます。下の動画ではチェックボックスでチェックした値が下の配列の中で表示されています。 ソースコード ラジオボタンで入力する v-modelを使う事でラジオボタンを使った双方向バインディングも可能です。ラジオボタンで入力された値を出してくれます。 ソースコード プルダウン型で入力する プルダウン型でもv-modelにて双方向バインディングが可能です。プルダウンで選んだ値が出力されます。 ソースコード …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-modelの修飾子を使って実践的なフォームを作る

はじめに 以前の記事でv-modelの基本的な使い方を解説していきました。 v-modelは双方向のデータバインディングであり、前回の記事内でinputタグでよく使われると話しましたが、そのほかにも様々なパターンが用意されています。 今回は入力フォームなどを作る際によく使われている様々なパターンを見ていきましょう。 v-model.lazyで反映を遅らせる フォーカスを外した際に反映されるフォーム v-modalを使った場合、入力中は逐一、内容が反映されます。v-modal.lazyを使うと入力フォームの外に触れた際に一気に内容が反映される形になります。 実際の入力フォームではよくみる形ですね!入力内容が違ったときにalert系を出すパターンとの相性も良いです。(むしろlazy使わないと逐一alertが出て鬱陶しい!笑) サンプルコード v-modal.numberで型をnumber形にする 背景 通常、<input>で受け渡ししているデータはstring型になっています。<input type=’number’>を使っている時でさえ初期値以外はstring型で渡しています。 そうなると<input>内のテキストで100と入力しても1,0,0の文字列として扱われてしまいv-forなどで回す際やidと紐付けたいときなどに適応できなかったりと思わぬ所で問題が起きやすくなってしまいます。 そこでv-modal.numberを使います! v-modal.numberでできる事 とする事で、<input>内に入力された値を自動でnumber型に変更してくれます。入力フォームで数字を入れてほしい部分には積極的にnumber修飾子を使っていきましょう。 v-modal.trimでいらない空白を除去する …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

動的コンポーネントを使い表示内容を切り替える

こんにちは!てりーです(@teriteriteriri)。今回はVue.jsで動的にコンポーネントを切り替える方法を見ていきます。 動的コンポーネントの使い方 :is=”変数”で切り替える 分かりやすい例です。コンポーネントを呼び出す際に以下の様に書きます。 cardColorという変数を切り替えることによって、表示されるコンポーネントが変わってきます。例えば今回cardRed、cordGreen、cardBlueというコンポーネントを作っていたら、クリック毎にcardColorがその3つのコンポーネントが表zされる様にすれば良いのです。 :isの特徴 切り替わるたびにインスタンスがdestroyedされる。詳しくはライフサイクルを参照してほしい。毎回新しいインスタンスを生成しなくてはいけないので、前のインスタンスでの状態が保存されていないことに注意。 keep-aliveでwrapする :isで最後に出てきた問題を書き結する方法としてkeep-aliveがあります。keep-aliveではインスタンスはdestroyedされずに、キャッシュされるのみである。なので、インスタンスの状態をそのまま受け継ぎながらコンポーネントの切り替えが可能。 使い方は以下の様にkeep-aliveでwrapするのみです。 動的コンポーネントを使ってカードを切り替える 完成品 ・赤、青、緑の色のカードが出力される子コンポーネントを作る・親コンポーネントにて、色のボタンを押すとその色が出力される 解説 子コンポーネントを作る まず子コンポーネントとなるカードを作ります 親コンポーネントを作る buttonを押すと、methodsに書いてある様に、押したボタンの色と同じ色のカードのコンポーネントが呼び出されます。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (18)
エンジニアリングライフ

vscodeでgit historyを使いこなす!

git histryはvscodeの拡張機能 git histryはcommit単位で差分を見る事ができるvscodeの中でも外せない拡張機能です。 これを使えば・以前のcommit後の状態にファイル毎に飛ぶ!・それぞれのcommit間での差分を確認する!などが出来ます。 gitでの変更履歴の確認には欠かせないツールですね。 git historyをvscodeに導入する! 1 vscodeの拡張機能で「git history」で検索する。2 インストールしてvscode内で有効化する。 git historyの使い方 1 vscode上で変更履歴を見たいファイルを右クリック→「Git:View File History」をクリック。 …

Read More
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping