フロントエンドエンジニアを目指している、ねこらのん（@nekoranon256）です。
今日したこと一度をまとめていきます。
- もりけん先生との面談・雑談で聞いた内容を調べた
- しまぶーさんのyoutubeで使いやすいアプリ紹介をみる
- ちづみさんの記事でcssを理解する
この流れでアウトプットしていきます。
目次
もりけん先生との面談
昨日もりけんさんの10分間の面談をした後、もりけん塾の塾生の方と3名で雑談をしました！
- LPとSEOについて
- Jamstackについて
これらについてのお話だったのでまとめていきます。
LPとSEOについて
ということでした！
実際にLPとSEOについて調べてみると、LPとSEOの相性は悪いという記事を見ました。
いつも調べるときにお世話になっているデイトラさんのサイトもLPですが、
- SNSでの流入
- 広告費を支払っている
- 無料→有料にする
- 高品質な情報を拡散している
- LPの情報量がしっかりしている
- テキスト量がある
などから上位に表示されていると感じました。
SEOは作成する場合はキーワード選定からしっかりと戦略的に練らなければ低品質なサイトとGoogleに認識されるので、難しいと思いました…！
サイトスピードを上げる方法の一つAMP
とはいえSEOで必要なことはいくつかあり、その一つとしてサイトスピードを上げること。
私は画像サイズを小さくするなどの方法しか知らないほど全く知識がありません…
と、知らなかった私にもりけん先生が教えてくれました。
「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ
Googleが推進している手法のようです…！
ボリュームが多くなりそうなので違う記事でAMPについてまとめていきます。
Jamstackが現在の流行り
もりけん塾で全員の面談が終わったら最後に先生含む雑談があります。
そのときに、他の塾生が先生に質問し返答のときにでてきたのがJamstack。
Jamstack 構成のブログサイトは現在流行りだそうです。
Jamstackはウェブサーバーを介さずにサイトを運用するもの。
Jamstackのメリット
- ウェブサーバーの影響を受けないため停止がない
- 通常よりも処理がシンプルなので大量アクセスに強い
- 攻撃対象のサーバーが無いので比較的安全
サーバー攻撃の対象にならないのは強そうです…！
とはいっても詳しくはわからないので…また調べるときがあれば今よりは理解出来るようになりたい…！
ちなみにJamstackはJavaScript、API、プリレンダリングされた Markup を使用しているようなので、それぞれまとめていきます。
J：JavaScript
すべての動的プログラミングはクライアント（ブラウザ）JavaScriptが実施。
A：API
すべてのサーバ処理はwebAPIを通じて実施。
M：Markup
プリレンダリング：サイトやアプリケーションの各ページの初期状態を HTML ファイルとして事前に生成することを指す。
うん、全然わかっていないけど、こんなのがあるんだ！という程度でいいかなとりあえずは…！
しまぶーさんおすすめのツール導入
次にしまぶーさんの動画でツールを導入しました！
しまぶーさんおすすめのツールの中で今回導入したものをまとめていきます！
ClickUp：無料でも幅広く使えるtask管理
初期設定のままです。
ClickUpは無料で非常に便利なツールだそうです。
- 無料プランでも十分な機能性
- なんと言っても最大の特徴
- サブスクリプション全盛の近年では希有な存在
- タスク
- 担当者: 複数設定可能
- 日時: 開始日,期日を設定可能
- 依存性: タスク間の依存性を設定可能
- ステータス: 任意のステータスを複数追加可能
- ビュー: リスト,ボックス,タスクボード,カレンダー
- ガントチャート: (開発中)
- デスクトップアプリ、スマホアプリ、他 十分な公式アプリ
- 他サービスとの連携も遜色なし
一言で言えば
「十分なカスタマイズ性と使いやすいUIを備えたモダンなPJ管理ツールであり、無料プランでもユーザー数に制限が無く十分な機能を利用出来るPJ/タスク管理ツール」
らしいです！
とてもわかりやすくまとめていらっしゃる方がいたので拝借…！
1人ではなく複数人で共有できるタスク管理ツールは、プログラミングをする上で便利なものなのだと勝手ながら思いました！
（プログラミングを誰かとともにしたことがないのであくまで想像ですが…）
Feedly：情報収集
newspicksやsmarnewsを見ていましたが、あまり欲しい情報が手に入らず…newspicksは有料でないと記事が読めない部分もあり悶々としていました。
無料で良質な記事を読むことができるツールがFeedlyでした！
プログラミングの知識はほぼ皆無といって良いほどなので、ニュースは何がおすすめなのかはしまぶーさんの動画で紹介されていたコンテンツをフォローしました！
tweetdeck：情報収集
しまぶーさんがFeedlyで拾えない個人の有益な情報を確保するのに使用されているのはTweetdeck。
こちらの使い方も動画で解説されていたので、動画を見ながら私も変更しました！
Twitterでほしい情報が埋もれて埋もれていく…ものでリストという機能があってもクリックが面倒なので、欲しい情報が画面で一気に出ているといいな〜って思っていたら私がつかいこなせていないだけでした。笑
Wappalyzer：サイトが使用しているフレームワークや言語がわかるツール
模写をするときや、受けたい会社の情報収集でどんな言語が使用されているのかが知りたいときにこのGoogleChromeの拡張機能を使えば一発で何が使われているのかがわかるツール。
この画像はWordPressのページのものです。
全然知識が無い私なので不明なものがありますが、プログラミング言語はPHPが使われていることがわかります！
ちづみさんのCSSがわかるありがたい記事
クリックするとちづみさんの非常にありがたいイラスト付きCSS講座のページへ飛びます。
この記事がもう本当に良質で…
GitとGitHub用語について、改正してデジ絵にしました！ pic.twitter.com/pGO2MaqEMs
— ちづみ (@098ra0209) August 19, 2019
という気持ちになった記事です…本当にありがたい…
おわりに
友人のおかげでプログラミングがやっと興味持てたので、遅れを取り戻しながら進めていきます^^
今日はこれから模写をしていく！
わからない部分はちづみさんのイラストやしまぶーさんの動画などを参考にしていきます^^!
もりけん塾（@terrace_tech）
Thanks：もりけんさん