ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高

こんにちはコスパ厨です。2018年1月に学習開始して、途中数ヶ月のサボり期間を経て2019年10月にTOEIC940点になったのでまとめます。がっつりライザップイングリッシュとレアジョブ本気塾に課金した自分が言うのもなんだけど「TOEICはコスパが超いい」ことがわかったのでメモ(もちろんやる気があれば、課金しなくても全然イケる) 10年前の自分もしくは自分の子どもたちに伝えていきたい。あと「無料体験に行ってきました」の課金エアプ勢のブログは本当にイラっとくるので課金した人が書かないと… はじめに ちなみに今回扱うTOEICはTOEIC L&Rのことです。新卒で入った会社でTOEIC受けた時に370点くらいだったんだけど、それ以降ちゃんと勉強してなかったので、きっと2018年年初の時点で400点くらいだったということにします。単語全然知らなくて、基本的な文法もわりと怪しいレベル。あとオチとし

はじめに この記事は前後編に分かれています。 順序だてた解説になっているので最後までお付き合いいただけると幸いです。 後編記事: https://nrslib.com/bottomup-ddd-2/ 順序立っての説明になっておりますので、前編からご覧になることを強くお勧めします。 セミナー情報 こちらの内容のセミナーを不定期で開催しています。 ◆セミナーページ 第一回: https://ddd-community-jp.connpass.com/event/103428/ 第二回: https://ddd-community-jp.connpass.com/event/107106/ 第三回: https://nrs-seminar.connpass.com/event/117283/ ◆あとがき 第一回ボトムアップドメイン駆動設計勉強会を開催しました セミナースライド まえがき この章は

JJUG CCC 2019 Fall #ccc_c5

はじめに コンピュータを使用した多くの操作は自動化することができます。 この技術は運用や試験工程で大きな力を発揮します。 自動化の技術は一般的なソフトウェア技術者が、ちょっと努力すれば普通に身につく能力であって、特別なものではありません。 ただ残念なことにこれらの技術はあまり知られておらず、活用されているとは言い難い現場も多いです。 ユーザー企業さんができないのはしょうがないですが、ITで飯を食べているはずの自称IT企業においても、自動化を拒否して手動で心をこめて作業をしてリソースを無駄にするケースを稀によく見かけます。 自動化の拒否が「余剰人員のための経済対策だよ！」という身もふたもない理由でないと信じて今回は、Windowsでの作業の自動化についてお話しようと思います。 自動化のテクニックの話をする前に Windowsの自動化のテクニックの話をする前にちょっと重要なことを先に述べておき

JavaScript: Past, Present, and Future - NDC Porto 2020

こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク

レビューガイドライン(Review GuideLine) ここで述べているレビューはピアレビューについての方法です。 （作業成果物の欠陥と改善の機会を探すレビュー） 「最悪を最初に」を基本としてレビューすべき、 たとえば、仕様やアルゴリズムに欠陥があるのに、typoにこだわってもしょうがないので、なにが最悪かを考え、それを防ぐための物からレビューをします。 誤りがプロダクト全体に影響し、手戻りのコストが高くつく、あるいは失敗するようなリスクがないかを考慮にいれてレビューの対象を選択します。 たとえば、基本的な初期フェーズの要求仕様や、クリティカルな決定の基礎になる仕様、使用頻度が高いモジュールなどを重点的にレビューします。 以下に書く項目はレビュアーに負担をかけないようにするのが前提なのでレビュアーに出す前にそもそもテストしたい項目です。 参考： あなたのおっしゃるレビューってどのことかし

Frontend Conference Fukuoka 2019

こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ

こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま

自分は普段はChromeのブックマークを使ってよく見返す記事を保存しています。Goを一年間書いてきてブックマークを整理したのですが、せっかくなのでお世話になったブックマーク記事を晒します。 Blog & Serial The Go Blog Goの公式ブログ。深いところまでしっかり書かれているので、調べたいトピックはまずはここで調べたい。 https://blog.golang.org/ Practical Go GoのcontributorであるDave Cheneyさんのブログです。Goで開発&運用する上でのアドバイスが書かれており、入門記事だけでは得られないノウハウがふんだんにまとめられています。 https://dave.cheney.net/practical-go Goならわかるシステムプログラミング @shibukawaさんの連載です。Goで低レイヤーを学んでいきます。根底の

はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー

Visual Studio Code を入れます。 azure.microsoft.com Visual Studio のリモート開発の拡張機能を入れます。 marketplace.visualstudio.com そして docker を入れます。 www.docker.com Windows の人は入れたら設定からドライブ共有をオンにしておきましょう。 Python 3 の環境が欲しい 適当なフォルダーを Visual Studio Code で開きます。 F1 や Ctrl + Shift + P あたりでコマンドパレットを出して Remote Add あたりで検索すると Remote Containers: Add Development Container Configuration Files... という項目が出てきます。 どんな開発環境が欲しいのかリストが出てくるので Py

本項は「C# Tokyo オンライン「世界一わかりやすいClean Architecture」他」による発表の登壇原稿となります。過去に発表した.NET版の記事はこちらにアーカイブしています。 本稿のサンプルコード・PPTはこちらで公開しています。 「CC BY-SA 4.0」で公開していますので、気に入っていただけたら営利目的含め、ライセンスの範囲で自由に利用していただいて問題ありません。 github.com また動画を以下で配信しています。よろしければご覧ください。 世界一わかりやすいClean Architecture はじめに まず初めに、クリーンアーキテクチャの誤解されがちな二つのことについてお話させていただきます。 その上で、クリーンアーキテクチャの本質とは何か？押さえておくべき、本当に重要だと考えている三つの事について、お話しします。 注意事項 さて本題に入る前に、少し注意

View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不

こんにちは。皆様、夏はいかがお過ごしでしたか。 私は毎年実家に帰省し、そして毎年体調を崩すので、絶対風水的になんか合わないんだと思っています。コネクト支援チームのsakay_yです。 先日、2018年の新人研修資料を公開し、たくさんの反響をいただきました*1。ありがとうございました。 2019年もエンジニア新人研修を行いましたので、その紹介と講義資料を公開いたします。 2019年のエンジニア新人研修について 今年の研修は、組織運営チーム*2が取りまとめ、以下のような3構成となりました。 必修講義 誰に: 開発/運用本部に配属される新入社員​ 何を: どのチームに行っても必要となる基礎的な知識/技術/ツールを学び、体験できた 選択講義 誰に: 学びたい人が​（＝新入社員に限らず） 何を: 興味があることを学べた チーム体験（2週間 * 3チーム） 誰に: 開発/運用本部に配属される新入社員

個人開発でアプリやWebサービスを作ってリリースしてみたいけど、プログラミング経験がなくて不安になっている初心者の方に向けた記事です。 アプリやWebサービスを個人開発でリリースすることは誰でも可能か？ 個人開発でもWebかスマホかゲームかで覚えるプログラミング言語が異なる Webサービスの場合 スマホサービスの場合 ゲームの場合 個人開発のマネタイズ方法 広告収入 直接課金収入 個人開発のアイデアの出し方 アプリやWebサービスを個人開発でリリースすることは誰でも可能か？ プログラミングを覚えて、アプリウェブサービスを開発したいと誰でも一度は考えたことがあると思います。 副業として稼げたらそれで家計はだいぶ楽になりますし、一度アプリを開発すれば、あとは自分の代わりにアプリが働いてくれて自分の時間を作り出せます。 個人でウェブサービスを開発できれば、人を雇う必要もありませんし、資金もパソコ

2019.07.24 原則はカーディナリティの高いものから貼っていく　を追記しました。 2019.07.24 実際のMySQLはB+tree構造を採用している　を追記しました。 はじめに @hk206です。 最近になって初めてインデックスなるものを使い始めました。 これによってレコード検索が爆速になります。MAJIDE。 今まではしょぼい数のレコードのテーブルしか触ったことがありませんでしたが、 数百万、数千万のレコードを色々いじる機会がありまして...... 処理速度やばない？ってふと気になり、インデックスを使用してみました。 インデックスとはなんぞやってところからB-tree構造まで、広ーーーく浅く調べたのでまとめてみました。 知ってるよーって方も復習になればいいかなと。 インデックスとは インデックスは特定のカラムの、あるレコードをすばやく見つけるために使用されるものです。検索が爆速