• 知人サイト制作中

    知人サイト制作中

    最近何も記事を投稿していなかったので久々の更新です!以前Jsの学習をしておりましたが、あれから間もなく知人からサイト制作の打診があったので近頃はお仕事と職探しの傍ら、そちらを制作させていただいております。

    現状辿っている流れとしましては、

    • 大まかに参考サイト含め知人からヒアリング
    • 自身が契約してるサーバーにて架空の内容のテストサイトを制作
    • 骨組みがある程度形になった段階毎で知人に報告

    となっており、現在テストサイトの記事部分がある程度形となったので一回目の報告を先日行いました。今後も段階毎に報告を重ね、まずはテストサイトの完成を目指します。その後本番に向けて改めてヒアリングを行い、改修及び調整予定です。

    そして本番環境に以降後に不具合がないかの最終確認を行い知人からの許可も降りれば晴れて公開運営していきたいと考えております。今回もカンプなしの、WordPressでいきなりコーディングから取り掛かりああでもないこうでもないと考えながら制作しております笑

    従来同様の制作箇所

    各記事ブロック

    • 見出し(h4まで)部分
    • 段落部分
    • 箇条書き(通常、番号双方)部分
    • 定義リスト部分
    • 吹き出し(左右)部分
    • 画像ブロック
    • 記事カテゴリー、投稿日と更新日の出力

    各機能ブロック

    • 記事シェア機能
    • コメント機能
    • 関連記事機能
    • 前後リンク機能

    各記事ブロック、各機能ブロックのあしらいや余白の指定は完全新規で指定。

    現状新規で導入した制作箇所

    記事ブロック

    • 引用部分
    • 文言囲み(各箇条書き、段落)部分

    各機能ブロック

    • タグ機能
    • 目次機能
    • 投稿者詳細表示機能
    • ソースコード表示機能
    • 記事前後リンク機能にサムネと一覧ページへのアクセスも追加

    先程同様各ブロックのあしらいや余白の指定は完全新規で指定。今後新しい機能やブロック等追加した場合は今後の投稿記事でご紹介したいと思います。

    URL

    制作途中のテストサイトとなりますが、もしご覧になりたい方がいらっしゃいましたら下記からアクセスしていただけます。

    https://brotes.blog/css_sidebyside/

  • Js学習方向転換

    Js学習方向転換

    先日再開したCodeMafiaさんの「【JS】ガチで学びたい人のためのJavaScriptメカニズム」ですが予想通り自分には難しかった…。1/3程進んだところまでは念入りな複数回の視聴で何とか付いていけていたのですが、回を追う毎に分からないことが多くなり過ぎて頓挫してしまいました…。

    しかしながらCodeMafiaさんの動画は作り込みや丁寧な説明の印象があり頓挫した私が言うのも何ですが、実は評価が高かったりします。将来もっとJsの理解が進んだとき辞書的な役割を果たしてくれると期待しております。

    そして2年以上前勉強会に参加していた際に購入させてもらったじゃけぇさんの「モダンJavaScriptの基礎から始める挫折しないためのReact入門」を思い出しました。

    当時別アカウントで動画の購入後に交通事故に合い、大怪我をして手術・入院、完治まで半年以上かかる大惨事に見舞われたため途中のままだったのです。今度はこちらを再開して改めてJavaScriptへの理解を深めたいと思います。

    そういえば勉強会を主催されていたじゃけぇさんが広島に行かれるということで、毎月開催されていた勉強会が終わってしまったと記憶しております。もしまた大阪に戻って来られた際は参加したいので催していただきたいですね!

  • 新型コロナに感染

    新型コロナに感染

    ※画像はフリー画像で有名な「photoAC」さんからお借りしました。

    感染から発熱まで

    新年早々新型コロナに感染してしまいました汗。症状としては1月2日の夜に悪寒を感じ翌日に37.7度の発熱、病院が営業する翌々日にPCR検査を受診した所、やはり陽性反応と結果が出ました。潜伏期間は調べた所1日~14日と広範囲ですが、最も症状が出易いのは感染5日以内とのことです。

    感染は恐らく職場でも割と密が発生し易い状況ではありますが、職場含む何度か参加させてもらった忘年会の線が濃厚でしょうか…汗。やはり年末ということもあり飲食店は混み合っていました。

    新型コロナの症状

    現在感染から1週間以上が経過したため、症状もだいぶ治まり療養期間も終了しました。個人的な感想としてはインフルエンザの症状とそれほど遜色ない印象です。テレビやニュースで見たような後遺症は現在のところなさそうです。

    一方友人の家内が感染し、10数日時点の情報ですが軽く倦怠感と味覚に違和感を残しているという話も聞いたので、個人差は多少ありそうです。

    学習状況

    感染5日目ぐらいからはだいぶ症状が落ち着いたので、その辺りから再び学習を再開しました。先日お伝えした通り、CodeMafiaさんの「【JS】ガチで学びたい人のためのJavaScriptメカニズム」を再開したのですが、やはり難易度が高いですね!

    一本初心者用の動画を2周学習したので少し自信を持って臨んだのですが、難しいです。勿論以前よりも理解できる部分はあるにはあるのですが…。もう少し進めてみてチンプンカンプンなら別の手段を考えようと思います。

    ,
  • 動画2周完了と学習制作物

    動画2周完了と学習制作物

    先日始めた「はじめてのJavaScriptプログラミング入門【2022年最新版】」の学習を2周完了したので記事にしました。先日お伝えした通り初学者にも伝わりやすく噛み砕いてもらってる内容でしたが、WordPressの学習時同様やはり1周では理解が浅すぎたので2周学習しました。

    2周してもまだまだ理解は浅いですが、動画内で制作したものを理解を深めるため一部構造を変えたりして組み直したりしました。その際、参考に見た人様のコード等がパーツ毎単位ではありますが一部理解できるようになっていた点は少なからず成長を感じることが出来たので嬉しかったです。

    これからも学習を続け理解を深めたいと思います。せっかくなので下記に動画で学び制作したものを載せたいと思います。

    文字数カウンター

    Twitter等で見かける文字数カウンターです。テキストエリア要素やそこに入力された値を取得し残り文字数に出力、入力された時に発生するkeyupイベントを用いて動作しています。改行や空白は文字数としてカウントしないようにreplaceメソッドも調べて用いてみました。

    画像ギャラリー

    これまで制作したサイトで画像ギャラリーの上位互換とも言えるスライドショー等は「slick」といったプラグインや「jQuery」等で実装したことはありましたが、完全に1からJavaScriptで実装したのは初めての経験でした。

    回答を見ずにクリックイベントで配列を用いず自力で実装したところ、HTMLファイルを多く記述しての実装となりました。回答では配列やオブジェクト、要素生成をうまく用い必要最低限のHTMLで実装されていたため学習になりました。

    尚、この画像ギャラリーで使用している画像はフリー画像素材で有名な「ぱくたそ」さんからお借りしたものです。

    ページトップボタン

    当サイトのページトップボタンも元々はプラグインで実装しておりましたが、今回の学習を活かしたいと思いJavaScriptを用いて実装してみました。人様の情報も参照し、scrollのイベントハンドラやwindowオブジェクトを用いました。

    様々なサイトで多く見受けられる初期位置では表示させず、最上部から特定の量のスクロールを行った場合のみボタンを表示させる機能もif文を使用し実装しました。

    学習の感想と今後

    途中でも述べた通り、人様が書いたコードでも基礎的な内容であれば単体単位ではそのプログラムを理解できるようになったことは今回の学習において最大の収穫だと感じました。

    一方で回答を見ずにプログラムを組もうとした時に感じたことですが、0からプログラムを設計するのは非常に難しいとも感じました。

    今後は前回難解で理解できなかったCodeMafiaさんの「【JS】ガチで学びたい人のためのJavaScriptメカニズム」に改めて挑戦したいと思います。再戦も難しかった場合は再度当動画を見直したり、別の初学者向けの動画も検討しようと考えています!

  • はじめてのJavaScriptプログラミング入門【2022年最新版】

    はじめてのJavaScriptプログラミング入門【2022年最新版】

    先日Js学習のため購入した動画は完全初学者の自分には難しかったため、改めて初学者向けの「はじめてのJavaScriptプログラミング入門【2022年最新版】」という動画を購入しました。

    現在1周目の学習を終え2周目も終盤に差し掛かった段階ですが、しっかりと基礎から学べる内容となっており自分にも分かり易い内容で非常に満足しております。

    2周目では学んだ事の集大成として数取器や文字数カウンター、フォトギャラリーといったものを回答を見ずに1から組めるようになることを目標に進めています。また当動画で制作したものを記事として後日上げたいと思います。

    当動画「はじめてのJavaScriptプログラミング入門【2022年最新版】」の制作者は中村祐太氏というプログラミングはもちろん、その教育にも経験豊富な方です。自分のような初学者でも理解できる内容でしたので、JavaScriptを学びたい方にはオススメです。

    特にUdemyでは定期的にセールが行われるので、もし購入を検討される場合その期間中にお安く購入してみてはいかがでしょうか。

  • UdemyでJs学習開始

    UdemyでJs学習開始

    以前から気になっていたJsの学習を行うため、Udemyで動画を購入しました。近頃は就活、友人の新案件、現在就業しているお仕事、そして今回購入した動画と多忙になりそうですがコツコツ頑張っていきたいと思います。

    今回購入した動画はUdemyで現在も販売されている「【JS】ガチで学びたい人のためのJavaScriptメカニズム」と「【2022年最新】【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)」という動画です。